<template>
  <div class="e-object-device-manage">
    <el-tabs v-model="activeName">
      <el-tab-pane
        :label="tabLabel.dictLabel"
        :name="tabLabel.dictValue"
        v-for="(tabLabel, idx) in filterList"
        :key="idx"
      >
        <e-device-table
          v-if="tabLabel.dictValue === activeName"
          :sourceId="sourceId"
          :deviceType="tabLabel.dictValue"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="e-tabs-screen" v-show="dialogWrapper">
      <el-dropdown :hide-on-click="false" @visible-change="handleVisibleChange">
        <i class="iconfont iconshaixuan icon-screen"></i>
        <el-dropdown-menu slot="dropdown">
          <el-checkbox-group v-model="filterSelect">
            <el-dropdown-item
              v-for="(dropItem, index) in projectDeviceTagGroup"
              :key="index"
            >
              <el-checkbox
                :label="dropItem.dictValue"
                :disabled="activeName === dropItem['dictValue']"
                >{{ dropItem.dictLabel }}</el-checkbox
              >
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-evenly;
                "
              >
                <el-button type="text" @click="handleTabReduction">全选</el-button>
                <el-button type="primary" size="mini" @click="handleTabScreen"
                  >确定</el-button
                >
              </div>
            </el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import EDeviceTable from "./EDeviceTable";
export default {
  name: "EObjectDeviceManage",
  components: {
    EDeviceTable,
  },
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
  },
  data() {
    return {
      activeName: "",
      projectDeviceTagGroup: [],
      filterList: [],
      filterSelect: [],
      dialogWrapper: false,
    };
  },
  watch: {},
  created() {
    this.getDicts("project_device_tag_group").then((response) => {
      this.projectDeviceTagGroup = response.data;
      // 默认数据存入记录
      this.filterList = [...this.projectDeviceTagGroup];
      this.filterSelect = [...this.filterList].map((v) => {
        return v["dictValue"];
      });
      this.dialogWrapper = true;
      if (this.projectDeviceTagGroup && this.projectDeviceTagGroup.length > 0) {
        this.activeName = this.projectDeviceTagGroup[0]["dictValue"] || "";
      }
    });
  },
  methods: {
    handleVisibleChange(e) {
      if (e) {
        this.filterSelect = [...this.filterList].map((v) => {
          return v["dictValue"];
        });
      }
    },
    handleTabReduction() {
      this.filterList = [];
      this.filterList = [...this.projectDeviceTagGroup];
      this.filterSelect = [...this.filterList].map((v) => {
        return v["dictValue"];
      });
      this.$forceUpdate();
    },
    handleTabScreen() {
      this.filterList = [];
      this.filterList = this.projectDeviceTagGroup.filter(
        (v) => this.filterSelect.indexOf(v["dictValue"]) >= 0
      );
      console.log(this.filterList)
      this.$forceUpdate();
    },
    // 菜单状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.projectDeviceTagGroup, row.industry);
    },
    // 获取 网关设备列表
    getGatewayDeviceList() {},
  },
};
</script>
<style lang="scss">
.e-object-device-manage {
  width: 100%;
  height: 100%;
  display: flex;
  .e-tabs-screen {
    width: 0;
    .icon-screen {
      position: relative;
      right: 25px;
      top: 5px;
      font-size: 20px;
      color: #606266;
    }
  }
}
</style>
