<template>
  <!-- 导入发票 -->
  <div class="import-invoice">
    <el-dialog :title="errorList.length ? '提示' : '导入'" :visible="show" @close="onClose">
      <el-button type="primary" size="small"  class="download-btn" @click="downloadXls">下载模板</el-button>
      <template v-if="errorList.length">
        <div class="error-tip">
          <span> 导入 </span>
          <p v-for="(item, index) in errorList" :key="index" class="error-list">
            <template>
              {{ ` 第${item.rowIndex}行,` }}
              <span class="error-apply">
                {{ item.applyNo || '' }}
              </span>
              <span> {{  ` ${item.msg || '导入成功'}。` }} </span>
              <br />
            </template>
          </p>
        </div>
        <div slot="footer" class="dialog-footer footer-btn">
          <el-button type="primary" @click="closeImportInvoiceDialog">我知道了</el-button>
        </div>
      </template>

      <template v-else>
        <el-form size="small" label-width="100px">
          <el-form-item label="导入：">
            <uploadFileV2 ref="uploadfile" @onSuccess="uploadSuccess"></uploadFileV2>
            <div class="upload-content">
              <div slot="tip" class="el-upload__tip">注：导入格式为excel，csv格式，最多可导入1个文件</div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="confirmUpload">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import uploadFileV2 from '@/components/base/uploadFileV2';

export default {
  components: { uploadFileV2 },
  data() {
    return {
      fapiaoNo: '',
      remark: '',
      message: '',
      resList: [],
      errorList: [],
      fileList: [],
      show: false,
    };
  },

  methods: {
    onClose() {
      this.show = false;
      this.resList = [];
      this.errorList = [];
    },
    closeImportInvoiceDialog() {
      this.show = false;
      this.resList = [];
      this.errorList = [];
      this.$emit('closeImportInvoiceDialog');
    },
    uploadSuccess(list) {
      this.resList = list || [];
    },
    open() {
      this.show = true;
    },
    confirmUpload() {
      this.errorList = this.resList;
      this.$refs.uploadfile.clear();
    },
    // 下载模板
    downloadXls() {
      const { href } = this.$router.resolve({
         path: `/static/file/导入发票申请单模板.xlsx`
       });
      window.open(href, "_blank"); 
    

    },
  },
};
</script>

<style lang="scss" scoped>
.import-invoice {
  .bold {
    font-weight: bold;
  }

  .title {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
  }

  .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;

    .sub-item {
      flex: 1;
    }
  }
}
.footer-btn {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.error-tip {
  display: flex;
  flex-direction: column;
}
.error-apply {
  color: #1890ff;
}

.download-btn {
  margin: 0px 50px 12px;
}
</style>
