<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-row>
        <el-form-item >
          <el-select v-model="queryParams.dateType" style="width: 172px;" clearable>
             <el-option :label="$t('入仓时间')" value="1"/>
             <el-option :label="$t('处理时间')" value="2"/>
          </el-select>
          <el-date-picker clearable v-model="queryParams.beginCreateTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('请选择开始日期')" />
         <span style="margin: 0 8px;">{{$t('到')}}</span>
          <el-date-picker clearable v-model="queryParams.endCreateTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('请选择结束日期')" />
        </el-form-item>
       <el-form-item :label="$t('始发仓')" prop="destinationId">
          <el-select v-model="queryParams.originId" :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('目的仓')" prop="destinationId">
          <el-select v-model="queryParams.destinationId" :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('始发地')+':'">
            <el-select v-model="queryParams.originId" :placeholder="$t('请选择始发地')" clearable>
                <el-option v-for="item in expoerCityList" :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.destinationId" :placeholder="$t('请选择目的地')" clearable>
             <el-option v-for="item in importCityList" :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" :clearable="true" v-model="queryParams.transportId" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item :label="$t('控货')+':'">
             <dict-selector :type="DICT_TYPE.ECW_YESNO" :clearable="true" v-model="queryParams.isCargoControl" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item :label="$t('异常状态')+':'">
             <dict-selector :type="DICT_TYPE.ORDER_EXCEPTION_STATUS" :clearable="true" v-model="queryParams.orderExceptionStatus" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item :label="$t('异常类型')+':'">
            <dict-selector :type="DICT_TYPE.ORDER_ERROR_TYPE" :clearable="true" v-model="queryParams.orderExceptionType" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item :label="$t('订单号')+':'">
          <el-input v-model="queryParams.orderNo" :placeholder="$t('请输入订单号')" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-row>
      <el-row>
<!--        <el-form-item :label="$t('发货人')+':'">
            <customer-selector v-model="queryParams.consignor" :clearable="true" @change="consignor = $event" />
        </el-form-item>
        <el-form-item :label="$t('发货人')+':'">
            <customer-selector v-model="queryParams.consignor" :clearable="true" @change="consignor = $event" />
        </el-form-item> -->
        <el-form-item :label="$t('发货人')" prop="consignorText">
          <el-input v-model="queryParams.consignorText" :placeholder="$t('发货人')" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('收货人')" prop="consigneeText">
          <el-input v-model="queryParams.consigneeText" :placeholder="$t('收货人')" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('唛头')+':'">
          <el-input v-model="queryParams.marks" :placeholder="$t('请输入唛头')" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item :label="$t('品名')+':'">
          <product-selector v-model="queryParams.goodsName" :clearable="true" @keyup.enter.native="handleQuery" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item :label="$t('备案')+':'">
             <dict-selector :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :clearable="true" v-model="queryParams.productRecord" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item :label="$t('客户经理')+':'">
         <el-select v-model="queryParams.salesmanId" :placeholder="$t('请选择跟进业务')" clearable>
          <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('外部仓')" prop="number">
          <el-select v-model="queryParams.isExternalWarehouse" :placeholder="$t('请选择')" clearable @change="handleQuery">
            <el-option :label="$t('外部仓')" :value="1"></el-option>
            <el-option :label="$t('自有仓')" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
          <!-- <el-button icon="el-icon-refresh" @click="reset">{{ $t('重置') }}</el-button> -->
        </el-form-item>
      </el-row>
    </el-form>


    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <el-button type="primary" size="mini" @click="exportSearch" v-hasPermi="['ecw:exception:export']">导出</el-button>
      </el-col>
      <el-col :span="12"><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-col>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" border :data="list">
      <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
        <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单号')" align="center">
        <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>
             <span>{{specialNeedTag(scope.row.specialNeed)}}</span>
         </template>
       </el-table-column>
      <el-table-column :label="$t('唛头')" align="center" >
        <template slot-scope="scope">
          <span>{{scope.row.marks||$t('无')}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('总箱数/入仓箱数')" align="center" >
      <template slot-scope="scope">
          <p v-if="scope.row.orderExceptionType!='order_doc_exception'||scope.row.customsType==1">{{scope.row.totalBox+$t('箱/')+scope.row.warehousingBox+$t('箱')}}</p>
          <p style="color:#ff4949" v-else>{{scope.row.totalBox+$t('箱/')+scope.row.warehousingBox+$t('箱')}}</p>
           <dict-tag  style="color:#ff4949" v-if="scope.row.orderExceptionType=='order_doc_exception'&&scope.row.customsType!=1" :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('体积/重量')" align="center">
          <template slot-scope="scope">
                <div v-if="scope.row.orderExceptionType!='order_heavy_cargo_exception'&&scope.row.orderExceptionType!='order_bulky_cargo_exception'">
                  <span v-if="scope.row.orderStatus >= 5 ">{{scope.row.volume+"m³/"+scope.row.weight+"kg"}}</span>
                  <span v-else>{{scope.row.totalVolume+"m³/"+scope.row.totalWeight+"kg"}}</span>
                </div>
                <el-tooltip v-if="scope.row.orderExceptionType=='order_heavy_cargo_exception'" class="item" effect="dark" :content="(scope.row.wvolume||0)+'m³'" placement="bottom">
                  <span style="color:#ff4949" v-if="scope.row.orderStatus >= 5 ">{{scope.row.volume+"m³/"+scope.row.weight+"kg"}}</span>
                  <span style="color:#ff4949" v-else>{{scope.row.totalVolume+"m³/"+scope.row.totalWeight+"kg"}}</span>
                </el-tooltip>
                <el-tooltip v-if="scope.row.orderExceptionType=='order_bulky_cargo_exception'" class="item" effect="dark" :content="(scope.row.vweight||0)+'kg'" placement="bottom">
                  <span style="color:#ff4949" v-if="scope.row.orderStatus >= 5 ">{{scope.row.volume+"m³/"+scope.row.weight+"kg"}}</span>
                  <span style="color:#ff4949" v-else>{{scope.row.totalVolume+"m³/"+scope.row.totalWeight+"kg"}}</span>
                </el-tooltip>
          </template>
      </el-table-column>
      <el-table-column :label="$t('运输方式/目的地')" align="center">
          <template slot-scope="scope">
            <span><dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
            / {{$l(scope.row, 'destination')}}</span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('控货')" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isCargoControl" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单状态')" align="center" prop="orderExceptionAmount" >
        <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">
        <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ORDER_EXCEPTION_STATUS" :value="scope.row.orderExceptionStatus" />
          </template>
        </el-table-column>
      <el-table-column :label="$t('异常类型')" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="scope.row.orderExceptionType" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center">
        <template slot-scope="scope">
          <el-button  size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('查看')}}</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-share" @click="handEdit(scope.row.orderId)">{{$t('查看')}}</el-button> -->
          <el-button v-if="scope.row.orderExceptionType=='order_superfluous_box_exception'" v-hasPermi="['ecw:exception:superfluousBox']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_lack_box_exception'" v-hasPermi="['ecw:exception:lackBox']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_pay_exception'" v-hasPermi="['ecw:exception:pay']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_miss_exception'" v-hasPermi="['ecw:exception:miss']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_superfluous_goods_exception'" v-hasPermi="['ecw:exception:superfluousGoods']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_in_water_exception'" v-hasPermi="['ecw:exception:inWater']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_damage_exception'" v-hasPermi="['ecw:exception:damaged']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_heavy_cargo_exception'" v-hasPermi="['ecw:exception:heavyCargo']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_doc_exception'" v-hasPermi="['ecw:exception:doc']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_consignor_exception'" v-hasPermi="['ecw:exception:consignor']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_other_exception'" v-hasPermi="['ecw:exception:other']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_cod_exception'" v-hasPermi="['ecw:exception:cod']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_no_quote_exception'" v-hasPermi="['ecw:exception:noQuote']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_bulky_cargo_exception'" v-hasPermi="['ecw:exception:bulkyCargo']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='order_pick_up_exception'" v-hasPermi="['ecw:exception:pickUp']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$t('处理')}}</el-button>
          <el-button v-else-if="scope.row.orderExceptionType=='not_customer_service_exception'" v-hasPermi="['ecw:exception:notCustomer']" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">{{$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 {getOrderExceptionPage, exportExcel} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
