<!--案卷详情 只读-->
<template>
  <app-container>
    <el-row class="table-title">
      <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>案卷详情</div></el-col>
      <el-col :span="12" :offset="6" class="edit_btns">
        <!-- <el-button class="edit_btn" size="small">查看地图</el-button> -->
        <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>

      </el-col>
    </el-row>
    <el-form ref="caseform" class="form" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="案卷编号">
            <table-cell-read :text="caseDetail.caseid"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="信息来源">
            <table-cell-read :text="caseDetail.sourceName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="举报人/电话">
            <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上报人员">
            <table-cell-read :text="caseDetail.createUserName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="案卷类别">
            <table-cell-read :text="caseDetail.eorcName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案卷大类">
            <table-cell-read :text="caseDetail.casetypeName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案卷小类">
            <table-cell-read :text="caseDetail.casetypeDetailName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案卷等级">
            <table-cell-read :text="caseDetail.caseLevelName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所在区县">
            <table-cell-read :text="caseDetail.areaName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所在街道">
            <table-cell-read :text="caseDetail.streetName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属社区">
            <table-cell-read :text="caseDetail.communityName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属网格">
            <table-cell-read :text="caseDetail.gridId"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="登记时间">
            <table-cell-read :text="caseDetail.createTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="处理时限">
            <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="完成时限">
            <table-cell-read :text="caseDetail.nodeLimittime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
            <table-cell-read :text="caseDetail.shopkeeperName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
            <table-cell-read :text="caseDetail.shopPhone"/>
          </el-form-item>
        </el-col>
        <el-col v-if="showNeedVisit==true" :span="6">
          <el-form-item label="是否回访">
            <table-cell-read :text="isNeedVisit"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="立案标准">
          <table-cell-read :text="caseDetail.casetypesTimeName"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="发生地点">
          <table-cell-read :text="caseDetail.fieldintro"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="案卷描述">
          <table-cell-read :text="caseDetail.description"/>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row v-show="showImage">
      <!-- <div class="title">案卷图片:</div> -->
      <!-- 图片展示 -->
      <!-- <div class="image-container">
        <el-image v-for="(img, index) in imgList" :key="img" :src="img" :preview-src-list="imgList.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
        <el-image v-for="img in fileIdVerify" :key="img" :src="img" fit="contain"/>
        <el-image v-for="img in fileIdProcess" :key="img" :src="img" fit="contain"/>
        <el-image v-for="img in fileIdCheck" :key="img" :src="img" fit="contain"/>
      </div> -->
      <el-tabs type="border-card" class="image-container">
        <el-tab-pane v-if="fileIdVerify.length>0" label="案卷图片">
          <el-image v-for="(img, index) in fileIdVerify" :key="img" :src="img" :preview-src-list="fileIdVerify.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
        </el-tab-pane>
        <el-tab-pane v-if="fileIdProcess.length>0" label="处理图片">
          <el-image v-for="(img, index) in fileIdProcess" :key="img" :src="img" :preview-src-list="fileIdProcess.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
        </el-tab-pane>
        <el-tab-pane v-if="fileIdCheck.length>0" label="核查图片">
          <el-image v-for="(img, index) in fileIdCheck" :key="img" :src="img" :preview-src-list="fileIdCheck.slice(index,imgList.length).concat(imgList.slice(0,index))" fit="contain" class="image"/>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <div class="title">数据流转记录:</div>
      <el-table :data="recordList" :header-cell-style="{background:'#f3f3f3'}" class="table" border>
        <el-table-column prop="operationTypeName" label="操作" align="center"/>
        <el-table-column prop="deptName" label="单位" align="center"/>
        <el-table-column prop="userName" label="人员" align="center"/>
        <el-table-column prop="time" label="时间" align="center"/>
        <el-table-column prop="remarks" label="意见" align="center"/>
      </el-table>
    </el-row>

    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="位置详情"
    >
      <!--<arc-gis-map :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>-->
      <leaflet-map-read :longitude="caseDetail.lng" :latitude="caseDetail.lat"/>
    </el-dialog>
  </app-container>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import { getCaseDetail } from '@/api/coorBusiness/case'
import ArcGisMapRead from '@/components/Map/arcgisMapRead'
import LeafletMapRead from '@/components/Map/leafletMapRead'

export default {
  name: 'CaseDetail',
  components: { ArcGisMapRead, LeafletMapRead },
  props: {
    id: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      default: null
    },
    showProcess: {
      type: Boolean,
      default: true
    },
    showNeedVisit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgurl: process.env.BASE_API + '/static/',
      caseDetail: {},
      operationKey: '', // 案件处理按钮key
      fileIdVerify: [], // 核实照片id
      fileIdProcess: [], // 处理照片id
      fileIdCheck: [], // 核查照片id
      recordList: [], // 流转记录列表
      processForm: { // 提交案卷处理表单
        processId: '', // 流程实例ID
        bizId: '', // 业务表单ID(caseId)
        currState: '', // 当前案件状态
        changeState: '', // 案件流转后状态
        remarks: '', // 审批意见
        approvalResult: '' // 审批结果标志
      },
      commonLanguage: '', // 常用语
      commonLanguageList: [], // 常用语列表
      processRadioList: [], // 案件处理单选按钮
      processCompShow: '', // 案卷处理组件显示
      processCompObj: {}, // 案卷处理组件相关对象
      dialogVisible: false
    }
  },
  computed: {
    isNeedVisit: function() {
      return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
    },
    // 是否显示案卷图片
    showImage: function() {
      if (this.fileIdVerify.length === 0 && this.fileIdProcess.length === 0 && this.fileIdCheck.length === 0) {
        return false
      } else {
        return true
      }
    },
    imgList() {
      return this.fileIdVerify.concat(this.fileIdProcess).concat(this.fileIdCheck)
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      // 查询案件详情接口
      const resDetail = await getCaseDetail(this.row.id)
      console.log('detail', resDetail)
      this.caseDetail = resDetail.data[0]

      // 解析图片id
      const imgUrl = process.env.BASE_API + '/static/'
      if (this.caseDetail.fileIdVerify) {
        this.fileIdVerify = this.caseDetail.fileIdVerify.split(',')
        this.fileIdVerify = this.fileIdVerify.map(item => imgUrl + item)
      }
      if (this.caseDetail.fileIdProcess) {
        this.fileIdProcess = this.caseDetail.fileIdProcess.split(',')
        this.fileIdProcess = this.fileIdProcess.map(item => imgUrl + item)
      }
      if (this.caseDetail.fileIdCheck) {
        this.fileIdCheck = this.caseDetail.fileIdCheck.split(',')
        this.fileIdCheck = this.fileIdCheck.map(item => imgUrl + item)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:46px;
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: 46px;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .app-container{
    // padding-top: 50px;
    margin-bottom: 20px;
  }
  .form{
    margin: 20px;
    // margin-left: 20px;
    // margin-right: 20px;
  }
  .table{
    margin: 20px;
    width: 98%;
  }
  .title{
    margin-left: 38px;
    font-size: 14px;
    font-weight: bold;
  }
  .button{
    margin-bottom: 30px;
  }
  .image-container {
    margin-left: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-image.image {
    width: 150px;
    height: 150px;
    margin-right: 20px;
  }
  /deep/ .gutter{
    background-color: #f3f3f3;
  }
  /deep/ .el-icon-circle-close{
    color: #e2e2e2
  }
</style>