<template>
  <a-modal
    v-model:visible="visible"
    centered
    title="公路运输产品新增"
    width="800px"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      :rules="rules"
    >
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="短驳类型" name="busType">
            <a-select
              v-model:value="formState.busType"
              placeholder="请选择短驳类型"
              allow-clear
            >
              <a-select-option value="集装箱">集装箱</a-select-option>
              <a-select-option value="散杂货">散杂货</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计价方式" name="priceType">
            <a-select
              v-model:value="formState.priceType"
              placeholder="请选择计价方式"
              allow-clear
            >
              <a-select-option value="1">一口价</a-select-option>
              <a-select-option value="2">阶梯价</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <!-- 一口价时显示起运地类型和目的地类型 -->
        <template v-if="formState.priceType === '1'">
          <!-- 起运地类型（前端UI控制字段） -->
          <a-col :span="12">
            <a-form-item label="起运地类型" name="fromLocUIType">
              <a-select
                v-model:value="formState.fromLocUIType"
                placeholder="请选择起运地类型"
                allow-clear
                @change="handleFromLocTypeChange"
              >
                <a-select-option value="railway">铁路场站</a-select-option>
                <a-select-option value="dock">码头</a-select-option>
                <a-select-option value="door">门点地址</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- 目的地类型（前端UI控制字段） -->
          <a-col :span="12">
            <a-form-item label="目的地类型" name="toLocUIType">
              <a-select
                v-model:value="formState.toLocUIType"
                placeholder="请选择目的地类型"
                allow-clear
                @change="handleToLocTypeChange"
              >
                <a-select-option value="railway">铁路场站</a-select-option>
                <a-select-option value="dock">码头</a-select-option>
                <a-select-option value="door">门点地址</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- 起运地 -->
          <a-col :span="12">
            <a-form-item label="起运地" name="fromLoc">
              <a-form-item-rest>
                <div style="display: flex; align-items: center">
                  <!-- 铁路场站或码头：使用下拉选择 -->
                  <a-select
                    v-if="formState.fromLocUIType === 'railway' || formState.fromLocUIType === 'dock'"
                    v-model:value="formState.fromLoc"
                    :placeholder="formState.fromLocUIType === 'railway' ? '请选择铁路场站' : '请选择码头'"
                    allow-clear
                    show-search
                    :filter-option="filterOption"
                    @change="handleFromStationSelect"
                  >
                    <a-select-option
                      v-for="item in fromStationOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>

                  <!-- 门点地址：使用搜索选择 -->
                  <a-select
                    v-else
                    v-model:value="formState.fromLoc"
                    show-search
                    placeholder="请输入地点"
                    :filter-option="false"
                    @search="handleLocationSearch"
                    @select="handleRealSelect"
                    @dropdownVisibleChange="handleDropdownHide"
                  >
                    <a-select-option
                      v-for="item in locationOptions"
                      :key="item.uid"
                      :value="item.title"
                      :data="item"
                    >
                      <div>{{ item.title }}</div>
                    </a-select-option>
                  </a-select>

                  <!-- 只有门点地址才显示定位按钮 -->
                  <a-button
                    v-if="formState.fromLocUIType === 'door'"
                    @click="handleSelectCoordinates('from')"
                    type="primary"
                    shape="circle"
                    size="small"
                    style="margin-left: 8px"
                  >
                    <template #icon>
                      <EnvironmentOutlined />
                    </template>
                  </a-button>
                </div>
              </a-form-item-rest>
            </a-form-item>
          </a-col>

          <!-- 目的地 -->
          <a-col :span="12">
            <a-form-item label="目的地" name="toLoc">
              <a-form-item-rest>
                <div style="display: flex; align-items: center">
                  <!-- 铁路场站或码头：使用下拉选择 -->
                  <a-select
                    v-if="formState.toLocUIType === 'railway' || formState.toLocUIType === 'dock'"
                    v-model:value="formState.toLoc"
                    :placeholder="formState.toLocUIType === 'railway' ? '请选择铁路场站' : '请选择码头'"
                    allow-clear
                    show-search
                    :filter-option="filterOption"
                    @change="handleToStationSelect"
                  >
                    <a-select-option
                      v-for="item in toStationOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>

                  <!-- 门点地址：使用下拉选择 -->
                  <a-select
                    v-else
                    v-model:value="formState.toLoc"
                    placeholder="请选择目的地"
                    allow-clear
                    show-search
                    :filter-option="filterOption"
                    @change="handleDoorToChange"
                  >
                    <a-select-option
                      v-for="item in stationOptions"
                      :key="item.value"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>

                  <!-- 只有门点地址才显示定位按钮 -->
                  <a-button
                    v-if="formState.toLocUIType === 'door'"
                    @click="handleSelectCoordinates('to')"
                    type="primary"
                    shape="circle"
                    size="small"
                    style="margin-left: 8px"
                  >
                    <template #icon>
                      <EnvironmentOutlined />
                    </template>
                  </a-button>
                </div>
              </a-form-item-rest>
            </a-form-item>
          </a-col>

          <!-- 价格 -->
          <a-col :span="12">
            <a-form-item label="价格(元)" name="basePrice">
              <a-form-item-rest>
                <div style="display: flex; align-items: center">
                  <a-input-number
                    style="flex: 1; margin-right: 10px"
                    v-model:value="formState.basePrice"
                    placeholder="请输入运价"
                  />
                  <a-input disabled value="元" style="width: 100px" placeholder="单位" />
                </div>
              </a-form-item-rest>
            </a-form-item>
          </a-col>
        </template>

        <a-col :span="12">
          <a-form-item label="运价备注" name="priceRemark">
            <a-input
              style="width: 100%"
              v-model:value="formState.priceRemark"
              placeholder="请输入运价备注"
            />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="预计时长" name="estTime">
            <a-form-item-rest>
              <div style="display: flex; align-items: center">
                <a-input-number
                  style="flex: 1; margin-right: 10px"
                  v-model:value="formState.estTime"
                  type="number"
                  min="0"
                  placeholder="请输入预计时长"
                />
                <a-select
                  v-model:value="formState.estTimeUnit"
                  style="width: 100px"
                  placeholder="单位"
                >
                  <a-select-option value="D">天</a-select-option>
                  <a-select-option value="H">小时</a-select-option>
                </a-select>
              </div>
            </a-form-item-rest>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="揽货备注" name="cargoRemark">
            <a-input v-model:value="formState.cargoRemark" placeholder="请输入揽货备注" />
          </a-form-item>
        </a-col>

        <gridientComp
          v-if="formState.priceType === '2'"
          v-model:modelValue="formState.elementTieredPriceList"
        />
      </a-row>
    </a-form>

    <locationSelect ref="locationSelectRef" @location-selected="changeLocation" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, watch } from 'vue';
