<template>
  <el-dialog
    title="批量维护信息点"
    :visible.sync="batchDialog"
    class="batchContainer"
  >
    <el-steps
      :active="active"
      align-center
    >
      <el-step
        @click.native="active = 0"
        description="填写需维护的信息点"
      />
      <el-step
        @click.native="active = 1"
        description="选择批量维护的对象实例"
      />
    </el-steps>
    <hr>
    <div
      v-show="active === 0"
      style="overflow: hidden"
    >
      <section>
        <p class="text-message">维护只有单值的信息点</p>
        <span class="small">请选择需维护的信息点</span>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckChange"
        >
          全部选择
        </el-checkbox>

        <div style="margin: 15px "></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="(city,index) in newFirm"
            :label="city"
            :key="index"
          >
            <span @click="fourVendors(city.code)"> {{ city.name }}：</span>
            <span :title="city.rname">{{ city.rname | filterImgNames }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <!--维护有多个值的信息-->
      <section>
        <p class="text-message">维护有多个值的信息点</p>
        <span class="small">选择值的更新方式</span>
        <el-radio-group
          v-model="radio"
          @change="maintenance"
        >
          <el-radio :label="1">以增量方式维护</el-radio>
          <el-radio :label="2">以覆盖方式维护</el-radio>
        </el-radio-group>
        <div style="margin: 15px "></div>
        <div class="checkbox">
          <p v-for="(item,index) in newEnclosure">
            <el-checkbox v-model="form[item.path]">
              <span @click="multiple(item.path)" style="cursor: pointer">{{ item.name }}</span>
              <span
                class="text-color"
                v-for="i in item.value"
              >{{ i.Name | filterImgName }}</span>
            </el-checkbox>
          </p>
        </div>

      </section>
      <el-button
        class="next-step"
        @click="next"
      >下一步
      </el-button>
    </div>
    <div
      v-show="active === 1"
      class="all-message"
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        max-height="300"
        tooltip-effect="dark"
        style="width:100%;margin-bottom: 10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="设备本地名称"
          width=""
        >
          <template slot-scope="scope">{{ scope.row.localName }}</template>
        </el-table-column>
        <el-table-column
          prop="localId"
          label="设备本地编码"
          width="120"
        />
        <el-table-column
          prop="build"
          label="所属建筑楼层"
          show-overflow-tooltip
        />
      </el-table>
      <my-pagination
        @change="getAllData"
        :page="page"
      ></my-pagination>

      <el-button
        type="primary"
        @click="maintenanceSelect"
        style="margin-top:10px"
      >维护已选
      </el-button>
      <el-button
        @click="active = 0"
        style="margin-right: 10px;margin-top:10px"
      >上 一 步
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import myPagination from "@/components/ledger/lib/myPagination"
import tools from "@/utils/buildfloor/tools";

export default {
  name: "batchDialog",
  props: ['firmName', 'allObject', 'page', 'information', 'newEnclosure'],
  components: { myPagination },
  data() {
    return {
      form: {},
      batchDialog: false,//dialog
      active: 0,//进度条
      checkAll: false,//全选
      isIndeterminate: true,
      checkedCities: [],//选择的项,单项
      firm: [
        {
          name: "生产厂家/品牌型号",
          code: "dpManufacturerId",
          num: 2,
        }, {
          name: "供应商信息",
          code: "dpSupplierId",
          num: 8
        }, {
          name: "维修商信息",
          code: "dpMaintainerId",
          num: 35
        }, {
          name: "保险公司信息",
          code: "dpInsurerId",
          num: 42
        }
      ],
      radio: 1, //1增加，2覆盖
      checkedFile: [],//多项
      multipleSelection: [],//checkbox选择的对象数组
      filterList: [],//过滤单项选择的值
      deviceList: [],//过滤全选数据
      onlySelect: [],//检测是否有勾选单值信息
      videoModel: {
        archive: false,
        checkReport: false,
        drawing: false,
        installDrawing: false,
        insuranceFile: false,
        installPic: false,
        nameplate: false,
        pic: false
      },
    }
  },
  watch: {
    information() {
      return this.information
    },
    newEnclosure: {
      immediate: true,
      handler(val) {
        this.newEnclosure = val
      }
    }
  },
  created() {
    this.$forceUpdate()
  },
  computed: {
    newFirm() {
      this.firm.map(item => {
        if (item.num === this.firmName.num) {
          item.rname = this.firmName.name
          item.info = this.firmName
        }
        return item
      })
      return this.firm
    },
    tableData() {
      this.allObject.map(item => {
        let build = ''
        if (item.building && item.floor) {
          build = item.building.localName + ' - ' + item.floor.localName
        } else if (item.building) {
          build = item.building.localName
        } else if (item.floor) {
          build = item.floor.localName
        } else {
          build = '-'
        }
        item.build = build
        return item
      })
      return this.allObject
    },
  },
  filters: {
    filterImgName(value) {
      if (value && value.length > 16) {
        return value.substring(0, 12) + '...'
      } else {
        return value
      }
    },
    filterImgNames(value) {
      if (value && value.length > 16) {
        return value.substring(0, 16) + '...'
      } else {
        return value
      }
    }
  },
  methods: {
    next() { //下一步按钮
      // if (this.active++ > 1) this.active = 0
      this.deviceList = this.firm.filter(item => item.info)
      // if (!this.onlySelect.length) { //对单项全选进行过滤
      //   this.$message({
      //     message: '还没有选择单值信息哦',
      //     type: 'warning'
      //   });
      //   return false
      // }
      let fillIn = this.onlySelect.some(i => !i.info)
      if (fillIn) {
        this.$message({
          message: '请填写勾选信息',
          type: 'warning'
        });
        return false
      }
      // if (!this.deviceList.length) { //对单项全选进行过滤
      //   this.$message({
      //     message: '单值信息没有填写哦',
      //     type: 'warning'
      //   });
      //   return false
      // }
      if (this.checkAll) {    // 如果单项全选
        if (this.deviceList.length < 4) { //对单项全选进行过滤
          this.$message({
            message: '单值的信息点存在未填写',
            type: 'warning'
          });
          return false
        } else {
          this.active++
        }
      } else {
        this.active++
      }
    },
    handleCheckChange(val) { //全选
      this.checkedCities = val ? this.firm : []
      this.isIndeterminate = false

    },
    handleCheckedCitiesChange(value) { //维护单项触发
      this.onlySelect = value
      this.filterList = value.filter(item => item.info)
      let checkCount = value.length
      this.checkAll = checkCount === this.firm.length
      this.isIndeterminate = checkCount > 0 && checkCount < this.firm.length
    },
    handleCheckedFileChange(value) { //维护多项触发
    },
    fourVendors(code) {
      this.$emit('code', code)
    },
    //    选择维护方式
    maintenance(val) {
    },

    maintenanceSelect() { //维护已选
      if (!this.multipleSelection.length) {
        this.$message({
          message: '还没有选择实例哦',
          type: 'warning'
        });
        return false
      }
      let arr = []
      // dpSupplierId 供应商 dpManufacturerId 生产商 dpBrandId 品牌
      // dpSpecificationId 型号 dpInsurerId 保险商 dpMaintainerId 维修商
      this.multipleSelection.forEach(item => {
        // let equipId = item.id
        // arr.push({ equipId })
        let id = item.id
        arr.push({ id })
      })

      let Id = {}
      // let single = {};
      let equipManufactor, supplyPurchase, operationMainte, insuranceDoc;
      // this.filterList 单选数组,取到需要数据
      // 过滤数组，取对象
      this.checkedCities.filter(item => item.num === 2).forEach(i => { //型号
        if (i.info) {
          let { venderName, brandName, Specification, venderId, brandId, specificationId } = i.info
          equipManufactor = {
            manufacturer: venderName,
            brand: brandName,
            specification: Specification
          }
          Id.dpManufacturerId = venderId
          Id.dpBrandId = brandId
          Id.dpSpecificationId = specificationId
        }
      })
      this.checkedCities.filter(item => item.num === 8).forEach(i => {  //供应商8
        if (i.info) {
          let { website, name, venderId } = i.info
          supplyPurchase = {
            supplierWeb: website,
            supplier: name,

          }
          Id.dpSupplierId = venderId
        }
      })
      this.checkedCities.filter(item => item.num === 35).forEach(i => {  //维修商
        if (i.info) {
          let { name, venderId } = i.info
          operationMainte = {
            maintainer: name
          }
          Id.dpMaintainerId = venderId
        }
      })
      let insurance = this.checkedCities.filter(item => item.num === 42)
      let param = {}
      this.newEnclosure.forEach(({ path, value }) => param[path] = value)
      let file = param['infos.insuranceFile']
      if (insurance.length) {
        insurance.forEach(i => {  //保险
          if (i.info) {
            let { website, name, venderId } = i.info
            insuranceDoc = {
              insurer: name,
              insurerWeb: website,
              insuranceFile: file && file.length > 0 && this.radio === 2 ? file : ''
            }
            Id.dpInsurerId = venderId

          }
        })
      } else {

        if (this.radio === 2 && file && file.length > 0) {
          insuranceDoc = {
            insuranceFile: file
          }
        }

      }

      // this.information 多选信息
      let valuable = [], newValuable = []
      valuable = this.newEnclosure.filter(i => this.form[i.path] && i.value).forEach(({ code, value }) => newValuable[code] = value);
      // console.log( newValuable,'多选信息')
      if (this.radio === 1) { //组装数据，根据是覆盖该是增量，1是增量
        //    1:单选数据
        let arr1 = this.deepCopy(arr).map(item => ({
          ...Id,
          ...item,
          infos: { ...equipManufactor, ...supplyPurchase, ...operationMainte, ...insuranceDoc }
        }))
        let arr2 = this.deepCopy(arr).map(item => ({
          ...item,
          ...newValuable
        }))
        this.$emit('upDataDevice', 1, arr1, arr2)
      }
      if (this.radio === 2) {
        let param = {}, singleList = {}
        this.newEnclosure.forEach(({ path, value }) => param[path] = value)
        singleList.infos = { ...equipManufactor, ...supplyPurchase, ...operationMainte, ...insuranceDoc }
        let pa = Object.assign(param, singleList)
        pa = tools.formatData(pa)
        let arr3 = this.deepCopy(arr).map(item => ({
          ...Id,
          ...item,
          ...pa,

        }))
        this.$emit('upDataDevice', 2, arr3)
      }
      this.closeDialog()
    },
    closeDialog() {  //关闭弹窗，返回初始状态
      this.batchDialog = false
      this.clearData()

    },
    clearData() { //清空规则 filterList
      this.active = 0
      this.checkedCities = []//清空单项的checkbox
      this.firm.forEach(item => {
        item.rname = ''
        item.info = ''
      })
      // this.filterList = []
      this.onlySelect = []
      // this.deviceList = []
      this.radio = 1 //返回到默认增量
      //清空附件信息
      for (let i in this.form) {
        this.form[i] = false
      }
      this.newEnclosure.map(i => {
        this.$set(i, 'value', [])
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getAllData() {
      this.$emit('getAllData')
    },
    multiple(val) {
      this.$emit('multiples', val)
    },

    deepCopy(obj) {
      return JSON.parse(JSON.stringify(obj))
    }
  }
}
</script>

<style scoped lang="less">
.batchContainer {
  /deep/ .el-table-column--selection .cell {
    padding: 0;
  }

  /deep/ .el-step__description {
    margin: 2% 0;
  }

  .text-color {
    color: #409EFF
  }

  .el-checkbox-group {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;

    .el-checkbox {
      width: 43%;
    }

    .el-checkbox:last-of-type {
      margin-right: 30px;
    }
  }

  .next-step {
    display: block;
    float: right;
  }

  .checkbox {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;

    p {
      width: 50%;
    }

    .el-checkbox:last-of-type {
      margin-right: 10px;
    }
  }

  .text-message {
    overflow: hidden;
    margin-top: 10px;
    color: #333;
    border-left: 8px solid #333;
    text-indent: 10px;
    font-weight: 600;
  }

  .small {
    font-size: 12px;
    color: #555;
  }

  .all-message {
    overflow: hidden;

    button {
      float: right;
      padding: 10px;
      margin-left: 5px;
    }
  }

}
</style>
