<template>
  <div class="app-container">
    <vxe-grid ref="gridRef" v-bind="gridConfig" @toolbar-button-click="onToolbarBtnClick">
      <template #op_t_d="{ row }">
        <vxe-button type="text" status="primary" @click="onEdit(row)">编辑</vxe-button>
        <vxe-button type="text" status="danger" @click="onDelete(row)">删除</vxe-button>
      </template>
    </vxe-grid>
    <vxe-modal
      v-model="visible"
      type="modal"
      v-bind="modalConfig"
      :rules="formRules"
      width="600"
      @close="onCancel"
    >
      <template #title>{{ dialogTitle }}</template>
      <vxe-form :data="formData" ref="formRef" :rules="formRules" title-colon :span="24">
        <vxe-form-item title="回访类型" field="name">
          <template #default="{ data }">
            <vxe-input v-model="data.name" placeholder="请输入回访类型" maxlength="10"></vxe-input>
          </template>
        </vxe-form-item>
      </vxe-form>
      <template #footer>
        <div class="btn-footer">
          <vxe-button style="margin-right: 10px" @click="onCancel">取消</vxe-button>
          <vxe-button status="primary" @click="onSubmit" :loading="isLoading">保存</vxe-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import { commonGridConfig1 } from "@/config/vxeGrid";
import {
  getCallbackCategoryListApi,
  updateCallbackCategoryApi,
  deleteCallbackCategoryListApi,
} from "@/api/dictManage/returnType";
import { modalConfigMap } from "@/config/vxeModal";
import { to } from "await-to-js";
export default {
  name: "ReturnType",
  data() {
    return {
      gridConfig: {
        ...commonGridConfig1,
        columns: [
          {
            type: "seq",
            title: "序号",
            width: 100,
          },
          {
            field: "name",
            title: "类型名称",
            minWidth: 200,
          },
          {
            field: "createTime",
            title: "创建时间",
            minWidth: 200,
          },
          {
            field: "operation",
            title: "操作",
            width: 200,
            fixed: "right",
            slots: {
              default: "op_t_d",
            },
          },
        ],
        proxyConfig: {
          response: {
            result: "data.list",
            total: "data.page.total",
          },
          ajax: {
            query: ({ form, page }) => {
              const { currentPage: pageNum, pageSize } = page;
              const params = {
                pageNum,
                pageSize,
              };
              return getCallbackCategoryListApi(params)
            },
          },
        },
        toolbarConfig: {
          buttons: [
            {
              type: "button",
              status: "primary",
              name: "新增类型",
              code: "custom_add",
              icon: "vxe-icon-add",
              buttonRender: {
                props: {
                  className: "mr-10",
                },
              },
            },
          ],
        },
      },
      modalConfig: {
        ...modalConfigMap.get("default"),
      },
      visible: false,
      dialogTitle: "新增回访类型",
      isLoading: false,
      formData: {
        id: undefined,
        name: null,
      },
      formRules: {
        name: [
          {
            required: true,
            message: "请输入回访类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onToolbarBtnClick({ code, button, $grid }) {
      console.log("code=", code);
      if (code === "custom_add") {
        this.dialogTitle = "新增回访类型";
        this.visible = true;
      }
    },
    onEdit(row) {
      this.dialogTitle = "编辑回访类型";
      this.formData = {
        ...row,
      };
      this.visible = true;
    },
    onDelete(row) {
      this.$modal.confirm("是否确认删除？").then(async () => {
        const [err] = await to(
          deleteCallbackCategoryListApi({
            id: row.id,
          })
        );
        if (!err) {
          this.$message.success("操作成功");
          await this.$nextTick();
          this.$refs.gridRef.commitProxy("query");
        }
      });
    },
    async onCancel() {
      console.log("onCancel");
      await this.resetForm();
      this.visible = false;
    },
    onSubmit() {
      this.$refs.formRef.validate(async (isValid) => {
        if (isValid) {
          return;
        }
        this.isLoading = true;
        const [err, res] = await to(updateCallbackCategoryApi(this.formData));
        if (!err) {
          this.$message.success("操作成功");
          await this.resetForm();
          this.visible = false;
          await this.$nextTick();
          this.$refs.gridRef.commitProxy("query");
        }
        this.isLoading = false;
      });
    },
    async resetForm() {
      this.formData = {
        id: undefined,
        name: null,
      };
      await this.$nextTick();
      this.$refs.formRef.clearValidate();
    },
  },
};
</script>
<style lang="scss" scoped>
.btn-footer {
  display: flex;
  justify-content: center;
}
</style>