import { FormInstance, message } from 'ant-design-vue';
import locationSelect from '../../../commonComponents/locationSelect.vue';
import { addTruckInfo, editTruckInfo, getTruckInfoById, getBaiduPlace } from '@/api/qcwl';
import * as commonApi from '@/api/common';
import type { RuleObject } from 'ant-design-vue/lib/form/interface';
import { noLoginlistStation } from '@/api/sysOrgRelation';
import { commonMixin } from '@/mixins/commonMixin';
import gridientComp from './gridientComp.vue';

const { filterOption } = commonMixin();

interface StationOption {
  label: string;
  value: string;
}

const emit = defineEmits(['refresh']);

const formRef = ref<FormInstance>();
const locationSelectRef = ref();
const visible = ref(false);

// 起运地站点选项（铁路场站/码头）
const fromStationOptions = ref<StationOption[]>([]);
// 目的地站点选项（铁路场站/码头）
const toStationOptions = ref<StationOption[]>([]);
// 门点地址选项
const stationOptions = ref<StationOption[]>([]);

// 位置搜索选项
const locationOptions = ref<any[]>([]);
let realInputValue = '';

// 当前操作的坐标类型（用于定位回调）
let currentCoordType: 'from' | 'to' = 'from';

const formState = reactive<any>({
  id: undefined,
  busType: '集装箱',
  // 后端接口字段（保持不变）
  fromLocType: 'city',
  toLocType: 'railway',
  // 前端UI控制字段（不提交给后端）
  fromLocUIType: 'door',
  toLocUIType: 'door',
  fromLoc: undefined,
  toLoc: undefined,
  basePrice: undefined,
  priceRemark: undefined,
  estTime: undefined,
  estTimeUnit: 'D',
  cargoRemark: undefined,
  fromLocPosition: '',
  toLocPosition: '',
  priceType: '1',
  elementTieredPriceList: [],
});

