<template>
  <div class="car-model-selector">
    <el-form-item label="品牌">
      <el-select
        v-model="form.brandId"
        filterable
        clearable
        placeholder="请输入品牌名称搜索"
        :loading="brandLoading"
        @change="handleBrandChange"
        @filter-change="handleBrandFilter"
        style="width: 33%"
      >
        <el-option
          v-for="item in brandList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <template v-if="type !== 'brand'">
        -
        <el-select
          v-model="form.seriesId"
          placeholder="请选择车系"
          clearable
          :disabled="!form.brandId"
          :loading="seriesLoading"
          @change="handleSeriesChange"
          style="width: 33%"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </template>
      <template v-if="!type">
        -
        <el-select
          v-model="form.modelId"
          placeholder="请选择车型"
          clearable
          :disabled="!form.seriesId"
          :loading="modelLoading"
          @change="handleModelChange"
          style="width: 33%"
        >
          <el-option
            v-for="item in modelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </template>
    </el-form-item>
  </div>
</template>

<script>
  import { pageBrand, pageSeries, pageAutoCar } from '@/api/auto';

  export default {
    name: 'CarModelSelector',
    props: {
      value: {
        type: Object,
        default: () => ({
          brandId: null,
          seriesId: null,
          modelId: null
        })
      },
      type: {
        type: String,
        validator: (type) => {
          return !type || ['brandSeries', 'brand'].includes(type);
        }
      }
    },
    data() {
      return {
        form: { ...this.value }, // 初始化时深拷贝value,
        brandList: [],
        seriesList: [],
        modelList: [],
        brandLoading: false,
        seriesLoading: false,
        modelLoading: false,
        brandFilter: ''
      };
    },
    created() {
      this.loadBrands();
      if (this.value && this.value.brandId) {
        this.loadSeriesList(this.form.brandId);
      }
    },
    watch: {
      value: {
        deep: true,
        handler(newVal) {
          this.form = { ...newVal }; // 外部值变化时更新内部form
          if (this.form.brandId) {
            this.loadSeriesList(this.form.brandId);
          }
          if (this.form.seriesId) {
            this.loadModelList(this.form.seriesId);
          }
        }
      }
    },
    methods: {
      async loadBrands(filter = '') {
        this.brandLoading = true;
        try {
          pageBrand({ nameLike: filter }).then((res) => {
            this.brandList = res;
          });
          this.seriesList = [];
          this.modelList = [];
        } catch (error) {
          this.$message.error('品牌加载失败');
        } finally {
          this.brandLoading = false;
        }
      },

      async loadSeriesList(brandId) {
        this.seriesLoading = true;
        try {
          pageSeries({ brandId }).then((res) => {
            this.seriesList = res;
          });
          this.modelList = [];
        } catch (error) {
          this.$message.error('车系加载失败');
        } finally {
          this.seriesLoading = false;
        }
      },

      async loadModelList(seriesId) {
        this.modelLoading = true;
        try {
          const res = await pageAutoCar({ seriesId });
          this.modelList = res;
        } catch (error) {
          this.$message.error('车型加载失败');
        } finally {
          this.modelLoading = false;
        }
      },

      handleBrandChange(brandId) {
        if (brandId) {
          this.form.seriesId = null;
          this.loadSeriesList(brandId);
        }
        this.emitValue();
      },

      handleSeriesChange(seriesId) {
        if (seriesId) {
          this.form.modelId = null;
          this.loadModelList(seriesId);
        }
        this.emitValue();
      },
      handleModelChange() {
        this.emitValue();
      },
      handleBrandFilter(filter) {
        this.brandFilter = filter;
        this.loadBrands(filter);
      },
      emitValue() {
        this.$emit('input', { ...this.form });
      },

      syncFormWithProps() {
        // 重置所有数据
        // this.brandList = [];
        // this.seriesList = [];
        // this.modelList = [];
        //
        // const { brandId, seriesId, modelId } = this.modelValue;
        // this.form = { brandId, seriesId, modelId };
        //
        // if (brandId) {
        //   this.loadSeriesList(brandId);
        //   if (seriesId) {
        //     this.loadModelList(seriesId);
        //   }
        // }
      }
    }
  };
</script>

<style scoped></style>
