<template>
  <div>
    <el-dialog :title="title || (isBatchFreeze ? '批量冻结会员' : '冻结会员')" 
    :visible.sync="visible" width="600px" @close="onClose"
    :close-on-click-modal="false" :close-on-press-escape="false">
      <div v-if="isBatchFreeze" class="freeze-tips">
        <span>当前已选择</span>
        <span class="count"> {{ count }} </span>
        <span>位未冻结的会员</span>
      </div>
      <el-form :model="submitData" ref="submitForm" :rules="rules">
        <el-form-item label="冻结原因" prop="frozenType" required>
          <el-select v-model="submitData.frozenType" placeholder="" :disabled="isAbnormalFreeze" 
            style="width: 550px;">
            <el-option label="异常冻结" :value="1"></el-option>
            <el-option label="会员主动冻结" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原因备注" prop="remark" required>
          <el-input v-model="submitData.remark" placeholder="请输入原因备注" maxlength='20' 
          show-word-limit></el-input>
        </el-form-item>
      </el-form>

      <el-row type="flex" justify="end">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="sure('submitForm')" :loading="load">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FreezeDialog',
  components: {},
  props: {
    submit: {
      type: Function
    },
    visible: false,
    count: 0,
    isBatchFreeze: false,// 是否批量冻结
    title: '',
    isAbnormalFreeze: false,
  },
  data() {
    return {
      load: false,
      rules:{
        remark:{ required: true, message: '请输入原因备注' }
      },
      submitData:{
        frozenType: 1,
        remark: '',
      },
    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false);
    },
    sure(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.load = true;
            this.submit && this.submit(this.submitData,()=>{
              this.load = false;
            });
            this.$emit('submit', this.submitData);
          } else {
            return false;
          }
        });
      // console.log(this.dateValue,getTime(this.dateValue[0]));
    }
  },
  watch: {
    visible(){
      this.load = false;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body{
  padding-top: 14px;
}
  .freeze-tips{
    margin-bottom: 20px;
    color: #6B6D71;
    font-size: 14px;
    .count{
      font-size:16px;
      color: #37383A;
      font-weight: 500;
    }
  }
</style>
