<!--
    changeRea 厂商
-->
<template>
  <el-dialog title="关联资产" :visible.sync="dialog.changeRea" width="800px">
    <div>
      <div id="changeRea">
        <div class="title-search" style="margin-bottom: 10px;">
          <floor-cascader @change="changeFloor"></floor-cascader>
          <el-input placeholder="输入本地名称或本地编码查询" v-model="search" size="small" style="width:250px;marginLeft:30px;" clearable></el-input>
          <el-button @click="getPropertyData" size="small">查找</el-button>
        </div>
        <!-- <div>
          <floor-cascader @change="changeFloor"></floor-cascader>
        </div> -->
        <el-radio-group v-model="radio" style="width:100%;">
          <el-table :data="tableData" style="width: 100%" height="300px">
            <el-table-column label="资产名称">
              <template slot-scope="scope">
                <el-radio :label="scope.row.EquipID" :ref="scope.row.EquipID" :value="scope.row.EquipLocalName || scope.row.EquipName">
                  {{scope.row.EquipLocalName || scope.row.EquipName}}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="本地编码">
              <template slot-scope="scope">{{scope.row.EquipLocalID || scope.row.EquipID}}</template>
            </el-table-column>
            <el-table-column prop="name" label="所在楼层">
              <template slot-scope="scope">
                {{ scope.row.Building?scope.row.Building.BuildLocalName?scope.row.Building.BuildLocalName:'':'' }}-{{ scope.row.Floor?scope.row.Floor.FloorLocalName?scope.row.Floor.FloorLocalName:'':'' }}
              </template>
            </el-table-column>
            <el-table-column label="设备族">
              <template slot-scope="scope">
                {{scope.row.EquipFamilyList[0].FamilyName}}
              </template>
            </el-table-column>
            <el-table-column label="安装位置">
              <template slot-scope="scope">
                {{scope.row.LedgerParam?scope.row.LedgerParam.Siteinstall?scope.row.LedgerParam.Siteinstall.InstallLocation:"--":"--"}}
              </template>
            </el-table-column>
          </el-table>
        </el-radio-group>
        <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
        <div class="footer">
          <el-button type="primary" @click="clickTrue" style="display:block;margin: 10px auto 0;">确 定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/lib/myPagination";
import paramDetails from "@/components/dialogs/list/paramDetails"
import { queryProperty } from "@/api/scan/request"
import floorCascader from "@/components/ledger/lib/floorCascader";
import { mapGetters, mapActions } from "vuex"
export default {
  components: {
    myPagination,
    paramDetails,
    floorCascader
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          changeRea: true
        };
      }
    },
    category: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      search: "", //搜索文案
      radio: "",
      tableData: [],
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
      mess: {},
      codeListCode: [],
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"])
  },
  mounted() { },
  methods: {
    //确认选择
    clickTrue() {
      if (this.radio) {
        this.$emit('changeProperty', { PropertyId: this.radio, LinkEquipLocalName: this.$refs[this.radio].value });
        this.dialog.changeRea = false;
      } else {
        this.$message("请先选择资产")
      }
    },
    //所在建筑楼层修改
    changeFloor(val) {
      this.mess = {
        buildId: val[0] || "",
        floorId: val[1] || ""
      }
      this.getPropertyData()
    },
    //分页修改
    changed() {
      this.getPropertyData()
    },
    //弹窗显示时
    changePage() {
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100],
        total: 0,
        currentPage: 1
      }
      this.getPropertyData()
    },
    //查询表数据
    getPropertyData() {
      let param = { 
        Cascade: [
          {
            Name: "equipFamilyList",
            Projection: [ "Family", "FamilyName" ]
          },
          {
            Name: "building",
            Projection: ["BuildLocalName", "BuildName", "BuildID"]
          },
          {
            Name: "floor",
            Projection: ["FloorLocalName", "FloorName", "FloorID"]
          }
        ],
        Filters: `EquipmentId isNull;Family="${this.category.assetType}"`,
        PageNumber: this.page.currentPage,
        PageSize: this.page.size
      }
      //建筑id
      if (this.mess.buildId == "noKnow") {
        param.Filters += `;buildingId isNull`
      } else if (this.mess.buildId && this.mess.buildId != "all") {
        param.Filters += `;buildingId='${this.mess.buildId}'`
      }
      //楼层id
      if (this.mess.floorId == "noKnow") {
        param.Filters += `;floorId isNull`
      } else if (this.mess.floorId && this.mess.floorId != "all") {
        param.Filters += `;floorId='${this.mess.floorId}'`
      }
      //名称和编码
      if (this.search) {
        param.Filters += `;EquipLocalName contain '${this.search}' || EquipLocalID contain '${this.search}'`
      }
      queryProperty(param, res => {
        this.tableData = res.Content
        this.page.total = res.Total
      })
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.changeRea) {
          this.changePage()
          this.radio = ""
        }
      }
    }
  }
};
</script>

<style lang="less">
#changeRea {
  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
