<template>
  <!-- 添加或修改类型对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    class="common-dialog"
    width="700px"
    :before-close="handleCLose"
    @close="handleCLose"
    destroy-on-close
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="类型名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入类型名称"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="类型编码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入类型编码"
              maxlength="50"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属店铺" prop="storeId">
            <el-select
              v-model="form.storeId"
              style="width: 260px"
              placeholder="所属店铺，空则为公共所有"
            >
              <el-option
                :key="0"
                label="公共所有"
                v-if="!this.$store.getters.storeId"
                :value="0"
              />
              <el-option
                v-for="storeInfo in storeList"
                :key="storeInfo.id"
                :label="storeInfo.name"
                :value="storeInfo.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" :min="0" />
            <div class="form-tips">提示：数值越小，排行越靠前</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注信息">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio key="A" label="A" value="A">启用</el-radio>
              <el-radio key="N" label="N" value="N">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSubmit">确定</el-button>
      <el-button @click="handleCLose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { saveRaffleType } from '@/api/raffle'

export default {
  name: 'raffleTypeForm',
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    storeList: {
      type: [Array],
      default: () => [],
    },
    raffleTypeInfo: {
      type: [Object],
      default: () => null,
    },
  },
  watch: {
    showDialog(value) {
      if (value && this.raffleTypeInfo) {
        this.form = { ...this.raffleTypeInfo }
      } else {
        this.form = {
          name: '',
          code: '',
          description: '',
          storeId: '',
          sort: 0,
          status: 'A',
        }
      }
    },
  },
  data() {
    return {
      title: '新增抽奖类型',
      form: {
        name: '',
        code: '',
        description: '',
        storeId: '',
        sort: 0,
        status: 'A',
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 200,
            message: '名称长度必须介于2 和 200 之间',
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '编码不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '编码长度必须介于2 和 50 之间',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    doSubmit() {
      const app = this
      const param = app.form
      saveRaffleType(param).then((response) => {
        if (response) {
          app.$modal.msgSuccess('提交成功！')
          app.handleCLose()
        }
      })
    },
    handleCLose() {
      this.$emit('closeDialog', 'typeDialog')
    },
  },
}
</script>
