<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import type { SatisfactionModel } from '@/model/satisfaction.model';
import { getSatisfactionDetailMethod,getSatisfactionContentBySendRecordIdMethod } from '@/request/api/satisfaction.api';
const props = defineProps<{
  data?: any;
}>();

const scoreExplanation = '1分表示非常不满意, 2分表示不满意, 3分表示一般, 4分表示满意, 5分表示非常满意';


const numberToChinese = (num: number): string => {
  const chineseNumbers = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
  if (num <= 10) {
    return chineseNumbers[num];
  } else if (num < 20) {
    return `十${chineseNumbers[num - 10]}`;
  } else if (num < 100) {
    const tens = Math.floor(num / 10);
    const ones = num % 10;
    return `${chineseNumbers[tens]}十${chineseNumbers[ones]}`;
  }
  return num.toString();
};

// 表单数据
const form = reactive<SatisfactionModel>({
  id: '',
  name: '',
  satisfiesyContent: {
    name: '',
    startSentence: '',
    endSentence: '',
    suggestion: '',
    groups: [
      {
        name: '',
        items: [],
      },
    ],
  },
  satisfiesyPmr: {
    triggerType: '',
    triggerIntervalHours: 0,
  },
  triggerStr: '',
  pushType: '',
  status: '',
  createTime: '',
  sendCount: 0,
});

// 存储每个问题的答案
const answers = reactive<Record<string, number>>({});

// 初始化答案数据
const initAnswers = () => {
  form.satisfiesyContent.groups.forEach((group, groupIndex) => {
    group.items.forEach((question, questionIndex) => {
      const key = `group-${groupIndex}-question-${questionIndex}`;
      // 如果问题已有分数，则用已有的；否则默认为0
      if (question.score) {
        answers[key] = parseInt(question.score, 10) || 0;
      } else if (!(key in answers)) {
        answers[key] = 0;
      }
    });
  });
};

// 初始化数据
onMounted(async () => {
console.log(props.data.type,"传过来的参数");
  if (props?.data?.type === 1) {
    if (props.data.id) {
    const res = await getSatisfactionContentBySendRecordIdMethod(props.data.id);
    // console.log(res,"res======发送记录");
      if (res && typeof res === 'object') {
        Object.assign(form.satisfiesyContent, res);
        initAnswers();
      }
    }
  }else{
  if (props.data && props.data.id) {
    try {
      const res = await getSatisfactionDetailMethod(props.data.id);
      if (res && typeof res === 'object') {
        Object.assign(form, res);
        initAnswers();
      }
    } catch (error) {
      console.log(error);
    }
  }
}
});
</script>

