<template>
  <div class="cargoPage" v-loading="downloading">
    <el-form
      ref="cargoForm"
      size="small"
      :model="formData"
      label-position="left"
      label-width="auto"
      style="margin: 10px; width: 100%"
    >
      <el-row type="flex" style="flexWrap: wrap!important">
        <el-col :span="6">
          <el-form-item label="ACCS航班日期:">
            <el-date-picker
              class="formItem"
              v-model="flightTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :value-format="valueFormat"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建日期:">
            <el-date-picker
              class="formItem"
              v-model="createDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :value-format="valueFormat"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="ACCS航班号:">
            <el-input type="text" v-model="fltNo" class="formItem" placeholder="请输入ACCS航班号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申报类别:">
            <el-select
              placeholder="不限"
              v-model="formData.typeId"
              class="formItem"
              clearable
            >
              <el-option
                v-for="item in findConditionData.cargoType"
                :label="item.chineseName"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <span style="fontWeight:900;color:#409EFF;fontSize:14px"><i class="el-icon-s-tools"></i>更多查询条件</span>
                </template>
                <el-row type="flex" style="flexWrap: wrap!important">
                  <el-col :span="6">
                    <el-form-item label="货物状态:">
                    <el-select
                      placeholder="不限"
                      v-model="formData.statusId"
                      class="formItem"
                      filterable
                      clearable
                    >
                      <el-option
                        v-for="item in findConditionData.cargoStatus"
                        :label="item.chineseName"
                        :value="item.id"
                        :key="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="海关回执状态:">
                      <el-select
                        placeholder="不限"
                        v-model="formData.customsReceiptStatusId"
                        class="formItem"
                        clearable
                      >
                        <el-option
                          v-for="item in findConditionData.cargoCustomsReturnStatus"
                          :label="item.chineseName"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="服务类型:">
                      <el-select
                        placeholder="不限"
                        v-model="formData.serviceTypeId"
                        class="formItem"
                        filterable
                        clearable
                      >
                        <el-option
                          v-for="item in findConditionData.cargoServiceType"
                          :label="item.chineseName"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="是否自动:">
                      <el-select
                        placeholder="不限"
                        v-model="formData.allocationTypeId"
                        class="formItem"
                        clearable
                      >
                        <el-option
                          label="手动"
                          value="1"
                        >
                        </el-option>
                        <el-option
                          label="自动"
                          value="2"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="运单号:">
                      <el-input
                        type="textarea"
                        v-model="formData.waybillNo"
                        class="formItem"
                        placeholder="xxxx;xxxx"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="站点:">
                      <el-input
                        v-model="siteName"
                        class="formItem"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="URSA:">
                      <el-input
                        v-model="ursa"
                        class="formItem"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="取件日期:">
                      <el-date-picker
                        v-model="formData.pickUpDate"
                        type="date"
                        placeholder="选择日期"
                        :value-format="valueFormat"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
          </el-collapse>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="预配航班日期:">
            <el-date-picker
              class="formItem"
              v-model="prepalyFlightTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :value-format="valueFormat"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form-item label="数据源:">
            <el-select
              placeholder="不限"
              v-model="formData.dataSources"
              class="formItem"
              clearable
            >
              <el-option label="人工导入" value="1"> </el-option>
              <el-option label="系统导入" value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form-item label="是否大货:">
            <el-select
              placeholder="不限"
              v-model="formData.big"
              class="formItem"
              clearable
            >
              <el-option label="是" value="1"> </el-option>
              <el-option label="否" value="0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form-item label="航班序列单号:">
            <el-input
              type="text"
              v-model="formData.mawbCode"
              class="formItem"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form-item label="配置航班类型:">
            <el-select
              placeholder="不限"
              v-model="formData.kindToAllocFlightId"
              class="formItem"
              clearable
            >
              <el-option
                v-for="item in findConditionData.configureFlightType"
                :label="item.chineseName"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="6">
          <el-form-item label="历史货物状态:">
            <el-select
              placeholder="不限"
              v-model="formData.historyAllocaCargoTypeId"
              class="formItem"
              clearable
            >
              <el-option
                v-for="item in findConditionData.cargoStatusHistory"
                :label="item.chineseName"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <div style="paddingleft: 10px">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="select"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="checks(tableData)"
          >全选/全否</el-button
        >
        <el-button type="primary" size="small" @click="xlse(0)" v-dbClick :disabled="tableData.length==0"
          >导出本页查询结果</el-button
        >
        <el-button type="primary" size="small" @click="xlse(1)" v-dbClick :disabled="tableData.length==0"
          >导出全部查询结果</el-button
        >
        <div class="tips">
          <span style="paddingright: 50px">总重量:{{ allWeight }}</span>
          <span>总件数:{{ allQty }}</span>
        </div>
      </div>
    </el-form>
    <el-table
      ref="cargoTable"
      :data="tableData"
      v-loading="tableLoading"
      border
      @select="cheacked"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55" fixed> </el-table-column>
      <el-table-column type="index" label="序号">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column
        v-for="item in tableHeader"
        :prop="item.value"
        :label="item.name"
        :key="item.name"
        width="150"
        header-align="center"
        align="center"
        :formatter="formatter"
        sortable
      >
      </el-table-column>
    </el-table>
    <el-pagination
      :total="totalCount"
      :page-size.sync="limitSize"
      background
      style="margin-top: 40px; text-align: right"
      @next-click="nextClick"
      @prev-click="prevClick"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { findConditionData, findCargoData } from "@/api/cargoSelect";
