<template>
  <el-dialog title="销毁卡券" :visible.sync="show" width="700px" :before-close="close">
    <div v-loading="loading">
      <el-alert class="mb10" title="卡券销毁将不可撤回，请谨慎操作" type="warning" show-icon :closable="false"></el-alert>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="pt20">
        <el-form-item label="选择卡券" prop="couponId">
          <!-- 只有卡券销毁处传isDestory这个参数 -->
          <dm-card-select v-if="show" ref="cardSelect" class="cardSelect" :member-card-id="currentAreaId" @selectData="selectData" fix-member-card />
        </el-form-item>
        <el-form-item label="销毁方式" prop="destroyMode">
          <el-radio-group :disabled="type !== 'add'" v-model="ruleForm.destroyMode">
            <el-radio :label="0">全部销毁</el-radio>
            <el-radio :label="1">部分销毁</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="type === 'add' && ruleForm.destroyMode == 1" label="导入券码文件" prop="fileId">
          <div>
            <div v-if="ruleForm.fileId" class="inline-block">已导入</div>
            <dm-upload-file
              class="btn-upload"
              :disabled="!ruleForm.destroyMode"
              v-if="!ruleForm.fileId"
              action="/api-welfare/destroy-plugin/import-destroy-code"
              width="auto"
              trigger-text="上传"
              accept=".csv"
              :show-file-list="false"
              :limit="1"
              :headers="{ isControl: true }"
              :data="fileData"
              style="display:inline-block;">
              <span slot="tip" style="display:none;">tips</span>
            </dm-upload-file>
            <el-button type="text" class="ml20" @click="download">下载文件模板</el-button>
          </div>
          <p class="gray03 fz12 line-height1 mt10">券码数量单次最多不超过 5000 条</p>
          <p class="gray03 fz12 line-height1 mt10">填写示例：‘123456(英文单引号'+券码编号文本形式)</p>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
      <el-button v-if="type === 'add'" type="primary" @click="submit">确认销毁</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { _debounce } from '@/utils/index';
import commonApi from '@/api/common.js';
import gicCardApi, { importDestoryCode, downloadDestroyCodeTemplate } from '@/api/gic-card.js';
const { getRelationId } = commonApi;
const { saveCoupDestoryPlan } = gicCardApi;
export default {
  name: 'DestoryDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add' // add edit
    },
    destoryItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 部分销毁必传
    const checkFileId = (rule, value, callback) => {
      if (this.ruleForm.destroyMode && !value) {
        return callback(new Error(rule.message));
      }
      callback();
    };

    return {
      loading: false,
      uploadUrl: importDestoryCode,
      ruleForm: {
        destroyPlanId: '',
        couponId: '',
        cardName: '',
        fileId: '',
        destroyMode: 0
      },
      fileData: {
        destroyPlanId: '',
      },
      rules: {
        couponId: [ { required: true, message: '请选择卡券', trigger: 'change' } ],
        destroyMode: [ { required: true, message: '请选择销毁方式', trigger: 'change' } ],
        fileId: [ { validator: checkFileId, message: '请上传文件', trigger: 'change' } ]
      }
    };
  },
  methods: {
    download() {
      window.location = downloadDestroyCodeTemplate;
    },
    close() {
      this.$refs.ruleForm.resetFields();
      this.$emit('update:show', false);
    },
    submit: _debounce(function() {
      if (this.loading) {
        return;
      }
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        }
        this.loading = true;
        let params = { ...this.ruleForm, memberCardId: this.currentAreaId };
        delete params.fileId;
        saveCoupDestoryPlan(params)
          .then(res => {
            this.loading = false;
            this.$message({ message: '操作成功', type: 'success' });
            this.close();
            this.$emit('refresh');
          })
          .finally(() => {
            this.loading = false;
          });
      });
    }),
    // 卡券选择器
    selectData(val) {
      this.ruleForm.couponId = val.couponId || '';
      this.$refs.ruleForm.validateField('couponId');
    },
    // ****上传图片***
    upload() {
      this.$refs.fileUpload.$el.querySelector('input').click();
    },
    backImg(res) {
      this.ruleForm.fileId = new Date().getTime(); // 代表以及上传过文件
      this.$refs.ruleForm.validateField('fileId');
    }
  },
  watch: {
    'ruleForm.destroyMode'() {
      this.$refs.ruleForm.validateField('fileId');
    },
    show(val) {
      if (val) {
        if (this.type === 'add') {
          this.loading = true;
          getRelationId({})
            .then(res => {
              this.loading = false;
              this.ruleForm.destroyPlanId = res.result;
              this.fileData.destroyPlanId = res.result;
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.ruleForm = { ...this.destoryItem };
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.cardSelect /deep/ {
   .el-button {
    width: auto !important;
  }
  .el-icon-plus {
    display: none;
  }
  .reveal .card img.flag {
    display: none;
  }
}
/deep/ .dashed-btn .el-button {
  width: 350px;
  border-style: dashed;
  border-radius: 2px;
  &:not(.is-disabled) {
    &:hover {
      border-color: $blue;
      color: $blue;
    }
    background: white;
    color: #606266;
    border-color: #c0c4cc;
  }
  &.is-disabled {
    color: #c0c4cc;
  }
}
.btn-upload {
  /deep/ {
    .el-upload .el-button {
      background-color: #fff;
      color: #303133;
      border-style: dashed;
      border-color: #C4C6CF;
    }
    .el-button:hover {
      color: #2f54eb;
      border-color: #2f54eb;
    }
    .upload-tip {
      display: none;
    }
    // .upload-file {
    //   width: auto !important;
    // }
  }
}
</style>
