<template>
  <div class="p-2 add-main">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <el-card class="h-[100%]" shadow="never">
        <template #header>
          <span class="text-large font-600 mr-3 text-[18px]"> 反馈提交 </span>
        </template>
        <div class="flex gap-[20px] h-[100%]">
          <el-form ref="formRef" :model="form" :rules="rules" class="flex-1 h-[100%] overflow-auto" label-width="120px">
            <el-form-item label="标题：" prop="backName">
              <el-input v-model="form.backName" :maxlength="20" placeholder="请输入标题" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="反馈内容：" prop="backContent">
              <el-input
                v-model="form.backContent"
                :maxlength="200"
                :rows="5"
                placeholder="请输入反馈内容"
                resize="none"
                show-word-limit
                type="textarea"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="text-right flex-1">
                <el-button @click="clear">清空</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
              </div>
            </el-form-item>
          </el-form>
          <div class="flex-1 h-[100%]">
            <el-card class="h-[100%] log-main" shadow="never">
              <template #header>
                <span class="text-large font-600 mr-3 lh-[24px]"> 反馈历史记录 </span>
              </template>
              <div v-for="(item, index) in logList">
                <el-divider v-if="index > 0" />
                <div>
                  <div class="flex justify-between center lh-[20px]">
                    <span class="text-[16px] font-600"> {{ item.backName }} </span>
                    <span class="text-[12px] color-[#999]"> {{ item.createTime }} </span>
                  </div>
                  <p class="text-[14px] content" :title="item.backContent">{{ item.backContent }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-card>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { getLogs, setFeedback } from '@/api/study/studyFeedback';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const formRef = ref();
const form = reactive({
  backName: '', //标题
  backContent: '' //反馈内容
});
const rules = {
  backName: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  backContent: [{ required: true, message: '请输入反馈内容', trigger: 'blur' }]
};
const clear = () => {
  formRef.value & formRef.value.resetFields()
}
const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (!valid) return;
    let res = await setFeedback(form);
    if (res.code === 200) {
      ElNotification({
        title: '提示',
        message: '新增成功',
        type: 'success'
      });
      clear();
      getLogList()
      return;
    }
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
  });
};
const logList = ref([]);
const getLogList = async () => {
  const res = await getLogs();
  logList.value = res.data || []
};
onMounted(() => {
  getLogList();
});
</script>

<style lang="scss" scoped>
.add-main {
  height: calc(100vh - 84px);
}

:deep(.el-card__body) {
  height: calc(100% - 46px);
}

.log-main {
  :deep(.el-card__body) {
    overflow: auto;
  }
}

.content {
  /*超出三行省略*/
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}
</style>
