<template>
  <div id="dynamicdata">
    <!-- 按钮及提示 -->
    <div class="text-right">
      <span>最后一次执行时间：{{lastUpdateTime}}</span>
      <el-button size="medium" @click="apply">按对应规则自动设定动态参数信息点</el-button>
      <el-button size="medium" type="primary" @click="toAddRelation">填充对应规则</el-button>
    </div>
    <!-- tab分页 -->
    <el-tabs v-model="curType">
      <el-tab-pane
        v-for="(item) in typeList"
        :key="item.Name"
        :label="item.Name+'('+item.Rcount+'/'+item.Sum+')'"
        :name="item.Name"
      ></el-tab-pane>
    </el-tabs>
    <!-- 查询条件 -->
    <div class="query-area">
      <el-form ref="form" :model="form" :inline="true">
        <el-row>
          <el-col :span="4">
            <el-form-item>
              <el-input
                placeholder="请输入设备标识关键字"
                v-model="form.EquipmentMark"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="数据源">
              <el-select
                v-model="form.Datasource"
                multiple
                collapse-tags
                style="margin-left: 10px;"
                placeholder="全部"
                filterable
              >
                <el-option v-for="item in sourceList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="数字字典设备类型">
              <el-select
                v-model="form.SubTypeName"
                multiple
                collapse-tags
                style="margin-left: 10px;"
                placeholder="全部"
                filterable
              >
                <el-option v-for="item in DynEquipList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="位置标签">
              <el-select
                v-model="form.LocationFlag"
                multiple
                collapse-tags
                style="margin-left: 10px;"
                placeholder="全部"
                filterable
              >
                <el-option v-for="item in LocFlagList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 列表区域 -->
    <div class="table-area">
      <el-table :data="tableData" style="width: 100%" height="100%" v-show="1">
        <el-table-column label="点位表中出现的所有设备">
          <el-table-column prop="EquipmentMark" label="设备标识">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.EquipmentMark" placement="top">
                <span>{{scope.row.EquipmentMark}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="LocationFlag" label="位置标签">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.LocationFlag.toString()" placement="top">
                <span>{{scope.row.LocationFlag.toString()}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="Datasource" label="数据源">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.Datasource" placement="top">
                <span>{{scope.row.Datasource}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="SubTypeName" label="数字字典设备类型">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.SubTypeName" placement="top">
                <span>{{scope.row.SubTypeName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="对应物理世界中的设备实例">
          <el-table-column prop="ObjectID" label="对应的设备实例">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.ObjectID" placement="top">
                <span>{{scope.row.ObjectID}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="FloorLocalName" label="实例所在建筑楼层">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.FloorLocalName" placement="top">
                <span>{{scope.row.FloorLocalName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="RoomLocalName" label="实例所在业务空间">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.RoomLocalName" placement="top">
                <span>{{scope.row.RoomLocalName}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
              type="danger"
              plain
              :disabled="scope.row.Related=='False'"
            >清除对应</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="fr"
      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>
    <!-- 应用规则弹窗 -->
    <apply-rules-dialog ref="apply"></apply-rules-dialog>
    <!-- 清除对应关系弹窗 -->
    <del-relation-dialog ref="del"></del-relation-dialog>
  </div>
</template>
<script>
import tools from "@/utils/tools";
import { mapGetters, mapActions } from "vuex";
import applyRulesDialog from "@/components/point/dynamicdata/applyRulesDialog";
import delRelationDialog from "@/components/point/dynamicdata/delRelationDialog";
import {
  dynamicClashConfirm,
  dynamicDataSource,
  dynamicDynEquipList,
  dynamicExecute,
  dynamicLocFlagList,
  dynamicPromptmessage,
  dynamicPromptobjs,
  dynamicQuery,
  dynamicQueryPoint,
  dynamicDeleteRelation,
  dynamicPointTypeList
} from "@/api/scan/request";
export default {
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      curType: "1", //当前所在tab页
      typeList: [], //tab页list
      sourceList: [], //数据源
      DynEquipList: [], //数据字典设备类型
      LocFlagList: [], //位置标签
      tableData: [], //列表数据
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      form: {}, //查询条件
      lastUpdateTime: "" //最后更新时间
    };
  },
  components: {
    applyRulesDialog,
    delRelationDialog
  },
  created() {
    let date = new Date();
    this.lastUpdateTime = `${date.getFullYear()}-${date.getMonth() +
      1}-${date.getDate()}  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    this.init();
  },
  mounted() {},
  methods: {
    //获取查询条件-
    init() {
      let param = { Related: true };
      //对象类型
      dynamicPointTypeList(param, res => {
        if (res.Result == "success") {
          this.typeList = res.Content;
          if (this.typeList.length) {
            this.curType = this.typeList[0].Name;
            this.getTableData();
          }
        }
      });
      //数据源
      dynamicDataSource(param, res => {
        if (res.Result == "success") {
          this.sourceList = res.Content;
        }
      });
      //数据字典
      dynamicDynEquipList(param, res => {
        if (res.Result == "success") {
          this.DynEquipList = res.Content;
        }
      });
      // 位置标签
      dynamicLocFlagList(param, res => {
        if (res.Result == "success") {
          this.LocFlagList = res.Content;
        }
      });
      //获取提示信息
      dynamicPromptmessage({},res=>{
        if(res.Result == 'success'){
          
        }
      })
    },
    //执行对应结果
    apply() {
      // dynamicExecute()
      // let date = new Date();
      // this.lastUpdateTime = `${date.getFullYear()}-${date.getMonth() +
      //   1}-${date.getDate()}  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
      // this.$message.success("应用成功");
      this.$refs.apply.showDialog();
    },
    //清除对应关系
    handleDelete(index, row) {
      this.$refs.del.showDialog(row);
    },
    //改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    //改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    //跳转至填充对应规则
    toAddRelation() {
      this.$router.push({ name: "addRelation" });
    },
    //获取表格数据
    getTableData() {
      let param = {
        PageNumber: this.page.pageNumber,
        PageSize: this.page.pageSize,
        TypeName: this.curType
      };
      //处理查询条件(目前只是单个查,需后台支持)
      if (this.form.EquipmentMark && this.form.EquipmentMark.length) {
        param.EquipmentMark = this.form.EquipmentMark;
      }
      if (this.form.SubTypeName.length) {
        param.SubTypeName = this.form.SubTypeName.toString();
      }
      if (this.form.LocationFlag.length) {
        param.LocationFlag = this.form.LocationFlag.toString();
      }
      if (this.form.Datasource.length) {
        param.Datasource = this.form.Datasource.toString();
      }
      // 查询对应关系(P1)
      dynamicQuery(param, res => {
        if (res.Result == "success") {
          this.tableData = res.Content;
          this.page.total = res.Total;
        }
      });
    }
  },
  watch: {
    projectId() {
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped>
#dynamicdata {
  overflow: hidden;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  position: relative;
  /deep/ .text-right {
    text-align: right;
  }
  .table-area {
    width: calc(100% - 2px);
    height: calc(100% - 215px);
    td div {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .fr {
    padding-top: 10px;
    float: right;
  }
}
</style>

