<template>
    <div  class="app-container" v-if="detail">
        <div class="page-title">{{$t('控货订单')}}</div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px" >
            <el-row>
                <el-col :span="6">
                <el-form-item :label="$t('订单号')">
                    {{detail.orderNo}}
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item :label="$t('总控货数')">
                    {{detail.sumNum}}
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item :label="$t('体积')">
                    {{detail.sumVolume}} m³
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item :label="$t('重量')">
                    {{detail.sumWeight}} kg
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item :label="$t('可放货箱数')">
                    {{detail.sumNum - detail.releaseNum}}
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item :label="$t('已放货箱数')">
                    {{detail.releaseNum}}
                </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="page-title">{{$t('放货详情')}}</div>
        <el-table :data="detail.cargoControlPickBackVOList || []" border>
            <el-table-column :label="$t('序号')" width="50px">
                <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column :label="$t('收货人')" prop="consigneeName" />
            <el-table-column :label="$t('收货人电话')" prop="consigneePhone">
                <template slot-scope="{row}">
                    +{{row.consigneeCountryCode}} {{row.consigneePhone}}
                </template>
            </el-table-column>
            <el-table-column :label="$t('控货箱数')" prop="controlNum"></el-table-column>
            <el-table-column :label="$t('放货箱数')" prop="pickNum"></el-table-column>
            <el-table-column :label="$t('体积') + '(m³)'" prop="pickVolume"></el-table-column>
            <el-table-column :label="$t('提单号')" prop="tidanNo"></el-table-column>
            <el-table-column :label="$t('备注')" prop="remarks"></el-table-column>
            <el-table-column :label="$t('操作人')" prop="operator"></el-table-column>
            <el-table-column :label="$t('日期')" prop="createTime">
                <template slot-scope="{row}">
                    {{row.createTime|parseTime}}
                </template>
            </el-table-column>
            <el-table-column :label="$t('状态')" prop="status">
                <template slot-scope="{row}">
                    <dict-tag :type="DICT_TYPE.ECW_RELEASE_STATUS" :value="row.status" />
                </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" width="300px">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="editIndex=scope.$index">{{$t('修改')}}</el-button>
                    <el-button v-if="scope.row.status == 1" type="danger" size="mini" @click="cancelCargoPickId = scope.row.id">{{$t('取消')}}</el-button>
                    <el-button v-if="scope.row.status == 1" type="success" size="mini" @click="review(scope.row.id)">{{$t('放货复核')}}</el-button>
                    <el-button v-if="scope.row.status == 3" type="danger" size="mini" @click="fallbackIndex=scope.$index">{{$t('反复核')}}</el-button>
                    <el-button v-if="scope.row.status == 3" type="success" size="mini" @click="cargoControlPickId=scope.row.id">{{$t('调货')}}</el-button>
                    
                    <el-button v-if="[2,4, 5, 6].indexOf(scope.row.status) > -1" type="primary" size="mini" @click="showApprovalDetail(scope.row.formId)">{{$t('审核详情')}}</el-button>
                    <el-button v-if="[2,4, 5, 6].indexOf(scope.row.status) > -1" type="danger" size="mini" @click="cancelApproval(scope.row.id)">{{$t('取消审核')}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <div class="page-title">{{ $t('历史放货记录') }}</div>
        <el-table :data="[1]" border>
            <el-table-column :label="$t('序号')" width="50px">

            </el-table-column>
            <el-table-column :label="$t('操作')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请原因')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('附件')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请时间')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('申请人')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('审批时间')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('审批人')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
            <el-table-column :label="$t('备注')">
                <el-input v-model="formData.field110" :placeholder="$t('请输入收货人邮箱')" clearable></el-input>
            </el-table-column>
        </el-table> -->
        <fallback v-if="fallbackIndex !== null" :order="detail" :index="fallbackIndex" @close="fallbackIndex=null" @success="onFallbackSuccess"  />
        <edit v-if="editIndex !== null" @close="editIndex=null" :order="detail" :index="editIndex" @success="onEditSuccess" />
        <transfer-cargo
            v-if="cargoControlPickId !== null"
            :order-id="detail.orderId"
            :cargo-control-pick-id="cargoControlPickId"
            @close="cargoControlPickId=null"
            @success="onTransferCargoSuccess" />
        <cancel-cargo v-if="!!cancelCargoPickId"
            :order="detail"
            :cargo-control-pick-id="cancelCargoPickId"
            @close="cancelCargoPickId=null"
            @success="onCancelCargoSuccess"  />
    </div>
</template>
<script>
import edit from './components/CargoControlEdit.vue'
import {createPick, getPickRleaseInfo, review, cancel, cancelApproval} from '@/api/ecw/orderCargoControl'
import {parseTime} from '@/utils/ruoyi'
import Fallback from './components/Fallback'
import TransferCargo from '@/views/ecw/order/components/TransferCargo'
import CancelCargo from './components/CancelCargo.vue'

export default {
    filters: {parseTime},
    components: {edit, Fallback, TransferCargo, CancelCargo, CancelCargo},
    data(){
        return {
            detail: null,
            formData:{},
            rules: {},
            editIndex: null, // 修改索引
            fallbackIndex: null, // 反复核索引
            cargoControlPickId: null, // 调货ID
            cancelCargoPickId: null, // 取消返货ID
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        loadData(){
            console.log('loadData')
            getPickRleaseInfo(this.$route.query.id).then(res => this.detail = res.data)
        },
        review(id){
            this.$confirm(this.$t('已核实放货信息，确认放货？'))
                .then(res => {
                   return review(id)
                })
                .then(res => {
                    this.$message.success(this.$t('操作成功'))
                    this.loadData()
                })
        },
        unReview(){

        },
        cancel(id){
            this.$confirm(this.$t('确定取消这条放货么？'))
                .then(res => {
                    return cancel(id)
                })
                .then(res => {
                    this.$message.success(this.$t('操作成功'))
                    this.loadData()
                })
        },
        onEditSuccess(){
            console.log('onEditSuccess')
            this.loadData()
            this.editIndex = null
        },
        onFallbackSuccess(){
            this.fallbackIndex = null
            this.loadData()
        },
        // 查看审核详情
        showApprovalDetail(formId){
            this.$router.push('/bpm/process-instance/detail?id=' + formId)
        },
        // 取消审核
        cancelApproval(id){
            this.$confirm(this.$t('确定取消此申请么？'))
                .then(res => {
                    let approvalId = this.getApproval(id)
                    return cancelApproval(approvalId, {reason: this.$t('无')})
                })
                .then(res => {
                    this.$message.success(this.$t('操作成功'))
                    this.loadData()
                })
        },
        // 根据id查找审核id
        getApproval(id, field = 'orderApprovalId'){
            if(!this.detail.orderApprovalBackVOList || !this.detail.orderApprovalBackVOList.length){
                this.$message.error(this.$t('未找到审批ID'))
                Promise.reject(this.$t('未找到审批ID'))
            }
            let item = this.detail.orderApprovalBackVOList.find(item => {
                let details = JSON.parse(item.details)
                return details.cargoControlPickId == id && details.applyStatus == 1
            })
            console.log({item})
            return item[field]
        },
        onTransferCargoSuccess(){
            this.cargoControlPickId = null
            this.loadData()
        },
        onCancelCargoSuccess(){
            this.cancelCargoPickId = null
            this.loadData()
        }
    }
}
</script>