<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card>
      <div slot="header">
        <div class="card-title">{{$route.query.containerNumber}} - {{ $t('订单费用报表') }}</div>
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        inline
        class="card"
      >
          <el-form-item :label="$t('编号')">
            <el-input v-model="queryParams.numberKey" clearable :placeholder="$t('订单号、唛头、提单号')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('发货人')">
            <el-input v-model="queryParams.consignorKey" :placeholder="$t('发货人名称、手机号')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('收货人')">
            <el-input v-model="queryParams.consigneeKey" :placeholder="$t('收货人名称、手机号')"></el-input>
          </el-form-item>

          <el-form-item>
            <dict-selector :type="DICT_TYPE.ECW_BEGINTIME_TYPE_ENDTIME" :filter="(item) => item.value != 'PickTime'" v-model="dateFilterType" defaultable style="width: 150px; margin-right: 5px" />
            <el-date-picker v-model="dateFilter" type="datetimerange"  range-separator="-"
                :start-placeholder="$t('开始日期')"
                :end-placeholder="$t('结束日期')"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleQuery"
            >
            </el-date-picker>
          </el-form-item>
          <!--<el-form-item :label="$t('运输方式')" prop="transportId">
            <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model.number="queryParams.transportId" clearable @change="handleQuery"/>
          </el-form-item>-->
          <el-form-item :label="$t('始发仓')">
            <el-select v-model="queryParams.startWarehouseId" :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="item in exportWarehouseList"
                :key="item.id"
                :label="$l(item, 'title')"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('目的仓')">
            <el-select v-model="queryParams.destWarehouseId" :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="item in importWarehouseList"
                :key="item.id"
                :label="$l(item, 'title')"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('客户经理')" >
            <user-selector manage v-model="queryParams.salesmanId" clearable @change="handleQuery" :placeholder="$t('请选择')"/>
          </el-form-item>
          <el-form-item :label="$t('订单状态')" prop="status">
            <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.status"
                           @keyup.enter.native="handleQuery" clearable />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >{{$t('查询')}}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleExport" :loading="exporting">{{$t('导出搜索')}}</el-button>
          </el-form-item>
      </el-form>
    </el-card>
    <el-table v-loading="loading" :data="list" border class="card" :element-loading-text="$t('汇总计算中...')">
      <el-table-column :label="$t('序号')" width="50">
        <template slot-scope="{row, $index}">
          {{startNo + $index}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单号')" prop="orderNo" />
      <el-table-column :label="$t('唛头')" prop="marks" />
      <el-table-column :label="$t('始发仓')" prop="startWarehouseName" />
      <el-table-column :label="$t('运输方式') + '/' + $t('目的地')">
        <template slot-scope="{row}">
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId"></dict-tag>
            /{{row.dstWarehouseName}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('仓库实测')">
        <template slot-scope="{row}">
          {{row.sumNum}}{{$t('箱')}},{{row.sumVolume}}m³,{{row.sumWeight}}kg
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否重泡货')">
        <template slot-scope="{row}">
          <el-tooltip v-if="row.orderType !== 1" effect="dark" :content="row.orderType == 3 ? `${row.vweight}kg` : `${row.wvolume}m³`" placement="top-start">
            <dict-tag :type="DICT_TYPE.ECW_YESNO" :value="row.orderType !== 1 ? '1' : '0'"></dict-tag>
          </el-tooltip>
          <template v-else>{{$t('否')}}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收费数据')">
        <template slot-scope="{row}">
          <el-tooltip v-if="row.orderType !== 1" effect="dark" :content="row.orderType == 3 ? `${row.vweight}kg` : `${row.wvolume}m³`" placement="top-start">
            <span>{{row.realityChargeNum}}{{$t('箱')}},{{row.realityChargeVolume}}m³,{{row.realityChargeWeight}}kg</span>
          </el-tooltip>
          <template v-else>{{row.realityChargeNum}}{{$t('箱')}},{{row.realityChargeVolume}}m³,{{row.realityChargeWeight}}kg</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单状态')" prop="statusMsg"></el-table-column>
      <el-table-column :label="$t('应收总金额')">
        <template slot-scope="{row}">
          <div v-for="item in row.receivableTotalFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单优惠金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.discountTotalFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实收总金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.netReceiptsTotalFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已收总金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.writeOffTotalFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收运费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.receivableFreightFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('运费优惠金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.discountFreightFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实收运费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.netReceiptsFreightFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已收运费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.writeOffFreightFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收清关费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.receivableClearanceFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实收清关费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.netReceiptsClearanceFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('清关费优惠金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.discountClearanceFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已收清关费')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.writeOffClearanceFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收额外费用')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.receivableOtherFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实收额外费用')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.netReceiptsOtherFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('额外费用优惠金额')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.discountOtherFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已收额外费用')" width="150">
        <template slot-scope="{row}">
          <div v-for="item in row.writeOffOtherFeeGroupDtoList || []" :key="item.currencyId">
            {{item.amount}}{{item.currencyName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否全部核销')" width="150">
        <template slot-scope="{row}">
          <span v-if="row.writeOffRatio >= 100">{{$t('全部核销')}}</span>
          <span v-else-if="row.writeOffRatio > 0">{{$t('部分核销')}}</span>
          <span v-else>{{$t('未核销')}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户经理')" prop="salesmanName"></el-table-column>
      <el-table-column :label="$t('订单入仓时间')" width="150">
        <template slot-scope="{row}">
          {{ row.inTime|parseTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单装柜时间')" width="150">
        <template slot-scope="{row}">
          {{row.loadTime|parseTime}}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getTradeCityList } from "@/api/ecw/region";
import { getCurrencyPage } from "@/api/ecw/currency";
import {getWarehouseList} from '@/api/ecw/warehouse'
import store from "@/store";
import UserSelector from "@/components/UserSelector/index.vue";
import {exportOrderSummaryByContainerNumber, orderSummaryByContainerNumber} from "@/api/ecw/order";
import {DICT_TYPE} from "@/utils/dict";
import {parseTime} from "@/utils/ruoyi";

export default {
  filters: {parseTime},
  components: {UserSelector},
  data() {
    return {
      loading: false, // 加载中
      dateFilterType: '', //日期筛选类别
      dateFilter: [], //筛选日期
      list: [],
      total: 0,
      queryParams: {
        page: 1,
        rows: 10,
      },
      tradeCityList: [],
      currencyList:[],
      warehouseList:[],
      countryList: [],
      // 导出中状态
      exporting: false
    };
  },
  activated(){
    this.getList();
  },
  created() {
    getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    getTradeCityList().then((res) => (this.tradeCityList = res.data));
    this.getList();
    getWarehouseList().then(res => this.warehouseList = res.data)
  },
  computed: {
    DICT_TYPE() {
      return DICT_TYPE
    },
    permissions(){
      return store.getters.permissions
    },
    exportCityList() {
      return this.tradeCityList.filter((item) => item.type === 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type === 1);
    },
    exportWarehouseList(){
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(item => +item.tradeType === 2 || +item.tradeType === 3)
    },
    importWarehouseList(){
      return this.warehouseList.filter(item => +item.tradeType === 1 || +item.tradeType === 3)
    },
    // 序号起始
    startNo(){
      return (this.queryParams.page - 1) * this.queryParams.rows + 1
    }
  },
  methods: {
    getCurrencyLabel(id){
      const item = this.currencyList.find(item => item.id === id);
      if(!item)return ''
      return this.$l(item, 'title')
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let params = {...this.queryParams, containerNumber: this.$route.query.containerNumber}
      this.addBeginAndEndTime(params, this.dateFilter, this.dateFilterType, false);
      // 执行查询
      orderSummaryByContainerNumber(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    handleReset(){
      this.$refs['queryForm'].resetFields()
      this.dateFilter = []
      this.dateFilterType = ''
      this.handleQuery()
    },
    // 导出搜索
    handleExport(){
      this.exporting = true
      let params = {...this.queryParams, containerNumber: this.$route.query.containerNumber}
      this.addBeginAndEndTime(params, this.dateFilter, this.dateFilterType, false);
      exportOrderSummaryByContainerNumber(params).then(res => {
        this.$download.excel(res, params.containerNumber + '.xls');
      }).finally(() => {
        this.exporting = false
      })
    }
  },
};
</script>

<style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}
</style>