<template>
  <el-dialog
    v-model="createLogisticDialogVisible"
    :close-on-click-modal="false"
    title="创建物流订单"
  >
    <div style="display: flex; align-items: center; gap: 20px">
      <span style="font-weight: 500">是否自动匹配物流方式</span>
      <el-radio-group v-model="isAutoMatch">
        <el-radio :value="false">否</el-radio>
        <el-radio :value="true">是</el-radio>
      </el-radio-group>
    </div>
    <div
      v-if="!isAutoMatch && logisticCompanyList.length > 0"
      style="margin: 10px; border: 1px solid #e0e0e0; display: flex"
    >
      <div
        style="
          display: flex;
          flex-direction: column;
          width: 200px;
          font-weight: 500;
        "
      >
        <div
          v-for="item in logisticCompanyList"
          :key="item.id"
          class="logistic-company-item"
          :class="{
            'selected-logistic-company':
              selectedLogisticCompany?.id === item.id,
          }"
          @click="selectLogisticCompany(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div
        style="
          width: 100%;
          min-height: 220px;
          display: flex;
          justify-content: center;
          align-items: flex-start;
        "
      >
        <div
          v-if="logisticsWayList.length > 0"
          style="
            padding: 0 10px;
            width: 100%;
            display: flex;
            align-items: center;
          "
        >
          <el-radio-group v-model="logisticsWayId">
            <el-radio
              v-for="item in logisticsWayList"
              :key="item.id"
              :value="item.id"
              style="width: 200px; height: 40px"
            >
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </div>
        <el-empty v-else description="暂无数据" :image-size="80" />
      </div>
    </div>

    <template #footer>
      <el-button @click="cancelDialog"> 取消 </el-button>
      <el-button type="primary" @click="confirmDialog"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  getLogisticsCompanyList,
  ILogisticsCompany,
  getLogisticsWayListByCompanyId,
  LogisticsWayData,
} from '@/api/logistics'

import { createLogisticsOrdersApi } from '@/api/podCnOrder'
import { FactoryOrderNewListData } from '@/types/api/factoryOrderNew/factoryOrderNew'

const createLogisticDialogVisible = ref(false)
const props = defineProps<{
  newOrderSelection?: FactoryOrderNewListData[],
}>()
const isAutoMatch = ref(false)

const logisticCompanyList = ref<ILogisticsCompany[]>([])
const selectedLogisticCompany = ref<ILogisticsCompany | null>(null)
const logisticsWayList = ref<LogisticsWayData[]>([])
const logisticsWayId = ref<number | null>(null)
const orderIdList = ref<(string | number)[]>([])

const cancelDialog = () => {
  logisticsWayList.value = []
  logisticCompanyList.value = []
  selectedLogisticCompany.value = null
  logisticsWayId.value = null
  orderIdList.value = []
  isAutoMatch.value = false
  createLogisticDialogVisible.value = false
}

// 获取物流公司列表
const getLogisticsCompanyListFn = async () => {
  const { data } = await getLogisticsCompanyList()
  logisticCompanyList.value = data as unknown as ILogisticsCompany[]
  if (logisticCompanyList.value.length > 0) {
    selectedLogisticCompany.value = logisticCompanyList.value[0]
    await getLogisticsWayListFn(selectedLogisticCompany.value.id)
  }
}

// 获取物流方式列表
const getLogisticsWayListFn = async (id: number) => {
  const { data } = await getLogisticsWayListByCompanyId(id)
  logisticsWayList.value = data
}

// 选择物流公司
const selectLogisticCompany = async (item: ILogisticsCompany) => {
  selectedLogisticCompany.value = item
  await getLogisticsWayListFn(item.id)
}

const confirmDialog = async () => {
  const url =
    props.newOrderSelection && props.newOrderSelection.length > 0
      ? 'factory/podOrder/createLogisticsOrders'
      : 'factory/podJomallOrderCn/createLogisticsOrders'
  await createLogisticsOrdersApi(url, orderIdList.value, logisticsWayId.value)
    .then((res) => {
      emits('show-result', res.data)
    })
    .finally(() => {
      logisticsWayList.value = []
      logisticCompanyList.value = []
      selectedLogisticCompany.value = null
      logisticsWayId.value = null
      orderIdList.value = []
      isAutoMatch.value = false
      createLogisticDialogVisible.value = false
    })
}

const showDialog = async (ids: (string | number)[]) => {
  await getLogisticsCompanyListFn()
  orderIdList.value = ids
  createLogisticDialogVisible.value = true
}

const emits = defineEmits<{
  (
    e: 'show-result',
    data: Array<{
      id: string | number
      status: boolean
      factoryOrderNumber?: string
      message: string
    }>,
  ): void
}>()

defineExpose({
  showDialog,
})

watch(isAutoMatch, (newVal) => {
  if (newVal) {
    getLogisticsCompanyListFn()
  }
})
</script>

<style lang="scss" scoped>
.logistic-company-item {
  padding: 10px 10px;
  cursor: pointer;
  &:hover {
    background-color: #f0f0f0;
  }
}
.selected-logistic-company {
  background-color: #f0f0f0;
}
</style>
