<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||0}}/{{orderData.costVO?orderData.costVO.totalNum: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.consigneeVO?orderData.consigneeVO.deliveryDate||'无':'无'}}
              <!-- <span v-if="orderData">{{orderData.status>=5?(orderData.orderItemVOList.length>0?parseTime(orderData.orderItemVOList[0].warehouseInInfoVO.firstInTime):'无'):(orderData.consigneeVO?orderData.consigneeVO.deliveryDate:'无')}}</span> -->
            </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="始发地">
                  {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:'无'}}
              </el-descriptions-item>
              <el-descriptions-item label="目的地">
                {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:'无'}}
              </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_ERROR_TYPE" :value="scope.row.orderExceptionType" />
          </template>
        </el-table-column>
        <el-table-column label="异常描述" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.orderExceptionDescVO.descZh}}</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">
            <div class="filelist">
              <span v-for="(item,index) in scope.row.orderExceptionAttr" :key="index" @click="onClickOpenPreview(item,scope.$index)">{{item}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="处理人" align="center" prop="userName" />
        <el-table-column label="处理时间" align="center">
          <template slot-scope="scope">
             <span>{{parseTime(scope.row.handlerTime)}}</span>
            </template>
          </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderExceptionStatus>0">已完成</el-tag>
            <el-button v-else size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.id,scope.row.orderExceptionType)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="preview" v-if="IsPreview">
      <file-preview :key="timers" :TragetPic="TragetPic" :FilePreAll="FilePreAll" @Close="onClickClosePreview"></file-preview>
    </div>
  </div>
</template>

<script>
import {getExceptionListByOrderId} from "@/api/ecw/orderException"
import {DICT_TYPE} from  '@/utils/dict'
import {getOrder} from '@/api/ecw/order'
import FilePreview from '@/components/FilePreview'

export default {
  name: "Pending",
  components: {
    FilePreview
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      orderData:{},
      // 订单异常列表
      list: [],
      orderId:0,
      IsPreview:false, // 控制预览弹窗字段
      timers:"", //时间戳
      FilePreAll:[], // 预览数组
      TragetPic:{},
    };
  },
  created() {
    if(this.$route.query.id){
      this.orderId = this.$route.query.id
      this.getList()
      this.getOrders()
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getExceptionListByOrderId(this.orderId).then(response => {
        this.list = response.data;
        this.loading = false;
      });
    },
    getOrders(){
      getOrder(this.orderId).then(response => {
        this.orderData = response.data
      });
    },

    handEdit(id, type){
      if(type == 8||type==15){
        this.$router.push({
          path:"/order/weightDeal?id="+id,
        })
       }else{
        this.$router.push({
          path:"/order/prepayDeal?id="+id,
        })
       }

    },
    getFileName(fileName){
      var fileArr = fileName.split('/')
      return fileArr[fileArr.length-1]
    },
    getFileFormat(fileName){
      var fileArr = this.getFileName(fileName).split('.')
      return fileArr[fileArr.length-1]
    },
    	// 打开预览
    onClickOpenPreview(val,index){
      this.TragetPic  = { // 当前点击的文件
        FileName: this.getFileName(val), // 文件名称
        name: this.getFileName(val), // 文件名称（可以不传）
        format:this.getFileFormat(val), // 文件格式
        url: val,  // 预览地址
        downUrl:"", // 下载地址
      } // 目标对象
      if(this.list[index].orderExceptionAttr.indexOf(',')==-1){
        this.FilePreAll.push(this.TragetPic)
      }else{
        var fileArr = this.list[index].orderExceptionAttr.split(',')
        fileArr.forEach(item =>{ // 需要预览的文件数组（可以传空数组就是单张预览）
          let obj = {
            FileName: this.getFileName(item),
            name: this.getFileName(item),
            format:this.getFileFormat(item),
            url: item,
            downUrl:"",
          }
          this.FilePreAll.push(obj)
        })
      }
      this.IsPreview = true // 打开预览弹窗
      this.timers = new Date().getTime() // 刷新预览地址
    },
  // 关闭预览
    onClickClosePreview(val){
      this.IsPreview = val  // 由组件内部传入的关闭数据赋值关闭
    },
  }
}
</script>
<style scoped>
  .filelist{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .filelist span{
    width: 48%;
    margin-right: 2%;
    color: #1E98D7;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>