const rules: Record<string, RuleObject | RuleObject[]> = {
  busType: [{ required: true, message: '请选择短驳类型' }],
  fromLocUIType: [{ required: true, message: '请选择起运地类型' }],
  toLocUIType: [{ required: true, message: '请选择目的地类型' }],
  fromLoc: [{ required: true, message: '请选择起运地' }],
  toLoc: [{ required: true, message: '请选择目的地' }],
  basePrice: [{ required: true, message: '请输入运价' }],
  estTime: [{ required: true, message: '请输入预计时长' }],
  estTimeUnit: [{ required: true, message: '请选择预计时长单位' }],
  priceType: [{ required: true, message: '请选择计价方式' }],
};

const showModal = (row?: any) => {
  // 初始化站点选项
  initStationOptions();
  // 初始化门点地址选项
  initDoorStationOptions();
  // 清空位置搜索
  locationOptions.value = [];

  if (row && row.id) {
    getTruckInfoById(row.id).then((res) => {
      // 从后端获取数据，UI类型默认设置为door
      Object.assign(formState, {
        ...res.result,
        fromLocUIType: 'door',
        toLocUIType: 'door',
      });
    });
  } else {
    Object.assign(formState, {
      id: undefined,
      busType: '集装箱',
      fromLocType: 'city',
      toLocType: 'railway',
      fromLocUIType: 'door',
      toLocUIType: 'door',
      fromLoc: undefined,
      toLoc: undefined,
      basePrice: undefined,
      priceRemark: undefined,
      estTime: undefined,
      estTimeUnit: 'D',
      cargoRemark: undefined,
      fromLocPosition: '',
      toLocPosition: '',
      priceType: '1',
      elementTieredPriceList: [],
    });
  }
  visible.value = true;
};

// 初始化站点选项（铁路场站和码头）- 占位数据
const initStationOptions = () => {
  // 铁路场站占位数据（待接口对接）
  const railwayStations = [
    { label: '上海铁路场站', value: 'shanghai_railway' },
    { label: '北京铁路场站', value: 'beijing_railway' },
    { label: '广州铁路场站', value: 'guangzhou_railway' },
    { label: '深圳铁路场站', value: 'shenzhen_railway' },
    { label: '成都铁路场站', value: 'chengdu_railway' },
    { label: '武汉铁路场站', value: 'wuhan_railway' },
  ];

  // 码头占位数据（待接口对接）
  const dockStations = [
    { label: '上海港码头', value: 'shanghai_dock' },
    { label: '宁波港码头', value: 'ningbo_dock' },
    { label: '深圳港码头', value: 'shenzhen_dock' },
    { label: '广州港码头', value: 'guangzhou_dock' },
    { label: '青岛港码头', value: 'qingdao_dock' },
    { label: '天津港码头', value: 'tianjin_dock' },
  ];

  // 合并所有站点供选择（实际使用时可区分铁路和码头）
  fromStationOptions.value = [...railwayStations, ...dockStations];
  toStationOptions.value = [...railwayStations, ...dockStations];
};

// 初始化门点地址选项
const initDoorStationOptions = () => {
  noLoginlistStation({}).then((res) => {
    if (res.code !== '0000') {
      return Promise.reject(res);
    }
    stationOptions.value = res.result.map((item: any) => ({
      label: item,
      value: item,
    }));
  });
};

// 起运地类型变更
const handleFromLocTypeChange = (val: string) => {
  formState.fromLoc = undefined;
  formState.fromLocPosition = '';
  // 如果不是门点地址，清空搜索选项
  if (val !== 'door') {
    locationOptions.value = [];
  }
};

// 目的地类型变更
const handleToLocTypeChange = (val: string) => {
  formState.toLoc = undefined;
  formState.toLocPosition = '';
};

// 起运地铁路/码头选择
const handleFromStationSelect = (val: string) => {
  // 从站点列表中查找对应的经纬度
  const found = fromStationOptions.value.find((item) => item.value === val);
  if (found) {
    // TODO: 从后端获取对应站点的经纬度，目前使用示例坐标
    formState.fromLocPosition = '121.4737,31.2304';
  }
};

