<template>
  <div class="app-container">
    <van-nav-bar
      title="案件详情"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs type="card" :duration="0.2" animated background="transparent" v-model="caseProgress">
      <!--      登记-->
      <van-tab :disabled="0 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 1 <= caseActive , notStarted: 1 > caseActive , ongoing: 0 == caseActive }"
          >
            <p>登记</p>
            <p>
              <van-icon name="success" v-if="1 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 0"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">登记<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件来源" :value="form.caseSource"/>
          <van-cell title="关联方案" :value="form.schemeId"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件编码" :value="form.caseNum"/>
          <van-cell title="案件名称" :value="form.caseName"/>
          <van-cell title="登记日期" :value="form.registerDate" right-icon="calendar-o" />
          <van-cell title="执法类别" :value="form.enforceCategory"/>
          <van-cell title="当事人类型" :value="form.typeLable"/>


          <template v-if="form.type=='1'">
            <van-cell title="当事人姓名" :value="form.name"/>
            <van-cell title="性别" :value="form.sex"/>
            <van-cell title="民族" :value="form.nation" />
            <van-cell title="出生日期" :value="form.birthday" />
            <van-cell title="身份证号" :value="form.cardNum" />
            <van-cell title="工作单位及职务" :value="form.companyPosition" />
            <van-cell title="所在地区" :value="form.deptId" />
            <van-cell title="联系电话" :value="form.phone" />
            <van-cell title="联系地址" :value="form.address" />
            <van-cell title="统一社会信用代码" :value="form.uniformCode" />
            <van-cell title="字号名称" :value="form.zihao" />
          </template>

          <template v-if="form.type=='2'">
            <van-cell title="企业名称" :value="form.companyName"/>
            <van-cell title="法人/负责人" :value="form.legalName"/>
            <van-cell title="所在地区" :value="form.deptId" />
            <van-cell title="联系地址" :value="form.address" />
            <van-cell title="联系电话" :value="form.phone" />
            <van-cell title="统一社会信用代码" :value="form.uniformCode" />
          </template>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>
      </van-tab>
      <!--      勘察-->
      <van-tab :disabled="1 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 2 <= caseActive , notStarted: 2 > caseActive , ongoing: 1 == caseActive }"
          >
            <p>勘察</p>
            <p>
              <van-icon name="success" v-if="2 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 1"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">勘察<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" v-model="surveyForm.caseName"/>
          <van-cell title="关联方案" v-model="surveyForm.schemeId"/>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">执行人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceCaseHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">现场检查<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="勘察开始时间" v-model="surveyForm.surveyStartTime" />
          <van-cell title="勘察结束时间" v-model="surveyForm.surveyEndTime" />
          <van-cell title="当事人" v-model="surveyForm.dangshiren"/>
          <van-cell title="记录人" v-model="surveyForm.recorder"/>
          <van-cell title="检查(勘察)地点" v-model="surveyForm.surveyAddr"/>
          <van-cell title="现场检查(勘察)情况" :label="surveyForm.surveyDescription" />
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">询问信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="询问开始时间" v-model="surveyForm.askStartTime"/>
          <van-cell title="询问结束时间" v-model="surveyForm.askEndTime"/>
          <van-cell title="询问地点" v-model="surveyForm.askAddr"/>
          <van-cell title="询问记录人" v-model="surveyForm.askRecorder"/>
          <van-cell title="被询问人姓名"v-model="surveyForm.askedName"/>
          <van-cell title="被询问人电话" v-model="surveyForm.askedPhone"/>
          <van-cell title="身份证号" v-model="surveyForm.idCard"/>
          <van-cell title="性别" v-model="surveyForm.gender"/>
          <van-cell title="工作单位" v-model="surveyForm.workCompany" />
          <van-cell title="职务" v-model="surveyForm.workPosition" />
          <van-cell title="住址" v-model="surveyForm.address" />
          <van-cell title="询问问题" :label="surveyForm.question" />
          <van-cell title="被询问人员证件是否清楚" v-model="surveyForm.isClear == 'Y' ? '是' : '否'" />
          <van-cell title="是否申请调查人员回避" v-model="surveyForm.isAvoid == 'Y' ? '是' : '否'" />
          <van-cell title="被询问人回答内容" :label="surveyForm.answer" />
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xccj.png" size="20"></van-icon>
              <span class="custom-title">现场抽检选项<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="是否现场抽检" v-model="surveyForm.isSpotCheck == 'Y' ? '是' : '否'"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="受理时间" v-model="surveyForm.handleDate" />
          <van-cell title="受案时间" v-model="surveyForm.shouanDate" />
          <van-cell title="简要案情及立案（不予立案）理由" :label="surveyForm.reason" />
          <van-cell title="是否审批" v-model="surveyForm.isApprove == 'Y' ? '是' : '否'"/>
          <van-cell title="审批程序设置" v-model="surveyForm.surveyResult" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>

        <p class="splcTit">审批流程</p>
        <div class="main_box2">
          <van-row v-for="(item,index) in historyList" :key="index">
            <van-col :span="4">
              <p class="index">{{index+1}}</p>
              <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
                <p class="ssT" v-if="index>0"></p>
                <p class="yq"></p>
                <p class="ss" v-if="historyList.length != index+1"></p>
              </div>
            </van-col>
            <van-col :span="20">
              <van-cell :title="item.activityName" center>
                <template #label>
                  <p>{{ item.endTime }}</p>
                </template>
                <template #default>
                  <p style="color: #666666;">{{ item.assigneeName }}
                    <span
                      class="bq"
                      :style="{
                        background:item.comment == '提交申请' ? 'rgba(29,111,233,0.2)' : item.comment == '同意' ? 'rgba(29,204,128,0.2)' :  item.comment == '自动结束' ? 'rgba(255,166,62,0.2)' : '',
                        color:item.comment == '提交申请' ? '#1D6FE9' : item.comment == '同意' ? '#1DCC80' :  item.comment == '自动结束' ? '#FFA63E' : ''
                      }"
                    >{{ item.comment }}</span>
                  </p>
                  <p style="color: #999999;">{{ item.durationInMillis }}</p>
                </template>
              </van-cell>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="caseActive == 1 && type == 'waiting'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">审批<br/>意见</van-col>
            <van-col span="19">
              <van-radio-group v-model="pass" direction="horizontal">
                <van-radio name="true">同意</van-radio>
                <van-radio name="false">驳回</van-radio>
              </van-radio-group>
              <van-field rows="2" autosize v-model="comment" type="textarea" placeholder="审批意见"/>
            </van-col>
          </van-row>
        </div>
        <div style="margin: 16px 2%;" v-if="caseActive == 1 && type == 'waiting'">
          <van-row>
            <van-col span="24" align="center">
              <van-button type="info" native-type="submit" @click="submitCase" class="submitButtonActive">提交</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      </van-tab>
      <!--      立案-->
      <van-tab :disabled="2 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 3 <= caseActive , notStarted: 3 > caseActive , ongoing: 2 == caseActive }"
          >
            <p>立案</p>
            <p>
              <van-icon name="success" v-if="3 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 2"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">立案<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" :value="putRecordForm.caseName" />
          <van-cell title="关联方案" :value="putRecordForm.schemeId" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">办理人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforcePutRecordHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_cfky.png" size="20"></van-icon>
              <span class="custom-title">查封扣押<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="涉嫌违法行为" :value="putRecordForm.illegalAct" />
          <van-cell title="处罚依据及内容" :value="putRecordForm.punishContent" />
          <van-cell title="查封日期" :value="putRecordForm.sealDate" />
          <van-cell title="查封时效" :value="putRecordForm.sealTimeliness" />
          <van-cell title="查封天数" :value="putRecordForm.sealDays" />
          <van-cell title="产品保存地点" :value="putRecordForm.savePlace" />
          <van-cell title="现场情况" :value="putRecordForm.sceneCondition" />
          <van-cell title="上诉单位" :value="putRecordForm.appealUnit" />
          <van-cell title="复议单位" :value="putRecordForm.administrativeDept"  />
          <van-cell title="诉讼单位" :value="putRecordForm.lawsuitDept"  />
          <div class="peopleList cf">
            <van-row>
              <van-col :span="5">财务名称</van-col>
              <van-col :span="3">规格</van-col>
              <van-col :span="3">数量</van-col>
              <van-col :span="6">生产日期</van-col>
              <van-col :span="7">生产经营单位</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceDetainHandlerList" :key="index">
              <van-col :span="5">{{item.name}}</van-col>
              <van-col :span="3">{{item.size}}</van-col>
              <van-col :span="3">{{item.propertyNum}}</van-col>
              <van-col :span="6">{{item.productTimeNum}}</van-col>
              <van-col :span="7">{{item.productUnit}}</van-col>
            </van-row>

          </div>

          <div class="cf">
            <van-row>
              <van-col :span="6">
                <van-image src="../../../../static/images/lawEnforcement/icon/icon_fj.png" width="50" />
                <p>证据先行</p>
                <p>保存通知书</p>
              </van-col>
              <van-col :span="6">
                <van-image src="../../../../static/images/lawEnforcement/icon/icon_fj.png" width="50" />
                <p>查封扣押</p>
                <p>现场笔录</p>
              </van-col>
              <van-col :span="6">
                <van-image src="../../../../static/images/lawEnforcement/icon/icon_fj.png" width="50" />
                <p>查封扣押</p>
                <p>决定书</p>
              </van-col>
              <van-col :span="6"></van-col>
            </van-row>
          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_cfky.png" size="20"></van-icon>
              <span class="custom-title">抽样信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="抽样现场人员" :value="samplingForm.samplingScene" />
          <van-cell title="抽样时间" :value="samplingForm.samplingTime" />
          <van-cell title="抽样地点" :value="samplingForm.samplingPlace" />
          <van-cell title="联系人" :value="samplingForm.linkman" />
          <van-cell title="联系电话" :value="samplingForm.linkPhone" />

          <div v-for="(item,index) in tEnforceSamplingGoodsList" :key="index">
            <van-cell title="" value=" " />
            <van-cell title="物品名称" :value="item.goodsName" />
            <van-cell title="商标" :value="item.goodsIcon" />
            <van-cell title="生产单位" :value="item.productUnit" />
            <van-cell title="厂家确认期限" :value="item.timeliness"  />
            <van-cell title="产品许可证" :value="item.productLicenseNum"  />
            <van-cell title="单位许可证" :value="item.unitLicenseNum"  />
            <van-cell title="生产日期" :value="item.productTimeNum"  />
            <van-cell title="样品规格" :value="item.specs"  />
            <van-cell title="样品基数" :value="item.basenum"  />
            <van-cell title="抽样数量" :value="item.samplingNum"  />
            <van-cell title="产品确认期限" :value="item.confirmTimeliness"  />
            <van-cell title="抽样产品附件" :value="item.attachement"  />

            <div class="cf">
              <van-row>
                <van-col :span="6">
                  <van-image src="../../../../static/images/lawEnforcement/icon/icon_fj.png" width="50" />
                  <p>产品确认</p>
                  <p>通知书</p>
                </van-col>
                <van-col :span="6">
                  <van-image src="../../../../static/images/lawEnforcement/icon/icon_fj.png" width="50" />
                  <p>抽样取证</p>
                  <p>凭证</p>
                </van-col>
                <van-col :span="6"></van-col>
                <van-col :span="6"></van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="立案程序" value="一般程序"  />
          <van-cell title="案件进展" :label="putRecordForm.progressCase"  />
        </div>

        <div class="main_box" style="margin-top: 10px;margin-bottom: 20PX;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple />
        </div>
      </van-tab>
      <!--      取证-->
      <van-tab :disabled="3 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 4 <= caseActive , notStarted: 4 > caseActive , ongoing: 3 == caseActive }"
          >
            <p>取证</p>
            <p>
              <van-icon name="success" v-if="4 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 3"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">取证<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" v-model="evidenceForm.caseName"/>
          <van-cell title="关联方案" v-model="evidenceForm.schemeId"/>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">办理人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceEvidenceHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">检测结果<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div v-for="(item,index) in detectResults" :key="index">
            <van-cell title="产品名称" v-model="item.goodsName" />
            <van-cell title="检测报告编号" v-model="item.reportNum" />
            <van-cell title="质量判定" v-model="item.qualityStatus"/>
            <van-cell title="检测结果附件" v-model="item.attachement"/>
          </div>
          <van-cell title="检测结果" v-model="evidenceForm.detectionResult" />
          <van-cell title="申请复检单位" v-model="evidenceForm.reviewUnit" />
          <van-cell title="复检时效" v-model="evidenceForm.reviewTime"/>
          <van-cell title="联系人" v-model="evidenceForm.linkman"/>
          <van-cell title="联系电话" v-model="evidenceForm.linkPhone"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件调查过程" v-model="evidenceForm.investigationProcess" />
          <van-cell title="涉嫌违法事实" v-model="evidenceForm.allegedIllegal" />
          <van-cell title="违反条例" v-model="evidenceForm.violationRegulations" />
          <van-cell title="处罚依据" v-model="evidenceForm.punishmentBase"/>
          <van-cell title="证据材料" v-model="evidenceForm.caseDocuments" />
          <van-cell title="调查结论" v-model="evidenceForm.conclusion" />
          <van-cell title="处罚决定" :label="evidenceForm.penaltyDecision" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>

        <p class="splcTit">审批流程</p>
        <div class="main_box2">
          <van-row v-for="(item,index) in evidencHistoryList" :key="index">
            <van-col :span="4">
              <p class="index">{{index+1}}</p>
              <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
                <p class="ssT" v-if="index>0"></p>
                <p class="yq"></p>
                <p class="ss" v-if="evidencHistoryList.length != index+1"></p>
              </div>
            </van-col>
            <van-col :span="20">
              <van-cell :title="item.activityName" center>
                <template #label>
                  <p>{{ item.endTime }}</p>
                </template>
                <template #default>
                  <p style="color: #666666;">{{ item.assigneeName }}
                    <span
                      class="bq"
                      :style="{
                        background:item.comment == '提交申请' ? 'rgba(29,111,233,0.2)' : item.comment == '同意' ? 'rgba(29,204,128,0.2)' :  item.comment == '自动结束' ? 'rgba(255,166,62,0.2)' : '',
                        color:item.comment == '提交申请' ? '#1D6FE9' : item.comment == '同意' ? '#1DCC80' :  item.comment == '自动结束' ? '#FFA63E' : ''
                      }"
                    >{{ item.comment }}</span>
                  </p>
                  <p style="color: #999999;">{{ item.durationInMillis }}</p>
                </template>
              </van-cell>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="caseActive == 3 && type == 'waiting'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">审批<br/>意见</van-col>
            <van-col span="19">
              <van-radio-group v-model="pass" direction="horizontal">
                <van-radio name="true">同意</van-radio>
                <van-radio name="false">驳回</van-radio>
              </van-radio-group>
              <van-field rows="2" autosize v-model="comment" type="textarea" placeholder="审批意见"/>
            </van-col>
          </van-row>
        </div>
        <div style="margin: 16px 2%;" v-if="caseActive == 3 && type == 'waiting'">
          <van-row>
            <van-col span="24" align="center">
              <van-button type="info" native-type="submit" @click="submitEvidence" class="submitButtonActive">提交</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      </van-tab>
      <!--      处理-->
      <van-tab :disabled="4 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 5 <= caseActive , notStarted: 5 > caseActive , ongoing: 4 == caseActive }"
          >
            <p>处理</p>
            <p>
              <van-icon name="success" v-if="5 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 4"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">处理<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" v-model="treatForm.caseName"/>
          <van-cell title="关联方案" v-model="treatForm.schemeId"/>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">办理人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceTreatHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">听证<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="是否听证" v-model="treatForm.isHearing" />
          <div v-if="treatForm.isHearing=='Y'">
            <van-cell title="听证开始时间" v-model="treatForm.hearingStartTime" />
            <van-cell title="听证结束时间" v-model="treatForm.hearingEndTime" />
            <van-cell title="听证地点" v-model="treatForm.place"/>
            <van-cell title="申请人" v-model="treatForm.proposer"/>
            <van-cell title="法人代表(负责人)" v-model="treatForm.director" />
            <van-cell title="证件类型" v-model="treatForm.documentType" />
            <van-cell title="证件号码" v-model="treatForm.documentNumber"/>
            <van-cell title="联系方式" v-model="treatForm.phoneNumber"/>
            <van-cell title="通讯地址" v-model="treatForm.postalAddress"/>

            <van-cell title="委托代理人" v-model="treatForm.agent"/>
            <van-cell title="代理人证件类型" v-model="treatForm.agentDocumentType"/>
            <van-cell title="代理人证件号码" v-model="treatForm.agentDocumentNumber"/>
            <van-cell title="代理人联系方式" v-model="treatForm.agentPhoneNumber"/>
            <van-cell title="代理人通讯地址" v-model="treatForm.agentPostalAddress"/>
            <van-cell title="听证主持人" v-model="treatForm.hearingHost"/>
            <van-cell title="听证主持人执法证号" v-model="treatForm.hearingHostNum"/>
            <van-cell title="听证记录人" v-model="treatForm.hearingRecorder"/>
            <van-cell title="听证记录人执法证号" v-model="treatForm.hearingRecorderNum"/>
            <van-cell title="主持听证机关" v-model="treatForm.hearingAuthority"/>
            <van-cell title="听证记录" :label="treatForm.hearingRecord"/>
            <van-cell title="听证会报告事项" :label="treatForm.hearingReportMatters"/>
          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件处理意见<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件事实及依据" :label="treatForm.caseEvidence" />
          <van-cell title="裁量依据及理由" :label="treatForm.caseReason" />
          <van-cell title="陈述申辩或听证情况" :label="treatForm.caseSituation" />
          <van-cell title="处罚意见" :label="treatForm.caseOpinion"/>
          <van-cell title="处罚决定" :label="treatForm.caseDecision" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>

        <p class="splcTit">审批流程</p>
        <div class="main_box2">
          <van-row v-for="(item,index) in treatHistoryList" :key="index">
            <van-col :span="4">
              <p class="index">{{index+1}}</p>
              <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
                <p class="ssT" v-if="index>0"></p>
                <p class="yq"></p>
                <p class="ss" v-if="treatHistoryList.length != index+1"></p>
              </div>
            </van-col>
            <van-col :span="20">
              <van-cell :title="item.activityName" center>
                <template #label>
                  <p>{{ item.endTime }}</p>
                </template>
                <template #default>
                  <p style="color: #666666;">{{ item.assigneeName }}
                    <span
                      class="bq"
                      :style="{
                        background:item.comment == '提交申请' ? 'rgba(29,111,233,0.2)' : item.comment == '同意' ? 'rgba(29,204,128,0.2)' :  item.comment == '自动结束' ? 'rgba(255,166,62,0.2)' : '',
                        color:item.comment == '提交申请' ? '#1D6FE9' : item.comment == '同意' ? '#1DCC80' :  item.comment == '自动结束' ? '#FFA63E' : ''
                      }"
                    >{{ item.comment }}</span>
                  </p>
                  <p style="color: #999999;">{{ item.durationInMillis }}</p>
                </template>
              </van-cell>
            </van-col>
          </van-row>
        </div>

        <div class="main_box examine_box" v-if="caseActive == 4 && type == 'waiting'">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">审批<br/>意见</van-col>
            <van-col span="19">
              <van-radio-group v-model="pass" direction="horizontal">
                <van-radio name="true">同意</van-radio>
                <van-radio name="false">驳回</van-radio>
              </van-radio-group>
              <van-field rows="2" autosize v-model="comment" type="textarea" placeholder="审批意见"/>
            </van-col>
          </van-row>
        </div>
        <div style="margin: 16px 2%;" v-if="caseActive == 4 && type == 'waiting'">
          <van-row>
            <van-col span="24" align="center">
              <van-button type="info" native-type="submit" @click="submitTreat" class="submitButtonActive">提交</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      </van-tab>
      <!--      裁决-->
      <van-tab :disabled="5 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 6 <= caseActive , notStarted: 6 > caseActive , ongoing: 5 == caseActive }"
          >
            <p>裁决</p>
            <p>
              <van-icon name="success" v-if="6 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 5"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">裁决<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" v-model="decisionForm.caseName"/>
          <van-cell title="关联方案" v-model="decisionForm.schemeId"/>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">送达回证人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceDecisionHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">送达文书<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="送达文书名称" v-model="decisionForm.deliveryName" />
          <van-cell title="送达文书编号" v-model="decisionForm.deliveryNum" />
          <van-cell title="受送达人姓名或名称" v-model="decisionForm.deliveryPersonName"/>
          <van-cell title="送达单位" v-model="decisionForm.deliveryUnit"/>
          <van-cell title="送达方式" v-model="decisionForm.deliveryWay" />
          <van-cell title="送达时间" v-model="decisionForm.deliveryTime" />
          <van-cell title="送达地点" v-model="decisionForm.deliveryAddress"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">行政处罚<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="缴款时间" v-model="decisionForm.payTime" />
          <van-cell title="缴款地点" v-model="decisionForm.payAddress" />
          <van-cell title="上诉部门" v-model="decisionForm.appealDept"/>
          <van-cell title="行政部门" v-model="decisionForm.administrativeDept"/>
          <van-cell title="诉讼部门" v-model="decisionForm.lawsuitDept" />
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="备案" label="行政处罚" />
          <van-cell title="案件当前状态" :label="decisionForm.surveyStatus" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>
      </van-tab>
      <!--      执行-->
      <van-tab :disabled="6 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 7 <= caseActive , notStarted: 7 > caseActive , ongoing: 6 == caseActive }"
          >
            <p>执行</p>
            <p>
              <van-icon name="success" v-if="7 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 6"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">执行<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" v-model="executeForm.caseName"/>
          <van-cell title="关联方案" v-model="executeForm.schemeId"/>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
              <span class="custom-title">办理人员<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <div class="peopleList">
            <van-row>
              <van-col :span="4">序号</van-col>
              <van-col :span="10">执行人员</van-col>
              <van-col :span="10">执法证号</van-col>
            </van-row>

            <van-row v-for="(item,index) in tEnforceExecuteHandlerList" :key="index">
              <van-col :span="4">{{index+1}}</van-col>
              <van-col :span="10">{{item.enforcerName}}</van-col>
              <van-col :span="10">{{item.enforcerNum}}</van-col>
            </van-row>

          </div>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_xwxx.png" size="20"></van-icon>
              <span class="custom-title">处罚催告<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="滞纳罚款日期" v-model="executeForm.fineTime" />
          <van-cell title="加处罚款金额(元)" v-model="executeForm.fineMoney" />
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple :show-upload="false" :deletable="false" />
        </div>
      </van-tab>
      <!--      结案-->
      <van-tab :disabled="7 <= caseActive ? false : true">
        <template #title>
          <div
            :class="{ finish: 8 <= caseActive , notStarted: 8 > caseActive , ongoing: 7 == caseActive }"
          >
            <p>结案</p>
            <p>
              <van-icon name="success" v-if="8 <= caseActive"/>
              <van-icon name="circle" v-if="caseActive == 7"/>
            </p>
          </div>
        </template>
        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
              <span class="custom-title">结案<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="案件名称" :value="endingForm.caseName"/>
          <van-cell title="关联方案" :value="endingForm.schemeId"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_cfky.png" size="20"></van-icon>
              <span class="custom-title">罚没物品处理<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="执行人" :value="endingForm.executeName"/>
          <van-cell title="记录人" :value="endingForm.recordName"/>
          <van-cell title="处理日期" :value="endingForm.dealDate"/>
          <van-cell title="处理地点" :value="endingForm.dealAddress"/>
          <van-cell title="处理物品" :value="endingForm.dealGoods"/>
          <van-cell title="处理来源" :value="endingForm.goodsSource"/>
          <van-cell title="处理情况" :label="endingForm.dealCondition"/>
        </div>

        <div class="main_box">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
              <span class="custom-title">案件信息<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-cell title="结案" value="已执行"/>
          <van-cell title="案件结果" :label="endingForm.surveyResult"/>
          <van-cell title="罚款缴纳类型" :value="endingForm.agingStatus"/>

          <div v-if="endingForm.agingStatus=='1'">
            <van-cell title="申请时间" :value="endingForm.applyTime"/>
            <van-cell title="总金额" :value="endingForm.totalMoney"/>
            <van-cell title="分期缴纳期数" :value="endingForm.agingNum"/>
            <van-cell title="缴纳时间" :value="endingForm.payTime"/>
            <van-cell title="每期缴纳金额" :value="endingForm.payMoney"/>
          </div>

          <div v-if="endingForm.agingStatus=='2'">
            <van-cell title="申请时间" :value="endingForm.applyTime"/>
            <van-cell title="缴纳期限时间" :value="endingForm.payDeadline"/>
          </div>
        </div>

        <div class="main_box" style="margin-top: 10px;">
          <van-cell>
            <template #title>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajwd.png" size="20"></van-icon>
              <span class="custom-title">案件文档<i class="bgBlue"></i></span>
            </template>
          </van-cell>
          <van-uploader v-model="fileList" multiple />
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>
<script>
import {
  getCase ,
  schemeOptionList ,
  treeselect ,
  getSurveyByCaseId ,
  getputRecordByCaseId ,
  getSamplingByCaseId ,
  getEvidenceByCaseId ,
  getReportByGoodsId ,
  getEnforcerList ,
  getTreatByCaseId ,
  getDecisionByCaseId ,
  getExecuteByCaseId ,
  getEndingByCaseId ,
  progressList ,
} from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
import request from "@/utils/request";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      showBankType:false,
      showPayeeType:false,
      showPicker:false,
      form:{},
      caseProgress:0,
      caseActive:0,

      bankType:'',
      payeeType:'',
      value:'',
      type:'',

      pass: "true",
      comment: "同意",

      bankTypeOptions:[],
      payeeTypeOptions:[],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true },
      ],

      // 勘察表单参数
      surveyForm: {
        id: null,
        caseId: null,
        surveyStartTime: null,
        surveyEndTime: null,
        dangshiren: null,
        recorder: null,
        askRecorder: null,
        surveyAddr: null,
        surveyDescription: null,
        isSpotCheck: "N",
        handleDate: null,
        reason: null,
        shouanDate: null,
        isApprove: "Y",
        surveyResult: "4",
        askStartTime: null,
        askEndTime: null,
        askAddr: null,
        recorder: null,
        askedName: null,
        askedPhone: null,
        handleDate: null,
        idCard: null,
        gender: "1",
        workCompany: null,
        workPosition: null,
        address: null,
        question: null,
        answer: null,
        isClear: "Y",
        isAvoid: "N",
        attachement: null,
        applyUserId: null,
        applyUserName: null,
        applyTime: null,
        instanceId: null,
        processKey: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },

      // 立案表单参数
      putRecordForm: {
        id: null,
        caseId: null,
        illegalAct: null,
        punishContent: null,
        sealDate: null,
        sealDays: null,
        sealTimeliness: null,
        savePlace: "1",
        savePlaceAddress: null,
        sceneCondition: null,
        appealUnit: null,
        progressCase: null,
        attachement: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },
      samplingForm:{
        id: null,
        caseId: null,
        samplingType: '2', // 此为立案页面,type默认为2立案抽样
        samplingScene: '1',
        samplingTime: null,
        samplingPlace: null,
        linkman: null,
        linkPhone: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      // 取证表单参数
      evidenceForm: {
        id: null,
        caseId: null,
        detectionResult: null,
        reviewUnit: null,
        reviewTime: null,
        linkman: null,
        linkPhone: null,
        investigationProcess: null,
        allegedIllegal: null,
        violationRegulations: null,
        punishmentBase: null,
        caseDocuments: null,
        conclusion: "1",
        penaltyDecision: null,
        attachement: null,
        applyUserId: null,
        applyUserName: null,
        applyTime: null,
        instanceId: null,
        processKey: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      // 检测报告表单参数
      reportForm: {
        id: null,
        goodsId: null,
        reportNum: null,
        qualityStatus: null,
        attachement: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      // 处理表单参数
      treatForm: {
        id: null,
        caseId: null,
        isHearing: "Y",
        hearingStartTime: null,
        hearingEndTime: null,
        place: null,
        proposer: null,
        director: null,
        documentType: null,
        documentNumber: null,
        phoneNumber: null,
        postalAddress: null,
        agent: null,
        agentDocumentType: null,
        agentDocumentNumber: null,
        agentPhoneNumber: null,
        agentPostalAddress: null,
        hearingHost: null,
        hearingHostNum: null,
        hearingRecorder: null,
        hearingRecorderNum: null,
        hearingAuthority: null,
        hearingRecord: null,
        hearingReportMatters: null,
        caseEvidence: null,
        caseReason: null,
        caseSituation: null,
        caseOpinion: "1",
        caseDecision: null,
        attachement: null,
        applyUserId: null,
        applyUserName: null,
        applyTime: null,
        instanceId: null,
        processKey: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },
      // 裁决表单参数
      decisionForm: {
        id: null,
        caseId: null,
        deliveryName: null,
        deliveryNum: null,
        deliveryPersonName: null,
        deliveryUnit: null,
        deliveryWay: null,
        deliveryTime: null,
        deliveryAddress: null,
        payTime: null,
        payAddress: null,
        appealDept: null,
        administrativeDept: null,
        lawsuitDept: null,
        surveyStatus: null,
        attachement: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },
      // 执行表单参数
      executeForm: {
        id: null,
        caseId: null,
        fineTime: null,
        fineMoney: null,
        attachement: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },
      // 表单参数
      endingForm: {
        id: null,
        caseId: null,
        executeName: null,
        recordName: null,
        dealDate: null,
        dealAddress: null,
        dealGoods: null,
        goodsSource: null,
        dealCondition: null,
        surveyResult: null,
        agingStatus: "3",
        applyTime: null,
        totalMoney: null,
        agingNum: null,
        payTime: null,
        payMoney: null,
        payDeadline: null,
        attachement: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        caseName: "",
        schemeId: "",
      },
      // 办理人员列表
      tEnforceCaseHandlerList: [],
      tEnforcePutRecordHandlerList: [],
      tEnforceSamplingGoodsList: [],
      tEnforceDetainHandlerList: [],
      tEnforceEvidenceHandlerList: [],
      tEnforceTreatHandlerList: [],
      tEnforceDecisionHandlerList: [],
      tEnforceExecuteHandlerList: [],
      getDecisionByCaseId: [],
      historyList: [],
      evidencHistoryList: [],
      treatHistoryList: [],
      // 检测结果数据
      detectResults: [],
      decisionEnforcers: [],
      executeEnforcers: [],
      endingEnforcers: [],
      treatEnforcers: [],

      // 案件执法进度 1:登记 2:勘察 3:立案 4:取证 5:处理 6:裁决 7:执行 8:备案 9:结案字典
      caseProgressOptions: [],
      successActive:0, // 当前节点的前一个已完成节点
      active: 1,  // 当前节点
    };
  },
  created() {
    if (parseInt(this.$route.query.caseProgress)>7){
      this.caseProgress = 7;
      this.caseActive = 7 ;
    }else{
      this.caseProgress = parseInt(this.$route.query.caseProgress)-1;
      this.caseActive = parseInt(this.$route.query.caseProgress)-1 ;
    }
    this.type = this.$route.query.type;
    console.log(this.caseProgress)
    this.getDicts("case_source").then(response => {
      this.caseSourceOptions = response.data;
    });
    this.getDicts("enforce_body_type").then(response => {
      this.typeOptions = response.data;
    });
    this.getDicts("sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("nationality").then(response => {
      this.nationOptions = response.data;
    });
    this.getDicts("case_status").then(response => {
      this.caseStatusOptions = response.data;
    });
    this.getDicts("case_node").then(response => {
      this.caseProgressOptions = response.data;
    });
    this.getDicts("enforce_category").then(response => {
      this.enforceCategoryOptions = response.data;
    });
    this.getDicts("approve_type").then(response => {
      this.surveyResultOptions = response.data;
    });
    // 关联方案下拉框
    var schemeQueryParam = {
      applyStatus: "1"
    };
    schemeOptionList(schemeQueryParam).then((response) => {
      console.log(response)
      this.schemeOptions = response.data;
      this.getInformation();
    });

    // treeselect().then((response) => {
    //   this.deptOptions = response.data;
    // });

  },
  methods: {
    /** 保存审批意见提交 */
    submitCase() {
      const data = {
        taskId: this.surveyForm.taskId,
        instanceId: this.surveyForm.instanceId,
        variables: JSON.stringify({
          comment: this.comment,
          pass: this.pass,
          //"formData": this.row,
        }),
      };
      return request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        if (response.code == 200 && response.msg == "操作成功") {
          this.$notify({ type: 'success' , message: "操作成功" });
        } else {
          this.$notify({ type: 'danger' , message: "操作失败" });
        }
      });
    },
    /** 保存审批意见提交 */
    submitEvidence() {
      const data = {
        taskId: this.evidenceForm.taskId,
        instanceId: this.evidenceForm.instanceId,
        variables: JSON.stringify({
          comment: this.comment,
          pass: this.pass,
          //"formData": this.row,
        }),
      };
      return request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        if (response.code == 200 && response.msg == "操作成功") {
          this.$notify({ type: 'success' , message: "操作成功" });
        } else {
          this.$notify({ type: 'danger' , message: "操作失败" });
        }
      });
    },
    /** 保存审批意见提交 */
    submitTreat() {
      const data = {
        taskId: this.treatForm.taskId,
        instanceId: this.treatForm.instanceId,
        variables: JSON.stringify({
          comment: this.comment,
          pass: this.pass,
          //"formData": this.row,
        }),
      };
      return request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        if (response.code == 200 && response.msg == "操作成功") {
          this.$notify({ type: 'success' , message: "操作成功" });
        } else {
          this.$notify({ type: 'danger' , message: "操作失败" });
        }
      });
    },
    getInformation(){
      getCase(this.$route.query.id).then(response => {
        response.data.caseSource = this.selectDictLabel(this.caseSourceOptions, response.data.caseSource);
        response.data.schemeId = this.selectDictScheme(this.schemeOptions, response.data.schemeId);
        response.data.typeLable = this.selectDictLabel(this.typeOptions, response.data.type);
        response.data.sex = this.selectDictLabel(this.sexOptions, response.data.sex);
        response.data.nation = this.selectDictLabel(this.nationOptions, response.data.nation);
        // response.data.deptId = this.selectDictDeptId(this.deptOptions, response.data.deptId);
        this.form = response.data;

        console.log(this.caseActive)
        if(this.caseActive >= 1){//勘察
          console.log("勘察")
          this.caseSurvey();
        }
        if(this.caseActive >= 2){// 立案
          console.log("立案")
          this.getFileCase();
        }
        if(this.caseActive >= 3){//取证
          console.log("取证")
          this.getEvidenceCase();
        }
        if(this.caseActive >= 4){ // 处理
          console.log("处理")
          this.getTreat();
        }
        if(this.caseActive >= 5){// 裁决
          console.log("裁决")
          this.getDecision();
        }
        if(this.caseActive >= 6){// 执行
          console.log("执行")
          this.getExecuteCase();
        }
        if(this.caseActive >= 7){// 结案
          console.log("结案")
          this.getEndingForm();
        }

      });
    },
    //勘察表单查询
    caseSurvey(){
      // 查询勘察表单数据
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.surveyForm.caseId = this.form.id;
        getSurveyByCaseId(this.form.id).then(responseSurvey => {
          console.log(responseSurvey)
          if (responseSurvey.data != undefined) {
            _this.surveyForm = responseSurvey.data;
            _this.instanceId = responseSurvey.data.instanceId;
            _this.tEnforceCaseHandlerList = responseSurvey.data.tEnforceCaseHandlerList;
          }
          _this.surveyForm.gender = this.selectDictLabel(this.sexOptions, _this.surveyForm.gender);
          _this.surveyForm.surveyResult = this.selectDictLabel(this.surveyResultOptions, _this.surveyForm.surveyResult);
          _this.surveyForm.caseName = this.form.caseName;
          _this.surveyForm.schemeId = this.form.schemeId;
          // 查询审批历史记录
          _this.getHistoryList(_this.surveyForm,'');

        });
      }
    },

    //查询立案表单数据
    getFileCase(){
      var _this = this;
      if(this.form.id != null && this.form.id !=""){
        this.putRecordForm.caseId = this.form.id;
        getputRecordByCaseId(_this.form.id).then(responsePutRecord => {
          getSamplingByCaseId(_this.form.id).then(responseSampling => {
            if(responsePutRecord.data != undefined){
              _this.putRecordForm = responsePutRecord.data;
              _this.tEnforcePutRecordHandlerList = responsePutRecord.data.tEnforceCaseHandlerList;
              _this.tEnforceDetainHandlerList = responsePutRecord.data.tEnforceDetainHandlerList;
            }
            if(responseSampling.data != undefined) {
              _this.samplingForm = responseSampling.data;
              _this.tEnforceSamplingGoodsList = responseSampling.data.tEnforceSamplingGoodsList;
            }
            _this.putRecordForm.caseName = this.form.caseName;
            _this.putRecordForm.schemeId = this.form.schemeId;
          });
        });
      }
    },

    //查询取证表单数据
    getEvidenceCase(){
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.evidenceForm.caseId = this.form.id;
        getEvidenceByCaseId(this.form.id).then(responseEvidence => {
          getSamplingByCaseId(this.form.id).then(responseSampling => {
            for (var i = 0; i < responseSampling.data.tEnforceSamplingGoodsList.length; i++) {
              let goodsId = responseSampling.data.tEnforceSamplingGoodsList[i].id;
              let goodsName = responseSampling.data.tEnforceSamplingGoodsList[i].goodsName;
              getReportByGoodsId(goodsId).then(responseReport => {
                if (responseReport.data != undefined) {
                  responseReport.data.goodsId = goodsId;
                  responseReport.data.goodsName = goodsName;
                  _this.detectResults.push(responseReport.data);
                } else {
                  var goodsObj = {
                    "goodsId": goodsId,
                    "goodsName": goodsName
                  };
                  _this.detectResults.push(goodsObj);
                }
              });
            }
            if (responseEvidence.data != undefined) {
              _this.evidenceForm = responseEvidence.data;
              _this.tEnforceEvidenceHandlerList = responseEvidence.data.tEnforceCaseHandlerList;
            }
            _this.evidenceForm.caseName = this.form.caseName;
            _this.evidenceForm.schemeId = this.form.schemeId;
            // 查询审批历史记录
            _this.getHistoryList(this.evidenceForm,'evidence');
          });
        });
      }
    },

    //查询取证表单数据
    getTreat(){
      // 执行人员列表查询
      getEnforcerList().then(response => {
        const data = response.enforcerList;
        for (let i = 0; i < data.length; i++) {
          const res = {
            enforcerId: data[i].id,
            enforcerName: data[i].name,
            enforcerNum: data[i].enforceNum,
            value: data[i].name,
          };
          this.treatEnforcers.push(res);
        }
      });
      // 查询处理表单数据
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.treatForm.caseId = this.form.id;
        getTreatByCaseId(this.form.id).then(responseTreat => {
          if (responseTreat.data != undefined) {
            _this.treatForm = responseTreat.data;
            _this.tEnforceTreatHandlerList = responseTreat.data.tEnforceCaseHandlerList;
          }
          _this.treatForm.caseName = this.form.caseName;
          _this.treatForm.schemeId = this.form.schemeId;

          // 查询审批历史记录
          _this.getHistoryList(_this.treatForm,'treat');
        });
      }
    },

    getDecision(){
      // 执行人员列表查询
      getEnforcerList().then(response => {
        const data = response.enforcerList;
        for (let i = 0; i < data.length; i++) {
          const res = {
            enforcerId: data[i].id,
            enforcerName: data[i].name,
            enforcerNum: data[i].enforceNum,
            value: data[i].name,
          };
          this.decisionEnforcers.push(res);
        }
      });
      // 查询立案表单数据
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.decisionForm.caseId = this.form.id;
        getDecisionByCaseId(this.form.id).then(responseDecision => {
          if (responseDecision.data != undefined) {
            _this.decisionForm = responseDecision.data;
            _this.tEnforceDecisionHandlerList = responseDecision.data.tEnforceCaseHandlerList;
          }
          _this.decisionForm.caseName = this.form.caseName;
          _this.decisionForm.schemeId = this.form.schemeId;
        });
      }
    },

    getExecuteCase(){
      // 执行人员列表查询
      getEnforcerList().then(response => {
        const data = response.enforcerList;
        for (let i = 0; i < data.length; i++) {
          const res = {
            enforcerId: data[i].id,
            enforcerName: data[i].name,
            enforcerNum: data[i].enforceNum,
            value: data[i].name,
          };
          this.executeEnforcers.push(res);
        }
      });

      // 查询表单数据
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.executeForm.caseId = this.form.id;
        getExecuteByCaseId(this.form.id).then(responseExecute => {
          if (responseExecute.data != undefined) {
            _this.executeForm = responseExecute.data;
            _this.tEnforceExecuteHandlerList = responseExecute.data.tEnforceCaseHandlerList;
          }
          _this.executeForm.caseName = this.form.caseName;
          _this.executeForm.schemeId = this.form.schemeId;
        });
      }
    },

    getEndingForm(){
      // 执行人员列表查询
      getEnforcerList().then(response => {
        const data = response.enforcerList;
        for (let i = 0; i < data.length; i++) {
          const res = {
            enforcerId: data[i].id,
            enforcerName: data[i].name,
            enforcerNum: data[i].enforceNum,
            value: data[i].name,
          };
          this.endingEnforcers.push(res);
        }
      });
      // 查询结案表单数据
      var _this = this;
      if (this.form.id != null && this.form.id != "") {
        this.endingForm.caseId = this.form.id;
        getEndingByCaseId(this.form.id).then(responseEnding => {
          if (responseEnding.data != undefined) {
            _this.endingForm = responseEnding.data;
          }
          _this.endingForm.caseName = this.form.caseName;
          _this.endingForm.schemeId = this.form.schemeId;
        });
      }
    },

    progressSpeed(){
      console.log(this.form)
      if(this.form.caseProgress != undefined && this.form !="add"){
        this.active = this.form.caseProgress;
        this.successActive = this.form.caseProgress -1;

        if((this.form.caseStatus == "2" || this.form.caseStatus == "3") &&
          (this.form.caseProgress=="8" || this.form.caseProgress=="9")){
          this.successActive = this.form.caseProgress;
        }
      } else{
        this.form.caseProgress = undefined;
      }

      if((this.form.caseStatus == "2" || this.form.caseStatus == "3") &&
        (this.form.caseProgress=="8" || this.form.caseProgress=="9")){
        // 已结束备案或者结案阶段的案件,查询显示已保存案件的历史流程节点
        var progressParam = {
          "caseId": this.form.id
        };
        progressList(progressParam).then(response => {
          for (var i = 0; i < response.data.length; i++) {
            var obj={
              dictLabel:response.data[i].caseProgressName,
              dictValue:response.data[i].caseProgress
            }
            this.caseProgressOptions.push(obj);
          }
        });
      } else if(this.form.caseProgress=="8" && this.form.caseStatus == "1"){
        // 进行中的案件到达备案阶段显示历史节点和备案节点
        var progressParam = {
          "caseId": this.form.id
        };
        progressList(progressParam).then(response => {
          for (var i = 0; i < response.data.length; i++) {
            var obj = {
              dictLabel: response.data[i].caseProgressName,
              dictValue: response.data[i].caseProgress
            }
            this.caseProgressOptions.push(obj);
          }
          var onrecordObj = {
            dictLabel: "备案",
            dictValue: "8"
          }
          this.caseProgressOptions.push(onrecordObj);
        });
      } else{
        // 非备案或者结案阶段的案件,显示所有节点判断状态
        this.getDicts("case_node").then(response => {
          if (this.form.caseProgress == "9") { // 结案状态
            for (var i = 0; i < response.data.length; i++) {
              if (response.data[i].dictValue != "8") { // 如果是结案,步骤条不显示备案
                this.caseProgressOptions.push(response.data[i]);
              }
            }
          } else{
            this.caseProgressOptions = response.data;
          }

        });
      }
      console.log(this.caseProgressOptions)
    },

    /** 查询审批历史展示步骤条 */
    getHistoryList(formData,type) {
      if (formData.instanceId != null && formData.instanceId != "") {
        var queryParams = {
          processInstanceId: formData.instanceId
        };
        return request({
          url: "/activiti/process/listHistory",
          method: "post",
          data: queryParams,
        }).then((response) => {
          if (type == 'evidence'){
            this.evidencHistoryList = response.rows;
            this.evidencHistoryList.forEach((row) => {
              row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
              row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
              row.durationInMillis = this.formatTotalDateSub(
                row.durationInMillis / 1000
              );
            });
          }else if (type == 'treat'){
            this.treatHistoryList = response.rows;
            this.treatHistoryList.forEach((row) => {
              row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
              row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
              row.durationInMillis = this.formatTotalDateSub(
                row.durationInMillis / 1000
              );
            });
          }else{
            this.historyList = response.rows;
            this.historyList.forEach((row) => {
              row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
              row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
              row.durationInMillis = this.formatTotalDateSub(
                row.durationInMillis / 1000
              );
            });
          }
        });
      }else{
        this.spanNum = 5;
      }
    },

    format(time, format) {
      var t = new Date(time);
      var tf = function (i) { return (i < 10 ? '0' : '') + i };
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear());
            break;
          case 'MM':
            return tf(t.getMonth() + 1);
            break;
          case 'mm':
            return tf(t.getMinutes());
            break;
          case 'dd':
            return tf(t.getDate());
            break;
          case 'HH':
            return tf(t.getHours());
            break;
          case 'ss':
            return tf(t.getSeconds());
            break;
        }
      })
    },
    /**
     * 计算出相差天数
     * @param secondSub
     */
    formatTotalDateSub (secondSub) {
      var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
      var leave1 = secondSub % (24*3600) ;                // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
      var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
      var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3);
      return days + "天" + hours + "时" + minutes + "分" + seconds + '秒';
    }

  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container {
  padding: 0;
}
.examine_box{
  background-color: #1D6FE9!important;
  padding: 0.18rem!important;
  padding-left: 0!important;
  border-radius: 0.15rem!important;
  margin-top: 0.3rem!important;
}
.examine_box .van-col:first-child{
  color: #FFF!important;
  font-size: 0.45rem!important;
  text-align: center!important;
}
.examine_box .van-col:last-child{
  background-color: #FFF!important;
  border-radius: 0.15rem!important;
  overflow: hidden!important;
  .van-radio-group--horizontal{
    padding: 0.2rem 0;
    border-bottom: 1px solid #eee;
  }
}
/deep/.van-radio--horizontal{
  margin-left: 20px;
  margin-right: 0;
}
.submitButtonActive{
  width: 100%;
  margin: 0 auto;
}
.van-uploader {
  padding: 15PX;
}
/deep/ .van-nav-bar--fixed{
  background: url("../../../../static/images/lawEnforcement/head_bg.png") 100%;
}
/deep/ .van-nav-bar .van-icon{
  color: #ffffff;
}
/deep/ .van-nav-bar__title{
  color: #ffffff;
}
/deep/ .van-tabs__nav--complete{
  padding: 0;
  border: none;
  height: auto;
}
/deep/ .van-tabs__nav--card .van-tab{
  border: none;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: auto;
  margin-top: 10PX;
}
/deep/ .van-tabs__nav--card .van-tab.van-tab--active{
  background: transparent;
  .van-tab__text{
    width: 56PX;
    height: 56PX;
    line-height: 56PX;
  }
  .finish,.ongoing,.notStarted{
    padding: 15PX 0;
  }
}
/deep/ .van-tab__text{
  display: block;
  width: 44PX;
  height: 44PX;
  background: #FFF;
  border-radius: 50%;
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
  text-align: center;
  padding: 0;
  p{
    line-height: 1;
  }
}
.finish{
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  padding: 10PX 0;
  height: 100%;
}
.ongoing{
  border-radius: 50%;
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
  padding: 10PX 0;
  height: 100%;
}
.notStarted{
  padding: 10PX 0;
  height: 100%;
}
.typeBox{
  width: 44PX;
  height: 44PX;
  background: #ffffff;
  text-align: center;
  font-size: 14PX;
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  margin: 0 auto;
  padding: 10PX 0px;
  line-height: 1;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.noActive{
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
}
.doActive{
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
}
.active{
  width: 56PX;
  height: 56PX;
  padding: 15PX 0px;
}
/deep/ .van-radio--horizontal{
  margin-left: 0.32rem;
  margin-right: 0;
}
.peopleList{
  padding: 0 3%;
  margin-top: 10PX;
  .van-row{
    margin-bottom: 10PX;
    .van-col{
      text-align: center;
      font-size: 14PX;
    }
    &:first-child{
      .van-col{
        color: #1D6FE9;
      }
    }
  }
}
.cf{
  padding: 0 3%;
  margin-top: 20PX;
  margin-bottom: 20PX;
  .van-row{
    background: #F0F3F5;
    .van-col{
      padding: 5PX 0;
      font-size: 12PX!important;
      text-align: center;
      p{
        color: #1D6FE9;
      }
    }
    &:first-child{
      background: transparent;
    }
  }
}
.main_title{
  font-size: 0.4rem;
  color: #1D6FE9;
  margin: 0.2rem 6%;
  margin-top: 0;
  position: relative;
}
.main_box{
  width: 96%;
  margin: 0 auto;
  border-radius: 6PX;
  box-shadow: 0PX 3PX 6PX 0PX rgba(0,0,0,0.16);
  overflow: hidden;
  background-color: #FFF;
  margin-top: 10PX;
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
.submitButton{
  width: 80%;
  margin: 0 auto;
  background-color: #1D6FE9;
}

.addFamily{
  position: absolute;
  top: -2px;
  right: 0;
  border-radius: 50%;
}
.main_box2{
  width: 96%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 6PX;
  overflow: hidden;
  margin-top: 10PX;
  margin-bottom: 20PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  .van-col{
    height: 76PX;
    position: relative;
  }
  .van-row:nth-child(2n){
    background: rgba(29,111,233,0.1);
  }
  /deep/ .van-cell{
    background: transparent;
    padding: 10Px;
  }
  .bq{
    display: inline-block;
    padding: 4PX 10PX;
    border-radius: 5PX;
  }
  .index{
    background: #1D6FE9;
    color: #ffffff;
    text-align: center;
    width: 20PX;
    height: 20PX;
    line-height: 20PX;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .indexCenter{
    top: 0!important;
  }
  .indexBorder{
    width: 10PX;
    position: absolute;
    right: 0;
    top: calc(50% - 5PX);
    .yq{
      height: 10PX;
      width: 10PX;
      background: #C9C9C9;
      border-radius: 50%;
    }
    .ss{
      height: 33PX;
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
    .ssT{
      height: 33PX;
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
  }
}
.splcTit{
  font-size: 17PX;
  text-align: center;
  margin-top: 25PX;
  margin-bottom: 5PX;
}
</style>
