<template>
  <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="1000px">
    <el-form v-if="agreement" ref="form" :model="formData" :rules="rules" size="small" label-width="140px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('订单号')">
            {{ detail.orderNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('体积')">
            {{ detail.sumVolume }}m³
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('重量')">
            {{ detail.sumWeight }}kg
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('总箱数')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('总控货箱数')">
            {{ detail.sumNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('剩余放货箱数')">
            {{ detail.sumNum - detail.releaseNum }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('到仓日期/卸柜日期')">
            {{ detail.unloadTime || '-'}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('放货锁定收货人到期')">
            {{ detail.lockConsigneeTime || '-' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('订单限制修改收货人')">
            {{ detail.isLimitUpdateConsignee ? $t("是") : $t("否") }}
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title flex">
        <div>
          {{ $t('请填写放货信息') }}
        </div>

        <!--
        http://czxy.cpolar.top/task-view-818.html
        新增备注信息，逻辑如下：
        1. 当订单限制修改收货人=是&&订单已卸柜/到仓&&当前时间<=放货锁定收货人到期时间
        备注：订单锁定收货人未到期，不允许修改控货收货人
        2. 当订单限制修改收货人=是&&订单已卸柜/到仓&&当前时间>放货锁定收货人到期时间
        备注：订单锁定收货人信息已到期，允许修改控货收货人
        3. 当订单限制修改收货人=是&&订单未卸柜/到仓
        备注：订单未卸柜/到仓，不允许修改控货收货人
        4. 当订单限制修改收货人=否
        备注： 订单允许修改控货收货人
        -->
        <div class="ml-20 red" v-if="detail.isLimitUpdateConsignee && detail.unloadTime && Date.now() <= (new Date(detail.lockConsigneeTime)).getTime()">
          {{$t('备注：订单锁定收货人未到期，不允许修改控货收货人')}}
        </div>
        <div class="ml-20 red" v-if="detail.isLimitUpdateConsignee && detail.unloadTime && Date.now() > (new Date(detail.lockConsigneeTime)).getTime()">
          {{$t('备注：订单锁定收货人信息已到期，允许修改控货收货人')}}
        </div>
        <div class="ml-20 red" v-if="detail.isLimitUpdateConsignee && !detail.unloadTime">
          {{$t('备注：订单未卸柜/到仓，不允许修改控货收货人')}}
        </div>
        <div class="ml-20 red" v-if="!detail.isLimitUpdateConsignee">
          {{$t('备注：订单允许修改控货收货人')}}
        </div>
      </div>
      <div class="flex">
        <el-form-item :label="$t('收货人')" prop="consigneeName">
          <el-input v-model="formData.consigneeName" :placeholder="$t('请输入收货人')" clearable :disabled="disableUpdateCongsignee"
                    class="w-150"></el-input>
        </el-form-item>
        <el-form-item :label="$t('收货人电话')" prop="consigneePhone">
          <!-- <el-input v-model="formData.field109" :placeholder="$t('区号')" clearable class="w-150"></el-input> -->
          <div class="flex">
            <area-code-selector v-model="formData.consigneeCountryCode" class="w-80" :disabled="disableUpdateCongsignee"/>
            <el-input v-model="formData.consigneePhone" :placeholder="$t('请输入收货人电话')" clearable :disabled="disableUpdateCongsignee"
                      class="w-120 flex-1 ml-5"></el-input>
          </div>
        </el-form-item>
        <el-form-item :label="$t('收货人邮箱')" prop="consigneeEmail">
          <el-input v-model="formData.consigneeEmail" :placeholder="$t('请输入收货人邮箱')" clearable :disabled="disableUpdateCongsignee"
                    class="w-150"></el-input>
        </el-form-item>
      </div>
      <el-table :data="[formData]" border class="release-table">
        <el-table-column :label="$t('控货箱数')">
          {{ detail.sumNum - detail.releaseNum }}
        </el-table-column>
        <el-table-column :label="$t('放货箱数')">
          <template slot-scope="{row}">
            <el-form-item prop="pickNum" label-width="0" class="mb-0">
              <el-input type="number" v-model.number="row.pickNum" placeholder="" clearable></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('体积') + '(m³)'">
          <template slot-scope="{row}">
            <el-input type="number" v-model.number="row.pickVolume" placeholder="" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('重量') + '(kg)'">
          <template slot-scope="{row}">
            <el-input type="number" v-model.number="row.pickWeight" placeholder="" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')">
          <template slot-scope="{row}">
            <el-input v-model="row.remarks" placeholder="" clearable></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item :label="$t('控货手机号')" prop="field117" style="margin-top:20px">
        <el-input :value="'+' + detail.dialCode + detail.phone" readonly :placeholder="$t('请输入控货手机号')">
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('手机验证码')" prop="code">
        <el-input v-model="formData.code" :placeholder="$t('请输入手机验证码')" clearable
                  class="w-150 mr-10"></el-input>
        <!-- <el-button type="success">{{ $t('获取验证码') }}</el-button> -->
        <send-sms-code :form="{
                    orderId: detail.orderId,
                    nodeValue: 'delivery-verification-sms',
                    isTransport: 0,
                    transportId: 0,
                    isOrders: 0,
                }"/>
      </el-form-item>
      <el-form-item label="" style="margin-top:20px">
        <el-button type="success" @click="submit">{{ $t('确认提货') }}</el-button>
        <el-button type="default" @click="closeDialog">{{ $t('关闭') }}</el-button>
      </el-form-item>
    </el-form>

    <div v-else>
      <!-- <release-agreement /> -->
      <need-know ref="needKnow" keyname="control"/>
      <div style="margin-top:30px">
        <el-button type="primary" @click="agreement=true">{{ $t('我同意') }}</el-button>
        <!-- <el-button type="primary" @click="$refs.needKnow.download()">{{ $t('保存协议') }}</el-button> -->
        <el-button @click="closeDialog">{{ $t('关闭') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import {createPick, getReleaseInfo} from '@/api/ecw/orderCargoControl'
import AreaCodeSelector from '@/components/AreaCodeSelector'
import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
import NeedKnow from '@/components/NeedKnow'
import Decimal from 'decimal.js'

export default {
  props: {
    orderId: [String, Number]
  },
  components: {AreaCodeSelector, SendSmsCode, NeedKnow},
  data() {
    return {
      show: false,
      detail: null,
      formData: {
        "pickNum": 0,
        "pickQuantity": 0,
        "pickVolume": 0,
        "pickWeight": 0,
        "remarks": "",
      },
      agreement: false, // 是否同意协议
    }
  },
  watch: {
    'formData.pickNum'(pickNum) {
      this.$set(this.formData, 'pickVolume', Decimal(this.detail.sumVolume).mul(pickNum).div(this.detail.sumNum).toFixed(2))
      this.$set(this.formData, 'pickWeight', Decimal(this.detail.sumWeight).mul(pickNum).div(this.detail.sumNum).toFixed(2))
    }
  },
  computed: {
    rules() {
      return {
        consigneeName: {required: true, message: this.$t('请填写收货人')},
        code: {required: true, message: this.$t('请填写验证码')},
        pickNum: {
          type: 'number',
          max: this.detail.sumNum - this.detail.releaseNum,
          message: this.$t("不能超过剩余箱数"),
          trigger: 'change'
        }
      }
    },
    title() {
      let t = this.$t('放货')
      if (this.detail) {
        t += '-' + this.detail.orderNo
      }
      return t
    },
    disableUpdateCongsignee(){
      if(!this.detail?.isLimitUpdateConsignee) return false
      // 锁定且过期了返回false，其他情况全部是true
      if(this.detail.isLimitUpdateConsignee && this.detail.lockConsigneeTime && new Date(this.detail.lockConsigneeTime).getTime() < Date.now()){
        return false
      }
      return true
    }
  },
  created() {
    this.show = true
    this.loadData()
  },
  methods: {
    loadData() {
      getReleaseInfo(this.orderId).then(res => {
        this.detail = res.data
        this.$set(this.formData, 'consigneeName', res.data.consigneeName)
        this.$set(this.formData, 'consigneeCountryCode', res.data.consigneeCountryCode ? ('+' + res.data.consigneeCountryCode) : null)
        this.$set(this.formData, 'consigneePhone', res.data.consigneePhone)
        this.$set(this.formData, 'consigneeEmail', res.data.consigneeEmail)
      })
    },
    closeDialog() {
      this.show = false
      this.$emit('close')
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        createPick(Object.assign({orderId: this.orderId}, this.formData)).then(res => {
          this.$message.success(res.msg || this.$t('操作成功'))
          this.show = false
          this.$emit('success')
        })
      })


    }
  }
}
</script>
<style lang="scss" scoped>
.w-80{
  width: 80px;
}
.red{
  color: red;
}
.title {
  font-size: 16px;
  margin: 20px 0;
  display: flex;
  align-items: center;

  &:before {
    content: '';
    width: 5px;
    height: 15px;
    background: #666;
    margin-right: 10px;
  }
}

::v-deep .release-table .el-form-item__error {
  position: static;
}
</style>
