<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="案卷编号">
              <el-input :value="caseDetail.caseid"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="信息来源">
              <el-input :value="caseDetail.sourceName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="举报人/电话">
              <el-input :value="caseDetail.reporterName+'/'+caseDetail.reporterPhone"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="上报人员">
              <el-input :value="caseDetail.createUserName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷类别">
              <el-input :value="caseDetail.eorcName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <el-form-item label="案卷大类">
              <el-input :value="caseDetail.casetypeName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷小类">
              <el-input :value="caseDetail.casetypeDetailName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="案卷等级">
              <el-input :value="caseDetail.caseLevelName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="所在区县">
              <el-input :value="caseDetail.areaName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="所在乡镇">
              <el-input :value="caseDetail.streetName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <el-form-item label="所在社区">
              <el-input :value="caseDetail.communityName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="登记时间">
              <el-input :value="caseDetail.createTime"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="处理时限">
              <el-input :value="caseDetail.bzhours+'小时'+caseDetail.bzminis+'分钟'"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="完成时限">
              <el-input :value="caseDetail.nodeLimittime"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item label="是否回访">
              <el-input :value="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="商户名称">
              <el-input :value="caseDetail.shopkeeperName"/>
            </el-form-item>
          </div>
          <div class="detail-item">
            <el-form-item v-if="caseDetail.shopPhone" label="商户电话">
              <el-input :value="caseDetail.shopPhone"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="立案标准">
              <el-input :value="caseDetail.casetypesTimeName"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="发生地点">
              <el-input :value="caseDetail.fieldintro"/>
            </el-form-item>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="案卷描述">
              <el-input :value="caseDetail.description"/>
            </el-form-item>
          </div>
        </div>
        <div v-if="caseDetail.isSupervise" class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="督办意见">
              <el-input :value="caseDetail.superviseRemarks"/>
            </el-form-item>
          </div>
        </div>
        <div v-if="caseDetail.isUrge" class="detail-row">
          <div class="detail-item" style="width: 99%;display: block;">
            <el-form-item label="催办意见">
              <el-input :value="caseDetail.urgeRemarks"/>
            </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 v-if="showProcess" class="detail-block">
      <div class="title">案卷处理:</div>
      <!-- 案卷处理 有权限控制-->
      <div class="case-process">
        <el-form ref="processForm" :model="processForm" :rules="rules" class="form" size="small" label-width="90px" >
          <el-row>
            <el-form-item v-if="processRadioList.length>0" label="操作类型 " prop="operationKey">
              <el-radio-group v-model="processForm.operationKey" @change="selectNextOperation">
                <el-radio v-for="radio in processRadioList" :key="radio.id" :label="radio.operationKey">{{ radio.nextOperation }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="processCompShow==='selectUser'" label="选择人员" prop="person">
              <el-select v-model="processCompObj.taskUserId" filterable placeholder="请选择" style="width: 400px;">
                <el-option v-for="item in processCompObj.userList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="processCompShow==='selectDept'" label="选择部门" prop="dept">
              <el-select v-model="processCompObj.dispatchDeptId" filterable placeholder="请选择" style="width: 400px;">
                <el-option v-for="item in processCompObj.deptList" :key="item.id" :label="item.simplename" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-row>
          <div v-if="processCompShow==='selectCaseTime'">
            <div v-loading="registerLoading" element-loading-background="#ffffff69">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="案卷等级" prop="caseLevel">
                    <el-select
                      v-model="processCompObj.caseLevel"
                      :loading="caseLevelLoading"
                      placeholder="选择立案等级"
                      @change="updateHoursAndMins">
                      <el-option
                        v-for="item in processCompObj.caseLevelList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="案卷类别" prop="eorc">
                    <el-select
                      v-model="processCompObj.eorc"
                      :loading="caseEorcLoading"
                      placeholder="选择案卷类别"
                      @change="selectEorc">
                      <el-option
                        v-for="item in processCompObj.eorcList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="案卷大类" prop="caseType">
                    <el-select
                      v-model="processCompObj.caseType"
                      :loading="caseTypeLoading"
                      filterable
                      placeholder="请选择案卷大类"
                      @change="selectCaseType"
                    >
                      <el-option
                        v-for="item in processCompObj.caseTypeList"
                        :key="item.id"
                        :label="item.typeName"
                        :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="案卷小类" prop="caseTypeDetail">
                    <el-select
                      v-model="processCompObj.caseTypeDetail"
                      :loading="caseTypeDetailLoading"
                      filterable
                      placeholder="请选择案卷小类"
                      @change="selectCaseTypeDetail"
                    >
                      <el-option
                        v-for="item in processCompObj.caseTypeDetailList"
                        :key="item.id"
                        :label="item.typeDetailName"
                        :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="立案标准" prop="caseTypeTimes">
                  <el-select
                    v-model="processCompObj.caseTypeTime"
                    :loading="caseTypeTimeLoading"
                    filterable
                    placeholder="请选择立案标准"
                    style="width: 72%;"
                    @change="updateHoursAndMins">
                    <el-option v-for="item in processCompObj.caseTypeTimeList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="完成时限">
                    <el-input-number v-model="processCompObj.hours" :min="0" :max="9999" step-strictly style="margin-right: 5px" /> 小时
                    <el-input-number v-model="processCompObj.minutes" :min="0" :max="59" step-strictly	style="margin-left: 20px; margin-right: 5px" />分钟
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="处置部门" prop="dept">
                    <el-select v-model="processCompObj.dispatchDeptId" filterable placeholder="请选择" style="width: 400px;">
                      <el-option v-for="item in processCompObj.deptList" :key="item.id" :label="item.simplename" :value="item.id"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-row>
            <el-form-item v-if="processCompShow==='selectFilingType'" label="归档类型">
              <el-select v-model="processCompObj.filingType" filterable placeholder="请选择归档类型" style="width: 400px;">
                <el-option v-for="item in processCompObj.filingTypeList" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="processCompShow==='inputDelayTime'" label="延期时间">
              <el-input-number v-model="processCompObj.hours" :min="0" :max="9999" style="margin-right: 5px" />小时
              <el-input-number v-model="processCompObj.minutes" :min="0" :max="59" style="margin-left: 20px; margin-right: 5px" />分钟
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="处置意见" prop="remarks">
              <el-input v-model="processForm.remarks" 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>
    <div class="detail-block">

      <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>
    <el-row v-if="showProcess" 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="位置详情"
    >
      <!--<tian-di-tu-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>-->
      <arc-gis-map-read :longitude="Number(caseDetail.lng)" :latitude="Number(caseDetail.lat)"/>

    </el-dialog>
  </app-container>
</template>

<script>
import _ from 'lodash'
import 'element-ui/lib/theme-chalk/index.css'
import { getCaseDetail, getUserList, getDeptList, getCaseTypeList, getCaseTypeDetailList, getCaseTypeTimes } from '@/api/coorBusiness/case'
import { getCommonLanguage, getFilingTypeList, getCaseLevelList, getEorc } from '@/api/coorBusiness/dict'
import { historicalRecords, nextNodes, completeCaseTask } from '@/api/coorBusiness/process'
import TianDiTuMapRead from '@/components/Map/tiandiMapRead'
import ArcGisMapRead from '@/components/Map/arcgisMapRead'
import { radioMap } from './radioMap'
import CaseFile from '@/components/caseCommon/caseFile'

export default {
  name: 'CaseDetail',
  components: { TianDiTuMapRead, ArcGisMapRead, CaseFile },
  data() {
    const validateEmptyString = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('处置意见不能为空'))
      } else {
        callback()
      }
    }
    return {
      id: '',
      showProcess: true,
      showNeedVisit: false,
      caseDetail: {},
      fileIdVerify: [], // 核实照片id
      fileIdProcess: [], // 处理照片id
      fileIdCheck: [], // 核查照片id
      recordList: [], // 流转记录列表
      processForm: { // 提交案卷处理表单
        processId: '', // 流程实例ID
        bizId: '', // 业务表单ID(caseId)
        currState: '', // 当前案件状态
        changeState: '', // 案件流转后状态
        remarks: '', // 审批意见
        approvalResult: '', // 审批结果标志
        operationKey: '' //  案件处理按钮key，放form里以便绑定prop
      },
      commonLanguage: '', // 常用语
      commonLanguageList: [], // 常用语列表
      processRadioList: [], // 案件处理单选按钮
      processCompShow: '', // 案卷处理组件显示：selectUser 显示人员选择框；selectDept 显示部门选择框；selectCaseTime 显示立案组件；selectFilingType 显示归档类型下拉框；inputDelayTime 显示时间输入框
      processCompObj: {}, // 案卷处理组件相关对象
      dialogVisible: false,
      caseLevelLoading: false,
      caseEorcLoading: false,
      caseTypeLoading: false,
      caseTypeDetailLoading: false,
      caseTypeTimeLoading: false,
      registerLoading: false,
      rules: {
        operationKey: [{ required: true, message: '操作类型不能为空', trigger: ['blur', 'change'] }],
        // remarks: [{ required: true, message: '处置意见不能为空', trigger: ['blur', 'change'] }]
        remarks: [{ required: true, validator: validateEmptyString, trigger: ['blur', 'change'] }]
      },
      showFile: false
    }
  },
  computed: {
    isNeedVisit: function() {
      return this.caseDetail.isNeedRevisit === 1 ? '需要回访' : '不需要回访'
    },
    imgList() {
      return this.fileIdVerify.concat(this.fileIdProcess).concat(this.fileIdCheck)
    },
    // 是否显示案卷图片
    showImage: function() {
      if (this.fileIdVerify.length === 0 && this.fileIdProcess.length === 0 && this.fileIdCheck.length === 0) {
        return false
      } else {
        return true
      }
    },
    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
    },
    operationKey: function() { // 案件处理按钮key
      return this.processForm.operationKey
    }
  },
  watch: {
    'processCompObj.eorc': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectEorc(newValue)
        }
      }
    },
    'processCompObj.caseType': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectCaseType(newValue)
        }
      }
    },
    'processCompObj.caseTypeDetail': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectCaseTypeDetail(newValue)
        }
      }
    },
    'processCompObj.caseTypeTime': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.updateHoursAndMins()
        }
      }
    }
  },
  mounted() {
    console.log('mounted')
    this.id = this.$route.query.id
    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
    this.resetData()
    this.initData()
  },
  activated() {
    console.log('activated')
    this.id = this.$route.query.id
    this.showProcess = (this.$route.query.showProcess || this.$route.query.showProcess === false) ? this.$route.query.showProcess : true
    this.showNeedVisit = this.$route.query.showNeedVisit ? this.$route.query.showNeedVisit : false
    this.resetData()
    this.initData()
  },
  methods: {
    async initData() {
      // 查询案件详情接口
      const resDetail = await getCaseDetail(this.id)
      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.processForm.processId = this.caseDetail.processId
      historicalRecords(this.processForm.processId).then(res => {
        this.recordList = res.data
      })

      if (this.showProcess) {
        this.initProcess()
      }
    },
    /**
     * 每次进入页面时,清空案件处理相关数据
     */
    resetData() {
      // this.operationKey = ''
      this.processForm = {
        processId: '',
        bizId: '',
        currState: '',
        changeState: '',
        remarks: '',
        approvalResult: '',
        operationKey: ''
      }
      this.commonLanguage = ''
      this.processCompShow = ''
      this.processCompObj = {}

      this.$refs['processForm'].resetFields()
    },
    /**
     * 初始化案件处理单选键组
     */
    async initProcess() {
      const res = await nextNodes(this.caseDetail.caseState)
      this.processRadioList = res.data
    },
    /**
     * 选择常用语，更新审核意见
     */
    selectCommonLang(value) {
      this.processForm.remarks = value
    },
    /**
     * 选择事部件，更新大类
     */
    async selectEorc(value) {
      console.log('selectEorc', this.processCompObj)
      if (this.processCompObj.eorc) {
        this.caseTypeLoading = true
        const caseTypeRes = await getCaseTypeList(this.processCompObj.eorc)
        this.processCompObj.caseTypeList = caseTypeRes.data
        this.caseTypeLoading = false
      } else {
        this.processCompObj.caseTypeList = []
      }
      this.processCompObj.caseType = ''
    },
    /**
     * 选择大类，更新小类下拉框
     */
    async selectCaseType(value) {
      console.log('selectCaseType', this.processCompObj)
      if (this.processCompObj.eorc && this.processCompObj.caseType) {
        this.caseTypeDetailLoading = true
        const caseTypeDetailRes = await getCaseTypeDetailList(this.processCompObj.eorc, this.processCompObj.caseType) // 小类
        this.processCompObj.caseTypeDetailList = caseTypeDetailRes.data
        this.caseTypeDetailLoading = false
      } else {
        this.processCompObj.caseTypeDetailList = []
      }
      this.processCompObj.caseTypeDetail = ''
    },
    /**
     * 选择小类，更新立案标准下拉框
     */
    async selectCaseTypeDetail(value) {
      console.log('selectCaseTypeDetail', this.processCompObj)
      if (this.processCompObj.caseTypeDetail) {
        this.caseTypeTimeLoading = true
        const caseTypeTimesRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail) // 小类
        this.processCompObj.caseTypeTimeList = caseTypeTimesRes.data
        this.caseTypeTimeLoading = false
      } else {
        this.processCompObj.caseTypeTimeList = []
      }
      this.processCompObj.caseTypeTime = ''
    },
    /**
     * 案卷等级和立案标准发生改变时，更新hours和minutes,dispatchDeptId
     */
    updateHoursAndMins() {
      console.log('updateHoursAndMins', this.processCompObj.caseTypeTime)
      // if (!this.processCompObj.caseLevel) {
      //   this.$message.error('请选择案卷等级')
      //   return
      // }
      if (!this.processCompObj.caseTypeTime) {
        this.processCompObj.hours = ''
        this.processCompObj.minutes = ''
        this.processCompObj.dispatchDeptId = ''
        return
      }
      const caseTypeTimeObj = _.find(this.processCompObj.caseTypeTimeList, ['id', this.processCompObj.caseTypeTime])
      console.log(caseTypeTimeObj)
      const day = parseInt(caseTypeTimeObj.day)
      let hours = parseInt(caseTypeTimeObj.hours)
      const minutes = parseInt(caseTypeTimeObj.minutes)
      if (day) {
        switch (this.processCompObj.caseLevel) {
          case '1':
            hours += day * 7
            break
          case '2':
            hours += day * 24
            break
          default:
            this.$message.error('请选择案卷等级')
        }
      }
      this.processCompObj.hours = hours
      this.processCompObj.minutes = minutes

      this.processCompObj.dispatchDeptId = caseTypeTimeObj.deptId
    },
    /**
     * 设置默认人员id
     * 注意caseDetail.verifyPersonId和userlist中的id类型要一致
     */
    setDefaultUserId(radioConfig) {
      switch (radioConfig.passBack) {
        case 'verifyPersonId': { // 原核实人员
          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.verifyPersonId)
          break
        }
        case 'processPersonId': { // 原处理人员
          this.$set(this.processCompObj, 'taskUserId', this.caseDetail.processPersonid)
          break
        }
        default : {
          this.$set(this.processCompObj, 'taskUserId', '')
          break
        }
      }
    },
    /**
     * 选择案卷处理操作，初始化所需组件
     */
    async selectNextOperation() {
      console.log(this.operationKey, radioMap[this.operationKey], this.processCompObj)
      const radioConfig = radioMap[this.operationKey]

      // 清除相关数据
      this.processCompShow = ''
      this.processCompObj = {}
      if (!radioConfig.showComp) {
        return
      }
      switch (radioConfig.showComp.split('_')[0]) {
        case 'selectUser': { // 选择用户
          this.processCompShow = 'selectUser'
          const roleTips = radioConfig.showComp.split('_')[1]
          const userRes = await getUserList(roleTips)
          this.$set(this.processCompObj, 'userList', userRes.data)
          // 有默认id的设默认id
          this.setDefaultUserId(radioConfig)
          break
        }
        case 'selectDept': { // 选择部门
          this.processCompShow = 'selectDept'
          const deptRes = await getDeptList()
          this.$set(this.processCompObj, 'deptList', deptRes.data)
          this.$set(this.processCompObj, 'dispatchDeptId', '')
          break
        }
        case 'selectCaseTime': { // 立案：案卷等级、类别、大类、小类、立案标准、完成时限
          this.processCompShow = 'selectCaseTime'
          this.registerLoading = true

          const caseLevelRes = await getCaseLevelList() // 案卷等级
          this.$set(this.processCompObj, 'caseLevelList', caseLevelRes.data)
          this.$set(this.processCompObj, 'caseLevel', this.caseDetail.caseLevel.toString())

          const eorcListRes = await getEorc() // 事部件
          this.$set(this.processCompObj, 'eorcList', eorcListRes.data)
          this.$set(this.processCompObj, 'eorc', this.caseDetail.eorc)

          const deptRes = await getDeptList()// 处置部门列表
          this.$set(this.processCompObj, 'deptList', deptRes.data)

          // 初始化大类、小类、立案标准、完成时限
          this.$set(this.processCompObj, 'caseTypeList', [])
          this.$set(this.processCompObj, 'caseTypeDetailList', [])
          this.$set(this.processCompObj, 'caseTypeTimeList', [])
          this.$set(this.processCompObj, 'caseType', '')
          this.$set(this.processCompObj, 'caseTypeDetail', '')
          this.$set(this.processCompObj, 'caseTypeTime', '')
          this.$set(this.processCompObj, 'hours', '')
          this.$set(this.processCompObj, 'minutes', '')
          this.$set(this.processCompObj, 'dispatchDeptId', '')

          // 大类列表
          if (this.caseDetail.eorc) {
            const caseTypeRes = await getCaseTypeList(this.caseDetail.eorc)
            this.processCompObj.caseTypeList = caseTypeRes.data
          }
          // 大类
          if (this.caseDetail.casetypeCode) {
            const defaultCaseType = _.find(this.processCompObj.caseTypeList, ['typeCode', this.caseDetail.casetypeCode])
            this.processCompObj.caseType = defaultCaseType.id
          }
          // 小类列表
          if (this.caseDetail.eorc && this.processCompObj.caseType) {
            const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.processCompObj.caseType)
            this.processCompObj.caseTypeDetailList = caseTypeDetailRes.data
          }
          // 小类
          if (this.caseDetail.casetypeDetailCode) {
            const defaultCaseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['typeDetailCode', this.caseDetail.casetypeDetailCode])
            this.processCompObj.caseTypeDetail = defaultCaseTypeDetail.id
          }
          // 立案标准列表
          if (this.processCompObj.caseTypeDetail) {
            const caseTypeTimeRes = await getCaseTypeTimes(this.processCompObj.caseTypeDetail)
            this.processCompObj.caseTypeTimeList = caseTypeTimeRes.data
          }
          // 立案标准
          if (this.caseDetail.casetypesTimeId) {
            this.processCompObj.caseTypeTime = this.caseDetail.casetypesTimeId
          }
          if (this.processCompObj.caseTypeTime) {
            const deafultDispatchDept = _.find(this.processCompObj.caseTypeTimeList, ['caseTypeTime', this.processCompObj.caseTypeTime])
            this.processCompObj.dispatchDeptId = deafultDispatchDept.deptId
          }

          this.registerLoading = false
          break
        }
        case 'selectFilingType': { // 选择归档类型
          this.processCompShow = 'selectFilingType'
          const filingTypeRes = await getFilingTypeList()
          this.$set(this.processCompObj, 'filingTypeList', filingTypeRes.data)
          this.$set(this.processCompObj, 'filingType', '')
          break
        }
        case 'inputDelayTime': { // 输入延期时间
          this.processCompShow = 'inputDelayTime'
          this.$set(this.processCompObj, 'hours', '')
          this.$set(this.processCompObj, 'minutes', '')
          break
        }
        default:
          this.processCompShow = ''
          break
      }
    },
    /**
     * 检查输入小时
     */
    checkHour(hour) {
      if (parseInt(hour) >= 0) {
        return true
      } else {
        return false
      }
    },
    /**
     * 检查输入分钟
     */
    checkMin(min) {
      if (parseInt(min) >= 0 && parseInt(min) < 60) {
        return true
      } else {
        return false
      }
    },
    /**
     * 构建提交表单
     */
    buildForm() {
      console.log('buildForm', this.operationKey)
      // 通用参数,processId已有
      this.processForm.bizId = this.id // bizId
      this.processForm.currState = this.caseDetail.caseState // currState
      if (!this.operationKey) {
        this.$message.error('请选择案卷处理操作类型')
        return false
      }
      const radioObj = _.find(this.processRadioList, ['operationKey', this.operationKey])
      this.processForm.changeState = radioObj.nextState // changeState
      this.processForm.approvalResult = radioObj.approvalResult // approvalResult

      // remarks 不能为空
      if (!this.processForm.remarks.trim()) {
        this.$message.error('处置意见不能为空')
        return false
      } else {
        // 去除remarks空格
        this.processForm.remarks = this.processForm.remarks.trim()
      }

      // 其他参数
      const radioConfig = radioMap[this.operationKey]

      // 1. isNeedRevisit
      if (radioConfig.passBack === 'isNeedRevisit') {
        this.processForm.isNeedRevisit = this.caseDetail.isNeedRevisit
      }
      // 2. caseLevel,caseTypeTimes,caseType,caseTypeDetail（立案）
      if (radioConfig.showComp === 'selectCaseTime') {
        // caseLevel
        if (!this.processCompObj.caseLevel) {
          this.$message.error('请选择案卷等级')
          return false
        }
        this.processForm.caseLevel = this.processCompObj.caseLevel
        // eorc
        if (!this.processCompObj.eorc) {
          this.$message.error('请选择案卷类别')
          return false
        }
        this.processForm.eorc = this.processCompObj.eorc
        // casetypeCode
        if (!this.processCompObj.caseType) {
          this.$message.error('请选择案卷大类')
          return false
        }
        const caseType = _.find(this.processCompObj.caseTypeList, ['id', this.processCompObj.caseType])
        this.processForm.casetypeCode = caseType.typeCode
        // casetypeDetailCode
        if (!this.processCompObj.caseTypeDetail) {
          this.$message.error('请选择案卷小类')
          return false
        }
        const caseTypeDetail = _.find(this.processCompObj.caseTypeDetailList, ['id', this.processCompObj.caseTypeDetail])
        this.processForm.casetypeDetailCode = caseTypeDetail.typeDetailCode
        // casetypesTimeId
        if (!this.processCompObj.caseTypeTime) {
          this.$message.error('请选择立案标准')
          return false
        }
        this.processForm.casetypesTimeId = this.processCompObj.caseTypeTime
      }
      // 3. taskUserId
      if (!this.processCompObj.taskUserId && (radioConfig.passBack === 'verifyPersonId' || radioConfig.passBack === 'processPersonId')) {
        this.setDefaultUserId(radioConfig)
      }
      if ((radioConfig.showComp && radioConfig.showComp.indexOf('selectUser') > -1) || radioConfig.passBack === 'verifyPersonId' || radioConfig.passBack === 'processPersonId') {
        if (!this.processCompObj.taskUserId) {
          this.$message.error('请选择人员')
          return false
        }
        this.processForm.taskUserId = this.processCompObj.taskUserId
      }
      // 4. dispatchDeptId
      if (radioConfig.showComp === 'selectDept' || radioConfig.showComp === 'selectCaseTime') {
        if (!this.processCompObj.dispatchDeptId) {
          this.$message.error('请选择部门')
          return false
        }
        this.processForm.dispatchDeptId = this.processCompObj.dispatchDeptId
      } else if (radioConfig.passBack === 'onedeptid') {
        this.processForm.dispatchDeptId = this.caseDetail.onedeptid
      }
      // 5. hours,minutes
      if (radioConfig.showComp === 'selectCaseTime' || radioConfig.showComp === 'inputDelayTime') {
        if (!this.checkHour(this.processCompObj.hours)) {
          this.$message.error('小时数必须为大于等于0的整数')
          return false
        }
        if (!this.checkMin(this.processCompObj.minutes)) {
          this.$message.error('分钟数必须为大于等于0，小于60的整数')
          return false
        }
        this.processForm.hours = this.processCompObj.hours
        this.processForm.minutes = this.processCompObj.minutes
      }
      // 6. filingType
      if (radioConfig.showComp === 'selectFilingType') {
        if (!this.processCompObj.filingType) {
          this.$message.error('请选择归档类型')
          return false
        }
        this.processForm.filingType = this.processCompObj.filingType
      }
      console.log(this.processForm)
      return true
    },
    /**
     * 提交案卷处理
     */
    submit() {
      console.log('submit')
      this.$confirm('确定提交案件处理吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击“确定”后的操作
        const isBuild = this.buildForm()
        if (!isBuild) {
          return
        }
        this.$refs['processForm'].validate((valid) => {
          if (valid) {
            completeCaseTask(this.processForm).then(response => {
              if (response.code === 200) {
                this.$message.success('提交成功')
                // 隐藏案卷处理，重新加载数据
                this.showProcess = false
                this.$route.query.showProcess = false
                this.initData()
              } else {
                this.$message.error('提交失败')
              }
            })
          }
        })
      }).catch(() => {
        // 点击“取消”后的操作
      })
    },
    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>
