<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">报价单详情</div>
        <el-descriptions :column="4">
            <el-descriptions-item label="唛头">
                {{orderData.marks?orderData.marks:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="已到箱数/总箱数">
                {{orderData.sumNum?orderData.sumNum:0+'/'+orderData.sumNum?orderData.sumNum:0}}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
            </el-descriptions-item>
            <el-descriptions-item label="送货日期">
              {{orderData.date?orderData.date:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="运输方式">
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
              </el-descriptions-item>
            <el-descriptions-item label="始发地">
                  {{importCityName(orderData.startWarehouseId)}}
              </el-descriptions-item>
              <el-descriptions-item label="目的地">
                {{importCityName(orderData.startWarehouseId)}}
              </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item label="发货人">
                {{orderData.consignorVO?orderData.consignorVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货公司">
                {{orderData.consignorVO?orderData.consignorVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="发货电话">
                {{orderData.consignorVO?orderData.consignorVO.phone||'无':'无'}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="4">
            <el-descriptions-item label="收货人">
                {{orderData.consigneeVO?orderData.consigneeVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货公司">
                {{orderData.consigneeVO?orderData.consigneeVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货电话">
                {{orderData.consigneeVO?orderData.consigneeVO.phone||'无':'无'}}
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">问题详情</div>
      <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" >
        <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">
              <span>{{scope.row.orderExceptionRemark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="金额" align="center" scope="orderExceptionAmount" />
       <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">
            <span>{{scope.row.orderExceptionRemark}}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理人" align="center" prop="orderExceptionAmount" />
        <el-table-column label="处理时间" align="center" prop='orderExceptionTime' />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" >处理</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"/>
    </el-card>
  </div>
</template>

<script>
import {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'

export default {
  name: "Pending",
  components: {

  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      orderData:{},
      // 订单异常列表
      list: [],
      tradeCityList:[],
      queryParams: {
        page: 1,
        rows: 10,
        orderExceptionStatus: 0,
      },
    };
  },
  created() {
    this.getList();
    getTradeCityList().then(res => this.tradeCityList = res.data)
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getOrderExceptionPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.orderData = response.data
        this.loading = false;
      });
    },
    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:'无'
    },
  }
}
</script>
<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>
