<template>
  <!-- 商品关联表单 -->
  <div style="margin-top: 50px">
    <el-form
      :model="value"
      ref="productRelationForm"
      label-width="120px"
      class="form-inner-container"
      size="small"
    >
      <!-- 关联专题 Transfer 组件 -->
      <el-form-item label="关联专题：">
        <el-transfer
          style="display: inline-block"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入专题名称"
          v-model="selectSubject"
          :titles="subjectTitles"
          :data="subjectList"
        ></el-transfer>
      </el-form-item>

      <!-- 关联优选 Transfer 组件 -->
      <el-form-item label="关联优选：">
        <el-transfer
          style="display: inline-block"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入优选名称"
          v-model="selectPrefrenceArea"
          :titles="prefrenceAreaTitles"
          :data="prefrenceAreaList"
        ></el-transfer>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">
          完成，提交商品
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchListAll as fetchSubjectList } from '@/api/subject'; // 获取专题列表API
import { fetchList as fetchPrefrenceAreaList } from '@/api/prefrenceArea'; // 获取优选列表API

export default {
  name: 'ProductRelationDetail', // 组件名称
  props: {
    value: Object, // 父组件传入的数据对象（用于存储表单数据）
    isEdit: {
      type: Boolean, // 是否为编辑模式
      default: false,
    },
  },
  data() {
    return {
      subjectList: [], // 专题数据列表
      subjectTitles: ['待选择', '已选择'], // Transfer组件标题：关联专题
      prefrenceAreaList: [], // 优选数据列表
      prefrenceAreaTitles: ['待选择', '已选择'], // Transfer组件标题：关联优选
    };
  },
  created() {
    this.getSubjectList(); // 初始化获取专题列表
    this.getPrefrenceAreaList(); // 初始化获取优选列表
  },
  computed: {
    /**
     * 选中的专题：通过 v-model 和 computed 绑定选中的专题数据
     */
    selectSubject: {
      get() {
        let subjects = [];
        if (
          this.value.subjectProductRelationList == null ||
          this.value.subjectProductRelationList.length <= 0
        ) {
          return subjects;
        }
        // 提取选中的专题ID
        for (let i = 0; i < this.value.subjectProductRelationList.length; i++) {
          subjects.push(this.value.subjectProductRelationList[i].subjectId);
        }
        return subjects;
      },
      set(newValue) {
        // 更新关联的专题列表
        this.value.subjectProductRelationList = [];
        for (let i = 0; i < newValue.length; i++) {
          this.value.subjectProductRelationList.push({ subjectId: newValue[i] });
        }
      },
    },

    /**
     * 选中的优选：通过 v-model 和 computed 绑定选中的优选数据
     */
    selectPrefrenceArea: {
      get() {
        let prefrenceAreas = [];
        if (
          this.value.prefrenceAreaProductRelationList == null ||
          this.value.prefrenceAreaProductRelationList.length <= 0
        ) {
          return prefrenceAreas;
        }
        // 提取选中的优选ID
        for (
          let i = 0;
          i < this.value.prefrenceAreaProductRelationList.length;
          i++
        ) {
          prefrenceAreas.push(
            this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId
          );
        }
        return prefrenceAreas;
      },
      set(newValue) {
        // 更新关联的优选列表
        this.value.prefrenceAreaProductRelationList = [];
        for (let i = 0; i < newValue.length; i++) {
          this.value.prefrenceAreaProductRelationList.push({
            prefrenceAreaId: newValue[i],
          });
        }
      },
    },
  },
  methods: {
    /**
     * 筛选方法：根据关键词过滤 Transfer 组件数据
     * @param {String} query - 查询关键词
     * @param {Object} item - 当前项
     */
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },

    /**
     * 获取专题列表数据
     */
    getSubjectList() {
      fetchSubjectList().then((response) => {
        let list = response.data;
        this.subjectList = list.map((item) => ({
          label: item.title,
          key: item.id,
        }));
      });
    },

    /**
     * 获取优选列表数据
     */
    getPrefrenceAreaList() {
      fetchPrefrenceAreaList().then((response) => {
        let list = response.data;
        this.prefrenceAreaList = list.map((item) => ({
          label: item.name,
          key: item.id,
        }));
      });
    },

    /**
     * 上一步操作：通知父组件返回上一步
     */
    handlePrev() {
      this.$emit('prevStep');
    },

    /**
     * 完成提交：通知父组件提交表单数据
     */
    handleFinishCommit() {
      this.$emit('finishCommit', this.isEdit);
    },
  },
};
</script>

<style scoped>
/* 局部样式：可根据需要自定义样式 */
.form-inner-container {
  max-width: 600px;
  margin: 0 auto;
}
</style>
