<template lang='pug'>
  el-dialog( width="100%" :fullscreen="true" :close-on-click-modal='false' :visible.sync='visible' :modal-append-to-body='false')
    .title-bold(slot='title') 预案关联详情
    //- <!-- 步骤条 -->
    el-steps(class="box-steps" :active="active" :align-center="true" style="margin-bottom:0.5rem;")
      el-step(@click.native="chooseStep(index)" :title="item.title" v-for="(item,index) in stepList" :key="index" :icon="index <= active?'el-icon-stepIcon2':'el-icon-stepIcon1'" process-status="success")
    //- 第一步
    el-card(class="box-card box-card2" v-show="active===0")
      div(class="clearfix") 报警类型列表
      div(style="margin:15px")
        el-row(:span='24' v-loading="dataListLoading")
          el-radio-group.radioDisSty(v-model="etId" disabled)
            el-row(:span='24' :gutter="12")
              el-col.radio-check-col(:sm='6' v-for="item in eventTypeDataList" :key="item.id")
                el-card(shadow="hover" class="box-card3" :class="{'radio-check-card':true,'checked': etId===item.id}")
                  //el-radio(:label="item.id" :title="item.resourceTypeName+'-'+item.name") {{item.resourceTypeName+'-'+item.name}}
                  el-radio(:label="item.eventId" :title="item.eventName") {{item.eventName}}

      el-pagination(@size-change="sizeChangeHandle" background style="position: absolute;right:370px; top:545px;" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[16]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")

    //- 第二步
    el-card(class="box-card box-card2" v-show="active===1")
      el-container(style='padding-left:0px;')
        div( style='height:100%;width:360px')
          div(class="box-card1")
            div(class="clearfix") 资源点列表
            div(style="clear:both")
            el-tree(:data="treeData" disabled style="background-color: rgba(254,219,207,0);" ref='tree' :accordion='true' :highlight-current='true'
                  :props="defaultProps" :default-expand-all='false'  show-checkbox
                  :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' :filter-node-method="filterResourceNode")
              <span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
                <span v-if="node.data.level != 6" class="el-icon-wq-treeIcon"></span>
                <span v-if="node.data.level == 6 && node.data.type=='枪机'" class="el-icon-wq-treeQiang"></span>
                <span v-if="node.data.level == 6 && node.data.type!='枪机'" class="el-icon-wq-treeQiu"></span>
                <span>&nbsp;{{node.label}}</span>
              </span>
        div(style="padding:0px; width:900px; box-shadow:inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2) !important;")
          el-card(class="box-card1" style="")
            div( class="clearfix") 已选资源点
            el-row(:span='24' :gutter="12" style="padding:0 20px;overflow: auto;max-height: 400px;margin-right: 0px !important;")
              el-col.radio-check-col(:sm='6' style='height:60px;' v-for="(item,index) in checkedResources" :key="item.id")
                div(style='height:60px; line-height:60px; background:#F6F7FB; padding-left:20px')
                  span(:title="item.name") {{item.name | ellipsis}}

    //- 第三步
    el-card(class="box-card box-card2" v-show="active===2")
      div(class="clearfix") 应急预案列表
      el-row(:span='24' v-loading="dataListLoadingPlan")
        div(style="margin:15px")
          el-checkbox-group.checkDisSty(v-model="checkedPlans" @change="handleCheckedResourcesChangePlan")
            el-row(:span='24' :gutter="12")
              el-col.radio-check-col(:sm='6' v-for="item in planList" :key="item.id")
                el-card(shadow="hover" class="box-card3" :class="{'radio-check-card':true,'checked':checkedPlans.indexOf(item.id)>-1}")
                  el-row(:span='24')
                    el-col(:span='24')
                      el-checkbox(:label="item.id" :title="item.name" disabled) {{item.name | ellipsis}}
                        el-row(:span='24')
                          el-col(:span='24' v-for="(level,index) in planLevelList" :key="index" v-if="level.value===item.level")
                            span() 等级：{{level.label}}
                          el-col(:span='24')
                            span() 适用范围：{{item.stationName}}
                          el-col(:span='24')
                            span() 预案编码：{{item.code}}
      el-pagination(@size-change="sizeChangeHandlePlan" background style="position: absolute;right:370px; top:545px;"  @current-change="currentChangeHandlePlan" :current-page="pageIndexPlan" :page-sizes="[12]" :page-size="pageSizePlan" :total="totalPagePlan" layout="total, sizes, prev, pager, next, jumper")

    div(align="center" style="margin:10px 0px 50px 0px")
        el-button(type="primary"  v-show="active>0" @click="previous") 上一步
        el-button(type="primary"  @click="next"  :disabled="clickFlag&&active==2") {{active===2?'关闭':'下一步'}}

</template>

<script>
export default {
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 14) {
        return value.slice(0, 14) + '...'
      }
      return value
    }
  },
  data () {
    return {
      clickFlag: false,
      visible: false,
      bean: {}, //预案关联信息
      stepList: [
        { state: false, title: '报警类型选择' },
        { state: false, title: '涉及资源点选择' },
        { state: false, title: '触发的应急预案选择' }
      ],
      active: 0,
      eventTypeDataList: [],
      pageIndex: 1,
      pageSize: 16,
      totalPage: 0,
      dataListLoading: false,
      systemList: [],
      resourceTypeList: [],
      etId: '', //所选事件类型id
      subCode: '', //所选事件类型的子系统编码
      resourceType: '', //所选事件类型的资源点类型
      dataForm: {//事件类型查询条件
        subCode: '',
        subSystem: '',
        resourceType: ''
      },
      treeData: [], //资源树数据
      defaultExpandedKeys: [], //资源树默认展开节点
      defaultProps: {
        children: 'children',
        label: 'name',
        level: 'level'
      },
      nodeKey: 'id',
      checkedData: {//选中的资源树节点信息
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        subCode: '',
        subSystem: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId')
      },
      checkAll: false, //全选资源点
      checkedResources: [], //选中的资源点
      checkedResourceKeys: [], //选中的资源点的id
      resourceList: [], //右侧展示的资源点
      isIndeterminate: true,
      resourceFilterText: '', //资源点树过滤资源点名称
      resourceSubCode: '', //资源点树过滤子系统
      resourceSubId: '', //资源点树过滤子系统

      //预案查询条件
      dataFormPlan: {
        stationId: localStorage.getItem('stationId')
      },
      pageIndexPlan: 1,
      pageSizePlan: 12,
      totalPagePlan: 0,
      dataListLoadingPlan: false,
      planTypeList: [], //预案类型
      planLevelList: [], //预案级别
      checkAllPlan: false, //选择所有预案
      checkedPlans: [], //选中的预案
      planList: [], //右侧展示的预案
      isIndeterminatePlan: true

    }
  },
  watch: {
    resourceFilterText (val) {
      this.$refs.tree.filter(val)
      // this.initRightResourceList()
    },
    totalPage1() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage1 / this.pageSize1)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex1) {
          this.pageIndex1 = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    },
    totalPage2() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage2 / this.pageSize2)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex2) {
          this.pageIndex2 = pages || 1
          this.getDataList2()//获取表格数据的方法
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init (id) {
      this.visible = true
      this.bean.id = id || ''
      this.etId = ''
      this.checkedResources = []
      this.checkedResourceKeys = []
      this.checkedPlans = []
      this.pageIndex = 1
      this.pageIndexPlan = 1
      this.active = 0
      if (this.bean.id) {
        this.initDataFrom()
      }
      this.dataForm = {}
      this.reloadEventTypeDataList()
      this.initSubSystemDicList()
      this.initResourceTypeDicList()

      this.initTree()

      this.reloadPlanDataList()
      this.initPlanLevelList()
      this.initPlanTypeList()
    },
    //上一步
    previous () {
      if (this.active-- < 0) this.active = 0
    },
    //切换步骤
    chooseStep (step) {
      if (!this.bean.id && step >= 0 && !this.stepList[step].state) {
        return
      }
      if (!this.checkChooseData()) {
        return
      }
      this.active = step
    },
    //下一步
    next () {
      if (!this.checkChooseData()) {
        return
      }
      if (this.active === 0) {
        this.saveStep1()
      } else if (this.active === 1) {
        this.saveStep2()
      } else if (this.active === 2) {
        this.saveStep3()
      }
      // console.log('切换步骤this.stepList：', this.stepList)
    },
    saveStep1 () {
      this.active = 1
      this.stepList[0].state = true
    },
    saveStep2 () {
      this.active = 2
      this.stepList[1].state = true
    },
    saveStep3 () {
      this.visible = false
      this.clickFlag = false
      this.stepList[2].state = true
      this.$emit('refreshdatalist')
    },
    //校验数据
    checkChooseData () {
      if (this.active === 0) {
        //第一步
        if (!this.etId) {
          this.$message.error('请选择事件类型')
          return false
        }
        this.bean.etId = this.etId
        this.eventTypeDataList.forEach(e => {
          if (e.id === this.etId) {
            this.bean.etName = e.name
            this.bean.subCode = e.subCode
            this.subCode = e.subCode
            this.resourceSubCode = e.subCode
            this.resourceType = e.resourceType
          }
        })
        this.initTree()
      } else if (this.active === 1) {
        //第二步
        if (!this.checkedResources || this.checkedResources.length <= 0) {
          this.$message.error('请选择资源点')
          return false
        }
        this.bean.resourceList = this.checkedResources.map(e => {
          return { resourceId: e.id, associatedId: this.bean.id }
        })
        this.bean.resourceNum = this.checkedResources.length
      } else if (this.active === 2) {
        //第三步
        if (!this.checkedPlans || this.checkedPlans.length <= 0) {
          this.$message.error('请选择预案')
          return false
        }
        this.bean.planList = this.checkedPlans.map(e => {
          return { planId: e, associatedId: this.bean.id }
        })
      }
      return true
    },
    initSubSystemDicList () {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getSubSystemDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then(data => {
        // console.log('子系统字典项', data)
        if (data && data.code === 0) {
          this.systemList = data.list
          this.systemList.forEach(e => {
            if (e.value === this.resourceSubCode) {
              this.resourceSubId = e.id
            }
          })
        }
      })
    },
    /*initResourceTypeDicList () {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
        method: 'get',
        params: this.$http.adornParams({
          stationId: localStorage.getItem('stationId')
        })
      }).then(data => {
        // console.log('资源点类型字典项', data)
        if (data && data.code === 0) {
          this.resourceTypeList = data.list
        }
      })
    },*/
      initResourceTypeDicList () {
          this.$http({
              url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
              method: 'get',
              params: this.$http.adornParams({
                  stationId: localStorage.getItem('stationId')
              })
          }).then(data => {
              // console.log('资源点类型字典项', data)
              if (data && data.code === 0) {
                  this.resourceTypeList = data.list
              }
          })
      },
    //选择子系统编码
    subSystemChange (e) {
      // console.log('subSystemChange:', e)
      // this.systemList.forEach(a => {
      //   if (a.name === e) {
      //     this.dataForm.subCode = a.value
      //     this.dataForm.subSystem = a.name
      //     this.subCode = a.value
      //     this.resourceSubCode = a.value
      //     this.resourceSubId = a.id
      //   }
      // })
    },
    //选择资源点类型
    resourceTypeChange (e) {
      // console.log('resourceTypeChange:', e)
      // this.resourceTypeList.forEach(a => {
      //   if (a.name === e) {
      //     this.dataForm.resourceType = a.value
      //   }
      // })
    },
    //查询时从第一页开始查询
    reloadEventTypeDataList () {
      this.pageIndex = 1
      this.getEventTypeDataList()
    },
    // 获取事件列表
      getEventTypeDataList () {
          this.$http({
              url: this.$http.adornUrlAlarm('/linkResourceEvent/queryAlarmList'),
              method: 'post',
              data: {
                  page: this.pageIndex,
                  rows: this.pageSize,
                  stationId: localStorage.getItem('stationId'),
                  //subCode: this.dataForm.subCode,
                  resourceType: this.dataForm.resourceType
              }
          }).then(data => {
              // console.log('初始化事件类型：', data)
              if (data && data.code === 0) {
                  this.eventTypeDataList = data.page.rows
                  this.totalPage = data.page.total
              } else {
                  this.eventTypeDataList = []
                  this.totalPage = 0
              }
          })
      },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getEventTypeDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getEventTypeDataList()
    },

    //第二步
    //初始化资源点树
    initTree () {
      this.$http({
        url: this.$http.adornUrl('/liResource/getTreeList'),
        method: 'post',
        data: {
          stationId: this.checkedData.sId,
          subCode: this.resourceSubCode,
          type: this.resourceType,
          queryInfo: 'queryInfo',
          glType: '2'
        }
      }).then(data => {
        // console.log('初始化线路树：', data.tree)
        if (data && data.code === 0) {
          this.treeData = data.tree
          if (!this.checkedData.sId) {
            this.defaultExpandedKeys = [this.treeData[0].children[0].id]
            //设置选中的节点
            this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
          }
          // else {
          //   this.initTreeStationMap(this.treeData[0], true)
          // }
        }
      }).then(() => {
        this.$refs.tree.setCheckedKeys(this.checkedResourceKeys)
        let checkedNodes = this.$refs.tree.getCheckedNodes(true)
        this.checkedResources = checkedNodes.filter(node => {
          if (node.level === 6) {
            return node
          }
        })
      })
    },
    //初始化站点下的资源点
    initTreeStationMap (node, flag) {
      this.$http({
        url: this.$http.adornUrl('/liResource/getStationMapTreeList'),
        method: 'post',
        data: {
          stationId: node.id,
          subSystemDicId: this.resourceSubId,
          subCode: this.resourceSubCode,
          resourceName: this.resourceFilterText,
          resourceType: this.resourceType
        }
      }).then(data => {
        // console.log('初始化线路树：', data.nodes)
        if (data && data.code === 0) {
          this.$refs.tree.updateKeyChildren(node.id, data.nodes)
        }
      }).then(() => {
        if (this.checkedData.sId && flag) {
          this.defaultExpandedKeys = [this.treeData[0].children[0].id]
          //设置选中的节点
          // console.log('默认选中节点', this.treeData[0].children[0])
          this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
          this.initRightResourceList()
        }
        this.initStation(node.id)
      })
    },
    //站点级系统初始化右侧所有资源点
    initRightResourceList () {
      this.$refs.tree.setCheckedKeys(this.checkedResourceKeys)
      let checkedNodes = this.$refs.tree.getCheckedNodes(true)
      this.checkedResources = checkedNodes.filter(node => {
        if (node.level === 6) {
          return node
        }
      })
    },
    //初始化资源点信息
    initTreeResource (node) {
      let data = {
        lineId: this.checkedData.lineId,
        stationId: this.checkedData.stationId,
        tierId: this.checkedData.tierId,
        subCode: this.checkedData.subCode,
        name: this.resourceFilterText
      }
      // console.log('初始化线路树请求参数：', data)
      this.$http({
        url: this.$http.adornUrlAlarm('/liResource/getResourceTreeList'),
        method: 'post',
        data: data
      }).then(data => {
        // console.log('初始化线路树：', data.nodes)
        if (data && data.code === 0) {
          this.$refs.tree.updateKeyChildren(node.id, data.nodes)
        }
      })
    },
    //初始化站点地图层级
    initStation (id) {
      // console.log('初始化站点id：', id)
      this.$http({
        url: this.$http.adornUrl(`/liStation/getId/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(data => {
        if (data && data.code === 0) {
          this.checkedData.lineId = data.bean.lineId
          this.checkedData.lineName = data.bean.lineName
          this.checkedData.stationId = data.bean.id
          this.checkedData.stationName = data.bean.stationName
          this.checkedData.tierId = data.bean.mapList[0].id
          this.checkedData.tierName = data.bean.mapList[0].name
        }
      }).then(() => {
        this.showResourceByMapId()
      })
    },
    //移除选中的资源点
    removeResource (id, index) {
      this.checkedResources.splice(index, 1)
      this.checkedResourceKeys.splice(index, 1)
      this.$refs.tree.setChecked(id, false)
    },
    //资源点全选
    handleCheckAllChange (val) {
      // console.log('handleCheckAllChange', val)
      this.checkedResources = val ? this.resourceList.map(res => {
        return res.id
      }) : []
      this.isIndeterminate = false
    },
    //资源点选择事件
    handleCheckedResourcesChange (value) {
      // console.log('handleCheckedResourcesChange', value)
      let checkedCount = value.length
      this.checkAll = checkedCount === this.resourceList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.resourceList.length
      // console.log('this.checkedResources', this.checkedResources)
    },
    //资源点树节点过滤
    filterResourceNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    //资源点树节点过滤
    resourceSubSystemChange (e) {
      this.systemList.forEach(a => {
        if (a.value === e) {
          this.resourceSubCode = a.value
          this.resourceSubId = a.id
        }
      })
      let node = this.$refs.tree.getNode(this.checkedData.sId).data
      this.initTreeStationMap(node, true)
    },

    //第三步
    initPlanLevelList () {
      this.planLevelList = [
        { value: 1, label: 'Ⅰ级' },
        { value: 2, label: 'Ⅱ级' },
        { value: 3, label: 'Ⅲ级' },
        { value: 4, label: 'Ⅳ级' }
      ]
    },
    initPlanTypeList () {
      this.planTypeList = [
        { value: 1, label: '单项预案' },
        { value: 2, label: '综合预案' }
      ]
    },
    //查询时从第一页开始查询
    reloadPlanDataList () {
      this.pageIndexPlan = 1
      this.getPlanDataList()
    },
    // 获取预案列表
    getPlanDataList () {
      this.$http({
        url: this.$http.adornUrlAlarm('/planRegister/list'),
        method: 'post',
        data: {
          name: this.dataFormPlan.name,
          type: this.dataFormPlan.type,
          level: this.dataFormPlan.level,
          status: 2,
          stationId: this.dataFormPlan.stationId,
          page: this.pageIndexPlan,
          rows: this.pageSizePlan
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.planList = data.page.rows
          this.totalPagePlan = data.page.total
        } else {
          this.planList = []
          this.totalPagePlan = 0
        }
        this.dataListLoadingPlan = false
      })
    },
    // 每页数
    sizeChangeHandlePlan (val) {
      this.pageSizePlan = val
      this.pageIndexPlan = 1
    },
    // 当前页
    currentChangeHandlePlan (val) {
      this.pageIndexPlan = val
      this.getPlanDataList()
    },
    //资源点全选
    handleCheckAllChangePlan (val) {
      // console.log('handleCheckAllChangePlan', val)
      this.checkedPlans = val ? this.planList.map(res => {
        return res.id
      }) : []
      this.isIndeterminatePlan = false
    },
    //资源点选择事件
    handleCheckedResourcesChangePlan (value) {
      // console.log('handleCheckedResourcesChangePlan', value)
      let checkedCount = value.length
      this.checkAllPlan = checkedCount === this.planList.length
      this.isIndeterminatePlan = checkedCount > 0 && checkedCount < this.planList.length
      // console.log('this.checkedPlans', this.checkedPlans)
    },

    //初始化预案关联信息
    initDataFrom () {
      this.$http({
        url: this.$http.adornUrlAlarm(`/planAssociated/getId`),
        method: 'get',
        params: { id: this.bean.id }
      }).then(data => {
        if (data && data.code === 0) {
          this.bean = data.bean
          this.etId = this.bean.etId
          this.subCode = this.bean.subCode
          this.resourceSubCode = this.bean.subCode
          this.systemList.forEach(e => {
            if (e.value === this.resourceSubCode) {
              this.resourceSubId = e.id
            }
          })
          this.checkedResourceKeys = this.bean.resourceList.map(e => {
            return e.resourceId
          })
          this.checkedPlans = this.bean.planList.map(e => {
            return e.planId
          })

          // console.log('选择的事件类型id：', this.etId)
          // console.log('选择的资源点：', this.checkedResources)
          // console.log('选择的预案：', this.checkedPlans)
        }
      })
    },
    // 表单提交
    dataFormSubmit (id) {
      this.clickFlag = true
      this.$http({
        url: this.$http.adornUrlAlarm(
          `/planAssociated/${!this.bean.id ? 'save' : 'update'}`
        ),
        method: 'post',
        data: this.bean
      }).then(data => {
        console.log(data)
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.clickFlag = false
              this.stepList[2].state = true
              this.$emit('refreshdatalist')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }

  }
}
</script>
<style lang='scss' scoped>
.radioDisSty /deep/.el-radio__input.is-disabled .el-radio__inner{
  background-color: #FFF;
}
.radioDisSty /deep/ .el-radio__input.is-disabled+span.el-radio__label{
    color: #606266;
}
.radioDisSty /deep/.el-radio__input.is-disabled.is-checked+.el-radio__label{
  color: #32A5EA;
}
.radioDisSty /deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #32A5EA;
    background: #32A5EA;
}
.radioDisSty /deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
    border: 1px solid #DCDFE6;
    background-color: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
}

.checkDisSty /deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label{
  color: #606266;
}
.checkDisSty /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #32A5EA;
  border-color: #32A5EA;
}
.checkDisSty /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
  border-color: #FFF;
}

.checkDisSty /deep/ .el-checkbox__input.is-disabled .el-checkbox__inner{
  background-color: #FFF;
}

.el-step:hover {
  cursor: pointer;
}
.radio-hover {
  &:hover {
    box-shadow: 2px 2px 2px 2px #cccccc;
  }
}
.radio-check-col {
  margin-bottom: 10px;
}
.radio-check-card {
  background: #F6F7FB !important;

  /*// &:hover {
  //   background: #32a5ea;
  //   .el-radio,
  //   .el-checkbox {
  //     color: #fff;
  //   }
  // }
  // 文字换行
  .el-radio,
  .el-checkbox {
    // word-break:normal;
    // width:auto;
    // display:block;
    // white-space:pre-wrap;
    // word-wrap : break-word ;
    // overflow: hidden ;
  }*/
}
.checked {
  background:#E8F7FF !important;
}
.box-card{
  width:1200px;margin:0 auto; max-height:460px !important; height:460px !important;
}
.box-steps{
  width:1800px;margin:0 auto;
}
.box-card1{
  border: 0; height:460px;
  .el-card__body{
    padding:0 !important;
   }
}
.box-card2{
   .el-card__body{
    padding:0 !important;
   }
}
.box-card3{
  .el-card__body{
    padding:20px !important;
   }
}
.clearfix{
  height:40px; background:#EFF9FE;padding-left:20px;line-height:40px; font-size:14px;font-weight:both; margin-bottom:10px;
}

</style>