<template>
  <el-dialog title="卡券销毁" :visible.sync="show" width="600px" :before-close="close">
    <div v-loading="loading">
      <div class="dm-title__label--tips" style="padding-bottom: 10px;"><i class="el-icon-warning pr8 warning-color"></i>卡券销毁将不可撤回，请注意确认操作。</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="pt20">
        <el-form-item label="选择卡券" prop="cardId">
          <el-button v-show="!ruleForm.cardId" @click="showCardDialog = true">选择卡券</el-button>
          <div v-show="ruleForm.cardId">
            {{ ruleForm.cardName }}
            <el-button v-if="type === 'add'" type="text" @click="cleanCard" class="ml10">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="销毁方式" prop="destoryMode">
          <el-radio-group :disabled="type !== 'add'" v-model="ruleForm.destoryMode">
            <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'" label="导入券码文件" prop="fileId">
          <div>
            <!-- eslint-disable-nextline -->
            <div v-if="ruleForm.fileId" class="inline-block">已导入</div>
            <file v-if="!ruleForm.fileId" :noUse="!ruleForm.destoryMode" needExtraParams :paramsObj="{ destoryPlanId: ruleForm.destoryPlanId }" ref="fileUpload" class="dash-btn inline-block" label="点击上传" @backImg="backImg" acceptType=".csv" tips="" :url="uploadUrl" width="50" iconClass="el-icon-upload2" /><!-- 上传 -->
            <el-button type="text" class="ml10" @click="download">点击下载文件模板</el-button>
          </div>
          <p style="margin-top:8px;color:#909399;font-size:12px;line-height:1;">券码数量单次最多不超过5000条</p>
          <p style="margin-top:8px;color:#909399;font-size:12px;line-height:1;">填写示例：‘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>
    <vue-gic-card appendToBody :showCardDialog="showCardDialog" @selectCard="selectCard" :cardLimit="-1" :cardType="null"></vue-gic-card>
  </el-dialog>
</template>

<script>
import { _debounce } from '@/utils/index';
import file from '@/components/upload/file';
import { getCoupDestoryDetail, importDestoryCoupCode, saveCoupDestoryPlan, downloadDestroyCodeTemplate } from '@/service/api/cardApi.js';
export default {
  name: 'destory-dialog',
  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.destoryMode && !value) {
        return callback(new Error(rule.message));
      }
      callback();
    };

    return {
      loading: false,
      uploadUrl: importDestoryCoupCode,
      showCardDialog: false,
      ruleForm: {
        destoryPlanId: '',
        cardId: '',
        cardName: '',
        destoryMode: 0,
        fileId: ''
      },
      rules: {
        cardId: [{ required: true, message: '请选择卡券', trigger: 'change' }],
        destoryMode: [{ required: true, message: '请选择销毁方式', trigger: 'change' }],
        fileId: [{ validator: checkFileId, message: '请上传文件', trigger: 'change' }]
      }
    };
  },
  watch: {
    show(val) {
      if (val) {
        if (this.type === 'add') {
          this.loading = true;
          getCoupDestoryDetail({})
            .then(res => {
              this.loading = false;
              this.ruleForm.destoryPlanId = res.result;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          this.ruleForm = { ...this.destoryItem };
        }
      }
    }
  },
  components: {
    file
  },
  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 };
        delete params.fileId;
        saveCoupDestoryPlan(params)
          .then(res => {
            this.loading = false;
            this.$message({ message: '操作成功', type: 'success' });
            this.close();
            this.$emit('refresh');
          })
          .catch(() => {
            this.loading = false;
          });
      });
    }),
    cleanCard() {
      this.ruleForm.cardId = '';
      this.ruleForm.cardName = '';
      this.$refs.ruleForm.validateField('cardId');
    },
    //选择卡券后置
    selectCard(val) {
      if (val) {
        this.ruleForm.cardId = val.coupCardId;
        this.ruleForm.cardName = val.cardName;
        this.$refs.ruleForm.validateField('cardId');
      }
      this.showCardDialog = false;
    },
    // ****上传图片***
    upload() {
      this.$refs.fileUpload.$el.querySelector('input').click();
    },
    backImg(res) {
      this.ruleForm.fileId = new Date().getTime(); // 代表以及上传过文件
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .dash-btn .el-button {
  width: 174px;
  border-style: dashed;
  border-radius: 4px;
  &:not(.is-disabled) {
    background: white;
    color: #606266;
    border-color: #c0c4cc;
  }
  &.is-disabled {
    color: #c0c4cc;
  }
}
.dm-title__label--tips {
  background: #fffbe6;
  border-color: #ffe58f;
}
</style>
