<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
      <div slot="header" class="card-title">{{ $t('abnormal.header') }}</div>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('abnormal.marks')">
          {{ orderData.marks?orderData.marks:$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.sumNum')">
          {{ orderData.sumNum||0 }}/{{ orderData.costVO?orderData.costVO.totalNum:0 }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.orderStatus')">
          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.deliveryDate')">
          {{ orderData.deliveryDate?orderData.deliveryDate||$t('abnormal.none'):$t('abnormal.none') }}
          <!-- <span v-if="orderData">{{ orderData.status>=5?(orderData.orderItemVOList.length>0?orderData.orderItemVOList[0].warehouseInInfoVO.firstInTime:$t('abnormal.none')):(orderData.consigneeVO?orderData.consigneeVO.deliveryDate:$t('abnormal.none')) }}</span> -->
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.transport')">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.startTitle')">
          {{ orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.destTitle')">
          {{ orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:$t('abnormal.none') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('abnormal.consignorName')">
          {{ orderData.consignorVO?orderData.consignorVO.name||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.consignorCompany')">
          {{ orderData.consignorVO?orderData.consignorVO.company||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.consignorPhone')">
          {{ orderData.consignorVO?'+'+orderData.consignorVO.countryCode+' '+orderData.consignorVO.phone||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item :label="$t('abnormal.consigneeName')">
          {{ orderData.consigneeVO?orderData.consigneeVO.name||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.consigneeCompany')">
          {{ orderData.consigneeVO?orderData.consigneeVO.company||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('abnormal.consigneePhone')">
          {{ orderData.consigneeVO?'+'+orderData.consigneeVO.countryCode+' '+orderData.consigneeVO.phone||$t('abnormal.none'):$t('abnormal.none') }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">{{ $t('abnormal.header1') }}</div>
      <el-table v-loading="loading" border :data="list">
        <el-table-column :label="$t('abnormal.index')" align="center" prop="id" type="index">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('abnormal.orderExceptionType')" 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('abnormal.orderExceptionDesc')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.orderExceptionDescVO.descZh }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('abnormal.orderExceptionAmount')" align="center" scope="orderExceptionAmount" />
        <el-table-column :label="$t('abnormal.status')" 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('abnormal.filelist')">
          <template slot-scope="scope">
            <div v-if="scope.row.orderExceptionAttr !=null">
              <el-link v-for="(item,index) in scope.row.orderExceptionAttr.split(',')" :key="index" :href="item" target="_blank">{{ item }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('abnormal.userName')" align="center" prop="userName" />
        <el-table-column :label="$t('abnormal.handlerTime')" align="center" prop="handlerTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.handlerTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.action')" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderExceptionStatus>1">{{ $t('abnormal.finish') }}</el-tag>
            <el-button v-if="['order_superfluous_box_exception','order_lack_box_exception','order_heavy_cargo_exception','order_doc_exception','order_bulky_cargo_exception'].indexOf(scope.row.orderExceptionType)>-1&&scope.row.orderExceptionStatus<=1" size="mini" type="text" icon="el-icon-edit" @click="handEdit(scope.row.id,scope.row.orderExceptionType)">{{ $t('abnormal.deal') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div v-if="IsPreview" class="preview">
      <file-preview :key="timers" :traget-pic="TragetPic" :file-pre-all="FilePreAll" @Close="onClickClosePreview" />
    </div>
    <!-- 重货，泡货异常处理弹窗 -->
    <el-dialog :title="$t('abnormal.dealAbnormal')" :visible.sync="weightVisible" width="60%" append-to-body :close-on-click-modal="false">
      <weight-deal v-if="weightVisible" :id="abnormalId" @reload="reload" />
    </el-dialog>
    <!-- 多箱，少箱，单证异常处理弹窗 -->
    <el-dialog :title="$t('abnormal.dealAbnormal')" :visible.sync="prepayVisible" width="60%" append-to-body :close-on-click-modal="false">
      <prepay-deal v-if="prepayVisible" :id="abnormalId" @reload="reload" />
    </el-dialog>
  </div>
</template>

<script>
import { getExceptionListByOrderId } from '@/api/order'
import { DICT_TYPE } from '@/utils/dict'
import DictTag from '@/components/DictTag'
import { getOrder } from '@/api/order'
import FilePreview from '@/components/FilePreview'
import PrepayDeal from './prepayDeal'
import WeightDeal from './weightDeal'
import { parseTime } from '@/utils'

export default {
  name: 'Pending',
  components: {
    FilePreview,
    DictTag,
    PrepayDeal,
    WeightDeal
  },
  data() {
    return {
      parseTime,
      DICT_TYPE: DICT_TYPE,
      // 遮罩层
      loading: true,
      orderData: {},
      // 订单异常列表
      list: [],
      orderId: 0,
      IsPreview: false, // 控制预览弹窗字段
      timers: '', // 时间戳
      FilePreAll: [], // 预览数组
      TragetPic: {},
      weightVisible: false,
      prepayVisible: false,
      abnormalId: 0
    }
  },
  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) {
      this.abnormalId = id
      if (type == 'order_heavy_cargo_exception' || type == 'order_bulky_cargo_exception') {
        this.weightVisible = true
      } else {
        this.prepayVisible = true
      }
    },
    reload() {
      this.prepayVisible = false
      this.weightVisible = false
      this.getList()
    },
    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 => { // 需要预览的文件数组（可以传空数组就是单张预览）
          const 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>
