<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="localName" label="设备本地名称" show-overflow-tooltip width="150">
            <!-- <template slot-scope="scope">{{ scope.row.EquipLocalName?scope.row.EquipLocalName:scope.row.EquipName }}</template> -->
          </el-table-column>
          <el-table-column prop="localId" 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.name" 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.localName : ''
              }}-{{ scope.row.floor ? scope.row.floor.localName : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="PropertyItem.localName" label="资产本地名称" show-overflow-tooltip width="150">
            <!-- <template slot-scope="scope">{{ scope.row.AssetsLocalName }}</template> -->
          </el-table-column>
          <el-table-column prop="PropertyItem.localId" 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.localName : ''
              }}-{{ scope.row.PropertyItem.floor ? scope.row.PropertyItem.floor.localName : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="100">
            <template slot-scope="scope">
              <el-radio v-model="radio[scope.row.id]" :label="scope.row.PropertyItem.id"
                        :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 {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 fl = this.formatFilter(pageNum)
      let param = {
        category: fl.category || undefined,
        spaceIdList: fl.spaceIdList || undefined,
        
        orders: "createTime desc",
        pageNumber: 1,
        pageSize: 1000
      }
      equipCategoryProperty(param, res => {
        this.unlinkNumber = res.total
        this.linkNumber += res.content.length
        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: {
          orders: "createTime desc, id 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.id != key && item.PropertyItem.id == 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({
            id: this.radio[key],
            equipId: key
          })
          console.log(params.content)
        }
        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>
