<template>
  <div class="fresh-container">
    <el-card shadow="hover">
      <!-- 标题区域（可点击编辑） -->
      <div class="section-header" @click="handleEditHeader">
        <div class="header-left">
          <h2 class="section-title">{{ headerConfig.title }}</h2>
          <span class="section-subtitle">{{ headerConfig.subtitle }}</span>
        </div>
        <div class="header-right">
          <el-link type="primary" :underline="false" @click.stop="handleLinkClick">{{ headerConfig.linkText }}></el-link>
        </div>
      </div>

      <!-- 商品列表区域（等同事接口） -->
      <el-empty description="商品列表开发中，等待商品模块接口..." />
    </el-card>

    <!-- 编辑标题对话框 -->
    <el-dialog v-model="headerDialog.visible" title="编辑标题" width="600px" append-to-body>
      <el-form :model="headerForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题名称" required>
              <el-input v-model="headerForm.title" placeholder="请输入标题名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="副标题" required>
              <el-input v-model="headerForm.subtitle" placeholder="请输入副标题" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="链接文字">
              <el-input v-model="headerForm.linkText" placeholder="请输入链接文字" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="链接">
              <el-input v-model="headerForm.linkUrl" placeholder="请输入链接地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="背景色">
              <el-color-picker v-model="headerForm.bgColor" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字体颜色">
              <el-color-picker v-model="headerForm.textColor" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="saveHeaderConfig">确 认</el-button>
        <el-button @click="headerDialog.visible = false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Fresh" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getDecorationSectionByType, addDecorationSection, updateDecorationSection } from '@/api/decoration/section';

// 标题配置
const headerConfig = ref({
  id: null as number | null,
  title: '新鲜好物',
  subtitle: '寻觅世间好物',
  linkText: '更多',
  linkUrl: '',
  bgColor: '#ffffff',
  textColor: '#303133'
});

const headerDialog = reactive({ visible: false });
const headerForm = reactive({
  id: null as number | null,
  title: '',
  subtitle: '',
  linkText: '',
  linkUrl: '',
  bgColor: '#ffffff',
  textColor: '#303133'
});

// 加载标题配置
const loadHeaderConfig = async () => {
  try {
    const res = await getDecorationSectionByType('fresh');
    if (res.rows && res.rows.length > 0) {
      const data = res.rows[0];
      headerConfig.value = {
        id: data.id,
        title: data.title || '新鲜好物',
        subtitle: data.subtitle || '寻觅世间好物',
        linkText: data.linkText || '更多',
        linkUrl: data.linkUrl || '',
        bgColor: data.bgColor || '#ffffff',
        textColor: data.textColor || '#303133'
      };
    }
  } catch (error) {
    console.error('加载标题配置失败', error);
  }
};

const handleEditHeader = () => {
  Object.assign(headerForm, headerConfig.value);
  headerDialog.visible = true;
};

const saveHeaderConfig = async () => {
  try {
    const data = {
      ...headerForm,
      sectionType: 'fresh'
    };
    if (headerForm.id) {
      await updateDecorationSection(data);
    } else {
      await addDecorationSection(data);
    }
    await loadHeaderConfig();
    headerDialog.visible = false;
    ElMessage.success('标题配置已保存');
  } catch (error) {
    ElMessage.error('保存失败');
  }
};

const handleLinkClick = () => {
  if (headerConfig.value.linkUrl) {
    window.open(headerConfig.value.linkUrl, '_blank');
  }
};

onMounted(() => {
  loadHeaderConfig();
});
</script>

<style scoped lang="scss">
.fresh-container {
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;

  &:hover {
    background: #ebeef5;
  }

  .header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;

    .section-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #303133;
    }

    .section-subtitle {
      font-size: 14px;
      color: #909399;
    }
  }
}
</style>