// import { userList } from "@/api/system/user"
import {listServiceUser} from "@/api/system/user"
import CustomerSelector from '@/components/CustomerSelector'
import ProductSelector from '@/components/ProductSelector'
import {getWarehouseList} from '@/api/ecw/warehouse'

export default {
  name: "EcwOrderException",
  components: {
    CustomerSelector,ProductSelector
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单异常列表
      list: [],
      dateRangeCreateTime: [],
      creatorData:[],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10
      },
       tradeCityList:[],
       warehouseList:[],
    };
  },
  activated(){
    this.handleQuery()
  },
  created() {
    this.getList();

    getTradeCityList().then(res => this.tradeCityList = res.data)
    listServiceUser().then(r => {
      this.creatorData = r.data
    })
     getWarehouseList().then(res => this.warehouseList = res.data)
    // userList('salesman').then(res =>this.creatorData = 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: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.list = []
      // 处理查询参数
      let params = {...this.queryParams}
      // 执行查询
      getOrderExceptionPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
        // this.reset()
      });
    },
    /** 表单重置 */
    reset() {
      this.queryParams = {
        page: 1,
        rows: 10,
      };
    },
    importCityName(id){
        return this.tradeCityList.filter(item => item.id == id)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList();
    },
    handEdit(id){
        this.$router.push({
          path:"./pending?id="+id,
        })
    },
    specialNeedTag(value){
        var tag = ''
        if(!value){
          return
        }
        if(value.indexOf("1")!=-1||value.indexOf("2")!=-1){
          tag += this.$t('(木)')
        }
        if(value.indexOf("3")!=-1){
          tag += this.$t('(箱)')
        }
        if(value.indexOf("4")!=-1){
          tag += this.$t('(袋)')
        }
        if(value.indexOf("5")!=-1){
          tag += this.$t('(纸)')
        }
        if(value.indexOf("6")!=-1){
          tag += this.$t('(垫)')
        }
        if(value.indexOf("7")!=-1){
          tag += this.$t('(空)')
        }
        return tag
    },
    exportSearch(){
      this.exportExcel(exportExcel, this.queryParams, this.$t('异常订单'))
    },
    // 通用导出函数
    exportExcel(func, params, fileName = null){
      this.exportLoading = true;
      func(params).then(res => {
        if(!fileName){
          fileName = this.$t('订单')
        }
        this.$download.excel(res, fileName + '.xls');
      }).finally(() => {
        this.exportLoading = false
      })
    },
  }
}
</script>