<script lang="ts" setup>
// import { ElMessage } from 'element-plus'
// import { splitStrLast } from '@/utils/util'

const emit = defineEmits<Emits>()
const upload = ref()
const fileList = ref([]) // 文件列表

defineProps({
  isShowReplyDialog: {
    type: Boolean
  }
})

interface Emits {
  (e: 'update:isShowReplyDialog', isShowCheckDialog: boolean): void
}
const handleCancel = () => {
  emit('update:isShowReplyDialog', false)
}
const replyList = ref<any[]>([
  {
    question_tit: '第三章学习问题',
    question_desc: '2ddddxxxxxx',
    question_time: '2021-12-21 23:12:03',
    question_fileList: [
      {
        name: '111',
        url: '111'
      }
    ],
    reply_teacher: 'lisi',
    reply_time: '2021-12-21 23:12:03',
    reply_con: 'jrfhjshfdjdksfhjkshf'
  },
  {
    question_tit: '第三章学习问题',
    question_desc: '2ddddxxxxxx',
    question_time: '2021-12-21 23:12:03',
    reply_teacher: 'lisi',
    reply_time: '2021-12-21 23:12:03',
    reply_con: 'jrfhjshfdjdksfhjkshf'
  },
  {
    question_tit: '第三章学习问题',
    question_desc: '2ddddxxxxxx',
    question_time: '2021-12-21 23:12:03',
    reply_teacher: 'lisi',
    reply_time: '2021-12-21 23:12:03',
    reply_con: 'jrfhjshfdjdksfhjkshf'
  },
  {
    question_tit: '第三章学习问题',
    question_desc: '2ddddxxxxxx',
    question_time: '2021-12-21 23:12:03',
    reply_teacher: 'lisi',
    reply_time: '2021-12-21 23:12:03',
    reply_con: ''
  }
])

const beforeUpload = (file: any) => {
  console.log(file)
  // const suffix = splitStrLast(file.name, '.')
  // if (!['xlsx', 'xls'].includes(suffix)) {
  //   ElMessage.warning('只能上传excel文件')
  //   return false
  // } else {
  //   return true
  // }
}
const fetchFileUpload = (option: any) => {
  console.log(option)
  return new Promise(() => {
    // importSchool({ file: option.file }).then(() => {
    //   ElMessage.success('导入数据成功')
    // })
  })
}

const handleSubmitUpload = () => {
  upload.value.submit()
}
const handleReply = () => {
  console.log('1111', fileList)
}
</script>

<template>
  <el-dialog :model-value="isShowReplyDialog" draggable :before-close="handleCancel" width="70%" title="回复学生问题">
    <el-descriptions>
      <el-descriptions-item label="所属课程">111</el-descriptions-item>
      <el-descriptions-item label="所属部门/学校：">2222</el-descriptions-item>
      <el-descriptions-item label="提问人：">3333</el-descriptions-item>
      <el-descriptions-item label="所属班级："> 444 </el-descriptions-item>
      <el-descriptions-item label="所属专业：">555</el-descriptions-item>
      <el-descriptions-item label="问题类型：">666</el-descriptions-item>
    </el-descriptions>
    <div style="min-height: 30vh; max-height: 60vh; overflow: auto">
      <div class="main_content" v-for="(item, index) in replyList" :key="index">
        <el-divider />
        <div class="content_list">
          <div class="list_left">
            <div class="left_type1 left_type">问</div>
          </div>
          <div class="list_right">
            <div class="right_top">
              <div class="tit">问题标题： {{ item.question_tit }}</div>
              <div class="time">提问时间：{{ item.question_desc }}</div>
            </div>
            <div class="right_center">
              <div class="tit">问题描述： {{ item.question_desc }}</div>
            </div>
            <div class="right_bottom">
              <div class="tit">
                相关附件：
                <div v-for="(it, index) in item.question_fileList || []" :key="index">
                  {{ it.name }} <a :href="it.url" style="color: #aa1941">查看</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_list">
          <div class="list_left">
            <div class="left_type2 left_type">答</div>
          </div>
          <div class="list_right">
            <div class="right_top">
              <div class="tit">回答教师：{{ item.reply_teacher }}</div>
              <div class="time" v-if="item.reply_con !== ''">回答时间：{{ item.reply_time }}</div>
            </div>
            <div class="right_center">
              <div class="tit" v-if="item.reply_con !== ''">回答内容： {{ item.reply_con }}</div>
              <div v-else>
                <el-input></el-input>
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="#"
                  :auto-upload="false"
                  style="margin-top: 10px"
                  :file-list="fileList"
                  :limit="1"
                  :before-upload="beforeUpload"
                  :http-request="fetchFileUpload"
                >
                  <template #trigger>
                    <el-button type="primary" @click="handleSubmitUpload">添加附件</el-button>
                  </template>
                </el-upload>
                <el-button type="primary" class="btn_reply" @click="handleReply">提交回复</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.main_content {
  width: 90%;

  .content_list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
    .list_left {
      width: 10%;
      .left_type {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        box-sizing: border-box;
      }
      .left_type1 {
        background: rgb(90, 156, 232);
      }
      .left_type2 {
        background: rgb(54, 241, 7);
      }
    }
    .list_right {
      width: 90%;
      .right_top {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
