<template>
  <!-- <headers title="培训评价" /> -->
  <view class="evaluate-container">
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
      <template #body>
        <h4>尊敬的各位学员:</h4>
        <text class="detail">
          感谢您参加本次培训班!请各位学员对此次授课老师及教学安排进行满意度评价，同时我们也欢迎您提出意见和建议，您的感受及观点对我们非常重要谢谢!
        </text>
      </template>
    </u-card>
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
      <template #body>
        <view>
          <view class="rateItem">
            <h4>课程内容</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FContent"
              size="42"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
          </view>
          <view class="rateItem">
            <h4>授课讲师</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FLecturer"
              size="42"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
          </view>
          <view class="rateItem">
            <h4>后期服务</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FPostService"
              size="42"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
          </view>
          <view class="rateItem">
            <h4>班主任服务</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FClassService"
              size="42"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
          </view>
        </view>
      </template>
    </u-card>
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
      <template #body>
        <text>
          哪位教师、哪堂课给您留下了深刻印象? 能否告诉我们具体“亮点”?
        </text>
        <view class="evaluate-textarea">
          <u-input
            v-model="evaluateData.parmeters.Model.FHighlights"
            type="textarea"
            placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;"
            height="200"
            maxlength="1400"
            :auto-height="false"
            placeholder="快来说说您的想法~"
            :disabled="disabled"
          />
        </view>
        <text style="margin-top: 40rpx">
          您认为还需要补充哪方面的专题课程?
        </text>
        <view class="evaluate-textarea">
          <u-input
            v-model="evaluateData.parmeters.Model.FSupplement"
            type="textarea"
            placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;"
            height="160"
            maxlength="1400"
            :auto-height="false"
            placeholder="快来说说您的想法~"
            :disabled="disabled"
          />
        </view>
        <text style="margin-top: 40rpx"> 您的培训收获与意见建议: </text>
        <view class="evaluate-textarea last">
          <u-input
            v-model="evaluateData.parmeters.Model.FOpinion"
            type="textarea"
            placeholder-style="background-color: #f5f5f5;font-size: 24rpx;overflow-y: auto;"
            height="160"
            maxlength="1400"
            :auto-height="false"
            placeholder="快来说说您的想法~"
            :disabled="disabled"
          />
        </view>
      </template>
    </u-card>
  </view>
</template>

<script setup lang="ts">
// import headers from "@/components/header/index.vue"
import { remarkDetail } from "@/api/class";

const disabled = ref(false);
const evaluateData = reactive({
  parmeters: {
    IsDeleteEntry: "false",
    Model: {
      FID: 0,
      FEvaluateType: "XMPJ", //评价类型
      FClass: {
        FNUMBER: "", //班级编码
      },
      FStudentId: {
        FNUMBER: "", //学生编码
      },
      FTrainingPro: {
        FNUMBER: "", //培训项目编码
      },
      FCourse: {
        FNUMBER: "", //课程编码
      },
      FHighlights: "", //亮点
      FSupplement: "", //补充
      FOpinion: "", //意见建议
      FContent: 0, //课程内容
      FLecturer: 0, //授课讲师
      FPostService: 0, //后期服务
      FClassService: 0, //班主任服务
    },
  },
});

onLoad(async (options: any) => {
  evaluateData.parmeters.Model.FClass.FNUMBER = options.classNumber;
  let data = {
    classId: options.classId,
    studentId: options.studentId,
    courseId: "",
    pageIndex: 1,
    pageSize: 10,
  };
  const { data: res }: any = await remarkDetail(data);
  if (res.code == 200) {
    evaluateData.parmeters.Model.FClassService = res.data[0].FCLASSSERVICE;
    evaluateData.parmeters.Model.FContent = res.data[0].FCONTENT;
    evaluateData.parmeters.Model.FLecturer = res.data[0].LECTURER;
    evaluateData.parmeters.Model.FPostService = res.data[0].FPOSTSERVICE;
    evaluateData.parmeters.Model.FHighlights = res.data[0].FHIGHLIGHTS;
    evaluateData.parmeters.Model.FSupplement = res.data[0].FSUPPLEMENT;
    evaluateData.parmeters.Model.FOpinion = res.data[0].FOPINION;
    disabled.value = true;
  }
});
</script>

<style lang="scss" scoped>
.evaluate-container {
  padding: 30rpx;

  .u-card {
    margin-bottom: 10rpx !important;

    text {
      display: block;
    }

    .detail {
      text-indent: 2em;
      display: block;
      font-size: 28rpx;
      margin-top: 10rpx;
    }

    .rateItem {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      h4 {
        width: 140rpx;
        margin-right: 20rpx;
        text-align: justify;
        text-align-last: justify;
        /*兼容ie*/
        text-justify: distribute-all-lines;
      }
    }

    .evaluate-textarea {
      background-color: #f5f5f5;
      padding: 0 10rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
    }

    .last {
      margin-bottom: 0;
    }
  }
}

.submit {
  margin: 40rpx 40rpx 0;
}
</style>
