<template>
  <el-dialog :title="data.title" :visible.sync="data.isShow" custom-class="manual-dialog" @close="onClose">
    <div class="import">
      <div :class="['excel-icon', filesData ? 'excel-icon--active' : 'excel-icon--add']" @click="handleUpload">
        <span v-show="data.excelData.length === 0" class="import-btn">点击上传会员</span>
      </div>
      <div class="import-cont">
        <div class="import-handle">
          <input type="file" style="display: none" accept=".xlsx, .xls, .csv" ref="upload" @change="handleFileChange" />
          <template v-if="data.excelData.length > 0">
            <span>{{ data.excelName }}</span>
            <span class="import-num">
              已导入会员
              <span class="color-303133">{{ data.excelData.length }}</span>
              人
            </span>
            <el-button type="text" @click="reHandleUpload">重新导入</el-button>
          </template>
        </div>
        <div class="import-tip">
          <span class="import-tip-text">只能上传一个excel文件（2003版本以上），且数据不超过50000条</span>
          <el-button type="text" @click="downloadExcelTemp">
            <span class="font-12">下载Excel模板</span>
          </el-button>
        </div>
        <div class="clear-old">
          <el-checkbox v-model="data.optType">清空标签历史标记会员</el-checkbox>
          <el-tooltip content="勾选后，此前被该标签标记的会员将移除此标签，此标签标记会员以本次导入为准。">
            <i class="iconfont icon-xinxixianshi"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
    <template slot="footer">
      <el-button @click="$emit('update:visiable', false)">取消</el-button>
      <el-button type="primary" @click="tagItemImport">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      filesData: undefined
    }
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    visiable: Boolean
  },
  methods: {
    tagItemImport() {
      console.log(this.filesData);
      if(!this.filesData) return this.$message.warning('请上传文件');
      // this.$emit('update:visiable', false);
      this.$emit('submit', this.filesData, this.$refs.upload);
    },
    // 关闭导入会员的弹窗
    onClose() {
      this.filesData = undefined;
      this.$emit('close', false);
    },
    // 点击上传文件、
    handleUpload() {
      console.log(this.data);
      if (this.data.excelData.length !== 0) return;
      this.reHandleUpload();
    },
    // 重新导入按钮
    reHandleUpload() {
      this.$refs.upload.click();
    },
    // 处理上传的表格
    handleFileChange(e) {
      const files = e.target.files[0];
      console.log(files);
      // 校验.xlsx, .xls, .csv格式的文件
      const reg = /(\.(xlsx|xls|csv))$/;
      if (!files) return;
      if (!reg.test(files.name)) {
        this.$message.warning({
          duration: 1000,
          message: '仅支持上传xlsx、xls、csv格式的文件'
        });
        e.target.value = '';
        return;
      }
      this.filesData = files;
    },
    // 导出 excel 模板
    downloadExcelTemp() {
      let origin = window.location.origin;
      origin = origin.indexOf('localhost') >= 0 ? 'http://www.gicdev.com/' : origin;
      window.location.href = `${origin}${this.data.downLoadUrl}`;
    },
  }
};
</script>

<style lang="scss" scoped>
    .import {
      display: flex;
      align-items: start;

      .excel-icon {
        margin-right: 10px;
        width: 40px;
        height: 40px;
        color: #606266;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        .import-btn {
          display: block;
          width: 100px;
          transform: translate(50px, 4px);
        }
      }
      .excel-icon--add {
        cursor: pointer;
        background-image: url('../../../static/img/add.svg');
        &:hover {
          color: #1890FF;
          background-image: url("../../../static/img/add-hover.svg");
        }
      }
      .excel-icon--active {
        background-image: url('../../../static/img/excel.svg');
      }

      .import-cont {
        width: 520px;

        .import-handle {
          display: flex;
          align-items: center;
          height: 22px;
          font-size: 14px;
          color: #606266;

          .import-num {
            margin-left: 24px;
            padding-right: 15px;
            margin-right: 12px;
            color: #909399;
            border-right: 1px solid #DCDFE6;
          }
        }

        .import-tip {
          font-size: 12px;
          color: #909399;
          .import-tip-text {
            margin-right: 10px;
            padding-right: 15px;
            border-right: 1px solid #DCDFE6;
          }
        }

        .clear-old {
          margin-top: 24px;
          font-size: 14px;
          color: #606266;

          .icon-xinxixianshi {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
</style>
