<template>
  <div>
    <div>
      <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="">
          <el-select size="medium" v-model="queryInfo.clientCode" placeholder="客户编码" clearable>
            <el-option
                v-for="item in customerList"
                :key="item.clientCode"
                :label="item.clientName"
                :value="item.clientCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select size="medium" v-model="queryInfo.fileStatus" placeholder="文件状态" clearable>
            <el-option
                v-for="item in fileStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input size="medium" v-model="queryInfo.fileName" placeholder="文件名称"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <el-date-picker
                style="background: none"
                size="medium"
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-button size="medium" @click="downloadOrderTemplate">模板下载</el-button>
        </el-col>
        <el-col :span="3">
          <el-upload
              class="upload-demo"
              action=""
              :before-upload="beforeUpload"
              :http-request="orderImport"
              :show-file-list="false">
            <el-button size="medium" type="primary">导入订单</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" style="height: 20px;"></el-row>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          row-key="uuid"
          border
          stripe
      >
        <el-table-column prop="clientName" label="客户名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientCode" label="客户编码" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="fileStatus" label="文件状态" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.fileStatus === 1">入库中</span>
            <span v-else-if="scope.row.fileStatus === 2">入库异常</span>
            <span v-else-if="scope.row.fileStatus === 5">入库成功</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="handleRes" label="处理结果" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[20, 30, 40, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {selectAll} from '../../api/consigner/customerconfig'
  import {importExcelToMinio, selectFilePage} from '../../api/consigner/exportOrder'
  export default {
    data() {
      return {
        // 查询条件
        queryInfo: {
          clientCode: '',
          fileStatus: '',
          fileName: '',
          startTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 20
        },
        // 列表数据
        tableData: [],
        total: 0,
        // 文件状态码
        fileStatus: [
          {
            label: '入库中',
            value: '1'
          },
          {
            label: '入库异常',
            value: '2'
          },
          {
            label: '入库成功',
            value: '5'
          }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 存储从后端获取的客户数据
        customerList: [],
        value2:[],
      }
    },
    mounted() {
      this.getCustomerList();
      this.getList();
    },
    methods: {
      // 查询上传文件信息列表
      getList(){
        if (this.value2 !== null && this.value2 !== ''){
          this.queryInfo.startTime = this.value2[0];
          this.queryInfo.endTime = this.value2[1];
        }
        selectFilePage(this.queryInfo).then((response) => {
          const res = response.data;
          const code = res.code;
          const data = res.data;
          if (code !== '200'){
            return this.$message.error("获取文件列表失败");
          }
          this.tableData = data.list;
          this.total = data.total;
          this.$message.success("获取文件列表成功");
          this.queryInfo.startTime = '';
          this.queryInfo.endTime = '';
        }).catch(error => {
          this.$message.error(error.toString());
        })
      },
      // 获取客户配置列表选项
      getCustomerList(){
        selectAll().then((response) =>{
              const res = response.data;
              const code = res.code;
              if (code !== '200'){
                return this.$message.error("客户信息获取失败");
              }
              this.customerList = res.data;
            }
        ).catch(error => {
          this.$message.error(error.toString())
        })
      },
      //导入订单excel
      beforeUpload(file) {
        // 检查文件类型
        const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
        const fileMaxSize = 10 * 1024 * 1024;
        if (!isExcel) {
          this.$message.error('上传文件只能是 Excel 格式!');
          return false; // 取消文件上传
        }
        // 检查文件大小
        const isLtMaxSize = file.size / 1024 / 1024 < fileMaxSize;
        if (!isLtMaxSize) {
          this.$message.error(`上传文件大小不能超过 ${fileMaxSize / (1024 * 1024)} MB!`);
          return false; // 取消文件上传
        }
        return true; // 允许上传
      },
      // 下载订单模板文件
      downloadOrderTemplate(){
        const fileUrl = '../../static/出口订单导入模板.xlsx';
        // 创建隐藏的<a>元素
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = '出口订单导入模板.xlsx'; // 设置下载的文件名
        // 将<a>元素添加到DOM中
        document.body.appendChild(link);
        // 触发点击事件
        link.click();
        // 移除<a>元素
        document.body.removeChild(link);
      },
      // 导入订单文件到minio
      orderImport({file, onSuccess, onError}){
        const formData = new FormData();
        formData.append('file', file);
        importExcelToMinio(formData).then((response) => {
          const res = response.data;
          const code = res.code;
          const msg = res.msg;
          if (code !== '200'){
            return this.$message.error(msg);
          }
          this.$message.success(msg);
          this.getList();
          onSuccess(res);
        }).catch(error => {
          this.$message.error(error.toString());
          onError(error);
        })
      },
      //分页
      handleSizeChange(val) {
        this.queryInfo.pageSize=val;
        this.getList();
      },
      //分页
      handleCurrentChange(val) {
        this.queryInfo.pageNum=val;
        this.getList();
      },
    }
  }
</script>