<template>
  <el-dialog
    v-model="visible"
    :title="!dataList[0].propId ? '新增' : '修改'"
    :close-on-click-modal="false"
  >
    <!-- 属性表格 -->
    <el-table
      :data="dataList"
      border
      style="width: 100%;"
    >
      <!-- 属性名称列 -->
      <el-table-column
        prop="propName"
        header-align="center"
        align="center"
        label="属性名称"
      >
        <template #default="scope">
          <el-input
            v-model="scope.row.propName"
            placeholder="请输入内容"
            maxlength="10"
            show-word-limit
            clearable
          />
        </template>
      </el-table-column>

      <!-- 属性值列 -->
      <el-table-column
        prop="prodPropValues"
        header-align="center"
        align="center"
        label="属性值"
      >
        <template #default="scope">
          <el-col
            v-for="item in scope.row.prodPropValues"
            :key="item.valueId"
            :span="12"
          >
            <el-input
              v-model="item.propValue"
              placeholder="请输入内容"
              class="prop-value-input"
              maxlength="20"
              show-word-limit
              clearable
              @clear="clearProdPropValues"
            />
          </el-col>
          <!-- 添加新输入框按钮 -->
          <el-col :span="4">
            <el-button
              v-show="scope.row.prodPropValues[scope.row.prodPropValues.length-1].propValue"
              type="primary"
              class="add-input"
              icon="el-icon-circle-plus"
              @click="addInput()"
            />
          </el-col>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import { ElMessage } from 'element-plus'
import { Debounce } from '@/utils/debounce'
import { ref, defineEmits, defineExpose } from 'vue'

// 定义事件发射器，用于向父组件发送事件
const emit = defineEmits(['refreshDataList'])

// 控制对话框显示/隐藏的布尔值
const visible = ref(false)

// 数据表单对象，初始化默认值
const dataList = ref([{ propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }])

// 分页信息（此处未在代码中使用）
const page = {
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
}

/**
 * 初始化方法，接受可选的产品属性对象作为参数
 * @param val - 产品属性对象，如果存在则为编辑模式
 */
const init = (val) => {
  if (val) {
    dataList.value = [JSON.parse(JSON.stringify(val))] // 深拷贝避免直接修改原始数据
  } else {
    dataList.value = [
      { propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }
    ]
  }
  visible.value = true
}
defineExpose({ init })

/**
 * 表单提交
 */
const onSubmit = Debounce(() => {
  // 清除空的属性值
  if (dataList.value[0].prodPropValues) {
    const temp = []
    for (const key in dataList.value[0].prodPropValues) {
      if (dataList.value[0].prodPropValues.hasOwnProperty(key)) {
        const element = dataList.value[0].prodPropValues[key]
        if (element.propValue) {
          temp.push(dataList.value[0].prodPropValues[key])
        }
      }
    }
    dataList.value[0].prodPropValues = temp
  }

  // 验证表单
  if (!dataList.value[0].propName.trim()) {
    ElMessage.error('属性名不能为空')
    return
  }
  if (dataList.value[0].prodPropValues.length < 1) {
    ElMessage.error('规格项不能为空')
    return
  }
  if (dataList.value[0].propName.length > 10) {
    ElMessage.error('属性名称长度不能大于10')
    return
  }
  if (dataList.value[0].prodPropValues.find(el => !el.propValue.trim())) {
    ElMessage.error('属性值不能为空')
    return
  }
  if (dataList.value[0].prodPropValues.find(el => el.propValue.length > 20)) {
    ElMessage.error('属性值长度不能大于20')
    return
  }

  // 发起HTTP请求，根据是否存在ID来决定是更新还是创建新记录
  http({
    url: http.adornUrl('/prod/spec'),
    method: dataList.value[0].propId ? 'put' : 'post',
    data: http.adornData({
      propId: dataList.value[0].propId || undefined,
      propName: dataList.value[0].propName,
      prodPropValues: dataList.value[0].prodPropValues
    })
  })
    .then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList', page)
        }
      })
    })
})

/**
 * 清除属性值时的处理逻辑
 */
const clearProdPropValues = () => {
  if (dataList.value[0].prodPropValues.length === 1) {
    return
  }
  for (let i = 0; i < dataList.value[0].prodPropValues.length; i++) {
    const element = dataList.value[0].prodPropValues[i]
    if (!element.propValue) {
      dataList.value[0].prodPropValues.splice(i, 1)
    }
  }
}

/**
 * 添加新的属性值输入框
 */
const addInput = () => {
  const temp = dataList.value[0].prodPropValues
  if (temp[temp.length - 1].propValue) {
    temp.push({}) // 只有当最后一个输入框有内容时才添加新的输入框
  }
}
</script>

<style scoped lang="scss">
.prop-value-input {
  padding: 3px;
}
.add-input {
  margin: 3px;
}
</style>
