<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="详细信息" name="详细信息">
        <el-descriptions border>
          <el-descriptions-item label="活动名称">{{
            taskList.acname
          }}</el-descriptions-item>
          <el-descriptions-item label="任务启动时间">
            {{
              taskList.beginTime ? taskList.beginTime.substr(0, 10) : "无"
            }}</el-descriptions-item
          >
          <el-descriptions-item label="业务备注">{{
            taskList.fromKeyword
          }}</el-descriptions-item>
          <el-descriptions-item label="流程名称">{{
            taskList.proname
          }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <el-tag v-if="taskList.formobj.status == 1" type="success"
              >已审</el-tag
            >
            <el-tag v-else-if="taskList.formobj.status == 2" type="danger"
              >驳回</el-tag
            >
            <!-- <el-tag v-else-if="taskList.formobj.status == 3" type="info">退回</el-tag> -->
            <el-tag v-else-if="taskList.formobj.status == 0">待审核</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核意见">{{
            taskList.comments ? taskList.comments : "无"
          }}</el-descriptions-item>
        </el-descriptions>

        <el-form
          ref="form"
          :model="taskList"
          label-width="80px"
          style="margin-top: 20px"
        >
          <el-form-item label="提问标题" prop="title">
            <el-input v-model="taskList.formobj.question" disabled></el-input>
          </el-form-item>
          <el-form-item label="问题类型" prop="type">
            <el-input v-model="taskList.formobj.mark" disabled></el-input>
          </el-form-item>

          <!-- <el-form-item label="提问用户" prop="expertName">
            <el-input v-model="taskList.formobj.question" disabled></el-input>
          </el-form-item> -->

          <el-form-item label="专家" prop="expertName">
            <el-input v-model="taskList.formobj.expertName" disabled></el-input>
          </el-form-item>

          <!-- <el-form-item label="来源">
            <el-input v-model="taskList.formobj.source" disabled></el-input>
          </el-form-item> -->

          <el-form-item label="提问内容" prop="detail">
            <!-- <el-input
              type="textarea"
              :autosize="true"
              disabled
              v-html="taskList.formobj.detail"
            > -->
            <!-- </el-input> -->
            <div class="question_content" v-html="taskList.formobj.detail"></div>
          </el-form-item>

          <el-form-item label="专家回复" prop="expertAnswer">
            <!-- <el-input
              type="textarea"
              :autosize="true"
              disabled
              v-html="taskList.formobj.expertAnswer"
            >
            </el-input> -->
            <div class="question_content"  v-html="taskList.formobj.expertAnswer"></div>
          </el-form-item>

          <!-- <el-form-item label="封面图" prop="picture" disabled>
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              :auto-upload="false"
              :file-list="fileList"
              :disabled="true"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" />

                放大预览
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item> -->

          <!-- <el-form-item label="新闻内容" prop="content">
            <editor v-model="taskList.formobj.content" />
          </el-form-item> -->
        </el-form>

        <el-dialog
          :visible="BigImgVisible"
          fullscreen
          append-to-body
          @close="BigImgVisible = false"
        >
          <img width="100%" :src="taskList.formobj.picture" alt="" />
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="审批记录">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in taskList.taskHisAction"
            :timestamp="item.createTime"
            placement="top"
            :key="index + 'taskHisAction'"
          >
            <el-card>
              <p>
                {{ item.execId }} {{ item.acname }} 于 {{ item.createTime }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "详细信息",
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      BigImgVisible: false,
    };
  },
  props: ["taskList"],

  methods: {
    handlePictureCardPreview(file) {
      this.taskList.formobj.picture = file.url;
      this.BigImgVisible = true;
    },
  },
};
</script>

<style>
.question_content {
  background-color: #f5f7fa;
  border: 1px solid rgb(223, 228, 237)  ;
  border-radius: 4px;
  border-color: #dfe4ed;
  color: #c0c4cc;
  cursor: not-allowed;
  padding: 0 15px;
}
</style>
