<template>
  <view class="evaluate-container">
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="24">
      <template #body>
        <h4 style="font-weight: bolder; color: #000000; font-size: 28rpx">
          尊敬的各位学员:
        </h4>
        <text class="detail">
          感谢您参加本次培训班!请各位学员对此次授课老师及教学安排进行满意度评价，同时我们也欢迎您提出意见和建议，您的感受及观点对我们非常重要谢谢!
        </text>
      </template>
    </u-card>
    <view class="courseEvaluation">
      <view class="half-circle"></view>
      课程评价
    </view>
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="24">
      <template #body>
        <view>
          <view class="rateItem">
            <h4>课程内容</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FContent"
              size="44"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
            <view class="rate">
              {{ evaluateStr(evaluateData.parmeters.Model.FContent) }}
            </view>
          </view>
          <view class="rateItem">
            <h4>授课讲师</h4>
            <u-rate
              :count="5"
              v-model="evaluateData.parmeters.Model.FClassService"
              size="44"
              active-color="#F7BA2A"
              :disabled="disabled"
            />
            <view class="rate">
              {{ evaluateStr(evaluateData.parmeters.Model.FClassService) }}
            </view>
          </view>
        </view>
      </template>
    </u-card>
    <view class="evaluate-item">
      <view class="title">您的培训收获与意见建议:</view>
      <u-card
        :show-head="false"
        :show-foot="false"
        margin="0"
        border-radius="24"
      >
        <template #body>
          <u-input
            v-model="evaluateData.parmeters.Model.FOpinion"
            type="textarea"
            placeholder-style="font-size: 24rpx;font-weight: 400;color: #BCBCBC;"
            maxlength="1400"
            placeholder="快来说说您的想法~"
            :disabled="disabled"
          />
        </template>
      </u-card>
    </view>

    <view class="submit" v-show="!disabled">
      <u-button @tap="submit">确定提交</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { remarkOn, remarkDetail } from "@/api/class";
import { useGlobalStore } from "@/store/useStore";
import { toast, zconfirm, evaluateStr } from "@/utils/util";

const globalStore = useGlobalStore();
const disabled = ref(false);
const evaluateData = reactive({
  parmeters: {
    NeedReturnFields: ["FID"],
    IsDeleteEntry: "false",
    Model: {
      FID: 0,
      FEvaluateType: "KCPJ", //评价类型
      FClass: {
        FNUMBER: "", //班级编码
      },
      FStudentId: {
        FNUMBER: globalStore.infoData.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;
  evaluateData.parmeters.Model.FCourse.FNUMBER = options.courseNumber;
  evaluateData.parmeters.Model.FTrainingPro.FNUMBER = options.ItemNumber;
  if (options.iEvaluate != "false") {
    let data = {
      classId: "",
      courseId: options.courseId,
      studentId: globalStore.infoData.FSTUDENTID,
      pageIndex: 1,
      pageSize: 10,
    };
    const { data: res } = 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;
    }
  }
});

const submit = () => {
  zconfirm("确定提交评价？", async (result: boolean) => {
    if (result) {
      const { data: res } = await remarkOn(evaluateData);
      if (res.code == 200) {
        uni.navigateBack();
        toast("评价成功");
      }
    }
  });
};
</script>

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

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

    text {
      display: block;
    }

    .detail {
      text-indent: 2em;
      display: block;
      font-size: 28rpx;
      margin-top: 20rpx;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.8);
    }

    .rateItem {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      text-align: justify;
      text-align-last: justify;
      /*兼容ie*/
      text-justify: distribute-all-lines;

      h4 {
        width: 140rpx;
        margin-right: 20rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(34, 34, 34, 0.9);
      }
    }
  }
  .evaluate-item {
    margin-top: 40rpx;
    .title {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 24rpx;
    }
    :deep(.u-card__body) {
      padding: 20rpx 24rpx !important;
    }
    :deep(.uni-textarea-placeholder, .u-input__textarea) {
      background-color: #ffffff !important;
    }
    :deep(.uni-textarea-compute) {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
    }
    :deep(.uni-textarea-textarea) {
      overflow-y: auto !important;
    }
  }
}

.submit {
  margin: 64rpx 184rpx 0;
  .u-btn {
    width: 320rpx;
    height: 96rpx;
    background: #05a8ff;
    border-radius: 12rpx;
    color: #ffffff;
  }
}
</style>
