<template>
  <div>
    <base-layout
      ref="baseLayout"
      @onFuncBtn="onFuncBtn"
      :querySwitch="true"
      :searchList="requirementList"
      @search="handleSearchEvent"
      :isPage="true"
      @pageChange="handlePageChange"
      :bodyHight="''"
    >
      <div slot="main" slot-scope="{ tableHeight }">
        <base-table
          ref="baseTable"
          :showIndex="true"
          :funWidth="215"
          :funData="funData"
          @onFunc="onFunc"
          :tabLoading.sync="tabLoading"
          :tableHeight="'50vh'"
          :tableData="tableData"
          :tableColumn="tableColumnData"
        >
          <template v-slot:status="{ row }">
            <div style="width: 100%">
              <span v-if="row.status == '1'">待发送</span>
              <span v-else-if="row.status == '2'">发送中</span>
              <span v-else-if="row.status == '3'">发送成功</span>
              <span v-else-if="row.status == '4'">发送失败</span>
              <span v-else></span>
            </div>
          </template>
          <template v-slot:errorStatus="{ row }">
            <div style="width: 100%">
              <span>{{
                  row.errorStatus === "1" ? "需要重新发送" : "不需要重新发送"
                  }}</span>
            </div>
          </template>
        </base-table>
      </div>
    </base-layout>
    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import rightDialog from "./rightDialog";
import configData from "./configData";
import {authApi} from "@/api/apis/auth";
import {getApiModuleApi} from "@/api/apiChunks/index.js";

export default {
  components: {
    baseLayout,
    baseTable,
    rightDialog,
  },
  props: {
    receiveApi: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      buttonList: [
        {
          menuName: "刷新",
          icon: "el-icon-refresh",
          btnFunction: "resetLoad",
        },
      ], //按钮组
      requirementList: [
        {
          placeholder: "发送者应用",
          prop: "sendApp",
          tag: "elSelect",
          options: [],
          optionValue: "id",
          optionLabel: "name",
        },
        {
          placeholder: "状态",
          prop: "status",
          tag: "elSelect",
          options: [
            {id: "1", label: "待发送"},
            {id: "2", label: "发送中"},
            {id: "3", label: "发送成功"},
            {id: "4", label: "发送失败"},
          ],
          error_status_dist: {
            1: "需要重新发送",
            2: "不需要重新发送",
          },
          optionValue: "id",
          optionLabel: "label",
        },
      ], //查询模板list
      tabLoading: false,
      tableColumnData: configData.tableColumnData, //表头数据
      funData: [
        {
          color: "#6a9af1",
          text: "查看",
        },
      ],
      tableData: [], //表格数据
      pageModel: {
        pageNum: 1,
        pageSize: 10,
      },
      queryModel: {
        theme: "",
        sendApp: "",
        sendApi: "",
        receiveApp: "",
        receiveApi: "",
        status: "",
      },
    };
  },
  created() {
    this.GetMessageLogTableData();
    this.initSelect()
  },
  methods: {
    // 表格数据
    async GetMessageLogTableData() {
      this.tabLoading = true;
      let param = {
        ...this.pageModel,
        ...this.queryModel,
        receiveApp: this.$route.query.id,
        receiveApi: this.receiveApi
      };
      let res = await authApi(
        "sysApplicationService",
        "application",
        "queryAppApiLog",
        "",
        param
      );
      this.tabLoading = false;
      console.log(res, 112312312)
      if (res.status == "200") {
        this.tableData = res.attribute.list;
        this.$refs.baseLayout.setPageTotal(res.attribute.total);
      }
    },
    // 分页变化
    handlePageChange(val) {
      this.pageModel.pageNum = val.pageIndex;
      this.pageModel.pageSize = val.pageSize;
      this.GetMessageLogTableData();
    },
    // 按钮组
    onFuncBtn(btn) {
      this[btn.btnFunction]();
    },
    // 表格操作事件 查看 编辑 重新推送
    onFunc(index, row) {
      // 查看
      if (index == 0) {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("show", row);
      }
      // 编辑
      if (index == 1) {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("edit", row);
      }
      // 重新推送
      if (index == 2) {
        this.$confirm("确认重新发送吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.openLoading("detail");
            this.messageResendData(row.id);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消重新发送",
            });
          });
      }
    },
    async messageResendData(id) {
      let param = {
        id: id,
      };
      let res = await authApi(
        "sysMessageManageLogService",
        "messageManage",
        "resendData",
        "",
        param
      );
      if (res.status == "200") {
        this.$vmNews("重新发送成功！", "success");
        this.resetTable();
      }
    },
    // 重置表格
    resetTable() {
      this.pageModel.pageNum = 1;
      this.$refs.baseLayout.pageClear();
      this.GetMessageLogTableData();
    },
    // 搜索
    handleSearchEvent(form) {
      let data = this.$refs.baseLayout.ruleForm;
      this.queryModel.theme = data.theme;
      this.queryModel.sendApp = data.sendApp;
      this.queryModel.sendApi = data.sendApi;
      this.queryModel.receiveApp = data.receiveApp;
      this.queryModel.receiveApi = data.receiveApi;
      this.queryModel.status = data.status;
      this.resetTable();
    },
    async initSelect() {
      const res = await getApiModuleApi({
        tl: "sysApplicationService",
        as: "application",
        dj: "queryApp"
      }, {
        "pageNum": 1,
        "pageSize": 999
      })
      this.requirementList[0].options = res.attribute.list
    },
    // async onElSelect(val, b, c, d, row) {
    //   if (row.prop === 'sendApp') {
    //     this.requirementList[1].options = []
    //     this.$set(this.$refs.baseLayout.ruleForm, 'sendApi', "")
    //     const res = await getApiModuleApi({
    //       tl: "sysApplicationService",
    //       as: "application",
    //       dj: "queryAppApi",
    //     }, {
    //       "pageNum": 1,
    //       "pageSize": 999,
    //       appId: val
    //     })
    //     this.requirementList[1].options = res.attribute.list
    //     console.log(res)
    //   }
    // }
  },
};
</script>

<style scoped>
.clickTitle {
  color: #409eff;
  cursor: pointer;
}
</style>
