<template>
  <div>
    <!-- 上传Excel按钮 -->
    <el-row :gutter="24">
      <el-col :span="4">
        <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :http-request="uploadExcel"
            :show-file-list="false">
          <el-button size="medium" type="success">导入数据</el-button>
        </el-upload>
      </el-col>
      <el-col :span="4">
        <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :http-request="uploadUpdateExcel"
            :show-file-list="false">
          <el-button size="medium" type="success">更新数据</el-button>
        </el-upload>
      </el-col>
      <el-button size="medium" @click="fetchData" type="primary">查询</el-button>
    </el-row>
    <!-- 数据列表 -->
    <el-row :gutter="24">
      <el-col :span="24">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="staId" label="标识码"></el-table-column>
          <el-table-column prop="iEPort" label="进出境关区"></el-table-column>
          <el-table-column prop="iEPortCn" label="关区中文名称"></el-table-column>
          <el-table-column prop="tradeCo" label="境内收发货人"></el-table-column>
          <el-table-column prop="ownerCode" label="消费使用单位/生产销售单位"></el-table-column>
          <el-table-column prop="districtCode" label="境内目的地/货源地"></el-table-column>
          <el-table-column prop="districtCodeCn" label="境内目的地/货源地中文名称"></el-table-column>
          <el-table-column prop="trafMode" label="运输方式"></el-table-column>
          <el-table-column prop="trafModeCn" label="运输方式中文名称"></el-table-column>
          <el-table-column prop="tradeMode" label="监管方式"></el-table-column>
          <el-table-column prop="tradeModeCn" label="监管方式中文名称"></el-table-column>
          <el-table-column prop="cutMode" label="征免性质"></el-table-column>
          <el-table-column prop="cutModeCn" label="征免性质中文名称"></el-table-column>
          <el-table-column prop="tradeCountry" label="启抵国"></el-table-column>
          <el-table-column prop="tradeCountryCn" label="启抵国中文名称"></el-table-column>
          <el-table-column prop="originCountry" label="产终国"></el-table-column>
          <el-table-column prop="originCountryCn" label="产终国中文名称"></el-table-column>
          <el-table-column prop="licenseNo" label="许可证编号"></el-table-column>
          <el-table-column prop="manualNo" label="备案号"></el-table-column>
          <el-table-column prop="grossWt" label="毛重"></el-table-column>
          <el-table-column prop="endDate" label="结关日期"></el-table-column>
          <el-table-column prop="codeT" label="商品编号"></el-table-column>
          <el-table-column prop="codeS" label="附加编号"></el-table-column>
          <el-table-column prop="qty1" label="第一数量"></el-table-column>
          <el-table-column prop="unit1" label="第一计量单位"></el-table-column>
          <el-table-column prop="unit1Cn" label="第一计量单位中文名称"></el-table-column>
          <el-table-column prop="qty2" label="第二数量"></el-table-column>
          <el-table-column prop="unit2" label="第二计量单位"></el-table-column>
          <el-table-column prop="unit2Cn" label="第二计量单位中文名称"></el-table-column>
          <el-table-column prop="rmb" label="人民币"></el-table-column>
          <el-table-column prop="usd" label="美元值"></el-table-column>
          <el-table-column prop="dutyMode" label="征免方式"></el-table-column>
          <el-table-column prop="dutyModeCn" label="征免方式中文名称"></el-table-column>
          <el-table-column prop="dutax" label="实征税款"></el-table-column>
          <el-table-column prop="realDuty" label="实征关税"></el-table-column>
          <el-table-column prop="dutaxCut" label="减免税"></el-table-column>
          <el-table-column prop="dutyCut" label="减免关税"></el-table-column>
          <el-table-column prop="empty" label="空白项"></el-table-column>
          <el-table-column prop="gName" label="商品名称"></el-table-column>
          <el-table-column prop="gModel" label="规格型号"></el-table-column>
          <el-table-column prop="selType" label="分类通关"></el-table-column>
          <el-table-column prop="createtime" label="导入时间"></el-table-column>
          <el-table-column prop="opter" label="操作账户"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
            size="medium"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {importExcel, fetchData, importUpdateExcel} from "../../api/AiCustoms/AiCustoms";

export default {
  data() {
    return {
      tableData: [],
      total: 0, // 总数据量
      query: {
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetchData(this.query).then((response) => {
        const res = response.data
        if (res.code !== '200') {
          return this.$message.error('获取消息收发记录，失败！')
        }
        // 获取列表数据
        this.tableData = res.data.list
        // 获取列表的总记录数
        this.total = res.data.total
        this.$message.success('获取消息收发记录，成功！');
      }).catch(error => {
        // 关闭加载
        this.$message.error(error.toString())
      })
    },
    uploadExcel({ file, onSuccess, onError }){
      // 生成 FormData 对象
      const formData = new FormData();
      formData.append('file', file);
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      importExcel(formData).then((response) => {
        const res = response.data
        if (res.code !== '200') {
          return this.$message.error(res.msg);
        }
        this.$message.success(res.msg);
        loading.close();
        this.fetchData();
        onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
      }).catch(error => {
        // 关闭加载
        loading.close();
        this.$message.error(error.toString())
        onError(error); // 调用 onError 回调通知上传失败
      })
    },
    uploadUpdateExcel({ file, onSuccess, onError }){
      // 生成 FormData 对象
      const formData = new FormData();
      formData.append('file', file);
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      importUpdateExcel(formData).then((response) => {
        const res = response.data
        if (res.code !== '200') {
          return this.$message.error(res.msg);
        }
        this.$message.success(res.msg);
        loading.close();
        this.fetchData();
        onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
      }).catch(error => {
        // 关闭加载
        loading.close();
        this.$message.error(error.toString())
        onError(error); // 调用 onError 回调通知上传失败
      })
    },
    handleSizeChange(val) {
      this.query.pageSize=val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.query.pageNum=val;
      this.fetchData()
    }
  }
}
</script>