<template>
  <div>
    <div v-show="showDetail">
      <el-card shadow="never"
               class="aui-card--fill">
        <div class="mod-demo__demo}">

          <div class="div_info_item">
            <span class="span_item_title">项目标题：</span>
            <span>{{info.projectTitle}}</span>
          </div>

          <div class="div_info_item">
            <span class="span_item_title">项目内容：</span>
            <span v-if="info.projectContent">{{info.projectContent}}</span>
            <span v-else>无</span>
          </div>

          <div class="div_info_item">
            <span class="span_item_title">上报时间：</span>

            <span v-if="info.reportTime">{{info.reportTime}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">上报人：</span>
            <span v-if="info.reportUserName">{{info.reportUserName}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">电话：</span>
            <span v-if="info.mobile">{{info.mobile}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">地点：</span>
            <span v-if="info.reportAddress">{{info.reportAddress}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">所属分类：</span>
            <span v-if="info.categoryName">{{info.categoryName}}</span>
            <span v-else>无</span>
          </div>

        </div>

        <div class="div_process">
          <div class="m-list"
               v-show="info.processList.length>0">
            <div class="title">处理进展</div>
            <div class="list">
              <div :class="['item',{'z-on': index===0}]"
                   v-for="(item,index) in info.processList"
                   :key="index">

                <div class="name">【{{ item.operationShow}}】</div>
                <div class="date">
                  <span>{{ item.reponseTime }}</span>

                </div>
                <div class="detail">
                  <span class="detail-field">处理部门：</span>
                  <span class="detail-value">{{ item. handleDeptName }}</span>
                </div>

                <div class="detail">
                  <span class="detail-field">处理意见：</span>
                  <span class="detail-value">
                    <span>{{ item.suggestion}}</span>
                  </span>
                </div>
                <div class="detail">
                  <el-upload class="upload-demo"
                             :disabled="true"
                             action=""
                             :on-preview="handleFileDownload"
                             :limit="50"
                             :file-list="item.attachments">

                  </el-upload>
                  <!-- <attachment-list list="{{item.attachments}}" /> -->
                </div>
              </div>
            </div>
          </div>

        </div>

      </el-card>
    </div>
    <div v-show="!showDetail">
      <el-button class="btn_close"
                 @click="closePic()"
                 type="primary">返回</el-button>
      <img :src="previewPath"
           alt=""
           style="width:100%;height:100%" />
      <!-- <vedio :src="previewPath"></vedio> -->

    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

let loading // 加载动画

export default {
  data () {
    return {
      projectId: "",//项目id
      formData: {},
      showDetail: true,

      //查询条件标题宽度
      labelWidth: '100px',

      info: {
        projectTitle: "",//标题
        projectId: "",//项目id
        projectContent: "",//议题内容，其实就是项目内容
        imgList: "",//图片列表
        reportTime: "",//上报时间，对应的是立项时间;格式：yyyy-MM-dd HH:mm
        categoryName: "",//所属类别名称
        reportUserId: "",//上报人Id
        reportUserRoleSet: "",//上报人角色列表，grid_member:网格员；
        reportUserName: "",//上报人名称；山东路-尹女士
        mobile: "",//上报人电话
        reportAddress: "",//上报位置
        processList: [],//
      },
      previewPath: ''
    }
  },

  mounted () {

  },

  methods: {
    setShowDetail () {
      if (!this.showDetail) {
        this.showDetail = true
      }

    },
    async initData (projectId) {
      this.startLoading()
      this.projectId = projectId
      await this.loadDetail()//获取项目详情
      this.endLoading()
    },

    async loadDetail () {

      const url = '/data/report/screen/project/projectdetailv2'

      const params = {
        projectId: this.projectId
      }
      // const params = {
      //   projectId: "440dfb6f22d9860fb1c2d1fc044a901f"
      // }
      const { data, code, msg } = await requestPost(url, params)


      if (msg === "success" && code === 0 && data.length > 0) {
        this.info = data[0]
        // info = copyKeyHave(info, data[0]);


        this.info.processList.forEach(element => {

          //关闭：close; 回应 response，结案closed_case，退回return，部门流转transfer，创建项目created
          if (element.operation === 'close') {
            element.operationShow = '关闭'
          } else if (element.operation === 'response') {
            element.operationShow = '回应'
          } else if (element.operation === 'closed_case') {
            element.operationShow = '结案'
          } else if (element.operation === 'return') {
            element.operationShow = '退回'
          } else if (element.operation === 'transfer') {
            element.operationShow = '部门流转'
          } else if (element.operation === 'created') {
            element.operationShow = '创建项目'
          }
          element.attachments.forEach(attachItem => {
            attachItem.name = attachItem.fileName
            attachItem.url = attachItem.attachmentUrl
            attachItem.type = attachItem.attachmentType
            attachItem.format = attachItem.attachmentFormat
          });
        });

      }

    },

    //下载
    handleFileDownload (file) {

      // if (file.format === 'jpg' || file.format === 'png' || file.format === 'gif') {
      //   this.showDetail = false
      //   this.previewPath = file.url
      // } else {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.target = "_blank"//打开新的标签页

      a.href = file.url;
      a.dispatchEvent(event);
      // }


    },
    closePic () {
      this.showDetail = true
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 100
    },

    ...mapGetters(['clientHeight', 'env'])
  },
  components: {},
  activated () {
    this.$nextTick(() => {
      this.$refs.ref_table.doLayout() // 解决表格错位
    })
  },
}
</script>
<style lang="scss" scoped>
.div_info_item {
  line-height: 25px;
  padding: 10px;
  font-size: 15px;
  display: flex;
  .span_item_title {
    flex: 0 0 100px;

    text-align: right;
    display: inline-block;
  }
}
.div_process {
  padding: 0 10px 10px 10px;
}
.m-list {
  position: relative;
  margin-top: 10px;
  padding-bottom: 15px;
  background-color: #ffffff;

  .title {
    line-height: 40px;
    border-bottom: 1px solid #e7eeee;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .more-btn {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    line-height: 25px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(12, 74, 157, 1);
  }

  .list {
    position: relative;
    box-sizing: border-box;
    margin-top: 15px;
    margin-left: 25px;
    padding: 0 0 0 15px;
    border-left: 1px solid #e7eeee;

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      display: block;
      top: -1px;
      left: -1px;
      width: 2px;
      height: 10px;
      background-color: #ffffff;
    }

    .item {
      position: relative;
      z-index: 2;
      margin-bottom: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #e7eeee;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 9px;
        left: -20px;
        width: 10px;
        height: 10px;
        background: #999;
        border-radius: 100%;
      }

      &.z-on {
        &::before {
          background: rgba(230, 0, 0, 1);
        }
      }

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 47px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(153, 153, 153, 1);
        border-radius: 10px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }

      .name {
        position: relative;
        margin-bottom: 5px;
        margin-left: -7px;
        line-height: 25px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

      .date {
        line-height: 20px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }

      .detail {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 25px;

        .detail-field {
          width: 22%;
          text-align: justify;
          text-align-last: justify;
          color: rgba(153, 153, 153, 1);
        }
        .detail-value {
          width: 78%;
          color: #333333;
          .detail-link {
            display: inline;
            color: #0c4a9d;
          }
        }
      }
    }
  }
}
.btn_close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>

