<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.status == 1" type="success">同意</el-tag>
            <el-tag v-else-if="taskList.status == 2" type="danger">驳回</el-tag>
            <el-tag v-else-if="taskList.status == 3" type="info">退回</el-tag>
            <el-tag v-else-if="taskList.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.title" 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="type">
            <el-select v-model="taskList.formobj.type" disabled>
              <el-option
                v-for="item in typeList"
                :key="item.value + 'typeList'"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </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>
import { downloadpic } from "@/api/portal/task/task";
export default {
  data() {
    return {
      activeName: "详细信息",
           // 根路径
           baseURL: process.env.VUE_APP_BASE_API,
      typeList: [
        { label: "要闻咨询", value: "1" },
        { label: "政策法规", value: "2" },
        { label: "通知公告", value: "3" },
        { label: "政策解读", value: "4" },
        { label: "投资导航", value: "5" },
      ],
      fileList: [],
      BigImgVisible: false,
    };
  },
  props: ["taskList"],
  created() {
    if (this.taskList.formobj.picture) {
      this.fileList.push({
        url: this.baseURL + this.taskList.formobj.picture,
        name: "xxx",
      });
      // downloadpic(this.taskList.formobj.picture).then((res) => {

      //   console.log('下载转换后:',this.fileList[0])
      // });
    }
    //this.taskList.form.content = this.taskList.form.content.replace(new RegExp('/profile/upload/', 'g'), this.baseUrl + '/profile/upload/');
  },
  watch: {
    taskList(curVal, oldVal) {


      if (curVal) {
        curVal.formobj.content = curVal.formobj.content.replace(new RegExp('/profile/upload/', 'g'), this.baseUrl + '/profile/upload/');
        this.fileList.pop();
        if(curVal.formobj.picture){
          this.fileList.push({
            url: this.baseUrl + curVal.formobj.picture,
            name: "xxx",
          });
        }

        // downloadpic(curVal.formobj.picture).then((res) => {
        //   this.fileList.push({
        //     url: window.URL.createObjectURL(res),
        //     name: "xxx",
        //   });
        // });
      }
    },
  },

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

<style>
</style>
