<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.beginCreateTime" style="width: 172px;">
             <el-option label="入仓时间" value="0"/>
             <el-option label="处理时间" value="1"/>
          </el-select>
          <el-date-picker
            v-model="queryParams.date"
            type="datetimerange"
            style="margin-left: 10px;"
            range-separator="到"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="始发地:">
            <el-select v-model="queryParams.startWarehouseId" placeholder="请选择始发地">
                <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="目的地:" >
            <el-select v-model="queryParams.destWarehouseId" placeholder="请选择目的地">
             <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id" ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="运输方式:" >
            <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="控货:">
             <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="异常状态:">
             <dict-selector :type="DICT_TYPE.ORDER_EXCEPTION_STATUS" v-model="queryParams.orderExceptionStatus" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="异常类型" prop="orderExceptionType">
            <dict-selector :type="DICT_TYPE.ORDER_ERROR_TYPE" v-model="queryParams.orderExceptionType" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="发货人:" prop="consignorId">
            <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
        </el-form-item>
        <el-form-item label="唛头:" prop="marks">
          <el-input v-model="queryParams.marks" placeholder="请输入唛头" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="品名:" prop="orderExceptionAmount">
          <el-input v-model="queryParams.orderExceptionAmount" placeholder="请输入品名" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="备案:">
             <dict-selector :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" v-model="queryParams.productRecord" @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="跟进业务">
         <el-select v-model="queryParams.followUpSalesmanId" placeholder="请选择跟进业务">
          <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.id"/>
          </el-select>
        </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-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" border :data="list">
      <el-table-column label="序号" align="center" prop="id" type="index">
        <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" align="center" prop="orderNumber" />
      <el-table-column label="唛头" align="center" prop="marks" />
      <el-table-column label="总箱数/入仓箱数" align="center" >
      <template slot-scope="scope">
          <span>{{scope.row.sumNum+'/'+scope.row.sumNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="体积/重量" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.sumVolume+"/"+scope.row.sumWeight}}</span>
          </template>
      </el-table-column>
      <el-table-column label="运输方式/目的地" align="center">
          <template slot-scope="scope">
            <span><dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
            {{'/'+importCityName(scope.row.logisticsInfoDto.destWarehouseId)}}</span>
          </template>
      </el-table-column>
      <el-table-column label="控货" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.control" />
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="orderExceptionAmount" >
        <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      <el-table-column label="异常状态" 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="异常类型" align="center">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.ORDER_EXCEPTION_STATUS" :value="scope.row.orderExceptionType" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" >处理</el-button>
          <el-button size="mini" type="text" icon="el-icon-share">查看</el-button>
        </template>
      </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 {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
import { userList } from "@/api/system/user"
import CustomerSelector from '@/components/CustomerSelector'

export default {
  name: "Exception",
  components: {
    CustomerSelector
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单异常列表
      list: [],
      dateRangeCreateTime: [],
      creatorData:[],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orderId: null,
        orderNumber: null,
        orderExceptionType: null,
        orderExceptionRemark: null,
        orderExceptionAmount: null,
        orderExceptionAttr: null,
        orderExceptionStatus: null,
      },
       tradeCityList:[],
    };
  },
  created() {
    this.getList();
    getTradeCityList().then(res => this.tradeCityList = 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)
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams}
      // 执行查询
      getOrderExceptionPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    importCityName(id){
        return this.tradeCityList.filter(item => item.id == id)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.handleQuery();
    },
  }
}
</script>
