<!--案卷详情 督办-->
<template>
  <app-container>
    <div class="detail-title">
      <div class="table-title">
        <div class="title-header"><i class="el-icon-menu"/>案卷详情</div>
        <div class="edit_btns">
          <el-button class="edit_btn" size="small" @click="dialogVisible = true">查看地图</el-button>
        </div>
      </div>
    </div>
    <div class="detail-block">
      <el-form ref="caseform" class="form" size="small" label-width="90px">
        <div class="detail-row">
          <div class="detail-item">
            <el-form-item label="案卷编号">
              <table-cell-read :text="caseDetail.caseid"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="信息来源">
              <table-cell-read :text="caseDetail.sourceName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="举报人/电话">
              <table-cell-read :text="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="上报人员">
              <table-cell-read :text="caseDetail.createUserName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷类别">
              <table-cell-read :text="caseDetail.eorcName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">

          <div class="detail-item">
            <el-form-item label="案卷大类">
              <table-cell-read :text="caseDetail.casetypeName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷小类">
              <table-cell-read :text="caseDetail.casetypeDetailName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷等级">
              <table-cell-read :text="caseDetail.caseLevelName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="所在区县">
              <table-cell-read :text="caseDetail.areaName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="所在乡镇">
              <table-cell-read :text="caseDetail.streetName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">

          <div class="detail-item">
            <el-form-item label="所在社区">
              <table-cell-read :text="caseDetail.communityName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="登记时间">
              <table-cell-read :text="caseDetail.createTime"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="处理时限">
              <table-cell-read :text="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="完成时限">
              <table-cell-read :text="caseDetail.nodeLimittime"/>
            </el-form-item>
          </div>
          <div v-if="showNeedVisit==true" class="detail-item">
            <el-form-item label="是否回访">
              <table-cell-read :text="isNeedVisit"/>
            </el-form-item>
          </div>
        </div>

        <div v-if="caseDetail.shopkeeperName || caseDetail.shopPhone" class="detail-row">
          <div class="detail-item">
            <el-form-item v-if="caseDetail.shopkeeperName" label="商户名称">
              <table-cell-read :text="caseDetail.shopkeeperName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
              <table-cell-read :text="caseDetail.shopPhone"/>
            </el-form-item>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="立案标准">
              <table-cell-read :text="caseDetail.casetypesTimeName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="发生地点">
              <table-cell-read :text="caseDetail.fieldintro"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="案卷描述">
              <table-cell-read :text="caseDetail.description"/>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div v-show="hasFile" class="detail-block">
      <div class="title">案卷附件
        <span v-if="!showFile" style="cursor: pointer" @click="funShowFile()"><i class="el-icon-arrow-right"/></span>
        <span v-if="showFile" style="cursor: pointer" @click="funHideFile()"><i class="el-icon-arrow-down"/></span>
      </div>
      <el-tabs v-show="showFile" type="border-card" class="image-container">
        <el-tab-pane v-if="showVerifyFile" label="案卷附件">
          <case-file
            :img-ids="caseDetail.fileIdVerify"
            :video-ids="caseDetail.videoIdVerify"
            :audio-ids="caseDetail.audioIdVerify"
          />
        </el-tab-pane>
        <el-tab-pane v-if="showProcessFile" label="处理附件">
          <case-file
            :img-ids="caseDetail.fileIdProcess"
            :video-ids="caseDetail.videoIdProcess"
            :audio-ids="caseDetail.audioIdProcess"
          />
        </el-tab-pane>
        <el-tab-pane v-if="showCheckFile" label="核查附件">
          <case-file
            :img-ids="caseDetail.fileIdCheck"
            :video-ids="caseDetail.videoIdCheck"
            :audio-ids="caseDetail.audioIdCheck"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--数据流转记录-->
    <div class="detail-block" style="padding: 20px;">
      <el-table :data="recordList" :max-height="250" 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>
    </div>

    <!-- 案卷处理-->
    <div class="detail-block">
      <!--<div class="title">督办意见:</div>-->
      <div class="case-process">
        <el-form ref="superviseForm" v-model="superviseForm" class="form" label-width="90px" >
          <el-row>
            <el-form-item :label="title+'意见'">
              <el-input v-model="superviseForm.superviseRemarks" type="textarea" maxlength="50" show-word-limit/>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="">
              <el-select v-model="commonLanguage" placeholder="请选择常用处理意见" clearable style="width: 400px;" @change="selectCommonLang">
                <el-option
                  v-for="item in commonLanguageList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-row style="text-align: center;">
      <el-button type="primary" size="medium" icon="el-icon-check" style="width: 200px; margin: 20px" @click="submit"> 提交 </el-button>
    </el-row>

    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="位置详情"
    >

      <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 { getCommonLanguage } from '@/api/coorBusiness/dict'
