<template>
  <div class="user-page flex-column card h-100 overflow-hidden">
    <div class="header-filter-form">
      <SearchForm
        :config="searchConfig"
        :isSearchBtn="false"
        :isAddBtn="false"
        :isDeleteBtn="false"
        v-model="searchForm"
      >
        <template #ontherBtn>
          <div style="margin-left: 10px; display: flex; gap: 10px">
            <ElButton @click="search" type="primary">计算</ElButton>
          </div>
        </template>
      </SearchForm>
    </div>
    <div
      v-loading="loading"
      class="user-content flex-1 flex-column overflow-hidden"
    >
      <div class="user-list flex-1 overflow-hidden">
        <CustomizeTable
          ref="tableRef"
          v-model="tableData"
          :config="tableConfig"
          :merge-cells="mergeCells"
          highlight-current-row
          :isShowCheckBox="false"
          border="full"
        ></CustomizeTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
defineOptions({
  name: 'LogisticsCalculate',
})

import { getLogisticsTrialCalculation } from '@/api/logistics'
import SearchForm from '@/components/SearchForm.tsx'
import CustomizeTable from '@/components/VxeTable.tsx'
import type { VxeTablePropTypes } from 'vxe-table'
import { useValue } from './hooks/useValue'
import { ISeachFormConfig } from '@/types/searchType'
import { TableColumn } from '@/components/VxeTable'
const [searchForm] = useValue({ code: '', weight: '' })

const tableRef = ref<InstanceType<typeof CustomizeTable> | null>(null)

const mergeCells = ref<VxeTablePropTypes.MergeCells>([])
const tableData = ref([])
const searchConfig = ref<ISeachFormConfig[]>([
  {
    prop: 'code',
    type: 'input',
    label: '邮编',

    attrs: {
      clearable: true,
      placeholder: '请输入邮编',
    },
  },
  {
    prop: 'weight',
    type: 'amountInput',
    label: '重量',
    attrs: {
      clearable: true,
      placeholder: '请输入重量',
      hasUnit: true,
      suffix: 'g',
    },
  },
])

const tableConfig = ref<TableColumn[]>([
  {
    prop: 'logisticsWayName',
    label: '物流名称',
    attrs: {
      align: 'center',
      width: 100,
    },
  },
  {
    prop: 'warehouseName',
    label: '发货仓库',
  },

  {
    prop: 'logisticsWayCode',
    label: '物流编码',
  },

  {
    prop: 'partition',
    label: '所在分区',
  },
  {
    prop: 'status',
    label: '状态',
    render: {
      default: ({ row }) => {
        return (
          <div style={{ color: row.status ? '#67c23a' : '#f56c6c' }}>
            {row.status ? '成功' : '失败'}
          </div>
        )
      },
    },
  },
  {
    prop: 'payFreight',
    label: '预计运费（$）',
  },
])

/**
 * @description: 计算按钮
 */
async function search() {
  if (!searchForm.value.code) {
    ElMessage.warning('请输入邮编')
    return
  }
  if (!searchForm.value.weight) {
    ElMessage.warning('请输入重量')
    return
  }
  await getList(searchForm.value)
  const itemIndex = tableData.value.findIndex(
    (item: { status: boolean }) => item.status,
  )
  console.log(123, itemIndex)
  if (itemIndex !== -1) {
    nextTick(() => {
      tableRef.value?.selectRowEvent(tableData.value[itemIndex])
    })
  }
}

/**
 * @description: 获取列表数据
 */
const loading = ref(false)
async function getList(data?: { code: string; weight: string }) {
  loading.value = true
  try {
    const res = await getLogisticsTrialCalculation({
      ...data,
    })

    tableData.value = [...res.data]
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.header-filter-form {
  margin-bottom: 20px;

  :deep(.el-form-item) {
    margin-right: 14px;
    margin-bottom: 10px;
  }
}
.user-operate-btn {
  margin-bottom: 10px;
}
.dialog-footer {
  text-align: center;
}
</style>
