<template>
  <div class="mod-index-img">
    <!-- 对话框组件，用于显示新增或修改轮播图片的表单 -->
    <el-dialog
      v-model="visible"
      :title="!dataForm.imgId ? '新增' : '修改'"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="100px"
      >
        <!-- 轮播图片选择项 -->
        <el-form-item
          label="轮播图片"
          prop="imgUrl"
        >
          <pic-upload v-model="dataForm.imgUrl" />
        </el-form-item>
        <!-- 顺序输入框 -->
        <el-form-item
          label="顺序"
          prop="seq"
          :rules="[
            { required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的顺序', trigger: 'blur' }
          ]"
        >
          <el-input v-model="dataForm.seq" />
        </el-form-item>
        <!-- 状态选择 -->
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 类型选择 -->
        <el-form-item label="类型">
          <el-radio-group
            v-model="dataForm.type"
            @change="deleteRelation"
          >
            <el-radio :label="-1">无</el-radio>
            <el-radio :label="0">商品</el-radio>
          </el-radio-group>
          <!-- 显示关联的商品卡片 -->
          <div v-if="dataForm.relation != null">
            <el-card
              :body-style="{ padding: '0px' }"
              style="height: 160px;width: 120px"
            >
              <img
                alt=""
                :src="card.pic"
                style="height:104px;width:100%"
              >
              <div class="card-prod-bottom">
                <span class="card-prod-name">{{ card.name }}</span>
                <el-button
                  type="text"
                  class="card-prod-name-button"
                  @click="deleteRelation"
                >
                  删除
                </el-button>
              </div>
            </el-card>
          </div>
          <!-- 如果没有关联商品，则显示选择商品按钮 -->
          <div v-if="dataForm.relation == null && dataForm.type === 0">
            <el-button @click="addProd">选择商品</el-button>
          </div>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit()"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 商品选择弹窗 -->
    <prods-select
      v-if="prodsSelectVisible"
      ref="prodsSelectRef"
      :is-single="true"
      @refresh-select-prods="selectCouponProds"
    />
  </div>
</template>

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

// 定义事件发射器
const emit = defineEmits(['refreshDataList'])

// 表单数据对象
const dataForm = ref({
  status: 1,
  des: '',
  imgUrl: '',
  seq: 0,
  imgId: 0,
  type: -1,
  relation: null
})

// 表单验证规则
const dataRule = reactive({
  imgUrl: [
    { required: true, message: '轮播图片不能为空', trigger: 'blur' }
  ]
})

// 关联商品数据
const card = ref({
  id: 0,
  pic: '',
  name: '',
  realData: {
    prod: [],
    shop: [],
    activity: []
  }
})

// 分页参数
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

// 控制商品选择弹窗可见性
const prodsSelectVisible = ref(false)

// 控制对话框可见性
const visible = ref(false)

// 表单引用
const dataFormRef = ref(null)

/**
 * 初始化数据
 * @param id - 要编辑的数据ID，若为新增则传入null或不传
 */
const init = (id) => {
  visible.value = true
  dataForm.value.imgId = id || 0
  if (dataForm.value.imgId) {
    // 获取已有轮播图数据
    http({
      url: http.adornUrl(`/admin/indexImg/info/${dataForm.value.imgId}`),
      method: 'get'
    })
      .then(({ data }) => {
        dataForm.value = data
        if (data.relation) {
          card.value.pic = data.pic
          card.value.name = data.prodName
          card.value.id = data.relation
        }
      })
  } else {
    // 新增时重置表单
    nextTick(() => {
      dataFormRef.value?.resetFields()
      dataForm.value.imgUrl = ''
    })
  }
}

// 将init方法暴露给父组件调用
defineExpose({ init })

/**
 * 表单提交，使用防抖功能防止快速多次点击
 */
const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    const param = dataForm.value
    http({
      url: http.adornUrl('/admin/indexImg'),
      method: param.imgId ? 'put' : 'post',
      data: http.adornData(param)
    })
      .then(() => {
        ElMessage({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList', page)
          }
        })
      })
  })
})

/**
 * 删除关联商品
 */
const deleteRelation = () => {
  dataForm.value.relation = null
}

// 商品选择弹窗引用
const prodsSelectRef = ref(null)

/**
 * 打开选择商品窗口
 */
const addProd = () => {
  prodsSelectVisible.value = true
  nextTick(() => {
    prodsSelectRef.value?.init(card.value.realData.prod)
  })
}

/**
 * 添加指定商品到轮播图关联
 * @param prods - 已选中的商品列表
 */
const selectCouponProds = (prods) => {
  card.value.realData.prods = prods
  if (prods.length) {
    const selectProd = prods[0]
    dataForm.value.relation = selectProd.prodId
    card.value.pic = selectProd.pic
    card.value.name = selectProd.prodName
    card.value.id = selectProd.prodId
  } else {
    card.value = {}
  }
}
</script>

<style lang="scss" scoped>
// 样式定义，针对商品卡片底部内容进行样式调整
.card-prod-bottom {
  position: relative;
  text-align: left;
  .card-prod-name {
    margin: auto;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 118px;
    display: inline-block;
  }
  .card-prod-name-button {
    position: absolute;
    top: 24px;
    right: 10px;
  }
}
</style>
