<template>
  <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="类型" v-if="!form.releId">
        <el-radio-group v-model="form.type">
          <el-radio :label="item.value" v-for="item in typeList" :key="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="字典描述" prop="value">
        <el-input v-model="form.value" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="字典标签" prop="dictName">
        <el-input v-model="form.dictName" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { dict } from "@/api/setting";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        id: "",
        releId: '',
        dictName: "",
        value: "",
        name: "",
        type: 'common',
        status: 1,
        sort: 0
      },
      typeList: [
        {
          value: 'common',
          label: '通用'
        },
        {
          value: 'home',
          label: '首页'
        },
        {
          value: 'hot',
          label: '热销'
        }
      ],
      resetForm: "",
      rules: {
        dictName: [
          {
            required: true,
            message: " ",
            trigger: "blur"
          }
        ],
        value: [
          {
            required: true,
            message: " ",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: " ",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.resetForm = { ...this.form };
  },
  methods: {
    onSubmitHandle() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true
            this.form.shopId = localStorage.getItem("shopId");
            this.form.releId && (this.form.type = '')
            let res = await dict(this.form, this.form.id ? "put" : "post");
            this.$emit("success", res);
            this.close();
            this.$notify({
              title: "成功",
              message: `${this.form.id ? "编辑" : "添加"}成功`,
              type: "success"
            });
            this.loading = false
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
    show(obj) {
      // console.log(obj)
      this.dialogVisible = true;
      if (obj && obj.pid) {
        this.form.releId = obj.pid;
      }
      if (obj && obj.id) {
        this.form = { ...obj };
      }
    },
    close() {
      this.dialogVisible = false;
    },
    reset() {
      this.form = { ...this.resetForm };
    }
  }
};
</script>
