<template>
  <el-dialog
    v-model="isChangeWay"
    :close-on-click-modal="false"
    :title="wayDialogTitle"
  >
    <el-table
      ref="changeWayRef"
      v-loading="isChangeWayLoading"
      height="400px"
      class="production-client-table"
      :data="logisticsWayData"
      border
      highlight-current-row
      @row-click="(v:LogisticsData) =>rowClick(v, wayDialogTitle)"
    >
      <el-table-column
        label="序号"
        width="60"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column
        label="物流名称"
        align="center"
        prop="logisticsWayName"
      ></el-table-column>
      <el-table-column
        label="发货仓库"
        align="center"
        prop="warehouseName"
      ></el-table-column>
      <el-table-column
        label="物流编码"
        align="center"
        prop="logisticsWayCode"
      ></el-table-column>
      <el-table-column
        label="所在分区"
        align="center"
        prop="partition"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="{ row }">
          <b v-if="row.status" style="color: green">成功</b>
          <b v-else-if="!row.status" style="color: red">失败</b>
        </template>
      </el-table-column>
      <el-table-column label="预计运费（￥）" align="center" prop="payFreight">
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button :disabled="isChangeWayLoading" @click="cancelWayDialog">
        取消
      </el-button>
      <el-button
        :loading="isChangeWayLoading"
        type="primary"
        @click="changeWaySubmit(wayDialogTitle)"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { PodCnOrderListData, LogisticsData } from '@/types/api/podCnOrder'
const isChangeWay = ref(false)
const isChangeWayLoading = ref(false)
const changeWayRow = ref<LogisticsData>({} as LogisticsData)

const logisticsWayData = ref([])
const changeWayRef = ref()
const wayDialogTitle = ref('')

const props = withDefaults(
  defineProps<{
    rowData: PodCnOrderListData | null
    getTableFn?: (...args: any[]) => any
    submitFn?: (...args: any[]) => any
    changeLogisticsApi?: (...args: any[]) => any
  }>(),
  {
    rowData: () => ({} as PodCnOrderListData),
    getTableFn: () => {},
    submitFn: () => {},
    changeLogisticsApi: () => {},
  },
)

const rowClick = (row: LogisticsData, title?: string) => {
  console.log(title, 'title')
  try {
    // if (title == '创建物流订单') {
    //   changeWayRow.value = row
    // } else {
    // if (row.logisticsWayId === selection.value[0]?.logisticsWayId) {
    //   ElMessage.warning('不能选择相同的物流方式')
    //   changeWayRow.value = {} as LogisticsData

    //   changeWayRef.value?.setCurrentRow()

    //   return
    // }
    changeWayRow.value = row
    // }
  } catch (error) {
    console.log(error)
  }
}

const cancelWayDialog = () => {
  changeWayRow.value = {} as LogisticsData
  changeWayRef.value?.setCurrentRow()
  isChangeWay.value = false
  logisticsWayData.value = []
}
//确认物流
const changeWaySubmit = async (title: string) => {
  console.log('title', title)
  console.log('changeWayRow', changeWayRow.value)
  console.log('rowData', props.rowData)
  const { changeLogisticsApi, submitFn } = props

  if (!changeWayRow.value?.logisticsWayId) {
    return ElMessage.warning('请选择一条物流方式')
  }
  if (!changeWayRow.value.status) {
    return ElMessage.warning('请选择状态为成功的物流方式')
  }
  let Fn
  if (title !== '创建物流订单') {
    if (changeWayRow.value?.logisticsWayId === props.rowData?.logisticsWayId) {
      return ElMessage.warning('更改的物流方式不能相同')
    }
    Fn = changeLogisticsApi
  } else {
    Fn = submitFn
  }
  isChangeWayLoading.value = true
  try {
    const params = {
      updateByIdParam: {
        id: props.rowData?.id || '',
        dataVersion: props.rowData?.version as number,
      },
      logisticsTrialCalculation: { ...changeWayRow.value },
    }

    await Fn(params)
    isChangeWay.value = false

    isChangeWayLoading.value = false
    ElMessage.success('操作成功')
    emits('confirm')
  } catch (error) {
    console.log(error)
  } finally {
    isChangeWayLoading.value = false
    logisticsWayData.value = []
  }
}
const showDialog = async () => {
  const { rowData, getTableFn } = props
  try {
    if (rowData) {
      wayDialogTitle.value = `切换物流(当前物流方式：${
        rowData.logisticsWayName || '空'
      })`
      isChangeWay.value = true
      isChangeWayLoading.value = true
      const { data } = await getTableFn(rowData.id as number)

      logisticsWayData.value = data
    }
  } catch (error) {
    console.error(error)
  } finally {
    isChangeWayLoading.value = false
  }
}
const emits = defineEmits<{
  (e: 'confirm'): void
}>()

defineExpose({
  showDialog,
})
</script>

<style lang="scss" scoped>
.production-client-table {
  ::v-deep(.current-row > td.el-table__cell) {
    background-color: #409eff;
    color: white;

    & > td.el-table__cell {
      color: white !important;
      background-color: #409eff;
    }

    // &:hover {
    //   color: #808285;
    // }
  }

  :deep() {
    .current-row {
      &:hover {
        td.el-table__cell {
          color: #808285;
        }
      }
    }
  }
}
</style>
