<template>
  <div class="app-container">
    <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-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-col :span="24">
          <el-switch
            v-model="queryParams.reExport"
            active-color="#13ce66"
            active-text="重新导出"
            style="padding-left: 35px"
          >
          </el-switch>
        </el-col>
      </el-row>
      <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"
          @click="xlse()"
          :loading="downLoadingTip.downloading"
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['base:caExport:export']"
          >{{
            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"
        width="150"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        label="品牌描述"
        align="center"
        prop="nameDescription"
        width="150"
      />
      <el-table-column
        label="航班日期"
        align="center"
        prop="fltDate"
        width="150"
      />
      <el-table-column label="航班号" align="center" prop="fltNo" />
      <el-table-column
        label="航班路线"
        align="center"
        prop="route"
        width="150"
      />
      <el-table-column
        label="配置航班类型"
        align="center"
        prop="kindName"
        width="130"
      />
      <el-table-column label="尺寸" align="center" prop="sizeStr" />
      <el-table-column label="件数" align="center" prop="qty" />
      <el-table-column label="实际重量" align="center" prop="actualWeight" />
      <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: {},
    };
  },
  created() {},
  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;
        } 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>