<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">{{$t('查看')}}</div>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('唛头')">
                {{orderData.marks?orderData.marks:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('已到箱数/总箱数')">
                {{orderData.sumNum||0}}/{{orderData.costVO?orderData.costVO.totalNum:0}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('订单状态')">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('送货日期')">
               {{orderData.deliveryDate||$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
                <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
              </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">
                 {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">
               {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:$t('无')}}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('发货人')">
                {{orderData.consignorVO?orderData.consignorVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货公司')">
                {{orderData.consignorVO?orderData.consignorVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货电话')">
                {{orderData.consignorVO?((orderData.consignorVO.countryCode?checkCode(orderData.consignorVO.countryCode):'')+orderData.consignorVO.phone)||$t('无'):$t('无')}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="4">
            <el-descriptions-item :label="$t('收货人')">
                {{orderData.consigneeVO?orderData.consigneeVO.name||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货公司')">
                {{orderData.consigneeVO?orderData.consigneeVO.company||$t('无'):$t('无')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货电话')">
                {{orderData.consigneeVO?((orderData.consigneeVO.countryCode?checkCode(orderData.consigneeVO.countryCode):'')+orderData.consigneeVO.phone)||$t('无'):$t('无')}}
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{$t('问题详情')}}</div>
      <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">
            <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">
              <span v-if="scope.row.orderExceptionDescVO">{{$l(scope.row.orderExceptionDescVO, 'desc')}}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('金额')" align="center" scope="orderExceptionAmount" />
       <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">
            <div class="filelist">
              <span v-for="(item,index) in scope.row.orderExceptionAttr" :key="index" @click="onClickOpenPreview(item,scope.$index)">{{'附件'+(index+1)}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('处理人')" align="center" prop="userName" />
        <el-table-column :label="$t('处理时间')" align="center">
          <template slot-scope="scope">
             <span>{{parseTime(scope.row.handlerTime)}}</span>
            </template>
          </el-table-column>
        <el-table-column :label="$t('操作')" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderExceptionStatus==2">{{$t('已完成')}}</el-tag>
            <el-button v-else size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row)">{{$t('处理')}}</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'
import {getProduct} from '@/api/ecw/product'

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.list.forEach((item)=>{
          if(item.orderExceptionAttr){
            item.orderExceptionAttr = item.orderExceptionAttr.split(',')
          }else{
            item.orderExceptionAttr = []
          }
        })
        this.loading = false;
      });
    },
    checkCode(data){
      if(data.indexOf('+')==-1){
      	return '+'+data
      }
      return data
    },
    getOrders(){
      getOrder(this.orderId).then(response => {
        this.orderData = response.data
      });
    },

    handEdit(row){
      // 未报价异常
      if(row.orderExceptionType=='order_no_quote_exception'){
        if(row.orderItemId){
          var productData = this.orderData.orderItemVOList.find(item=>item.orderItemId==row.orderItemId)
          if(productData){
            getProduct(productData.prodId).then(res=>{
                let url = '../../lineProject/product-price/edit?product_id='+productData.prodId+'&product_type='+res.data.typeId
                return this.$router.push(url)
            })
          }
        }else{
          return this.$confirm(this.$t('数据缺少orderItemId参数，确定要跳转设置路线价格么？')).then(res => {
            let url = '../../lineProject/product-price/edit'
            this.$router.push(url)
          })

        }

      }
      // 重泡货异常
      else if(row.orderExceptionType == 'order_heavy_cargo_exception'||row.orderExceptionType=='order_bulky_cargo_exception'){
        this.$router.push({
          path:"/order/weightDeal?id="+row.id+'&type='+row.orderExceptionType,
        })
       }
       // 其他异常
       else{
        this.$router.push({
          path:"/order/prepayDeal?id="+row.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:"", // 下载地址
      } // 目标对象
        var fileArr = this.list[index].orderExceptionAttr
        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;
    flex-direction: column
  }
  .filelist span{
    color: #1E98D7;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
</style>