<template>
  <div class="app-container">
    <el-card>
      <el-form
        ref="queryForm"
        :model="orderData"
        size="small"
        :inline="true"
        label-width="120px"
        class="card"
      >
        <el-row>
          <el-form-item :label="$t('prepayDeal.orderNo')">
            {{ orderData ? orderData.orderNo : '' }}
          </el-form-item>
        </el-row>
        <div
          v-if="orderExceptionData.orderExceptionType=='order_superfluous_box_exception'||orderExceptionData.orderExceptionType=='order_lack_box_exception'||orderExceptionData.orderExceptionType=='order_miss_exception'||orderExceptionData.orderExceptionType=='order_superfluous_goods_exception'||orderExceptionData.orderExceptionType=='order_in_water_exception'||orderExceptionData.orderExceptionType=='order_damage_exception'"
        >
          <el-row v-if="shopData">
            <el-form-item :label="$t('prepayDeal.prodTitleZh')">
              {{ shopData ? shopData.prodTitleZh : '' }}
            </el-form-item>
          </el-row>
          <el-row v-if="shopData">
            <el-form-item :label="$t('prepayDeal.prodTitleEn')">
              {{ shopData.prodTitleEn || '' }}
            </el-form-item>
          </el-row>
        </div>
        <el-row>
          <el-form-item :label="$t('prepayDeal.transport')">
            <span
              v-if="orderData"
            >【<dict-tag
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              :value="orderData.transportId"
            />】</span>
            {{ orderData ? getRouterNameById(orderData.lineId) : '' }}
          </el-form-item>
        </el-row>
        <div
          v-if="orderExceptionData.orderExceptionType!='order_doc_exception'&&orderExceptionData.orderExceptionType!='order_consignor_exception'&&orderExceptionData.orderExceptionType!='order_other_exception'"
        >
          <el-row v-if="shopData">
            <el-form-item :label="$t('prepayDeal.costVO')">
              {{
                (shopData ? shopData.num : 0) +
                  $t('prepayDeal.box') +
                  (shopData ? shopData.volume : 0) +
                  'm³ ' +
                  (shopData ? shopData.weight : 0) +
                  'kg ' +
                  (shopData ? shopData.quantity : 0) +
                  $t('price.one')
              }}
            </el-form-item>
          </el-row>
          <el-row v-if="shopData">
            <el-form-item :label="$t('prepayDeal.warehouseNum')">
              {{
                (shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.cartonsNum : 0) +
                  $t('prepayDeal.box') +
                  (shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.volume : 0) +
                  'm³ ' +
                  (shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.weight : 0) +
                  'kg ' +
                  (shopData.warehouseInInfoVO?shopData.warehouseInInfoVO.quantityAll : 0) +
                  $t('price.one')
              }}
            </el-form-item>
          </el-row>
          <el-row :span="12">
            <el-form-item :label="$t('prepayDeal.abnormal')">
              {{ $l(orderExceptionData.orderExceptionDescVO, 'desc') }}
            </el-form-item>
            <el-button
              v-if="orderExceptionData.orderExceptionType=='order_pay_exception'"
              type="primary"
              plain
              icon="el-icon-plus"
              style="margin-left: 200px"
              @click="handleAdd"
            >{{ $t('prepayDeal.add') }}</el-button>
          </el-row>
          <!--         <el-row :span="12">
            <el-form-item label="详细内容:">
               {{orderData.totalMoney||'none'}}
            </el-form-item>
            <el-button v-if="orderExceptionData.orderExceptionStatus==3" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">新增收款单</el-button>
         </el-row> -->
        </div>
      </el-form>
      <el-table
        v-if="orderExceptionData.orderExceptionType=='order_pay_exception'"
        v-loading="loading"
        border
        :data="orderData.orderItemVOList"
        @selection-change="handleSelectionChange"
      >
        <!--            <el-table-column type="selection" width="55">
                   </el-table-column> -->
        <el-table-column :label="$t('prepayDeal.proName')" align="center">
          <template slot-scope="scope">
            {{ scope.row.prodTitleZh + '(' + scope.row.prodTitleEn + ')' }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.boxNum')" prop="num" />
        <el-table-column :label="$t('prepayDeal.volumeWeight')">
          <template slot-scope="scope">
            {{ scope.row.volume + '/' + scope.row.weight }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.payType')">
          <template>{{ this.$t('prepayDeal.prepaid') }}</template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.feeType')">
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              :value="scope.row.feeType"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.shouldMoney')" prop="num" />
        <el-table-column :label="$t('prepayDeal.dollar')" align="center" prop="totalAmount" />
        <el-table-column :label="$t('prepayDeal.rmb')" align="center" prop="totalAmount" />
        <el-table-column :label="$t('prepayDeal.actualMoney')" prop="volume" />
        <el-table-column :label="$t('prepayDeal.drawee')">
          <template slot-scope="scope">
            <span>{{ scope.row.consigneeVO.name }}({{ $t('prepayDeal.consigneeName') }})</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.paystatus')">
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.ECW_RECEIPT_STATE"
              :value="scope.row.state"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="orderExceptionData.orderExceptionType=='order_doc_exception'||orderExceptionData.orderExceptionType=='order_consignor_exception'||orderExceptionData.orderExceptionType=='order_other_exception'"
        v-loading="loading"
        border
        :data="orderData.orderItemVOList"
      >
        <el-table-column :label="$t('prepayDeal.prodTitleZh')" align="center" prop="prodTitleZh" />
        <el-table-column :label="$t('prepayDeal.prodTitleEn')" align="center" prop="prodTitleEn" />
        <el-table-column :label="$t('prepayDeal.brand')" align="center" prop="brand">
          <template slot-scope="{row}">
            <template v-if="row.brandName">{{ row.brandName }}</template>
            <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.costVOBox')" prop="num" />
        <el-table-column :label="$t('prepayDeal.cartonsNum')">
          <template slot-scope="scope">
            {{ scope.row.warehouseInInfoVO.cartonsNum }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.volume')" prop="volume">
          <template slot-scope="scope">
            {{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.volume:0 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.weight')" prop="weight">
          <template slot-scope="scope">
            {{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.weight:0 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.quantity')" prop="quantity">
          <template slot-scope="scope">
            {{ scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.quantityAll:0 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('prepayDeal.worth')" prop="worth" />
      </el-table>
      <el-form
        ref="queryForms"
        :model="handlerParams"
        size="small"
        :inline="true"
        label-width="120px"
        class="card"
      >
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('订单总金额')">
            <span v-for="(item, key) of orderFee.totalAmountList" :key="key" style="margin-left: 8px;">{{ item }}{{ key }}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('prepayDeal.payable')">
            <span v-for="(item, key) of orderFee.totalPaymentAmount" :key="key" style="margin-left: 8px;">{{ item }}{{ key }}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('prepayDeal.verificationMoney')">
            {{ orderFee.writeOffAmount }}
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('prepayDeal.verificationRatio')">
            {{ orderData.writeOffAmountScale }}
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType!='order_doc_exception'">
          <el-form-item :label="$t('prepayDeal.result')" required>
            <el-select v-model="handlerParams.orderExceptionHandlerResult">
              <el-option
                v-for="dict in getDictDatas(
                  orderExceptionData.orderExceptionType + '_result'
                )"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="8">
          <el-form-item :label="$t('prepayDeal.remark')" size="medium">
            <el-input
              v-model="handlerParams.orderExceptionHandlerRemark"
              style="width: 500px"
              type="textarea"
            />
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType == 'order_doc_exception'" :span="8">
          <el-form-item :label="$t('prepayDeal.customsData')" size="medium">
            <file-upload
              v-model="handlerParams.fileList"
              :value="orderExceptionData.orderExceptionAttr"
            />
          </el-form-item>
        </el-row>
        <div
          v-if="
            orderExceptionData.orderExceptionType == 4 ||
              orderExceptionData.orderExceptionType == 5 ||
              orderExceptionData.orderExceptionType == 6 ||
              orderExceptionData.orderExceptionType == 7
          "
        >
          <el-row>
            <el-form-item :label="$t('prepayDeal.content')">
              {{ orderExceptionData.content }}
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('prepayDeal.status')">
              <dict-selector
                v-model="handlerParams.orderExceptionStatus"
                :type="DICT_TYPE.ORDER_ERROR_TYPE"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('prepayDeal.cause')">
              {{ orderExceptionData.content }}
            </el-form-item>
          </el-row>
        </div>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <div>
        <el-button type="primary" @click="submitForm">{{ $t('common.submit') }}</el-button>
        <el-button plain type="primary" @click="$emit('reload')">{{ $t('common.cancel') }}</el-button>
      </div>
      <el-button
        v-if="orderExceptionData.orderExceptionStatus == 3"
        type="primary"
        @click="submitForm"
      >{{ $t('prepayDeal.submit') }}</el-button>
    </div>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import { getOpenedRouterList } from '@/api/data'
import { getOrder } from '@/api/order'
import DictTag from '@/components/DictTag'
import {
  getExceptionById,
  handlerExceptionByExceptionId
} from '@/api/order'

export default {
  name: 'PrepayDeal',
  components: {
    FileUpload, DictTag
  },
  props: {
    id: Number
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      orderExceptionData: {},
      types: 'package,bag',
      importance: 1,
      orderData: {},
      orderId: 0,
      orderExceptionId: 0,
      handlerParams: {
        orderExceptionId: 0,
        orderExceptionStatus: '1',
        orderExceptionHandlerResult: ''
      },
      // 发货/收货人信息
      consigneeData: [],
      routerList: [],
      multipleSelection: []
    }
  },
  computed: {
    shopData() {
      if (this.orderExceptionData.orderItemId && this.orderData && this.orderData.orderItemVOList) {
        return this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId)
      }
    }
  },
  created() {
    this.orderExceptionId = this.id
    this.handlerParams.orderExceptionId = this.id
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      const that = this
      that.loading = true
      getExceptionById(that.orderExceptionId).then((response) => {
        that.orderExceptionData = response.data
        that.loading = false
        that.orderId = response.data.orderId
        that.getOrderData()
        if (that.orderExceptionData.orderExceptionAttr) {
          that.handlerParams.fileList = that.orderExceptionData.orderExceptionAttr.split(',')
        }
      })
    },
    getOrderData() {
      getOrder(this.orderId).then((response) => {
        this.orderData = response.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取路线
    getOpenedRouterList() {
      const params = {}
      if (this.list.departureId) {
        params.startCityId = this.list.departureId
      }
      if (this.list.objectiveId) {
        params.destCityId = this.list.objectiveId
      }
      getOpenedRouterList(params).then((res) => (this.routerList = res.data))
    },
    // 根据线路id显示线路名称
    getRouterNameById() {
      if (this.orderData.logisticsInfoDto) {
        return (
          this.$t('prepayDeal.from') + this.orderData.logisticsInfoDto.startTitleZh + this.$t('prepayDeal.to') + this.orderData.logisticsInfoDto.destTitleZh + '】'
        )
      }
      return this.$t('prepayDeal.none')
      // }
    },
    submitForm() {
      if (this.orderExceptionData.orderExceptionType == 'order_doc_exception' && this.handlerParams.fileList && this.handlerParams.fileList.length > 0) {
        this.handlerParams.files = Array.isArray(this.handlerParams.fileList) ? this.handlerParams.fileList.join(',') : this.handlerParams.fileList
      }
      handlerExceptionByExceptionId(this.handlerParams).then((res) => {
        this.$message({
          message: this.$t('common.success'),
          type: 'success'
        })
        this.$emit('reload')
      })
    },
    /** 跟进按钮操作 */
    handleAdd() {
      this.$router.push({
        path: '/financial/creatCollection',
        query: {
          orderId: this.orderId
        }
      })
    }
  }
}
</script>

<style>
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
  width: 60%;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
</style>
