<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;">
             <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.originId" 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.destinationId" 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.ECW_YESNO" v-model="queryParams.isCargoControl" @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="异常类型">
            <dict-selector :type="DICT_TYPE.ORDER_ERROR_TYPE" v-model="queryParams.orderExceptionType" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="发货人:">
            <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
        </el-form-item>
        <el-form-item label="唛头:">
          <el-input v-model="queryParams.marks" placeholder="请输入唛头" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="品名:" prop="prodId">
          <product-selector v-model="queryParams.prodId" @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-button icon="el-icon-refresh" @click="reset">重置</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="orderNo" />
      <el-table-column label="唛头" align="center" >
        <template slot-scope="scope">
          <span>{{scope.row.marks||'无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="总箱数/入仓箱数" align="center" >
      <template slot-scope="scope">
          <span>{{scope.row.totalBox+'箱/'+scope.row.warehousingBox+"箱"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="体积/重量" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.volume+"m³/"+scope.row.weight+"kg"}}</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>
            {{'/'+scope.row.destinationZh}}</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.isCargoControl" />
        </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.orderStatus" />
          </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_ERROR_TYPE" :value="scope.row.orderExceptionType" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button  v-if="scope.row.orderExceptionStatus<2" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.orderId)">处理</el-button>
          <el-button size="mini" type="text" icon="el-icon-share" @click="handEdit(scope.row.orderId)">查看</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} 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'
import ProductSelector from '@/components/ProductSelector'

export default {
  name: "Exception",
  components: {
    CustomerSelector,ProductSelector
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单异常列表
      list: [],
      dateRangeCreateTime: [],
      creatorData:[],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        dateType:null,
        date:null,
        originId:null,
        destinationId:null,
        transportId:null,
        isCargoControl:null,
        orderExceptionStatus:null,
        orderExceptionType:null,
        orderNo:null,
        consignorId:null,
        marks:null,
        prodId:null,
        productRecord:null,
        followUpSalesmanId: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;
      });
    },
    /** 表单重置 */
    reset() {
      this.queryParams = {
        page: 1,
        rows: 10,
        dateType:undefined,
        date:undefined,
        originId:undefined,
        destinationId:undefined,
        transportId:undefined,
        isCargoControl:undefined,
        orderExceptionStatus:undefined,
        orderExceptionType:undefined,
        orderNo:undefined,
        consignorId:undefined,
        marks:undefined,
        prodId:undefined,
        productRecord:undefined,
        followUpSalesmanId:undefined
      };
      this.resetForm("queryForm");
    },
    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,
      })
    }
  }
}
</script>