<template>
  <div class="questionnaire-editor-container">
    <!-- 表单内容 -->
    <div class="form-content">
      <a-form ref="formRef" :model="form" layout="vertical">
        <!-- 问卷标题 -->
        <h1 class="questionnaire-title-section">
          {{ form.satisfiesyContent.name }}
        </h1>

        <!-- 介绍文字 -->
        <div class="introduction-section">
          {{ form.satisfiesyContent.startSentence }}
        </div>

        <!-- 分数说明 -->
        <div class="score-explanation-section">
          <div class="label">分数说明:</div>
          <div class="score-explanation-input label">
            {{ scoreExplanation }}
          </div>
        </div>

        <div class="sections-container">
          <div v-for="(group, groupIndex) in form.satisfiesyContent.groups" :key="`group-${groupIndex}-${group.name}`" class="section-item">
            <h2 class="section-title-input label">
              {{ `${numberToChinese(groupIndex + 1)}、${group.name}` }}
            </h2>

            <!-- 问题列表 -->
            <div class="questions-list">
              <div v-for="(question, questionIndex) in group.items" :key="question.name" class="question-item">
                <div class="question-content">
                  <span class="question-number">{{ questionIndex + 1 }}、</span>
                  <div class="question-input label">
                    {{ question.name }}
                  </div>
                </div>
                <!-- 评分选项（1-5分） -->
                <div class="score-options">
                  <a-radio-group :value="answers[`group-${groupIndex}-question-${questionIndex}`]">
                    <a-radio :value="1">1分</a-radio>
                    <a-radio :value="2">2分</a-radio>
                    <a-radio :value="3">3分</a-radio>
                    <a-radio :value="4">4分</a-radio>
                    <a-radio :value="5">5分</a-radio>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他意见 -->
        <div class="other-comments-section">
          <div class="other-comments-label">其他意见:</div>
          <a-textarea v-model:value="form.satisfiesyContent.suggestion" placeholder="请给我们留言您的其他意见" :rows="4" class="other-comments-input" disabled />
        </div>
        <!--结束语 -->
        <div class="end-sentence-section">{{ form.satisfiesyContent.endSentence }}</div>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.questionnaire-editor-container {
  padding: 24px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-content {
  flex: 1;
  overflow: auto;
  margin-bottom: 24px;
  max-width: 800px;
  margin: 0 auto 24px;
  width: 100%;
}

// 问卷标题
.questionnaire-title-section {
  text-align: center;
  margin-bottom: 32px;

  .title-input {
    font-size: 24px;
    font-weight: bold;
    text-align: center;

    :deep(.ant-input) {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      border: none;
      border-bottom: 2px solid #d9d9d9;
      border-radius: 0;
      padding: 12px 0;
      background: transparent;

      &:focus,
      &:hover {
        border-bottom-color: #40a9ff;
        box-shadow: none;
      }
    }
  }
}

// 介绍文字
.introduction-section {
  margin-bottom: 24px;
  font-size: 17px;

  .introduction-textarea {
    :deep(.ant-input) {
      font-size: 14px;
      line-height: 2;
      white-space: pre-wrap;
      padding: 12px;
    }
  }
}

// 分数说明
.score-explanation-section {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color:black

  .label {
    white-space: nowrap;
  }

  .score-explanation-input {
    flex: 1;

    :deep(.ant-input) {
      font-size: 14px;
    }
  }
}

// 章节容器
.sections-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

// 章节项
.section-item {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 16px;
  background: #fafafa;
}

// 章节标题
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;

  .section-title-input {
    flex: 1;

    :deep(.ant-input) {
      font-size: 16px;
      font-weight: bold;
      border: none;
      background: transparent;
      padding: 4px 8px;
      border-bottom: 1px dashed transparent;

      &:focus,
      &:hover {
        border-bottom-color: #d9d9d9;
        background: #fff;
      }
    }
  }

  .delete-section-btn {
    flex-shrink: 0;
  }
}

// 问题列表
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

// 问题项
.question-item {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}

// 问题内容
.question-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;

  .question-number {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    flex-shrink: 0;
  }

  .question-input {
    flex: 1;
    font-weight: bold;
    font-size: 16px;
    :deep(.ant-input) {
      font-size: 14px;
      border: none;
      border-bottom: 1px dashed transparent;
      padding: 4px 8px;

      &:focus,
      &:hover {
        border-bottom-color: #d9d9d9;
      }
    }
  }

  .delete-question-btn {
    flex-shrink: 0;
  }
}

// 评分选项
.score-options {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 24px;
  flex-wrap: wrap;

  :deep(.ant-radio-group) {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  :deep(.ant-radio-wrapper) {
    font-size: 14px;
    margin-right: 0;
  }

  .score-hint {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    font-style: italic;
    margin-left: auto;
  }
}

// 其他意见
.other-comments-section {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 20px;

  .other-comments-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 12px;
  }

  .other-comments-input {
    :deep(.ant-input) {
      font-size: 14px;
    }
  }
}

// 结束语
.end-sentence-section {
  font-size: 17px;
}

:deep(.ant-input),
:deep(.ant-textarea),
:deep(.ant-select-selector) {
  border-color: #d9d9d9;
}
</style>
