<template>
  <div>
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item :label="$t('编号')">
        <el-input
          v-model.trim="noParam.value"
          :placeholder="$t('请输入快递号、包裹号、订单号')"
          clearable
          class="w-200"
          @input="replaceSpace(noParam, 'value')"
          @keyup.enter.native="handleQuery">
          <template slot="prepend">
            <dict-selector :type="DICT_TYPE.ORDER_QUERY_NO_FIELD" defaultable v-model="noParam.key" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="签收时间" prop="signedTime">
        <el-date-picker clearable v-model="queryParams.signedTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('选择签收时间')" />
      </el-form-item>
      <el-form-item :label="$t('客户经理')">
        <user-selector manage v-model="queryParams.salesmanIds" multiple clearable @change="handleQuery" :prepend="{ id: 0, nickname: $t('未分配客户经理') }" class="w-200" />
      </el-form-item>
      <el-form-item :label="$t('集运仓')">
        <el-select v-model="queryParams.wareId" :placeholder="$t('请选择仓库')" filterable>
          <el-option v-for="warehouse in this.warehouseList" :key="warehouse.id" :label="$l(warehouse,'title')" :value="warehouse.id" v-if="warehouse.isConsService"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('运输方式')" prop="transportId">
        <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" class="w-200" />
      </el-form-item>
      <el-form-item :label="$t('目的国')" prop="consigneeCountryId">
        <el-select v-model="queryParams.consigneeCountryId"  :label="queryParams.consigneeCountryId" :placeholder="$t('请选择目的国')" clearable @change="handleQuery" class="w-200">
          <el-option v-for="item in AddressProvince" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('目的城市')" prop="consigneeCityId">
        <el-select v-model="queryParams.consigneeCityId"  :placeholder="$t('请选择目的城市')" style="width: 200px" clearable @change="handleQuery" class="w-200">
          <el-option v-for="item in AddressCity" :key="item.shi" :label="item.shiName" :value="item.shi"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('出货渠道')" prop="shippingChannelIdList">
        <el-select v-model="queryParams.shippingChannelIdList" multiple :placeholder="$t('请选择出货渠道')" clearable>
          <el-option v-for="item in channelList" :label="$l(item, 'name')" :value="item.channelId" :key="item.channelId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 合计列 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="15">
        <!-- 订单列表显示搜索条件对应箱数、仓库实测、收款方数、重量 -->
        {{ $t("合计：{totalNum}箱，{totalVolume}m³(测) {totalChargeVolume}m³(重) {totalWeight}KG(测), {totalChargeWeight}kg(收费)", statisticsOrder) }}
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getOrderList"></right-toolbar>
    </el-row>

    <!-- 操作工具栏 -->

    <!-- 表格内容 -->
    <el-table v-loading="loading" :data="list" border ref="dataTable">
      <el-table-column :label="$t('快递单号')" align="center" prop="expressNo"></el-table-column>
      <el-table-column :label="$t('签收时间')" align="center" prop="signedTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.signedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('运输方式-渠道')+'/'+$t('目的仓')" align="center" prop="code" width="150">
        <template slot-scope="scope">
          /{{isChinese?scope.row.destTitleZh:scope.row.destTitleEn}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('包裹状态')" align="center" prop="code">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.CONS_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <!-- 转运时间取订单创建时间 -->
      <el-table-column :label="$t('转运时间')" align="center" prop="code">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.signedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('转运单号')" align="center" prop="code">
      </el-table-column>
      <el-table-column :label="$t('订单状态')" align="center" prop="code">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.orderStatus" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('填单数据')" align="center" prop="code">
        <template slot-scope="scope">
          <span v-html="getGoodsName(scope.row.consItemList)"></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('验货数据')" align="center" prop="code">
        <template slot-scope="scope">
          {{getInspectionInfo(scope.row.consItemList)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('包裹号')" align="center" prop="consNum"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/>
  </div>
</template>

<script>
import { getConsPage } from '@/api/ecw/cons'
import Template from '@/views/cms/template/index.vue'
import UserSelector from '@/components/UserSelector/index.vue'
import { getWarehouseList } from '@/api/ecw/warehouse'
import { getRegionList } from '@/api/ecw/order'

export default {
  name: "CustomerConsOrder",
  components: { UserSelector, Template },
  /**
   * 可以单独作为页面，也可以作为组件被被客户详情页调用。
   * 作为组件时要传入 customerId，用于限制范围和隐藏搜索筛选，可以通过this.customer直接使用
   */
  props: {
    customerId: Number,
  },

  data(){
    return{
      // 遮罩层
      loading: true,
      // 表格内容
      list: [],
      // 总条数
      total: 0,
      dateRangeWatEtime: [],
      dateRangeWatTime: [],
      dateRangeSignedTime: [],
      dateRangeCreateTime: [],
      // 进口仓库列表
      warehouseList: [],
      // 目的国家列表
      AddressProvince:[],
      // 目的城市列表
      AddressCity:[],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        customerId: this.customerId, // 通过上一个页面传过来的值，默认只获取当前客户的数据
        consigneeCountryId: null,
        consigneeCityId: null,
        shippingChannelIdList: null,
        //查询字段...
      },
      // 编号查询条件
      noParam: {
        key: "numberKey",
        value: ""
      },


    }
  },

  // 数据的值有变动时执行
  computed:{
    // 判断国际化语言
    isChinese() {
      return this.$i18n.locale === "zh_CN";
    },
    // 监听查询参数
    combinedQueryParams(){
      let queryParams = {...this.queryParams}
      // 处理编号查询参数
      if (this.noParam.value) {
        queryParams[this.noParam.key] = this.noParam.value
      }
      return queryParams
    },
  },
  // 第一次进入页面时执行（只执行一次）
  created() {
    // 获取表格内容
    this.getList();
    // 获取进口类型的仓库列表
    getWarehouseList({tradeType : 2}).then((r) => {
      this.warehouseList = r.data;
    });
    // 获取国家列表
    this.getAddressProvince()
    // 获取城市列表
    this.getAddressCity()
  },

  methods:{
    /**
     * 获取表格内容
     */
    getList() {
      // 处理查询参数
      let params = { ...this.combinedQueryParams };
      // 处理时间查询参数
      this.addBeginAndEndTime(params, this.dateRangeWatEtime, 'watEtime');
      this.addBeginAndEndTime(params, this.dateRangeWatTime, 'watTime');
      this.addBeginAndEndTime(params, this.dateRangeSignedTime, 'signedTime');
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行查询
      getConsPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /**
     * 搜索按钮
     */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /**
     * 重置按钮
     */
    resetQuery() {
      this.dateRangeWatEtime = [];
      this.dateRangeWatTime = [];
      this.dateRangeSignedTime = [];
      this.dateRangeCreateTime = [];
      this.noParam.value = ""
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 获取国家地区列表
     */
    getAddressProvince() {
      getRegionList(1, 1).then(({ data }) => {
        this.AddressProvince = data
      })
    },
    /**
     * 获取城市列表
     */
    getAddressCity() {
      getRegionList(4, 4).then(({ data }) => {
        this.AddressCity = data
      })
    },
    /**
     * 获取填单数据
     */
    getGoodsName(val){
      return val.map((item, index) => `${index + 1}.${item.prodName}*${item.quantity}`).join('<br>');
    },
    /**
     * 获取验货数据
     */
    getInspectionInfo(val){
      let inspectionNums = 0;
      let inspectionUnit;
      let inspectionQuantitys=0;
      let inspectionVolumes=0;
      let inspectionWeights=0;
      val.forEach(item => {
        inspectionUnit = item.inspectionUnit;
        inspectionNums += item.inspectionNum;
        inspectionQuantitys += item.inspectionQuantity;
        inspectionVolumes += item.inspectionVolume;
        inspectionWeights += item.inspectionWeight;
      });
      return `${inspectionQuantitys}${inspectionUnit} ${inspectionVolumes}m³ ${inspectionWeights}kg ${inspectionNums}件`;
    },
    /**
     * 去除空格
     */
    replaceSpace(obj, field) {
      obj[field] = obj[field].replace(/\s+/g, "")
    },

  }
}


</script>