// 目的地铁路/码头选择
const handleToStationSelect = (val: string) => {
  const found = toStationOptions.value.find((item) => item.value === val);
  if (found) {
    // TODO: 从后端获取对应站点的经纬度，目前使用示例坐标
    formState.toLocPosition = '121.4737,31.2304';
  }
};

// 起运地门点地址搜索选择
const handleRealSelect = (selectedTitle: string, option: any) => {
  const selectedItem = option.data;
  formState.fromLocPosition = `${selectedItem.point.lng},${selectedItem.point.lat}`;
};

// 起运地搜索
const handleLocationSearch = async (value: string) => {
  realInputValue = value;
  if (!value.trim()) {
    locationOptions.value = [];
    return;
  }
  try {
    getBaiduPlace(value).then((res) => {
      locationOptions.value = res.result.results.map((item: any) => ({
        title: item.name,
        point: { lat: item.location.lat, lng: item.location.lng },
        uid: item.uid,
      }));
    });
  } catch (error) {
    console.error('搜索失败:', error);
  }
};

// 起运地下拉隐藏
const handleDropdownHide = (visible: boolean) => {
  if (!visible) {
    nextTick(() => {
      formState.fromLoc = realInputValue;
    });
  }
};

// 目的地门点地址选择
const handleDoorToChange = (val: string) => {
  if (val) {
    // TODO: 根据实际数据获取经纬度
    formState.toLocPosition = '121.4737,31.2304';
  }
};

// 选择坐标（起运地或目的地）
const handleSelectCoordinates = (type: 'from' | 'to') => {
  currentCoordType = type;
  locationSelectRef.value.showModal(formState);
};

// 坐标选择回调
const changeLocation = (data: { lng: number; lat: number }) => {
  const position = `${data.lng},${data.lat}`;
  if (currentCoordType === 'from') {
    formState.fromLocPosition = position;
  } else {
    formState.toLocPosition = position;
  }
};

const handleCancel = () => {
  visible.value = false;
};

// 提交前处理：将UI类型映射到后端字段
const prepareSubmitData = () => {
  const submitData = { ...formState };

  // 根据UI类型设置后端字段（如果需要映射）
  // 注意：fromLocType 和 toLocType 保持后端支持的值
  // 如果 UI 类型是 railway，可以设置 fromLocType = 'railway' 等
  // 但根据你的说明，后端不支持其他值，所以保持原样

  // 删除前端UI控制字段（不提交给后端）
  delete submitData.fromLocUIType;
  delete submitData.toLocUIType;

  return submitData;
};

const handleOk = async () => {
  // 阶梯价校验
  if (formState.priceType === '2') {
    if (!formState.elementTieredPriceList || formState.elementTieredPriceList.length === 0) {
      message.error('请设置梯度价格');
      return;
    }
    const invalidRows = formState.elementTieredPriceList
      .map((item: any, index: number) => ({
        index: index + 1,
        hasError: !item.distance || !item.price,
      }))
      .filter((item: any) => item.hasError);
    if (invalidRows.length > 0) {
      message.error(`第 ${invalidRows.map((r: any) => r.index).join(', ')} 行的距离或价格未填写`);
      return;
    }
  }

  // 一口价校验
  if (formState.priceType === '1') {
    if (!formState.fromLocPosition) {
      message.error('请选择起运地经纬度');
      return;
    }
    if (!formState.toLocPosition) {
      message.error('请选择目的地经纬度');
      return;
    }
  }

  try {
    await formRef.value?.validateFields();

    const submitData = prepareSubmitData();

    if (formState.id) {
      editTruckInfo(submitData).then((res) => {
        if (res.code === '0000') {
          message.success('更新成功');
          emit('refresh');
          visible.value = false;
        }
      });
    } else {
      addTruckInfo(submitData).then((res) => {
        if (res.code === '0000') {
          message.success('新增成功');
          emit('refresh');
          visible.value = false;
        }
      });
    }
  } catch (error) {
    console.log('验证失败:', error);
    message.error('请检查表单数据');
  }
};

defineExpose({ showModal });
</script>

<style scoped></style>