<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        inline
        class="card"
      >
        <el-form-item :label="$t('自编号')" prop="selfNo">
          <el-input v-model="queryParams.selfNo" clearable></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('始发仓')"
          :rules="{ required: true, message: $t('请选择始发仓') }"
          prop="startWarehouseIdList"
          @change="handleSelect"
        >
          <el-select
            v-model="queryParams.startWarehouseIdList"
            
            multiple
            :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('目的国')"
          :rules="{ required: true, message: $t('请选择目的国') }"
          prop="destCountryId"
        >
          <el-select
            v-model="queryParams.destCountryId"
            :placeholder="$t('请选择')"
            filterable
            default-first-option
          >
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="$l(item, 'title')"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的仓')" prop="destWarehouseIdList">
          <el-select
            v-model="queryParams.destWarehouseIdList"
            multiple
            :placeholder="
              queryParams.destCountryId ? $t('请选择') : $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('自编号状态')" prop="boxStatus">
          <dict-selector
            :type="DICT_TYPE.BOX_ORDER_SHIPMENT_STATE"
            v-model="queryParams.boxStatus"
            clearable
          ></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('结算时间')" prop="dateFilter">
          <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="slStatus">
          <dict-selector
            :type="DICT_TYPE.SETTLEMENT_STATUS"
            v-model="queryParams.slStatus"
            clearable
          ></dict-selector>
        </el-form-item>

        <el-form-item :label="$t('到港时间')" prop="daogangTime">
          <el-date-picker
            v-model="daogangTime"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            value-format="yyyy-MM-dd HH:mm:ss"
            
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item :label="$t('卸柜/到仓时间')" prop="ulWarehouseTime">
          <el-date-picker
            v-model="ulWarehouseTime"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            value-format="yyyy-MM-dd HH:mm:ss"
           
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item :label="$t('清关时间')" prop="qingguanTime">
          <el-date-picker
            v-model="qingguanTime"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            value-format="yyyy-MM-dd HH:mm:ss"
          
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            :loading="loading"
            >{{ $t("查询") }}</el-button
          >
          <el-button
            type="primary"
            :loading="exporting"
            icon="el-icon-download"
            @click="handleExport"
            >{{ $t("导出搜索") }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
      v-loading="loading"
      :data="list"
      border
      class="card"
      :element-loading-text="$t('汇总计算中...')"
      show-summary
      :summary-method="getSummary"
    >
      <el-table-column :label="$t('是否结算')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.SETTLEMENT_STATUS"
            :value="scope.row.slStatus"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('No.柜号')" align="center" prop="selfNo">
        <template slot-scope="scope">
          <el-button
            v-if="permissions.indexOf('selfno:report:detail') > -1"
            type="text"
            @click="
              $router.push(
                './self_no_report_detail?containerNumber=' + scope.row.selfNo
              )
            "
            >{{ scope.row.selfNo }}</el-button
          >
          <span v-else>{{ scope.row.selfNo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('应收款(Accounts receivable)USD')"
        prop="summaryInfo.netReceiptsCollectFreightFeeGroup"
      >
        <template slot-scope="{ row }">
          {{ row.summaryInfo.receivableTotalFee
          }}{{ row.summaryInfo.receivableTotalFeeCurrency }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('应收款 RECEIVABLE')"
        align="center"
        prop="summaryInfo.receivableTotalFeeGroup"
      >
        <el-table-column
          :label="$t('运费 FREIGHT') + ColumnCurrencyName('Freight')"
          prop="summaryInfo.netReceiptsCollectFreightFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalReceivableFreightFee
            }}{{ row.summaryInfo.totalFreightFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('清关费 CLEARING FEE') + ColumnCurrencyName('Clearance')"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalReceivableClearanceFee
            }}{{ row.summaryInfo.totalClearanceFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('额外费用 EXTRAL FEE') + ColumnCurrencyName('Other')"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalReceivableOtherFee
            }}{{ row.summaryInfo.totalOtherFeeCurrency }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        :label="
          'received in ' +
          (dstCountryName || $t('目的国')) +
          `(${$t('目的地实收')})`
        "
        align="center"
        prop=""
      >
        <el-table-column
          :label="$t('运费') + ColumnCurrencyName('Freight')"
          prop="summaryInfo.netReceiptsCollectFreightFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalNetReceiptsCollectFreightFee
            }}{{ row.summaryInfo.totalFreightFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('清关费') + ColumnCurrencyName('Clearance')"
          prop="summaryInfo.netReceiptsCollectClearanceFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalNetReceiptsCollectClearanceFee
            }}{{ row.summaryInfo.totalClearanceFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('额外费用') + ColumnCurrencyName('Other')"
          prop="summaryInfo.netReceiptsCollectOtherFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalNetReceiptsCollectOtherFee
            }}{{ row.summaryInfo.totalOtherFeeCurrency }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        :label="$t('received in China(中国实收)')"
        align="center"
        prop=""
      >
        <el-table-column
          :label="$t('运费') + ColumnCurrencyName('Freight')"
          prop="summaryInfo.netReceiptsAdvanceFreightFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.netReceiptsAdvanceFreightFee
            }}{{ row.summaryInfo.totalFreightFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('清关费') + ColumnCurrencyName('Clearance')"
          prop="summaryInfo.netReceiptsAdvanceClearanceFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalNetReceiptsAdvanceClearanceFee
            }}{{ row.summaryInfo.totalClearanceFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('额外费用') + ColumnCurrencyName('Other')"
          prop="summaryInfo.netReceiptsAdvanceOtherFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.totalNetReceiptsAdvanceOtherFee
            }}{{ row.summaryInfo.totalOtherFeeCurrency }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Discounts 折扣')" align="center" prop="">
        <el-table-column
          :label="$t('运费') + ColumnCurrencyName('Freight')"
          prop="summaryInfo.discountFreightFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.discountFreightFee
            }}{{ row.summaryInfo.totalFreightFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('清关费') + ColumnCurrencyName('Clearance')"
          prop="summaryInfo.discountClearanceFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.discountClearanceFee
            }}{{ row.summaryInfo.totalClearanceFeeCurrency }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('额外费用') + ColumnCurrencyName('Other')"
          prop="summaryInfo.discountOtherFeeGroup"
        >
          <template slot-scope="{ row }">
            {{ row.summaryInfo.discountOtherFee
            }}{{ row.summaryInfo.totalOtherFeeCurrency }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        v-if="permissions.indexOf('selfno:report:detail') > -1"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              $router.push(
                './self_no_report_detail?containerNumber=' + scope.row.selfNo
              )
            "
            >{{ $t("查看") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getCurrencyPage } from "@/api/ecw/currency";
import { getWarehouseList } from "@/api/ecw/warehouse";
import store from "@/store";
import { boxSettlementPage, exportSettlementExcel } from "@/api/ecw/box";
import { getListTree } from "@/api/ecw/region";
import Decimal from "decimal.js";
export default {
  name: "EcwFinancialSelfnoreport",
  data() {
    return {
      loading: false, // 是否加载中
      dateFilter: [], // 筛选时间
      qingguanTime:[],
      daogangTime:[],
      ulWarehouseTime:[],
      list: [],
      total: 0,
      queryParams: {
        page: 1,
        rows: 10,
        startWarehouseIdList: [],
        destWarehouseIdList: [],
      },
      exportWarehouseList:[],
      // tradeCityList: [],
      currencyList: [],
      warehouseList: [],
      countryList: [],
      // 导出中状态
      exporting: false,
    };
  },

  activated() {
    // 如果有必须的条件则查询
    if (
      this.queryParams.startWarehouseIdList.length &&
      this.queryParams.dstCountryId
    ) {
      this.getList();
    }
  },
  created() {
  this.handleSelect();

    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
      let da=  res.data.filter(
        (item) => +item.tradeType === 2 || +item.tradeType === 3
      );
    
      let ids = da.map(item => item.id);   
  
      this.$set(this.queryParams, "startWarehouseIdList", ids);
      
      this.exportWarehouseList = da;//下拉框数据
     
    } 
    
    );
    getListTree({ treeType: 1 }).then((r) => {
      this.countryList = r.data;
    });
    
  },
  watch: {
    // 目的国变更后要重置目的仓
    "queryParams.destCountryId": function () {
      this.$set(this.queryParams, "destWarehouseId", "");
    },
  },
  computed: {
    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
    //   );
    // },
    t() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(
        (item) => +item.tradeType === 2 || +item.tradeType === 3
      );
    },

    importWarehouseList() {
      // 目的仓根据选择的目的国过滤
      if (!this.queryParams.destCountryId) return [];
      return this.warehouseList.filter((item) => {
        return (
          this.queryParams.destCountryId === item.guojia &&
          (+item.tradeType === 1 || +item.tradeType === 3)
        );
      });
    },
    // 目的国名称
    dstCountryName() {
      if (!this.queryParams.destCountryId) return null;
      const country = this.countryList.find(
        (item) => item.id == this.queryParams.destCountryId
      );
      if (!country) return null;
      return this.$l(country, "title");
    },
    // 获取列的货币名称 columnName 取值为Other, Freight, Clearance
    ColumnCurrencyName() {
      return (columnName, wrapper = true) => {
        if (!this.list.length) return "";
        let field = `total${columnName}FeeCurrency`;
        return wrapper
          ? `(${this.list[0]["summaryInfo"][field]})`
          : this.list[0]["summaryInfo"][field];
      };
    },
  },
  methods: {

    handleSelect(val){
      console.log("带")
      //console.log(this.currencyList)
    }, 
   
    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,
        startWarehouseIdList: this.queryParams.startWarehouseIdList.join(","),
        destWarehouseIdList: this.queryParams.destWarehouseIdList.join(","),
      };
      this.addBeginAndEndTime(params, this.dateFilter, "JsDate", false);
      this.addBeginAndEndTime(params, this.ulWarehouseTime, "UlWarehouseTime", false);

      this.addBeginAndEndTime(params, this.daogangTime, "DaogangTime", false);
      this.addBeginAndEndTime(params, this.qingguanTime, "QingguanTime", false);
      
      // 执行查询
      boxSettlementPage(params)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getTotal(field) {
      let total = new Decimal(0);
      this.list.forEach((item) => {
        total = total.plus(item.summaryInfo[field] || 0);
      });
      return total.toNumber();
    },
    // 返回汇总行数据
    getSummary() {
      const FreightCurrencyName = this.ColumnCurrencyName("Freight", false);
      const ClearanceCurrencyName = this.ColumnCurrencyName("Clearance", false);
      const OtherCurrencyName = this.ColumnCurrencyName("Other", false);
      const data = [
        this.$t("合计"),
        "",
        // 应收款
        this.getTotal("receivableTotalFee") + "USD",
        // 应收运费
        this.getTotal("totalReceivableFreightFee") + FreightCurrencyName,
        // 应收清关费
        this.getTotal("totalReceivableClearanceFee") + ClearanceCurrencyName,
        // 应收其他费用
        this.getTotal("totalReceivableOtherFee") + OtherCurrencyName,
        // 目的地实收运费
        this.getTotal("totalNetReceiptsCollectFreightFee") +
          FreightCurrencyName,
        // 目的地实收清关费
        this.getTotal("totalNetReceiptsCollectClearanceFee") +
          ClearanceCurrencyName,
        // 目的地实收其他费用
        this.getTotal("totalNetReceiptsCollectOtherFee") + OtherCurrencyName,
        // 中国实收运费
        this.getTotal("netReceiptsAdvanceFreightFee") + FreightCurrencyName,
        // 中国实收清关费
        this.getTotal("netReceiptsAdvanceClearanceFee") + ClearanceCurrencyName,
        // 中国实收其他费用
        this.getTotal("netReceiptsAdvanceOtherFee") + OtherCurrencyName,
        // 运费折扣
        this.getTotal("discountFreightFee") + FreightCurrencyName,
        // 清关费折扣
        this.getTotal("discountClearanceFee") + ClearanceCurrencyName,
        // 其他费用折扣
        this.getTotal("discountOtherFee") + OtherCurrencyName,
      ];
     
      return data;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.queryForm.validate().then(() => {
        this.queryParams.page = 1;
        this.getList();
      });
    },
    handleReset() {
      this.$refs["queryForm"].resetFields();
      this.dateFilter = [];
      this.handleQuery();
    },
    // 导出搜索
    handleExport() {
      this.$refs.queryForm.validate().then(() => {
        this.exporting = true;
        let params = { ...this.queryParams };
        this.addBeginAndEndTime(params, this.dateFilter, "JsDate", false);

        this.addBeginAndEndTime(params, this.ulWarehouseTime, "UlWarehouseTime", false);

        this.addBeginAndEndTime(params, this.daogangTime, "DaogangTime", false);
        this.addBeginAndEndTime(params, this.qingguanTime, "QingguanTime", false);

        exportSettlementExcel(params)
          .then((res) => {
            //this.$download.excel(res, 'shipment-summary.xls');
            this.$message.success(
              this.$t("已加入导出队列，请稍后在下载日志中下载")
            );
          })
          .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>