<template>
  <div class="box">
    <div class="condition">
      <div class="header">
        <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
        <span class="statistics-title">发现未关联资产的设备：<b>{{unlinkNumber}}</b></span>
        <span class="statistics-title">可在此功能中批量关联的：<b>{{linkNumber}}</b></span>
        <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">保存选定的设备资产关联关系</el-button>
        <el-button v-show="Object.keys(radio).length" style="float:right;margin-top:1px;margin-right:15px;" @click="handleClickReset">重置</el-button>
        <span style="float:right;margin-top:5px;font-size:12px;margin-right:10px;color:#999;">不能批量处理的请在设备台账列表中操作</span>
      </div>
      <div class="main">
        <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" :span-method="objectSpanMethod" :header-cell-style="headerStyle">
          <el-table-column prop="EquipLocalName" label="设备本地名称" show-overflow-tooltip max-width="150">
            <!-- <template slot-scope="scope">{{ scope.row.EquipLocalName?scope.row.EquipLocalName:scope.row.EquipName }}</template> -->
          </el-table-column>
          <el-table-column prop="EquipLocalID" label="设备本地编码" show-overflow-tooltip max-width="150">
            <!-- <template slot-scope="scope">{{ scope.row.EquipLocalID?scope.row.EquipLocalID:scope.row.EquipID }}</template> -->
          </el-table-column>
          <el-table-column prop="EquipCategory.EquipName" label="设备类" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column prop="CADID" label="设计图纸中编码" show-overflow-tooltip max-width="150"></el-table-column>
          <el-table-column label="所属建筑楼层">
            <template slot-scope="scope">
              {{ scope.row.Building?scope.row.Building.BuildLocalName:'' }}-{{ scope.row.Floor?scope.row.Floor.FloorLocalName:'' }}
            </template>
          </el-table-column>
          <el-table-column prop="PropertyItem.EquipLocalName" label="资产本地名称" show-overflow-tooltip max-width="150">
            <!-- <template slot-scope="scope">{{ scope.row.AssetsLocalName }}</template> -->
          </el-table-column>
          <el-table-column prop="PropertyItem.EquipLocalID" label="资产本地编码" show-overflow-tooltip max-width="150">
            <!-- <template slot-scope="scope">{{ scope.row.AssetsLocalId }}</template> -->
          </el-table-column>
          <el-table-column prop="PropertyItem.FamilyName.Name" label="设备族" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column prop="PropertyItem.CADID" label="设计图纸中编码" show-overflow-tooltip max-width="150"></el-table-column>
          <el-table-column label="所属建筑楼层" show-overflow-tooltip width="200">
            <template slot-scope="scope">
              {{ scope.row.PropertyItem.Building?scope.row.PropertyItem.Building.BuildLocalName:'' }}-{{ scope.row.PropertyItem.Floor?scope.row.PropertyItem.Floor.FloorLocalName:'' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="100">
            <template slot-scope="scope">
              <el-radio v-model="radio[scope.row.EquipID]" :label="scope.row.PropertyItem.EquipID" :disabled="scope.row.disabled" @change="handleChangeLink(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class=footer>
        <el-pagination
          class="right"
          v-show="tableData && tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNumber"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
//api
import { countEquip, equipCategoryProperty, equipRproperty } from "@/api/scan/request";

export default {
  components: {
    
  },
  computed: {
    ...mapGetters("layout", ["projectId", "userId", "secret"])
  },
  created() {
    this.params = this.$route.params
    this.getTableData()
  },
  data() {
    return {
      params: {},
      loading: false,
      unlinkNumber: 0,
      linkNumber: 0,
      // page: {
      //   pageSize: 50,
      //   pageSizes: [10, 20, 50, 100],
      //   pageNumber: 1,
      //   total: 0
      // },
      radio: {},
      contentData: [],
      tableData: [],
      mergeCol: [],
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      }, // 列表样式
    }
  },
  methods: {
    //获取表格数据
    getTableData(pageNum) {
      this.loading = true
      let param = this.formatFilter(pageNum)
      equipCategoryProperty(param, res => {
        this.unlinkNumber = res.Total
        this.linkNumber += res.Content.length
        // this.page.total = res.Total
        this.contentData = this.contentData.concat(res.Content)
        if (res.Total / (res.PageSize * res.PageNumber) > 1) {
          this.getTableData(res.PageNumber + 1)
        } else {
          this.contentData.forEach(item =>{
            if(item.PropertyList && item.PropertyList.length){
              item.PropertyList.forEach((Assets, index) => {
                let obj = JSON.parse(JSON.stringify(Object.assign(item, {PropertyItem: Assets, disabled: false})))
                delete obj.PropertyList
                this.tableData.push(obj)
                if(index == 0){
                  this.mergeCol.push(item.PropertyList.length)
                } else {
                  this.mergeCol.push(false)
                }
              })
            }
          })
          this.loading = false
        }
      })
    },
    //格式化条件
    formatFilter(pageNum) {
      pageNum = pageNum ? pageNum : 1
      let param = {
          data: {
          //   Cascade: [
          //   {
          //     Name: "equipCategory",
          //     Projection: ["EquipCode", "EquipName"]
          //   },
          //   {
          //     Name: "building",
          //     Projection: [ "BuildLocalName", "BuildName", "BuildID" ]
          //   },
          //   {
          //     Name: "floor",
          //     Projection: [ "FloorLocalName", "FloorName", "FloorID" ]
          //   }
          // ],
          Orders: "createTime desc, EquipID asc",
          PageNumber: pageNum,
          PageSize: 1000
        },
        category: this.params.deviceType
      }

      if (this.params.buildFloor[0] == "noKnow") {
        param.data.Filters = `buildingId isNull`
      } else if (this.params.buildFloor[0] && this.params.buildFloor[0] != "all") {
        param.data.Filters = `buildingId='${this.params.buildFloor[0]}'`
        if (this.params.buildFloor[1] == "noKnow") {
          param.data.Filters += `;floorId isNull`
        } else if (this.params.buildFloor[1] && this.params.buildFloor[1] != "all") {
          param.data.Filters += `;floorId='${this.params.buildFloor[1]}'`
        }
      }
      if(this.params.hasOwnProperty('spaceList')){
        if(typeof this.params.spaceList == 'string'){
          param.spaceIdList = `&spacrType=${this.params.spaceList}`
        } else {
          let spaceIdList = ''
          this.params.spaceList.forEach(item => {
            spaceIdList += `&spaceIdList=${item}`
          })
          param.spaceIdList = spaceIdList
        }
      }
      return param
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 5) {
        if (this.mergeCol[rowIndex]) {
          return {
            rowspan: this.mergeCol[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 1
          };
        }
      }
    },
    //切换关联
    handleChangeLink(row) {
      this.tableData.forEach(item => {
        item.disabled = false
        if(Object.keys(this.radio).length){
          for(let key in this.radio){
            if(item.EquipID != key && item.PropertyItem.EquipID == this.radio[key]){
              item.disabled = true
            }
          }
        }
      })
    },
    //重置关联选择
    handleClickReset() {
      this.tableData.forEach(item => {
        item.disabled = false
      })
      this.radio = {}
    },
    //创建已选
    handleClickCreate() {
      let params = {
        Content: []
      }
      if(Object.keys(this.radio).length){
        for(let key in this.radio){
          params.Content.push({
            EquipId: this.radio[key],
            EquipmentId: key
          })
        }
        equipRproperty(params, res => {
          this.radio = {}
          this.linkNumber = 0
          this.contentData = []
          this.tableData = []
          this.getTableData()
          this.$message.success('关联成功！')
        })
      } else {
        this.$message.info('请选择要关联的关系！')
      }
    },
    //切换每页显示多少条数据
    // handleSizeChange(val) {
    //   this.page.pageSize = val
    //   this.getTableData()
    // },
    //切换页数
    // handleCurrentChange(val) {
    //   this.page.pageNumber = val
    //   this.getTableData()
    // },
    //返回
    goBack() {
      this.$router.push({ name: "facilityLedger" })
    }
  },
  watch: {
    projectId() {
      this.$router.push({ name: "facilityLedger" })
    }
  }
};
</script>

<style scoped lang='less'>
.box {
  .condition {
    padding: 10px;
    display: flex;
    height: 100%;
    flex-direction: column;
    border: 1px solid #dfe6ec;
    background: #fff;
    .header{
      padding-bottom: 10px;
      border-bottom: 1px solid #bcbcbc;
      .statistics-title{
        margin-left: 20px;
        line-height: 32px;
      }
    }
    .main{
      margin-top: 10px;
      height: calc(100% - 46px);
    }
  }
}
</style>

<style lang="less">
.el-table th {
  background-color: #d9d9d9;
  color: #000;
}
</style>
