<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: false,
      }"
      @beforeSearch="beforeSearch"
      @search="searchPageData"
      @reset="handleReset"
    >
      <template slot="status" slot-scope="text">
        <span>
          {{ getAttrValue(statusList, text) }}
        </span>
      </template>
    </MomTable>
  </div>
</template>

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

export default {
  components: {
    Icon,
  },
  data() {
    return {
      pushForm: {
        unsoftwareCode: "",
        eqpcode: "",
        chooseinfo: "",
      },
      megaDrawerVisible: false,
      autoplay: true,
      preViewShowFlag: false,
      tableData: [],
      page: 1, // 页码
      total: 0, // 每页个数
      title: "", // 弹框的标题
      drawerVisible: false, // 弹框的显示 隐藏
      statusList: [],
      queryForm: {
        // 設備编码
        eqpCode: "",
        // 设备名称
        eqpName: "",
        startTime: "", // this.formatDateTime(new Date()),
        endTime: "",
      },
      actionButtons: [],
      // 表格的配置项
      tableColumns: [
        {
          dataIndex: "eqpCode",
          align: "left",
          width: 180,
          sorter: true,
          ellipsis: true,
          title: () => this.$t("EQPCODE"), // 设备编码
        },
        {
          dataIndex: "eqpName",
          align: "left",
          width: 180,
          title: () => this.$t("EQUIPMENT_NAME"), // 设备名称
          ellipsis: true,
          sorter: true,
        },
        {
          dataIndex: "eqpSn",
          align: "left",
          sorter: true,
          width: 260,
          ellipsis: true,
          title: () => this.$t("UNSOFTWARECODE"), // 硬件序列号
        },
        {
          dataIndex: "msgCode",
          align: "left",
          width: 180,
          sorter: true,
          ellipsis: true,
          title: () => this.$t("INFOCODE"), // 编码
        },
        {
          dataIndex: "msgName",
          align: "left",
          width: 260,
          title: () => this.$t("INFONAME"), // 消息名称
          ellipsis: true,
          sorter: true,
        },
        {
          dataIndex: "status",
          align: "left",
          sorter: true,
          width: 180,
          title: () => this.$t("PUSH_RESULT"), // 推动结果
          scopedSlots: { customRender: "status" },
          ellipsis: true,
        },
        {
          dataIndex: "createTime", // 推送时间
          title: () => this.$t("PUSH_TIME"),
          width: 180,
          sorter: true,
          ellipsis: true,
        },
      ],
    };
  },
  computed: {
    pushFormRules() {
      // eslint-disable-next-line
      const temp_obj = {
        chooseinfo: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
      };
      // eslint-disable-next-line
      return temp_obj;
    },
    languages() {
      return this.$store.state.app.languages || [];
    },
    rowSelection() {
      return {};
    },
    locale() {
      return this.$store.state.app.locale;
    },
    // 表格搜索配置项
    queryFormItem() {
      return {
        eqpCode: {
          label: () => this.$t("EQPCODE"), // 编码
          itemType: "input",
        },
        eqpName: {
          label: () => this.$t("EQUIPMENT_NAME"), // 名称
          itemType: "input",
        },
        startTime: {
          itemType: "date",
          showTime: true,
          format: "YYYY-MM-DD HH:mm:ss",
          valueFormat: "YYYY-MM-DD HH:mm:ss",
          label: () => this.$t("START_TIME"),
        },
        endTime: {
          itemType: "date",
          showTime: true,
          format: "YYYY-MM-DD HH:mm:ss",
          valueFormat: "YYYY-MM-DD HH:mm:ss",
          label: () => this.$t("END_TIME"),
        },
      };
    },
    rules() {
      return {};
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlePushSave() {},
    handlePushCancel() {
      this.preViewShowFlag = false;
    },
    handleImportSave() {},
    handleImportCancel() {
      this.megaDrawerVisible = false;
    },
    closePreview() {
      this.preViewShowFlag = false;
    },
    previewShow(row) {
      this.preViewShowFlag = true;
    },
    disableChildDictLeft(row, state) {
      row.state = !row.state;
    },
    handleAudit(state) {},
    // 查询数据字典
    beforeSearch() {
      return Promise.all([
        this.getDictByCode(`DIC:CORE:SYS_DATA_PUSH_STATUS`), // 状态
      ]).then(([enableStatusRes]) => {
        this.statusList = enableStatusRes.data.data;
      });
    },
    // 重置
    handleReset() {
      this.$refs.MomTable?.query();
    },
    // 后台分页查询
    searchPageData(params) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epropeltasklog/search`, {
          params,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = parseFloat(res.data.data.total);
        });
    },
    // 点击新增
    handleAdd() {
      this.megaDrawerVisible = true;
    },
  },
};
</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;
}
</style>
