<template>
  <div class="box-main">
    <MomTable
      ref="MomTable"
      row-key="id"
      :columns="tableColumns"
      :data-source="tableData"
      :query-param="queryForm"
      :query-param-item="queryFormItem"
      :total="total"
      :page.sync="page"
      :action-buttons="actionButtons"
      :mega-extend="{
        rowAction: {
          width: 120,
        },
      }"
      @beforeSearch="beforeSearch"
      @search="searchPageData"
      @edit="handleEdit"
      @delete="handleDelete"
      @reset="handleReset"
    >
      <a-row slot="toolbar" class="button-top-table">
        <a-button
          v-if="hasAuth('EPROPEL_MSG:ADD')"
          icon="plus"
          @click="handleAdd"
        >
          {{ $t("ADD") }}
        </a-button>
      </a-row>
    </MomTable>

    <!-- 预览 -->
    <a-modal
      :visible.sync="preViewShowFlag"
      :title="$t('PREVIEW')"
      class="amodal-style"
      append-to-body
      width="1200px"
      @cancel="closePreview"
    >
      <a-carousel
        v-if="preViewData.length"
        id="carousel-preview-id"
        arrows
        :autoplay="autoplay"
      >
        <div
          v-for="(item, index) in preViewData"
          :key="index"
          style="height: 660px"
        >
          <EmbedFrame :key="index" :src="item.linkUrl" :height="660" />
        </div>
      </a-carousel>
      <div v-else class="no_data_div">
        <span class="no_data">{{ $t("NO_DATA") }}</span>
      </div>
    </a-modal>
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import { Icon } from "@mega-design/ui-vue";
import EmbedFrame from "@/components/embed-frame";

