<template>
  <div>
    <base-layout
      ref="baseLayout"
      :buttonList="buttonList"
      @onFuncBtn="onFuncBtn"
      :querySwitch="true"
      :searchList="requirementList"
      @search="handleSearchEvent"
      :isPage="true"
      @pageChange="handlePageChange"
    >
      <div slot="main" slot-scope="{ tableHeight }">
        <base-table
          ref="baseTable"
          :showIndex="true"
          :funWidth="210"
          :funData="funData"
          @onFunc="onFunc"
          :tabLoading.sync="tabLoading"
          :tableHeight="tableHeight"
          :tableData="tableData"
          :tableColumn="tableColumnData"
        >
          <template #type="{ row }">
            {{ taskStatusDist[row.type] }}
          </template>
          <template #status="{ row }">
            <div>
            <el-switch
              v-model="row.status"
              :active-value="'1'"
              :inactive-value="'0'"
              active-color="#13ce66"
              style="margin-bottom: 10px"
              @change="StopMessageTemplate(row)"
            >
            </el-switch>
            </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.vue";
import { getApiModuleApi } from "@/api/apiChunks/index.js";

export default {
  components: {
    baseLayout,
    baseTable,
    rightDialog,
  },
  data() {
    return {
      buttonList: [
        {
          menuName: "新增",
          icon: "el-icon-plus",
          btnFunction: "handlerAddEvent",
        },
        {
          menuName: "刷新",
          icon: "el-icon-refresh",
          btnFunction: "resetLoad",
        },
      ], //按钮组
      requirementList: [
        {
          placeholder: "请选择消息模版",
          prop: "messageTemplateId",
          tag: "elSelect",
          options: [],
          optionValue: "id",
          optionLabel: "templateName",
        },
        {
          placeholder: "请选择应用",
          prop: "appIdList",
          tag: "elSelect",
          options: [],
          optionValue: "id",
          optionLabel: "name",
        },
      ], //查询模板list
      tabLoading: false,
      tableColumnData: [
        {
          prop: "appIdList",
          label: "应用编码",
          tooltip: true,
        },
        {
          prop: "appNameList",
          label: "应用名称",
          tooltip: true,
          width:200
        },
        {
          prop: "messageTemplateId",
          label: "消息模版编号",
          tooltip: true,
        },
        {
          prop: "templateName",
          label: "消息模版名称",
          tooltip: true,
        },
        {
          prop: "recipientNameList",
          label: "接收人",
          tooltip: true,
        },
        {
          prop: "warningAppNameList",
          label: "推送方式",
          tooltip: true,
        },
        {
          prop: "acceptMessageApiCode",
          label: "消息API",
          tooltip: true,
        },
        {
          prop: "remark",
          label: "备注",
          tooltip: true,
        },
        {
          prop: "create_time",
          label: "创建时间",
          tooltip: true,
        },
        {
          prop: "status",
          label: "状态",
          tooltip: true,
        },
      ], //表头数据
      funData: [
        {
          color: "#6a9af1",
          text: "编辑",
        },
        {
          color: "#6a9af1",
          text: "查看",
        },
        {
          color: "#ff0000",
          text: "删除",
        },
      ],
      tableData: [], //表格数据
      pageModel: {
        pageNum: 1,
        pageSize: 100,
      },
      queryModel: {
        send_count: "",
        send_datetime: "",
      },
    };
  },
  mounted() {
    this.getMessageList()
    this.getApplicationList()
    this.GetProductionTableData();
  },
  methods: {
    // 获取消息模版
    async getMessageList() {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "queryEntity",
        },
        {}
      );
      if (res.status == "200") {
        this.requirementList[0].options = res.attribute;
      }
    },
    // 获取所有应用
    async getApplicationList() {
      const res = await getApiModuleApi(
        {
          tl: "sysApplicationService",
          as: "",
          dj: "queryEntity",
        },
        {}
      );
      if (res.status == "200") {
        this.requirementList[1].options = res.attribute;
      }
    },
    onCellClick(row) {
      this.openLoading("detail");
      this.$refs.rightDialog.openDialog("show", row);
    },
    // 表格数据
    async GetProductionTableData() {
      this.tabLoading = true;
      setTimeout(() => {
        this.tabLoading = false;
      }, 5000);
      let param = {
        ...this.pageModel,
        ...this.queryModel,
      };
      const res = await getApiModuleApi(
        {
          tl: "sysWarningConfigService",
          as: "",
          dj: "queryEntityPage",
        },
        {
          ...param,
        }
      );
      this.tabLoading = false;
      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.GetProductionTableData();
    },

    // 按钮组
    onFuncBtn(btn) {
      this[btn.btnFunction]();
    },
    handlerAddEvent() {
      this.$refs.rightDialog.openDialog("add");
    },
    // 表格操作事件 查看 编辑 删除
    onFunc(index, row, item) {
      // 查看
      if (item.text === "查看") {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("show", row);
      }
      // 编辑
      if (item.text === "编辑") {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("edit", row);
      }
      // 删除
      if (item.text === "删除") {
        this.$delConfirm().then(() => {
          this.openLoading("del");
          this.productionDeleteById(row.id);
        });
      }
    },
    async productionDeleteById(id) {
      let param = {
        id: id,
      };
      const res = await getApiModuleApi(
        {
          tl: "sysWarningConfigService",
          as: "",
          dj: "deleteEntity",
        },
        {
          ...param,
        }
      );
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.resetTable();
      }
    },
    // 重置表格
    resetTable() {
      this.pageModel.pageNum = 1;
      this.$refs.baseLayout.pageClear();
      this.GetProductionTableData();
    },
    // 搜索
    handleSearchEvent() {
      let data = JSON.parse(JSON.stringify(this.$refs.baseLayout.ruleForm));
      this.queryModel = data;
      this.resetTable();
    },
    // 修改状态
    StopMessageTemplate(row) {
      row.status = row.status == "0" ? "1" : "0";
      this.$confirm(
        `您确定要${row.status == "1" ? "停用" : "启用"}该预警设置吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let status = row.status == "1" ? "0" : "1";
          let params = {
            id: row.id,
            status: status,
            messageTemplateId: row.messageTemplateId
          };
          this.changeStage(params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    async changeStage(params) {
      const res = await getApiModuleApi(
        {
          tl: "sysWarningConfigService",
          as: "",
          dj: "enableDisableEntity",
        },
        {
          ...params,
        }
      );
      if (res.status == 200) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.resetTable();
      }
    },
  },
};
</script>

<style scoped>
.clickTitle {
  color: #409eff;
  cursor: pointer;
}
::v-deep .el-switch{
  margin-bottom: 0 !important;
}
</style>
