<template>
  <div class="page-wrapper">
    <div class="relate-page-content">
      <div class="terminal-table">
        <div class="page-title">
          <span class="divide-block__left">终端信息</span>
        </div>

        <MomTable
          ref="TerminalMomTable"
          row-key="id"
          :row-selection="terminalRowSelection"
          :columns="terminalColumns"
          :data-source="terminalList"
          :action-buttons="terminalActions"
          :show-util-operator="false"
          :pagination="false"
          :auto-adaptive-width="false"
          @delete="handleTerminalDelete"
        >
          <div slot="toolbar" class="button-top-table">
            <SelectStation
              style="display: inline-block"
              :default-selected-keys="terminalList.map((item) => item.id)"
              :show-clear="false"
              @confirm="handleTerminalConfirm"
            >
              <a-button type="primary" icon="plus">
                {{ $t("ADD") }}
              </a-button>
            </SelectStation>

            <a-button
              type="danger"
              icon="delete"
              class="batch-delete"
              @click="batchDelTerminal"
            >
              {{ $t("BATCH_DELETE") }}
            </a-button>
          </div>
        </MomTable>
      </div>
      <div class="page-table">
        <div class="page-title">
          <span class="divide-block__left">页面信息</span>
        </div>

        <MomTable
          ref="PageMomTable"
          row-key="id"
          :row-selection="pageRowSelection"
          :columns="pageColumns"
          :data-source="pageList"
          :action-buttons="pageActions"
          :show-util-operator="false"
          :pagination="false"
          :auto-adaptive-width="false"
          @delete="handlePageDelete"
        >
          <div slot="toolbar" class="button-top-table">
            <SelectPage
              style="display: inline-block"
              :default-selected-keys="pageList.map((item) => item.id)"
              :show-clear="false"
              @confirm="handlePageConfirm"
            >
              <a-button type="primary" icon="plus">
                <span> {{ $t("ADD") }} </span>
              </a-button>
            </SelectPage>
            <a-button
              type="danger"
              icon="delete"
              class="batch-delete"
              @click="batchDelPage"
            >
              {{ $t("BATCH_DELETE") }}
            </a-button>
          </div>
          <template slot="pageIcon" slot-scope="text">
            <Icon v-if="text" :type="text" :size="18" />
          </template>
        </MomTable>
      </div>
    </div>
    <div class="page-bottom-op">
      <a-button
        type="primary"
        :disabled="terminalList.length === 0 || pageList.length === 0"
        @click="confirm"
      >
        <Icon type="icon-cur-save_1" :size="18" />
        {{ $t("SAVE") }}
      </a-button>
      <a-button @click="cancel">
        <Icon type="icon-dir-f-rollback" :size="18" />
        {{ $t("CANCEL") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import SelectStation from "@/components/SelectStation/index";
import SelectPage from "@/components/SelectPage/index";

export default {
  components: {
    Icon,
    SelectStation,
    SelectPage,
  },
  data() {
    return {
      terminalList: [],
      pageList: [],

      terminalActions: ["delete"],
      pageActions: ["delete"],

      terminalColumns: [
        {
          dataIndex: "terminalCode",
          sorter: false,
          title: () => this.$t("TERMINAL_CODING"), // 终端编码
        },
        {
          dataIndex: "terminalName",
          sorter: false,
          title: () => this.$t("TERMINAL_NAME"), // 终端名称
        },
      ],

      pageColumns: [
        {
          dataIndex: "pageCode",
          sorter: false,
          title: () => this.$t("PAGE_CODE"), // 页面编码
        },
        {
          dataIndex: "pageName",
          sorter: false,
          title: () => this.$t("PAGE_NAME"), // 页面名称
        },
        {
          dataIndex: "pageIcon",
          sorter: false,
          title: () => this.$t("ICON"),
          scopedSlots: { customRender: "pageIcon" },
        },
      ],

      selectedTerminalKeys: [],
      selectedPageKeys: [],
    };
  },
  computed: {
    terminalRowSelection() {
      return {
        selectedRowKeys: this.selectedTerminalKeys,
        type: "checkbox",
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedTerminalKeys = selectedRowKeys;
        },
      };
    },
    pageRowSelection() {
      return {
        selectedRowKeys: this.selectedPageKeys,
        type: "checkbox",
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedPageKeys = selectedRowKeys;
        },
      };
    },
  },
  methods: {
    handleTerminalDelete(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.terminalList = this.terminalList.filter(
            (item) => row.id !== item.id
          );
        },
      });
    },
    handlePageDelete(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.pageList = this.pageList.filter((item) => row.id !== item.id);
        },
      });
    },
    batchDelTerminal() {
      if (this.selectedTerminalKeys.length > 0) {
        this.$confirm({
          title: this.$t("DELETE"),
          content: this.$t("DELETE_INFO"),
          okType: "warning",
          okText: this.$t("CONFIRM"),
          cancelText: this.$t("CANCEL"),
          centered: false,
          icon: "close-circle",
          onOk: () => {
            this.terminalList = this.terminalList.filter(
              (item) => !this.selectedTerminalKeys.includes(item.id)
            );
            this.$nextTick(() => {
              this.selectedTerminalKeys = [];
            });
          },
        });
      } else {
        this.$message.error(this.$t("SELECT_ONE_DATA"));
      }
    },
    batchDelPage() {
      if (this.selectedPageKeys.length > 0) {
        this.$confirm({
          title: this.$t("DELETE"),
          content: this.$t("DELETE_INFO"),
          okType: "warning",
          okText: this.$t("CONFIRM"),
          cancelText: this.$t("CANCEL"),
          centered: false,
          icon: "close-circle",
          onOk: () => {
            this.pageList = this.pageList.filter(
              (item) => !this.selectedPageKeys.includes(item.id)
            );
            this.$nextTick(() => {
              this.selectedPageKeys = [];
            });
          },
        });
      } else {
        this.$message.error(this.$t("SELECT_ONE_DATA"));
      }
    },

    handleTerminalConfirm(keys, rows) {
      this.$set(this, "terminalList", rows);
    },

    handlePageConfirm(keys, rows) {
      this.$set(this, "pageList", rows);
    },

    confirm() {
      this.$axios
        .post(`${ApiConstant.PREFIX_CORE}/api/ideterminal/batch-link-page`, {
          terminalIdList: this.terminalList.map((item) => item.id),
          pageIdList: this.pageList.map((item) => item.id),
        })
        .then((res) => {
          this.$message.success(this.$t("EDIT_SUCCESS"));

          this.cancel();
        });
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/devCenter/station" },
        vm: this,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.relate-page-content {
  display: flex;
  min-height: calc(100vh - 152px);
  .page-title {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #eef1f4;
  }
  .terminal-table {
    flex: 55%;
    border-right: 12px solid #f0f2f5;
  }
  .page-table {
    flex: 45%;
  }
}
</style>

<style lang="less">
.relate-page-content {
  .batch-delete {
    margin-left: 10px;
    background: #f5222d !important;
    border-color: #f5222d !important;
  }
}
</style>