import { cargoXlsx } from "@/utils/zipdownload";

export default {
  name:"queryCargo",
  data() {
    return {
      formData: {
        fltDateStart: "",
        fltDateEnd: "",
        prematchFltDateStart: "",
        prematchFltDateEnd: "",
        createTimeStart: null,
        createTimeEnd: null,
        pickUpDate: null,
        waybillNo: "",
        siteName: "",
        fltNo: "",
        mawbCode: "",
        ursa: "",
        typeId: null,
        statusId: null,
        serviceTypeId: null,
        allocationTypeId: null,
        kindToAllocFlightId: null,
        historyAllocaCargoTypeId: null,
        dataSources: "",
        customsReceiptStatusId: null,
        big: null,
        cargoPlaneNo:null,
        cargoPlaneStart:null,
        cargoPlaneEnd:null,
      }, //表单数据
      tableHeader: [
        { name: "取件日期", value: "pickUpDate" },
        { name: "取件扫描号", value: "pickUpScanNo" },
        { name: "服务类型", value: "serviceTypeName" },
        { name: "运单号", value: "waybillNo" },
        { name: "货物状态", value: "statusName" },
        { name: "ACCS航班号", value: "fltNoAccs" },
        { name: "ACCS航班日期", value: "fltDateAccs" },
        { name: "ACCS航线", value: "accsFlightRoute" },
        { name: "预配航班日期", value: "preplanFlightTime" },
        { name: "预配航班号", value: "preplanFlightNo" },
        { name: "二配航班日期", value: "twoMatchFlightTime" },
        { name: "二配航班号", value: "twoMatchFlightNo" },
        { name: "终配航班日期", value: "finalFlightTime" },
        { name: "终配航班号", value: "finalFlightNo" },
        { name: "件数", value: "qty" },
        { name: "实际重量", value: "actualWeight" },
        { name: "申报类型", value: "typeName" },
        { name: "口岸代码", value: "portName" },
        { name: "subcategory", value: "subCategory" },
        { name: "发件人账号", value: "shipperAccount" },
        { name: "发件公司中文名称", value: "shipperCompany" },
        { name: "是否RDE手工录入", value: "manualRde" },
        { name: "HandlingCode", value: "handingCode" },
        { name: "品名描述", value: "nameDescription" },
        { name: "站点", value: "siteName" },
        { name: "始发地城市名称", value: "originCity" },
        { name: "收件地", value: "destinationSiteName" },
        { name: "收件人国家代码", value: "consigneeCountry" },
        { name: "URSA", value: "ursa" },
        { name: "尺寸", value: "sizeStr" },
        { name: "海关回执状态", value: "customsReceiptStatusName" },
        { name: "海关回执时间", value: "customsReceiptTime" },
        { name: "预审状态", value: "preQualificationStatus" },
        { name: "CA预审意见", value: "caPretrialOpinion" },
        { name: "CA预审时间", value: "caPretrialTime" },
        {
          name: "大货预审意见（是否可以配置CA航班）",
          value: "bigPretrialOpinion",
        },
        { name: "大货预审时间", value: "bigPretrialTime" },
        { name: "创建人", value: "createUserId" },
        { name: "创建时间", value: "createTime" },
        { name: "是否自动", value: "cargoRulesStatus" },
      ], //表头数据
      findConditionData: {}, //货物查询条件
      tableData: [], //表格数据
      allWeight: 0,
      allQty: 0,
      shiftKey: false,
      start: -1,
      valueFormat: "yyyy-MM-dd",
      tableLoading: false,
      downloading:false,
      totalCount: 0,
      selectTable: [],
      flightTime: [],
      prepalyFlightTime: [],
      cargoPlaneTime:[],
      createDate: [],
      limitStart: 0,
      limitSize: 100, //无限制-1
      selecetALL:false,
    };
  },

  created() {
    //查询条件
    findConditionData().then((res) => {
      if (res.code == 200) {
        this.findConditionData = res.data;
      } else {
        this.$message({
          message: "查询条件不存在",
          type: "warning",
        });
      }
    });
  },

  mounted() {
    window.addEventListener("keydown", (code) => {
      if (code.keyCode === 16 && code.shiftKey) {
        this.shiftKey = true;
      }
    });
    window.addEventListener("keyup", (code) => {
      if (code.keyCode === 16) {
        this.shiftKey = false;
      }
    });
  },

  methods: {
    clear() {
      this.$refs.cargoForm.resetFields();
    },
    //查询
    select() {
      this.tableData = [];
      this.allWeight = 0;
      this.allQty = 0;
      this.checks()
      this.tableLoading = true;
      if (this.createDate != null && this.createDate.length > 0) {
        this.formData.createTimeStart = this.createDate[0];
        this.formData.createTimeEnd = this.createDate[1];
      }else{
        this.formData.createTimeStart = null;
        this.formData.createTimeEnd = null;
      }
      if (this.prepalyFlightTime != null && this.prepalyFlightTime.length > 0) {
        this.formData.prematchFltDateStart = this.prepalyFlightTime[0];
        this.formData.prematchFltDateEnd = this.prepalyFlightTime[1];
      }else{
        this.formData.prematchFltDateStart ="";
        this.formData.prematchFltDateEnd = "";
      }
      if (this.flightTime != null && this.flightTime.length > 0) {
        this.formData.fltDateStart = this.flightTime[0];
        this.formData.fltDateEnd = this.flightTime[1];
      }else{
        this.formData.fltDateStart = "";
        this.formData.fltDateEnd = "";
      }
      if(this.cargoPlaneTime != null && this.cargoPlaneTime.length > 0){
        this.formData.cargoPlaneStart = this.cargoPlaneTime[0];
        this.formData.cargoPlaneEnd = this.cargoPlaneTime[1];
      }else{
        this.formData.cargoPlaneStart = null;
        this.formData.cargoPlaneEnd = null;
      }

      this.formData.limitStart = this.limitStart;
      this.formData.limitSize = this.limitSize;
      findCargoData(this.formData).then((res) => {
          if (res.code == 200) {
            if (res.data.list.length > 0) {
              this.tableData = res.data.list;
              this.totalCount = res.data.totalCount;
              for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].index = i;
              }
            } else {
              this.$message({
                message: "未查询到数据",
                type: "warning",
              });
            }
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
          this.tableLoading = false;
        }).catch(()=>{
          this.tableLoading = false;
        });
    },
    //全选反选
    checks(rows) {
      if (rows && !this.selecetALL) {
        rows.forEach((row) => {
          this.$refs.cargoTable.toggleRowSelection(row);
          this.allQty = row.qty + this.allQty;
          this.allWeight = row.actualWeight + this.allWeight;
        });
        this.selecetALL = true;
        this.allWeight = this.allWeight.toFixed(1);
        this.allQty = this.allQty.toFixed(0);
      } else {
        this.$refs.cargoTable.clearSelection();
        this.allWeight = 0;
        this.allQty = 0;
        this.selecetALL = false;
      }
    },  
    selectAll(selection){
      if(selection.length > 0){
        selection.forEach(item => {
          this.allWeight = item.actualWeight + this.allWeight;
          this.allQty = item.qty + this.allQty;
        })
        this.allWeight = this.allWeight.toFixed(1);
        this.allQty = this.allQty.toFixed(0);
      }else{
        this.allWeight = 0;
        this.allQty = 0;
      }

    },
    //下一页
    nextClick() {
      this.limitStart = this.limitStart + 100;
    },
    //上一页
    prevClick() {
      this.limitStart = this.limitStart - 100;
    },
    //指定页数
    currentChange(page) {
      this.limitStart = (page - 1) * 100;
      this.select();
    },
    //表单项选中操作
    cheacked(sl, row) {
      let end = row.index;
      if(this.shiftKey){
        const sum = Math.abs(this.start - end);
        const min = Math.min(this.start, end);
        let i ;
        if(this.start === -1 && sl.includes(this.tableData[row.index])){
          for(i=0; i < sum; i++){
            this.$refs.cargoTable.toggleRowSelection(this.tableData[i], true);
            this.selectTable.push(this.tableData[i]);
          }
        }else if(sl.includes(this.tableData[row.index])){
          for(i = this.start+1; i <= end; i++){
            this.$refs.cargoTable.toggleRowSelection(this.tableData[i], true);
            this.selectTable.push(this.tableData[i]);
          }
        }else if(!sl.includes(this.tableData[row.index])){
          this.selectTable.splice(end-1,sum + 1);
          for(i = end ; i <= this.start ; i++){
            this.$refs.cargoTable.toggleRowSelection(this.tableData[i], false);
          }
        }
        this.start = end;
      }else{
        this.start = end;
        if(sl.includes(this.tableData[end])){
          this.selectTable.push(row);
        }else{
          for(let i =0; i <this.selectTable.length; i++){
            if(this.selectTable[i].index == row.index){
              this.selectTable.splice(i,1);
            }
          }
        }
      }
    
      this.allWeight = 0;
      this.allQty = 0;
      for (let i = 0; i < this.selectTable.length; i++) {
        this.allWeight = this.allWeight + this.selectTable[i].actualWeight;
        this.allQty = this.allQty + this.selectTable[i].qty;
      }
      this.allQty = this.allQty.toFixed(0);
      this.allWeight = this.allWeight.toFixed(1);
    },
    // 导出表格
    xlse(page) {
      let cargoXlse = {title:"货物导出表",cargoConditionDto:{}};
      if (this.createDate != null && this.createDate.length > 0) {
        this.formData.createTimeStart = this.createDate[0];
        this.formData.createTimeEnd = this.createDate[1];
      }else{
        this.formData.createTimeStart = null;
        this.formData.createTimeEnd = null;
      }
      if (this.prepalyFlightTime != null && this.prepalyFlightTime.length > 0) {
        this.formData.prematchFltDateStart = this.prepalyFlightTime[0];
        this.formData.prematchFltDateEnd = this.prepalyFlightTime[1];
      }else{
        this.formData.prematchFltDateStart ="";
        this.formData.prematchFltDateEnd = "";
      }
      if (this.flightTime != null && this.flightTime.length > 0) {
        this.formData.fltDateStart = this.flightTime[0];
        this.formData.fltDateEnd = this.flightTime[1];
      }else{
        this.formData.fltDateStart = "";
        this.formData.fltDateEnd = "";
      }
      if(this.cargoPlaneTime != null && this.cargoPlaneTime.length > 0){
        this.formData.cargoPlaneStart = this.cargoPlaneTime[0];
        this.formData.cargoPlaneEnd = this.cargoPlaneTime[1];
      }else{
        this.formData.cargoPlaneStart = null;
        this.formData.cargoPlaneEnd = null;
      }
      cargoXlse.cargoConditionDto = this.formData;
      cargoXlse.cargoConditionDto.limitSize = this.limitSize;

      if (page == 0) {
        cargoXlse.cargoConditionDto.limitStart = this.limitStart;
      } else {
        cargoXlse.cargoConditionDto.limitStart = 0;
        cargoXlse.cargoConditionDto.limitSize = -1;
      }
      cargoXlsx("/cargo/excel",cargoXlse)
    },
    //表格格式化
    formatter(row,column,cellValue,index){
      if(column.property=="cargoRulesStatus"){
        console.log()
        if(cellValue == 1){
          return cellValue = "手动"
        }else if(cellValue == 2){
          return cellValue = "自动"
        }
      }
      return cellValue
    }
  },
  computed: {
    fltNo: {
      get: function () {
        return this.formData.fltNo;
      },
      set: function (val) {
        this.formData.fltNo = val.toUpperCase();
      },
    },
    siteName: {
      get: function () {
        return this.formData.siteName;
      },
      set: function (val) {
        this.formData.siteName = val.toUpperCase();
      },
    },
    ursa: {
      get: function () {
        return this.formData.ursa;
      },
      set: function (val) {
        this.formData.ursa = val.toUpperCase();
      },
    },
  },
};
</script>

<style scoped>
.tips {
  float: right;
  color: #606266;
  font-size: 14px;
  margin-right: 40px;
}
.formItem {
  width:100%;
  max-width: 300px;
}

</style>