<template>
  <div>
    <a-select
      ref="selectref"
      v-model="currentSelectItem"
      multiple
      :placeholder="$t('PLACEENTER')"
      @visible-change="visibleType"
      @change="selectChange"
    >
      <a-select-option
        v-for="(item, index) in personnelList"
        :key="index"
        :value="item.deviceId"
      >
        {{ item.deviceId }}
      </a-select-option>
    </a-select>
    <MegaModal
      class="dia-batch avue-new-table"
      :title="$t('SELECT_DEVICE_ID')"
      :visible.sync="visible"
      width="1150px"
      top="6vh"
      append-to-body
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <i-search
        ref="searchForm"
        v-model="page"
        :label-width="110"
        :default-show-num="3"
        :form-item="queryFormItem"
        :search-form="queryForm"
        @search="searchPageData"
      />
      <div class="page-padding pb-10">
        <i-table
          ref="myTable"
          v-model="sortParams"
          :is-show-operation="false"
          :is-async-column="false"
          :is-fix-height="false"
          :if-index="false"
          :table-search="searchPageData"
          :table-columns="tableColumns"
          :table-data="personnelList"
          @selection-change="handleSelectionChange"
        />
        <i-pagination
          v-model="page"
          :total="personnelTotal"
          :query-list="searchPageData"
        />
      </div>
      <span slot="footer" class="dialog_footer">
        <a-button type="primary" @click="handleConfirm">
          <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
        </a-button>
        <a-button @click="visible = false">
          <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
        </a-button>
      </span>
    </MegaModal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { Modal as MegaModal, Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    MegaModal,
    Icon,
  },
  props: {
    appId: {
      type: String,
      default: "",
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false, // 弹框显示、隐藏
      treeData: [],
      currentSelectItem: [],
      sortParams: null,
      // 查询的表单的配置项
      queryForm: {
        appId: "", // app名称
        ip: "", // 姓名
        mac: "", // Mac地址
      },
      queryFormItem: {
        appId: {
          i18n: "APP_NAME",
          disabled: true,
        },
        ip: {
          i18n: "COLUMN:CORE:SYSTEM:APP_CLIENT:IP_ADDRESS",
        },
        mac: {
          i18n: "COLUMN:CORE:SYSTEM:APP_CLIENT:MAC_ADDRESS",
        },
      },
      // 表格的配置项
      tableColumns: [
        {
          name: "id",
          i18n: "INDEX",
          width: 85,
        },
        {
          name: "appId",
          i18n: "APP_NAME",
          minWidth: 100,
        },
        {
          name: "deviceId",
          i18n: "DEVICE_ID",
          minWidth: 140,
        },
        {
          name: "mac",
          i18n: "COLUMN:CORE:SYSTEM:APP_CLIENT:MAC_ADDRESS",
          minWidth: 120,
        },
        {
          name: "ip",
          i18n: "COLUMN:CORE:SYSTEM:APP_CLIENT:IP_ADDRESS",
          minWidth: 120,
        },
      ],
      page: 1,
      personnelList: [],
      selectedData: [],
      personnelTotal: 0,
    };
  },
  computed: {
    // 从vux中获取数据
    ...mapState({
      pageSize: (state) => state.pagination.pageSize,
    }),
  },
  watch: {
    appId(newVal) {
      this.queryForm.appId = newVal || "";
      this.queryFormItem.appId.disabled = !!newVal;
    },
    value: {
      handler(newVal, oldVal) {
        if (Array.isArray(newVal) && newVal.length > 0) {
          this.$set(this, "currentSelectItem", newVal);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    visibleType(e) {
      if (e) {
        this.$refs.selectref.blur();
      }
      this.visible = true;
      this.searchPageData();
      this.page = 1;
    },
    /**
     * 获取table的数据
     */
    searchPageData() {
      this.personnelList = [];
      this.queryForm.appId = this.appId || "";
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/appTerminal/search`, {
          params: {
            ...this.queryForm,
            ...this.sortParams,
            page: this.page,
            size: this.$store.state.pagination.pageSize,
          },
        })
        .then((res) => {
          this.personnelList = data.data.records;
          this.personnelTotal = data.data.total;
          if (
            Array.isArray(this.currentSelectItem) &&
            this.currentSelectItem.length > 0
          ) {
            this.personnelList.forEach((item) => {
              if (this.currentSelectItem.includes(item.deviceId)) {
                this.$nextTick(() => {
                  this.$refs.myTable.$refs.elTable.toggleRowSelection(
                    item,
                    true
                  );
                });
              }
            });
          }
        });
    },
    // 监听确认按钮事件
    handleConfirm() {
      this.$emit("change", this.selectedData);
      this.$set(this, "currentSelectItem", [...this.selectedData]);
      this.visible = false;
    },
    selectChange(val) {
      this.$emit("change", val);
    },
    handleSelectionChange(val) {
      this.selectedData = val.map((item) => item.deviceId);
    },
    // 关闭弹框
    closeDialog() {
      this.$refs.searchForm.resetFields();
      this.visible = false;
    },
  },
};
</script>
