<template>
  <div class="p-2 content">
    <div class="title">点评设置</div>
    <div class="btn-content">
      <!-- <el-button type="info" style="width: 100px;height: 40px;">取消</el-button> -->
      <el-button v-hasPermi="['system:commentSetting:edit']" type="primary" style="width: 100px;height: 40px;" @click="updateCommentSetting">保存</el-button>
    </div>
    <el-form ref="tenantFormRef" :model="form" :rules="rules" label-width="180px" style="width: 70%;">
      <el-form-item label="课件是否需要评分：" prop="caseCommentScore">
        <el-radio-group v-model="form.caseCommentScore">
          <el-radio v-for="dict in sys_tenant_review_comment" :key="dict.value" :label="dict.value">{{
            dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="课件点评提示信息：" prop="commentTips">
        <el-input :rows="10" type="textarea" v-model="form.commentTips" placeholder="请输入课件点评提示信息，将在点评弹窗上展示" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="commentManage" lang="ts">
import { listCommentSettingInfo, updateCommentTips } from '@/api/system/commentSetting';
import { commentSettingForm } from '@/api/system/commentSetting/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_tenant_review_comment } = toRefs<any>(proxy?.useDict('sys_tenant_review_comment'));

const initFormData: commentSettingForm = {
  id: undefined,
  caseCommentScore: '0',
  commentTips: '',
}

const data = reactive<PageData<commentSettingForm, PageQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    commentTips: [{ required: true, message: "提示不能为空", trigger: "blur" }],
  }
});

const { queryParams, form, rules } = toRefs(data);

const getData = async () => {
  const res = await listCommentSettingInfo()
  form.value = res.rows[0];
  form.value.commentTips  = form.value.commentTips || ''
}

const updateCommentSetting = async () => {
   await updateCommentTips(form.value)
   proxy?.$modal.msgSuccess("操作成功");
}

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

<style lang="scss" scoped>
.content {
  padding-left: 80px;
  padding-right: 50px;

  .title {
    font-size: 25px;
    font-weight: 600;
    margin-top: 24px;
  }

  .btn-content{
    width: 100%;
    text-align: end;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
