<template>
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @open="onOpen">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户" prop="userId">
        <user-input v-model="form.userId"/>
      </el-form-item>
      <el-form-item label="店铺" prop="storeId">
        <store-input v-model="form.storeId" @change="onChangeStore"/>
      </el-form-item>
      <el-form-item label="会员等级" prop="levelId">
        <vip-level-input v-model="form.levelId" :before-open="beforeOpenVipLevel" :query="vipLevelQuery"/>
      </el-form-item>
      <el-form-item label="时效类型" prop="expireType">
        <el-radio-group v-model="form.expireType" style="width: 100%">
          <el-radio
            v-for="dict in dict.type.vip_expire_type"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="有效期" prop="expireTime" v-if="form.expireType === VipExpireType.TIME">
        <el-date-picker
          clearable
          v-model="form.expireTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择有效期"
          style="width: 100%"
        />
      </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>
</template>

<script>
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import StoreInput from '@/components/Business/Store/StoreInput.vue'
import VipLevelInput from '@/components/Business/VipLevel/VipLevelInput.vue'
import { addVip, getVip, updateVip } from '@/api/ss/vip'
import { $editDialog } from '@/utils/mixins'
import { VipExpireType } from '@/utils/constants'

export default {
  name: "VipEditDialog",
  dicts: ['vip_expire_type'],
  mixins: [$editDialog],
  components: { VipLevelInput, StoreInput, UserInput },
  props: {
    rules: {
      type: Object,
      default: () => ({
        userId: [
          { required: true, message: "用户不能为空", trigger: "change" }
        ],
        levelId: [
          { required: true, message: "会员等级不能为空", trigger: "change" }
        ],
        expireTime: [
          { required: true, message: '有效期不允许为空', trigger: 'change'}
        ],
        expireType: [
          { required: true, message: '有效期类型不允许为空', trigger: 'change'}
        ]
      })
    }
  },
  data() {
    return {
      VipExpireType
    }
  },
  computed: {
    vipLevelQuery() {
      return {
        mchId: this.form.storeMchId
      }
    }
  },
  methods: {
    getDetail() {
      getVip(this.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改会员";
      });
    },
    // 表单重置
    reset() {
      this.title = "新增会员";
      this.form = {
        id: null,
        userId: null,
        storeId: null,
        levelId: null,
        expireTime: null,
        createTime: null,
        storeMchId: null,
        expireType: VipExpireType.FOREVER
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateVip(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('success');
            });
          } else {
            addVip(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('success');
            });
          }
        }
      });
    },
    onChangeStore(store) {
      this.form.storeMchId = store.userId;
    },
    beforeOpenVipLevel() {
      if (this.form.storeMchId == null) {
        this.$message.warning("请先选择店铺")
        return false;
      }
      return true;
    },
  }
}
</script>
