<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <el-dialog
    v-model="visible"
    :title="$t('order.order.orderPickupS')"
    :close-on-click-modal="false"
    width="50%"
    class="components-order-station"
  >
    <div class="mod-order-orderInfo">
      <el-table
        ref="multipleTableRef"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="changeNum"
          :label="$t('product.pic')"
          fit
          width="100"
        >
          <template #default="scope">
            <ImgShow
              :src="scope.row.pic"
              :img-style="{width:'50px'}"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('product.spuName')"
          fit
        >
          <template #default="scope">
            {{ scope.row.spuName }}
            <div
              v-if="
                scope.row.returnMoneySts !== null &&
                  scope.row.returnMoneySts > 0 &&
                  scope.row.returnMoneySts < 6
              "
              class="order-status"
            >
              {{ $t("order.order.reimburse") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="amountOfGoods"
          :label="$t('order.order.amountOfGoods')"
          width="100"
        />
        <el-table-column
          prop="status"
          :label="$t('product.status')"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scope">
            <el-tag
              v-if="
                scope.row.returnMoneySts !== null &&
                  scope.row.returnMoneySts < 6 &&
                  scope.row.returnMoneySts > 0
              "
              size="default"
              type="danger"
            >
              {{
                [
                  "",
                  $t("order.order.buyerApplication"),
                  $t("order.order.sellerAccepts"),
                  $t("order.order.buyShipment"),
                  $t("order.order.sellerReceiving"),
                  $t("order.order.refundsuccessfully"),
                ][scope.row.returnMoneySts]
              }}
            </el-tag>
            <el-tag
              v-else-if="scope.row.status !== 0 && scope.row.status !== -1"
              size="default"
              type="warning"
            >
              {{ $t("order.order.partialDelivery") }}
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 0"
              size="default"
            >
              {{
                $t("order.order.shipmentCompleted")
              }}
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === -1"
              size="default"
              type="warning"
            >
              {{ $t("order.order.toBeShipped") }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="100px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="detail-cont">
        <div class="detail01">
          <div class="text-width">
            <el-form-item
              :label="$t('order.order.shippingInformation') + ':'"
            >
              <span>{{ $t("order.order.delType") }}：{{
                $t("order.order.expressDelivery")
              }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t("constant.consignee") }}：{{
                dataForm.stationUserName
              }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t("constant.mobilePhone") }}：{{
                dataForm.stationUserMobile
              }}</span>
            </el-form-item>
            <el-form-item>
              <span>{{ $t("constant.deliveryAddr") }}：{{
                dataForm.stationAddress
              }}</span>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="100px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="detail-cont">
        <el-form-item
          :label="$t('order.order.selfMentionCode') + '：'"
          prop="code"
        >
          <el-input
            v-model="code"
            :placeholder="$t('order.order.pleEntPickupCode')"
            style="width: 300px"
            @change="onCheckStationCode"
          />
          <el-button
            v-if="isStationCode === 1"
            type="success"
            circle
            plain
          />
          <el-button
            v-if="isStationCode === 2"
            type="danger"
            circle
            plain
          />
          <el-alert
            :title="$t('order.order.doNotEntPickupCode')"
            type="warning"
            style="height: 35px; width: 300px"
          />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span>
        <el-button
          type="primary"
          @click="visible = false"
        >{{
          $t("table.cancel")
        }}</el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >{{
          $t("order.order.pickUp")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as api from '@/api/order/station-order'
import { ElMessage } from 'element-plus'

const emit = defineEmits([
  'refreshOrderStationDataList'
])

const dataForm = reactive({
  stationUserName: '',
  stationUserMobile: '',
  stationAddress: ''
})
const dataList = reactive([])

// 初始化
const code = ref('')
const isStationCode = ref(0)
const visible = ref(false)
const init = (order) => {
  visible.value = true
  code.value = ''
  isStationCode.value = 0
  onClear()
  api.getStationOrderInfo({
    orderId: order.orderId
  }).then((data) => {
    onHandleDataForm(data)
    dataList.length = 0
    dataList.push(...data.orderItems)
  })
}
const onClear = () => {
  dataForm.deliveryNo = 0
  dataForm.deliveryCompanyId = ''
}

const onHandleDataForm = (data) => {
  dataForm.stationAddress = data.stationAddress
  dataForm.stationUserName = data.stationUserName
  dataForm.stationUserMobile = data.stationUserMobile
}

// 校验自提码
const onCheckStationCode = () => {
  if (code.value === dataForm.stationCode) {
    isStationCode.value = 1
  } else {
    isStationCode.value = 2
  }
}

// 提货事件
const onSubmit = () => {
  if (isStationCode.value === 2) {
    errorMsg($t('order.order.pickupCodeError'))
    return
  }
  api.putStationOrder({
    orderId: dataForm.orderId,
    stationId: dataForm.stationId
  }).then(() => {
    ElMessage({
      message: $t('table.actionSuccess'),
      type: 'success',
      duration: 1500,
      onClose: () => {
        visible.value = false
        emit('refreshOrderStationDataList')
      }
    })
  }).catch(() => {
  })
}

const errorMsg = (message) => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}

defineExpose({
  init
})
</script>

<style scoped>
.components-order-station {
  .mod-order-orderInfo {
    height: 100%;
    width: 100%;
    font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #495060;
  }
}
</style>