export default {
  components: {
    EmbedFrame,
    // eslint-disable-next-line vue/no-unused-components
    Icon,
  },
  data() {
    return {
      autoplay: true,
      preViewData: [],
      preViewShowFlag: false,
      tableData: [],
      page: 1, // 页码
      total: 0, // 每页个数
      title: "", // 弹框的标题
      queryForm: {
        // 消息编码
        msgCode: "",
        // 消息名称
        msgName: "",
      },
      actionButtons: [
        this.hasAuth("EPROPEL_MSG:EDIT") && "edit",
        (h, { record }) =>
          this.hasAuth("EPROPEL_MSG:PREVIEW") && (
            <span
              class="text-primary cursor-pointer"
              title={this.$t("VIEW")}
              onClick={() => this.previewShow(record)}
            >
              <a-icon
                class="operation-icon text-edit-blue text-15"
                type="zoom-in"
              />
            </span>
          ),
        (h, { record }) =>
          this.hasAuth("EPROPEL_MSG:ENABLED") && (
            <span
              class="text-primary cursor-pointer"
              title={this.$t("AUDIT")}
              onClick={() => this.handleAudit(record)}
            >
              {record.enableFlag === "Y" ? (
                <Icon
                  onClick={() =>
                    this.disableChildDictLeft(
                      record,
                      "N",
                      "DISABLED",
                      "DISABLED_DATA_INFO",
                      "DISABLE_SUCCESS"
                    )
                  }
                  type="icon-ins-stop"
                  size={15}
                  style="color:#d45f5f;cursor: pointer;"
                  title={this.$t("DISABLED")}
                />
              ) : (
                <Icon
                  onClick={() =>
                    this.disableChildDictLeft(
                      record,
                      "Y",
                      "ENABLED",
                      "ENABLED_DATA_INFO",
                      "ENABLE_SUCCESS"
                    )
                  }
                  type="icon-ins-check-circle"
                  size={15}
                  style="color:#0ea8d0;cursor: pointer;"
                  title={this.$t("ENABLED")}
                />
              )}
            </span>
          ),
        //  icon-ins-check-circle
        this.hasAuth("EPROPEL_MSG:DELETE") && "delete",
      ],
      // 表格的配置项
      tableColumns: [
        {
          dataIndex: "msgCode",
          align: "left",
          width: 180,
          sorter: true,
          ellipsis: true,
          title: () => this.$t("INFOCODE"), // 编码
        },
        {
          dataIndex: "msgName",
          align: "left",
          width: 180,
          title: () => this.$t("INFONAME"), // 消息名称
          ellipsis: true,
          sorter: true,
        },
        {
          dataIndex: "remark",
          align: "left",
          sorter: false,
          width: 600,
          title: () => this.$t("REMARK"), // 备注
          ellipsis: true,
        },
        {
          dataIndex: "updateBy", // 更新人
          title: () => this.$t("COLUMN:COMMON:UPDATEBY"),
          width: 180,
          sorter: true,
          ellipsis: true,
        },
        {
          dataIndex: "updateTime", // 更新时间
          title: () => this.$t("UPDATE_TIME"),
          width: 180,
          sorter: true,
          ellipsis: true,
        },
      ],
      interval: 10,
    };
  },
  computed: {
    languages() {
      return this.$store.state.app.languages || [];
    },
    rowSelection() {
      return {};
    },
    locale() {
      return this.$store.state.app.locale;
    },
    // 表格搜索配置项
    queryFormItem() {
      return {
        msgCode: {
          label: () => this.$t("INFOCODE"), // 编码
          itemType: "input",
        },
        msgName: {
          label: () => this.$t("INFONAME"), // 名称
          itemType: "input",
        },
      };
    },
    rules() {
      return {};
    },
  },
  created() {
    // this.init();
  },
  mounted() {
    // this.afterChange(0);
  },
  methods: {
    init() {
      const params = {
        page: 1,
        size: 10,
        msgCode: this.queryForm.infoCode,
        msgName: this.queryForm.infoName,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epropelmsg/search`, {
          params,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = parseFloat(res.data.data.total);
        });
    },
    closePreview() {
      this.preViewShowFlag = false;
    },
    previewShow(row) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epropelmsg/${row.id}`, {})
        .then((res) => {
          if (res.data.success) {
            this.preViewData = res.data.data.msgItems;
            this.preViewShowFlag = true;
          }
        });
    },
    disableChildDictLeft(row, state, a, b, tips) {
      this.$confirm({
        title: this.$t(a),
        content: this.$t(b),
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "exclamation-circle",
        onOk: () => {
          // eslint-disable-next-line no-param-reassign
          row.enableFlag = state;
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epropelmsg/enable/${row.id}/${state}`
            )
            .then((res) => {
              this.$message.success(this.$t(tips));
              this.$refs.MomTable?.query();
            });
        },
      });
    },
    handleAudit(state) {},
    // 查询数据字典
    beforeSearch() {},
    // 重置
    handleReset() {
      this.$refs.MomTable?.query();
    },
    // 后台分页查询
    searchPageData(params) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epropelmsg/search`, {
          params,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = parseFloat(res.data.data.total);
        });
    },
    // 点击新增
    handleAdd() {
      this.$router.push({
        path: "/epropel/infoManage/add",
      });
    },
    // 点击表格行内的编辑
    handleEdit(row) {
      this.$router.push({
        path: "/epropel/infoManage/edit",
        query: {
          id: row.id,
          msgCode: row.msgCode,
        },
      });
    },
    // 点击弹框的保存
    handleSave(status) {},
    handDelete() {},
    // 点击表格行内的删除
    handleDelete(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.$axios
            .delete(`${ApiConstant.PREFIX_CORE}/api/epropelmsg/${row.id}`)
            .then((res) => {
              this.$message.success(this.$t("SUBMITTED_FOR_DELETION"));
              this.page = 1;
              this.$refs.MomTable?.query();
            });
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .cursor-pointer {
  cursor: pointer;
}
/deep/ .ant-modal-footer {
  padding: 10px 16px;
  text-align: right;
  background: transparent;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 4px 4px;
  display: none;
}
.no_data_div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  span {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin-top: 12px;
  }
}
.no_data {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}
</style>