import { historicalRecords } from '@/api/coorBusiness/process'
import { superviseCaseTask, urgeCaseTask } from '@/api/supervise/supervise'
import LeafletMapRead from '@/components/Map/leafletMapRead'
import CaseFile from '@/components/caseCommon/caseFile'

export default {
  name: 'CaseDetail',
  components: { LeafletMapRead, CaseFile },
  data() {
    return {
      id: '',
      imgurl: process.env.BASE_API + '/static/',
      showNeedVisit: false,
      caseDetail: {},
      operationKey: '', // 案件处理按钮key
      fileIdVerify: [], // 核实照片id
      fileIdProcess: [], // 处理照片id
      fileIdCheck: [], // 核查照片id
      recordList: [], // 流转记录列表
      superviseForm: { // 督办案卷表单
        id: '', // 流程实例ID
        superviseRemarks: '' // 审批意见
      },
      processId: '', // 处理流程id
      commonLanguage: '', // 常用语
      commonLanguageList: [], // 常用语列表
      processRadioList: [], // 案件处理单选按钮
      processCompShow: '', // 案卷处理组件显示
      processCompObj: {}, // 案卷处理组件相关对象
      dialogVisible: false,
      type: 'supervise',
      showFile: 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)
    },
    title() {
      return this.type === 'supervise' ? '督办' : '催办'
    },
    showVerifyFile() {
      return this.caseDetail.fileIdVerify || this.caseDetail.audioIdVerify || this.caseDetail.videoIdVerify
    },
    showProcessFile() {
      return this.caseDetail.fileIdProcess || this.caseDetail.videoIdProcess || this.caseDetail.audioIdProcess
    },
    showCheckFile() {
      return this.caseDetail.fileIdCheck || this.caseDetail.videoIdCheck || this.caseDetail.audioIdCheck
    },
    hasFile() {
      return this.showVerifyFile || this.showProcessFile || this.showCheckFile
    }
  },
  mounted() {
    this.id = this.$route.params.id
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    this.initData()
  },
  methods: {
    async initData() {
      // 查询案件详情接口
      const resDetail = await getCaseDetail(this.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)
      }

      // 查询常用语列表
      const languageRes = await getCommonLanguage()
      this.commonLanguageList = languageRes.data

      // 查询流转记录接口
      this.superviseForm.id = this.id
      this.processId = this.caseDetail.processId
      const resRecord = await historicalRecords(this.processId)
      this.recordList = resRecord.data
      console.log(this.recordList)
    },
    /**
     * 选择常用语，更新审核意见
     */
    selectCommonLang(value) {
      this.superviseForm.superviseRemarks = value
    },
    submit() {
      const superviseForm = this.superviseForm
      this.$confirm('确定提交案件处理吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('doing submit')
        // 点击“确定”后的操作
        if (this.type === 'supervise') {
          this.submitSupervise(superviseForm)
        } else {
          this.submitUrge(superviseForm)
        }
      }).catch(() => {
        // 点击“取消”后的操作
      })
    },
    submitSupervise(form) {
      console.log('submitSupervise')
      superviseCaseTask(form).then(response => {
        if (response.code === 200) {
          this.$message.success('提交成功')
          // this.$emit('submitProcess', this.caseDetail.caseid)
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    submitUrge(form) {
      console.log('submitUrge', urgeForm)
      // todo
      const urgeForm = {
        id: form.id,
        urgeRemarks: form.superviseRemarks
      }
      urgeCaseTask(urgeForm).then(response => {
        if (response.code === 200) {
          this.$message.success('提交成功')
          // this.$emit('submitProcess', this.caseDetail.caseid)
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    funShowFile() {
      this.showFile = true
    },
    funHideFile() {
      this.showFile = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .detail-block {
    border-top: 12px solid #ebebeb;
    padding: 10px;
  }
  .detail-row {
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
  }
  .detail-item {
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    width: 20%;
  }

  $tableTitleHeight:46px;
  .table-title{
    position: relative;
    height: 46px;
    background-color:#fff;
    .title-header{
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
      i{
        margin-left: 10px;
        margin-right: 5px;
      }
      i:focus{
        outline: none;
      }
    }
  }
  .edit_btns{
    float:right;
    .edit_btn{

      margin:7px 10px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .title{
    font-size: 14px;
    font-weight: bold;
    margin: 10px;
    margin-left: 20px;
  }
  .button{
    margin-bottom: 30px;
  }

  .image-container {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .el-image.image {
    width: 150px;
    height: 150px;
    margin-right: 20px;
  }
  /deep/ .gutter{
    background-color: #f3f3f3;
  }
  /deep/ .el-icon-circle-close{
    color: #e2e2e2
  }
</style>