<template>
  <el-dialog title="卡券单独设置" :visible.sync="dialogVisible" width="1100px" @close="handleClose ">
    <div style="max-height:650px;overflow-y:auto;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="选择卡券" prop="couponId">
          <dm-card-select :before-submit="beforeSubmit" v-if="dialogVisible" :read-only="disabled" v-bind="cardSelectParams" class="send" :member-card-id="currentAreaId" @selectData="selectData" fix-member-card :unuse-list="unuseList" />
        </el-form-item>
        <shelf-limit ref="shelfLimit2" />
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import shelfLimit from './shelf-limit';
export default {
  name: 'ShelfDialog',
  components: {
    shelfLimit
  },
  inject: [ 'parentDisabled' ],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    timeType2List: {
      type: Array,
      default: () => []
    },
    unuseList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ruleForm: {
        couponId: '',
        couponName: ''
      },
      idx: '', // 不为'' 就是编辑
      rules: {
        couponId: [ { required: true, message: '请选择卡券', trigger: 'change' } ],
      },
    };
  },
  methods: {
    add() {
      this.$nextTick(() => {
        this.$refs.shelfLimit2.add();
      });
    },
    edit(data, idx) {
      this.idx = idx;
      this.ruleForm.couponId = data.couponId;
      this.$nextTick(() => {
        this.$refs.shelfLimit2.edit(data);
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          this.$tips({ message: '表单有错误，请检查后提交', type: 'error' });
          return;
        } else {
          let data = this.$refs.shelfLimit2.dealData();
          if(!data) {
            return;
          }
          this.$emit('saveItem', this.idx, { ...data, ...this.ruleForm });
          this.handleClose();
        }
      });
    },
    handleClose() {
      // 重置数据
      this.idx = '';
      this.$refs.shelfLimit2.clean();
      this.$refs.ruleForm.resetFields();
      this.$emit('update:dialogVisible', false);
    },
    // 卡券选择器
    beforeSubmit(id) {
      if(this.timeType2List.map(v => v.couponId).includes(id)) {
        this.$tips({ message: '该卡券已存在', type: 'error' });
        return false;
      }
      return true;
    },
    selectData(data, idx) {
      this.ruleForm.couponId = data.couponId || '';
      this.ruleForm.couponName = data.cardName || '';
      this.$refs.ruleForm.validateField('couponId');
    },
  },
  computed: {
    disabled() {
      return this.parentDisabled();
    },
    cardSelectParams() {
      return this.idx !== '' ? { couponId: this.ruleForm.couponId } : {};
    }
  },
};
</script>

<style lang="scss" scoped>
.block {
  display: flex;
  align-items: flex-end;
}
</style>