<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>首页配置管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleSave">保存配置</el-button>
      </div>
      
      <el-form ref="homeForm" :model="homeConfig" :rules="rules" label-width="120px">
        <!-- 历史记录统计配置 -->
        <el-divider content-position="left">历史记录统计配置</el-divider>
        
        <!-- 历史记录列表配置 -->
        <el-card class="box-card" style="margin-bottom: 20px;">
          <div slot="header">
            <span>历史记录统计列表</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addHistoryRecord">添加记录</el-button>
          </div>
          <el-table :data="homeConfig.historyRecords" style="width: 100%">
            <!-- <el-table-column label="类型" width="120">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="选择类型">
                  <el-option label="狗狗" value="dog"></el-option>
                  <el-option label="猫咪" value="cat"></el-option>
                  <el-option label="服务次数" value="service"></el-option>
                </el-select>
              </template>
            </el-table-column> -->
            <el-table-column label="数量/次数" width="220">
              <template slot-scope="scope">
                <el-input v-model="scope.row.count" size="mini" placeholder="请输入数量/次数"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="时间" width="220">
              <template slot-scope="scope">
                <el-input v-model="scope.row.time" size="mini" placeholder="请输入时间"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <oss-image-upload v-model="scope.row.image" :limit="1"></oss-image-upload>
              </template>
            </el-table-column>
            <!-- <el-table-column label="描述">
              <template slot-scope="scope">
                <el-input v-model="scope.row.description" size="mini" placeholder="请输入描述"></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeHistoryRecord(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>

      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="handleSave" :loading="saveLoading">保存配置</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listAppletConfig, getAppletConfig, addAppletConfig, updateAppletConfig } from "@/api/model/AppletConfig";

export default {
  name: "HomeConfig",
  data() {
    return {
      saveLoading: false,
      // 首页配置数据
      homeConfig: {
        // 历史记录统计列表
        historyRecords: [
          {
            count: '',
            time: '',
            image: '',
          },
          {
            count: '',
            time: '',
            image: '',
          },
          {
            count: '',
            time: '',
            image: '',
          }
        ]
      },
      // 表单校验规则
      rules: {}
    };
  },
  created() {
    this.getHomeConfig();
  },
  methods: {
    // 获取首页配置
    async getHomeConfig() {
      try {
        // 查询首页配置参数
        const response = await listAppletConfig({ paramCode: 'home_config' });
        if (response.rows && response.rows.length > 0) {
          const config = response.rows[0];
          if (config.paramValueText) {
            this.homeConfig = JSON.parse(config.paramValueText);
          }
        }
      } catch (error) {
        console.error('获取首页配置失败:', error);
        this.$message.error('获取首页配置失败');
      }
    },
    
    // 保存配置
    async handleSave() {
      try {
        this.$refs.homeForm.validate(async (valid) => {
          if (valid) {
            this.saveLoading = true;
            
            // 准备保存的数据
            const saveData = {
              paramCode: 'home_config',
              paramValue: '首页配置',
              paramValueText: JSON.stringify(this.homeConfig, null, 2)
            };
            
            // 查询是否已存在配置
            const response = await listAppletConfig({ paramCode: 'home_config' });
            
            if (response.rows && response.rows.length > 0) {
              // 更新现有配置
              saveData.id = response.rows[0].id;
              await updateAppletConfig(saveData);
            } else {
              // 新增配置
              await addAppletConfig(saveData);
            }
            
            this.$message.success('首页配置保存成功');
            this.saveLoading = false;
          }
        });
      } catch (error) {
        console.error('保存首页配置失败:', error);
        this.$message.error('保存首页配置失败');
        this.saveLoading = false;
      }
    },
    
    // 重置配置
    handleReset() {
      this.$confirm('确定要重置所有配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getHomeConfig();
        this.$message.success('配置已重置');
      });
    },
    
    // 添加历史记录
    addHistoryRecord() {
      this.homeConfig.historyRecords.push({
        type: 'dog',
        count: 0,
        time: '',
        image: '',
        description: ''
      });
    },
    
    // 删除历史记录
    removeHistoryRecord(index) {
      this.homeConfig.historyRecords.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.el-divider {
  margin: 20px 0;
}

.el-form-item {
  margin-bottom: 18px;
}

.small-img {
  width: 50px;
  height: 50px;
}

.circle-img {
  border-radius: 50%;
}
</style>