<template>
  <div>
    <el-form class="form-header" :model="queryParams" label-position="right" label-width="auto" size="medium">
      <el-row>
        <el-col :span="6">
          <el-form-item label="航班日期从" prop="fltDateStart">
            <el-date-picker value-format="yyyy-MM-dd" class="formItem" v-model="queryParams.fltDateStart" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到" prop="fltDateEnd">
            <el-date-picker value-format="yyyy-MM-dd" class="formItem" v-model="queryParams.fltDateEnd" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="航班号">
            <el-input type="textarea" v-model="fltNo" clearable class="formItem" placeholder="AC001;AC002" :rows="1">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运单号">
            <el-input clearable type="textarea" v-model="queryParams.waybillNo" class="formItem"
              placeholder="请输入运单号（回车间隔）" :rows="1"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="站点">
            <el-input type="textarea" v-model="siteName" class="formItem" placeholder="PVG;PEK" clearable :rows="1">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="URSA">
            <el-input clearable type="textarea" v-model="ursa" class="formItem" placeholder="S_;P_;E2" :rows="1">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-switch v-model="queryParams.reExport" active-color="#13ce66" active-text="重新导出" style="padding-left: 35px">
      </el-switch>
      <div style="margin-top:25px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="warning" :disabled="tableData.length == 0" v-hasPermi="['base:caExport:export']"
          @click="xlse()" :loading="downLoadingTip.downloading" icon="el-icon-download" size="mini">{{
              downLoadingTip.downloading ? downLoadingTip.tip : "导出"
          }}</el-button>
      </div>
    </el-form>

    <el-table max-height="500" highlight-current-row border stripe v-loading="loading" :data="tableData">
      <el-table-column label="运单号" align="center" prop="waybillNo" />
      <el-table-column :show-overflow-tooltip="true" label="品牌描述" align="center" prop="nameDescription" />
      <el-table-column label="航班日期" align="center" prop="fltDate" />
      <el-table-column label="航班号" align="center" prop="fltNo" width="100" />
      <el-table-column label="航班路线" align="center" prop="route" />
      <el-table-column label="配置航班类型" align="center" prop="kindName" width="130" />
      <el-table-column label="尺寸" align="center" prop="sizeStr" width="70" />
      <el-table-column label="件数" align="center" prop="qty" width="70" />
      <el-table-column label="实际重量" align="center" prop="actualWeight" width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
    </el-table>
    <pagination v-show="total > 0" :total="total" layout=" prev, pager, next, jumper, sizes,total"
      :page.sync="queryParams.pageNum" :limit.sync="queryParams.limitSize" @pagination="findAllFltData" />
  </div>
</template>

<script>
import { findCagroPreData } from "@/api/cargoSelect";
import { downLoadXlsx } from "@/utils/zipdownload";
export default {
  name: "CAPreQualificationExport",
  data() {
    return {
      //导出
      downLoadingTip: {
        tip: "",
        downloading: false,
      },
      tableData: [], //表格数据
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 总条数
      total: 0,
      // 原航班规则数据
      findAllFltDatList: [],
      // 新增修改查看规则弹出层
      open: false,
      // 查询参数
      queryParams: {
        limitStart: 0, //当前条数【代表第几条数据 +1开始】
        pageNum: 1,
        limitSize: 20, //一页显示多少条数据
        fltDateStart: undefined, //航班日期开始
        fltDateEnd: undefined, //航班日期结束
        reExport: false,
        //航班号
        fltNo: null,
        //运单号
        waybillNo: "",
        //站点
        siteName: "",
        //ursa
        ursa: "",
      },
      // 表单校验
      rules: {},
    };
  },
  methods: {
    // 导出表格
    xlse() {
      this.downLoadingTip.downloading = true;
      this.downLoadingTip.tip = "正在导出结果集请耐心等待";
      let cargoXlse = { title: "航班预审表", cargoExportPreQueryDto: {} };
      cargoXlse.cargoExportPreQueryDto = JSON.parse(
        JSON.stringify(this.queryParams)
      );
      cargoXlse.cargoExportPreQueryDto.limitStart = 0;
      cargoXlse.cargoExportPreQueryDto.limitSize = -1;
      downLoadXlsx("/cargo/excelPre", cargoXlse, '航班预审表')
        .then(() => {

          this.downLoadingTip.downloading = false;
          this.downLoadingTip.tip = "";
          this.progress = 100;
        })
        .catch(() => {
          this.downLoadingTip.downloading = false;
          this.downLoadingTip.tip = "";
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.start = 0;
      this.findAllFltData();
    },
    /** 预审信息查寻*/
    findAllFltData() {
      this.loading = true;
      if (this.queryParams.pageNum > 1) {
        this.queryParams.limitStart =
          (this.queryParams.pageNum - 1) * this.queryParams.limitSize;
      } else {
        this.queryParams.limitStart = 0;
      }
      findCagroPreData(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.tableData = response.data.list;
          this.total = response.data.totalCount;
          this.loading = false;
          if (response.data.list.length == 0) {
            this.$message({
              message: "未查询到数据",
              type: "warning",
            });
          }
        } else {
          this.msgError(response.msg);
        }
      });
    },
  },
  computed: {
    fltNo: {
      get: function () {
        return this.queryParams.fltNo;
      },
      set: function (val) {
        this.queryParams.fltNo = val.toUpperCase();
      },
    },
    siteName: {
      get: function () {
        return this.queryParams.siteName;
      },
      set: function (val) {
        this.queryParams.siteName = val.toUpperCase();
      },
    },
    ursa: {
      get: function () {
        return this.queryParams.ursa;
      },
      set: function (val) {
        this.queryParams.ursa = val.toUpperCase();
      },
    },
  },
};
</script>

<style scoped>
.tips {
  float: right;
  color: #606266;
  font-size: 14px;
  margin-right: 40px;
}
</style>