<template>
  <div class="app-container">

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8" style="margin-right: 60px">
      <div class="card-title">{{ $t('待收款') }}</div>
      <el-button
        style="float: right; margin-left: 10px"
        type="primary"
        size="mini"
        v-hasPermi="['ecw:receivable:add']"
        @click="handleAdd(0)"
        >{{ $t('新增收款单') }}</el-button
      >
      <el-button
        v-if="showSearch"
        style="float: right"
        type="primary"
        size="mini"
        icon="el-icon-s-unfold"
        @click="showSearch = !showSearch"
      ></el-button>
      <el-button
        v-else
        style="float: right"
        type="primary"
        size="mini"
        icon="el-icon-s-fold"
        @click="showSearch = !showSearch"
      ></el-button>
    </el-row>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="80px"
        class="card"
      >
        <el-row>
          <el-form-item :label="$t('始发地')">
            <el-select
              v-model="queryParams.departureId"
              :placeholder="$t('请选择始发地')"
              clearable
            >
              <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('目的地')">
            <el-select
              v-model="queryParams.objectiveId"
              :placeholder="$t('请选择目的地')"
              clearable
            >
              <el-option
                v-for="item in importWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('运输方式')">
            <dict-selector
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              v-model="queryParams.transportId"
              formatter="number"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('控货')">
            <dict-selector
              :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
              v-model="queryParams.isCargoControl"
              clearable
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('订单状态')">
            <dict-selector
              :type="DICT_TYPE.ORDER_STATUS"
              v-model="queryParams.status"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('报关方式')">
            <dict-selector
              :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
              v-model="queryParams.customsType"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('订单号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入订单编号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('品名')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.title"
              :placeholder="$t('请输入品名')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('提单号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.tidanNo"
              :placeholder="$t('请输入提单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('唛头')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.marks"
              :placeholder="$t('请输入唛头')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('费用类型')">
            <dict-selector
              :type="DICT_TYPE.FEE_TYPE"
              v-model="queryParams.feeType"
              clearable
            ></dict-selector>
          </el-form-item>
<!--          <el-form-item :label="$t('发货人')">
            <customer-selector
              v-model="queryParams.consignorNameOrPhone"
              @change="consignor = $event"
              clearable
            />
          </el-form-item> -->
            <el-form-item label="发货人:" >
              <el-input style="max-width: 188px;" v-model="queryParams.consignorNameOrPhone" :placeholder="$t('请输入发货人')" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('收货人')">
            <el-input style="max-width: 188px;" v-model="queryParams.consigneeNameOrPhone" :placeholder="$t('请输入收货人')" clearable @keyup.enter.native="handleQuery"/>
<!--           <customer-selector
              v-model="queryParams.consigneeNameOrPhone"
              @change="consignor = $event"
              clearable
            /> -->
          </el-form-item>
          <el-form-item :label="$t('创建时间')">
            <!-- <dict-selector :type="DICT_TYPE.BEGINTIME_TYPE_ENDTIME" v-model="queryParams.date"></dict-selector> -->
            <el-date-picker
              v-model="dateType"
              type="datetimerange"
              range-separator="-"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('请选择日期')"
              :end-placeholder="$t('请选择日期')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            ></el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column :label="$t('订单号')" align="center" prop="orderNo" />
      <el-table-column :label="$t('唛头')" align="center" prop="marks" />
      <el-table-column :label="$t('品名')" align="center" prop="title">
        <template slot-scope="scope">
          {{ scope.row.titleZh? (scope.row.titleZh + "(" + scope.row.titleEn + ")"):'' }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('箱数')" align="center" prop="num" />
      <el-table-column :label="$t('体积/重量')" align="center" prop="weight" >
        <template slot-scope="scope">
            {{ scope.row.volume}}/ {{ scope.row.weight}}
          </template>
        </el-table-column>
      <el-table-column :label="$t('发货人')" align="center" prop="consignorName" />
      <el-table-column :label="$t('收货人')" align="center" prop="consigneeName" />
      <el-table-column :label="$t('订单状态')" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('收入类型')" align="center" prop="feeType">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.FEE_TYPE"
            :value="scope.row.feeType"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('单价')" align="center" prop="unitPrice">
        <template slot-scope="scope">
          <span>{{ scope.row.unitPrice }}{{getCurrencyLabel(scope.row.currencyId)}}</span>
          <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" /> -->
        </template>
      </el-table-column>
      <el-table-column :label="$t('总金额')" align="center" prop="totalAmount">
        <template slot-scope="scope">
          <span>{{ scope.row.totalAmount }}{{getCurrencyLabel(scope.row.currencyId)}}</span>
          <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" /> -->
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-hasPermi="['ecw:receivable:collection']" @click="handleAdd(scope.row.id)" >{{ $t('收款') }}</el-button>
        </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 { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import CustomerSelector from "@/components/CustomerSelector";
import { getTradeCityList } from "@/api/ecw/region";
import { getReceivableList } from "@/api/ecw/financial";
import { getCurrencyPage } from "@/api/ecw/currency";
import {getWarehouseList} from '@/api/ecw/warehouse'

export default {
  name: "EcwFinancialReceivable",
  components: {
    CustomerSelector
  },
  data() {
    return {
      showSearch: true,
      loadings: false,
      form: {},
      creatorData: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      params: {
        page: 1,
        rows: 20,
      },
      queryParams: {
        page: 1,
        rows: 20,
      },
      tradeCityList: [],
	  params: {
	    page: 1,
	    rows: 20,
	  },
	  currencyList:[],
    warehouseList:[],
    };
  },
  activated(){
    console.log(11)
    this.getList();
  },
  created() {
    let that = this;
	getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    userList("salesman").then((res) => (that.creatorData = res.data));
    getTradeCityList().then((res) => (that.tradeCityList = res.data));
    this.getList();
     getWarehouseList().then(res => this.warehouseList = res.data)
  },

  computed: {
    expoerCityList() {
      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)
    },
  },
  methods: {
	  getCurrencyLabel(id){
	    var label = this.currencyList.filter(item=>item.id == id)
	    if(label.length>0) return this.$i18n.locale=='zh_CN'?label[0].titleZh:label[0].titleEn
	    return ''
	  },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      console.log(this.queryParams)
      let params = {};
      for(let key in this.queryParams){
        if(this.queryParams[key]&&this.queryParams[key]!= undefined){
          params[key] = this.queryParams[key]
        }
      }

      this.addBeginAndEndTime(params, this.dateType, "createTime");
      // 执行查询
      getReceivableList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatCollection?receiptId=" + id);
    },
    submitForm() {},
  },
};
</script>

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