<template>
  <div class="app-container">
    <xy-table ref="tableRef" :table="table" :columns="columns">
      <template #isShow="{ scope }">
        {{scope.row.isShow === '1' ? '否' : '是'}}
      </template>
    </xy-table>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="是否前端展示" prop="isShow">
          <el-radio-group v-model="form.isShow">
            <el-radio
              v-for="dict in dict.type.classify_isshow"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listClassify, getClassify, addClassify, updateClassify, delClassify } from '@/api/coupon/classify'

export default {
  name: 'Classify',
  dicts: ['classify_isshow'],
  data() {
    return {
      open: false,
      title: undefined,
      form: {
        id: undefined,
        categoryName: undefined,
        isShow: '0'
      },
      rules: {
        categoryName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" }
        ]
      },
      table: {
        rowKey: 'id',
        data: [],
        firstColumn: { type: 'index' },
        hiddenLine: true,
        // 表格内操作列
        operator: [
          {
            text: '编辑',
            icon: 'el-icon-edit',
            fun: (row) => this.handleEdit(row)
          },
          {
            text: '删除',
            icon: 'el-icon-delete',
            fun: (row) => this.handleDelete(row)
          }
        ],
        // 操作列样式
        operatorConfig: {
          width: 140
        },
        // 表格外操作
        toolbar: [
          {
            text: '新增分类',
            icon: 'el-icon-plus',
            type: 'primary',
            fun: () => this.handleAdd()
          }
        ],
        // 分页配置
        page: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        },
        // 搜索表单配置
        // searchForm: {
        //   formLabelWidth: '90px',
        //   formData: {
        //     param1: undefined
        //   },
        //   fieldList: [
        //     { prop: 'param1', label: '决策流名称', type: 'input' },
        //     { prop: 'param2', label: '决策流状态', type: 'input' }
        //   ],
        //   // 相关下拉列表
        //   listOptions: {

        //   }
        // },
        // 请求
        request: listClassify
      },
      columns: [
        { prop: 'categoryName', label: '分类名称' },
        { prop: 'couponNum', label: '关联优惠券数量' },
        { prop: 'isShow', label: '是否前端展示', slotName: 'isShow' },
      ]
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.$refs.tableRef.getData()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增分类";
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.reset();
      const id = row.id
      getClassify(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改分类";
      });
    },
    /** 删除按钮操作 */
    async handleDelete(row) {
      const id = row.id
      const confirmResult = await this.$confirm(
        '是否确认删除当前记录？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 用户取消了删除的 操作
      if (confirmResult !== 'confirm') {
        // this.$message.info('已取消删除！')
        return
      }
      const res = await delClassify(id)
      if (res.code !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功!')
      this.getList()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateClassify(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addClassify(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        categoryName: undefined,
        isShow: '0'
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  }
}
</script>

<style>

</style>
