<template>
  <div class="app-container">
    <el-card>
      <el-form ref="formSearch" :model="queryParams" label-width="100px" label-position="left" :inline="true">
        <el-form-item :label="$t('运输方式') + ':'" prop="transportId">
          <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" :placeholder="$t('请选择运输方式')" style="width: 200px" />
        </el-form-item>
        <el-form-item :label="$t('始发仓')" prop="departureWareHouseId">
          <el-select style="width: 200px" v-model="queryParams.departureWareHouseId" multiple :placeholder="$t('请选择始发仓')" clearable @change="handleQuery">
            <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的国')" prop="destCountry">
          <el-select style="width: 200px" v-model="queryParams.destCountry" multiple :placeholder="$t('请选择目的国')" clearable @change="handleQuery">
            <el-option v-for="item in countryList" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的城市')" prop="destCity">
          <el-select style="width: 200px" v-model="queryParams.destCity" multiple :placeholder="$t('请选择目的城市')" clearable @change="handleQuery">
            <el-option v-for="item in cityList" :key="item.shi" :label="item.shiName" :value="item.shi"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的仓')" prop="objectiveWareHouseId">
          <el-select style="width: 200px" v-model="queryParams.objectiveWareHouseId" multiple :placeholder="$t('请选择目的仓')" clearable @change="handleQuery">
            <el-option v-for="item in objWareHouseList" :key="item.id" :label="item.titleZh" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('订单号')" prop="orderNo">
          <el-input style="width: 200px" v-model.trim="queryParams.orderNo" :placeholder="$t('请输入订单号')" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('提单号')">
          <el-input style="width: 200px" v-model="queryParams.tidanNo" :placeholder="$t('请输入提单号')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('付款方') + ':'" label-width="100px" prop="payer">
          <el-select style="width: 200px" v-model="queryParams.payer" clearable>
            <el-option :label="$t('发货方')" value="1"></el-option>
            <el-option :label="$t('收货方')" value="2"></el-option>
            <el-option :label="$t('自定义')" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('收货人')" prop="consignee">
          <el-input style="width: 200px" v-model.trim="queryParams.consignee" :placeholder="$t('请输入收货人')" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('发货人')" prop="consignor">
          <el-input style="width: 200px" v-model.trim="queryParams.consignor" :placeholder="$t('请输入发货人')" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="10" class="mb8 pad-t">
      <el-col :span="1.5">
        <el-button @click="batGNRTReceipt" type="primary" plain icon="el-icon-plus" size="mini">{{ $t("批量生成收款单") }} </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" border class="card">
      <el-table-column type="selection" width="55" align="center" fixed="left"> </el-table-column>
      <el-table-column width="200" align="center" :label="$t('运输信息')">
        <template v-slot="{ row }"> {{ getWareHouseLabel(row.departureWareHouseId) }}- <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId"></dict-tag> /{{ getWareHouseLabel(row.objectiveWareHouseId) }} </template>
      </el-table-column>
      <el-table-column :label="$t('订单号')" prop="orderNo">
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/order/detail',
              query: { orderId: scope.row.orderId }
            }"
            class="link-type"
          >
            <span>{{ scope.row.orderNo }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('提单号')" prop="tidanNo" />
      <el-table-column :label="$t('付款方')" width="160" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.drawee == 3"> {{ $t("自定义") }}</span>
          <span v-else> {{ scope.row.drawee == 1 ? $t("发货人") : $t("收货人") }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('付款名称')" width="160" align="center">
        <template v-slot="{ row }">
          <div>
            <router-link :to="`/customer/query/${row.payerId}`" class="link-type">
              {{ row.customerNo }}
            </router-link>
          </div>
          <div>{{ row.payerName ? row.payerName : row.customerName }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单状态')">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="row.orderStatus" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收汇总')">
        <template slot-scope="{ row }">
          <div v-for="item in row.receivableAmount">
            {{ getCurrencySymbol(item.currencyId) }}
            {{ item.amount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('自编号状态')" prop="selfNoStatus">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.BOX_ORDER_SHIPMENT_STATE" value="row.selfNoStatus"></dict-tag>
        </template>
      </el-table-column>

      <el-table-column :label="$t('费用明细')" fixed="right">
        <template v-slot="{ row }">
          <div>
            <router-link :to="`/financial/orderItemCostDetails/${row.orderId}/${row.drawee}`" class="link-type">
              {{ $t("费用明细") }}
            </router-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import { getWarehouseList } from "@/api/ecw/warehouse"
import { getRegionList } from "@/api/ecw/order"
import { loadBatGNRTReceiptList } from "@/api/ecw/financial"
export default {
  data() {
    return {
      total: 0,
      loading: true,
      list: [],
      // 始发仓
      exportWarehouseList: [],
      objWareHouseList: [],
      cityList: [],
      countryList: [],
      multipleSelectedList: [],
      queryParams: {
        departureWareHouseId: [], //始发地
        destCountry: [], //目的国
        destCity: [],
        objectiveWareHouseId: [],
        transportId: "", //运输方式
        page: 1,
        rows: 10
      }
    }
  },
  computed: {
    ...mapGetters(["getCurrencySymbol"])
  },
  watch: {
    "queryParams.destCountry": {
      handler(val, oldVal) {
        this.queryParams.destCity = []
        if (val && val.length > 0) {
          this.loadCityList(2, val.join())
        } else {
          this.loadCityList()
        }
      }
    },
    "queryParams.destCity": {
      handler(val, oldVal) {
        this.queryParams.objectiveWareHouseId = []
        if (val.length > 0) {
          this.loadWareHouseList(3, val.join())
        } else {
          this.loadWareHouseList()
        }
      }
    }
  },
  created() {
    this.init()
    getWarehouseList().then((res) => {
      this.warehouseList = res.data
      /* tradeType 1 进口，2出口，3进出口 */
      this.exportWarehouseList = res.data.filter((item) => item.tradeType == 2 || item.tradeType == 3)
    })
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelectedList = val
    },
    getWareHouseLabel(id) {
      const houseItem = this.warehouseList.filter((item) => {
        return item.id == id
      })
      return houseItem.length > 0 ? this.$l(houseItem[0], "title") : "-"
    },
    init() {
      //请求获取国家
      this.loadCityList()
      this.loadWareHouseList()
      this.loadCountyList()
    },
    //目的地
    loadWareHouseList(type = 5, cityId = 5) {
      getRegionList(type, cityId)
        .then(({ data }) => {
          this.objWareHouseList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadCityList(type = 4, countryId = 4) {
      getRegionList(type, countryId)
        .then(({ data }) => {
          this.cityList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadCountyList() {
      getRegionList(1, 1)
        .then(({ data }) => {
          this.countryList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getAddressTown() {
      getRegionList(5, 5).then(({ data }) => {
        this.AddressTown = data
      })
    },
    resetQuery() {
      this.$refs["formSearch"].resetFields()
      this.queryParams.page = 1
      this.queryParams.rows = 10
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      this.$nextTick(() => {
        this.queryParams.page = 1
        this.getList()
      })
    },
    batGNRTReceipt() {
      if (this.multipleSelectedList.length == 0) {
        this.$modal.msgError(this.$t("请先选择"))
        return
      }
      const ids = this.multipleSelectedList.map((item) => {
        return item.orderId
      })
      this.$router.push({ path: "/financial/batchGenerateReceipt/" + ids })
    },
    getList() {
      this.loading = true
      loadBatGNRTReceiptList(this.queryParams).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pad-t {
  padding: 10px 0;
}
</style>
