<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.title}}</span>
          </div>

          <div class="div_info_item">
            <span class="span_item_title">事项类别：</span>
            <span v-if="info.workTypeName">{{info.workTypeName}}</span>
            <span v-else>无</span>
          </div>

          <div class="div_info_item">
            <span class="span_item_title">有无异常：</span>

            <span v-if="info.isNormalShow">{{info.isNormalShow}}</span>
            <span v-else>--</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">网格员：</span>
            <span v-if="info.staffName">{{info.staffName}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">所属网格：</span>
            <span v-if="info.gridName">{{info.gridName}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">发生地点：</span>
            <span v-if="info.happenAddress">{{info.happenAddress}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">发生日期：</span>
            <span v-if="info.happenTime">{{info.happenTime}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">提交日期：</span>
            <span v-if="info.createdTime">{{info.createdTime}}</span>
            <span v-else>无</span>
          </div>
          <div class="div_info_item">
            <span class="span_item_title">项目内容：</span>
            <span v-if="info.workContent">{{info.workContent}}</span>
            <span v-else>无</span>
          </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: {
        title: "",//事项名称	
        workTypeName: "",//事项类型码	
        isNormalShow: "",//有无异常
        staffName: "",//人员姓名	
        happenAddress: "",//发生地点	
        happenTime: "",//发生时间  返回返回格式化字符串,yyyy-MM-dd 	
        gridName: "",//网格名	
        createdTime: "",//提交日期  返回返回格式化字符串,yyyy-MM-dd HH:mm:ss	
        workContent: "",//工作内容	


      },
      previewPath: ''
    }
  },

  mounted () {

  },

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

    },
    async initData (row) {

      this.info = JSON.parse(JSON.stringify(row))


    },



    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>

