<template>
  <div>
    <el-dialog title="归档详情" :visible="showarchiveDetails" @close="cancel" :destroy-on-close="true" center>
      <div class="loading" v-if="flagLoadingS">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="案件信息" name="five"></el-tab-pane>
          <el-tab-pane label="申请人案件证据资料" name="first"></el-tab-pane>
          <!-- <el-tab-pane label="被申请人案件证据资料" name="second"></el-tab-pane> -->
          <el-tab-pane label="调解书" name="third"></el-tab-pane>
          <el-tab-pane label="案件视频" name="fourth" v-if="caseFilingData.mediationMethod == '1'"></el-tab-pane>
          <el-tab-pane label="庭审笔录" name="six" v-if="caseFilingData.mediationMethod == '1'"></el-tab-pane>
        </el-tabs>
        <div v-show="activeName == 'first'">

          <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 2"
            style="margin-top:10px;">
            <el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
          </div>
          <el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 2) == 0" description="暂无数据"></el-empty>
        </div>
        <!-- <div v-show="activeName=='second'">
            <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType==6" style="margin-top:10px;">
                 <el-link target="_blank" type="primary" :href="fileURL+item.annexPath">{{item.annexName}}</el-link>
             </div>
             <el-empty v-if="isNoData(detailsAwardNum.caseAttachList,6) == 0" description="暂无数据"></el-empty>
         </div> -->
        <div v-show="activeName == 'third'">
          <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 7" style="margin-top:10px;">
            <!-- <el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link> -->
            <span>签署前调解书:</span>
            <div style="color: blue; cursor: pointer" @click="fileDetil(item.onlyOfficeFileId, 2)">
              {{ item.annexName }}
            </div>
          </div>
          <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 13" style="margin-top:10px;">
            <span>签署后调解书:</span>
            <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath, 1)">
              {{ item.annexName }}
            </div>
          </div>
          <el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 7) == 0" description="暂无数据"></el-empty>
        </div>
        <div v-show="activeName == 'fourth'">
          <div style="margin-top:10px;" v-for="(item, index) in detailsAwardNum.caseAttachList"
            v-if="item.annexType == 5">
            <video style="background-color: #181717;width: 350px;height: 200px;margin: 10px;" :key="index"
              :src="fileURL + item.annexPath" controls="controls"></video>
          </div>
          <el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 5) == 0" description="暂无数据"></el-empty>
        </div>
        <div v-show="activeName == 'six'">
          <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 6" style="margin-top:10px;">
            <el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
          </div>
          <el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 6) == 0" description="暂无数据"></el-empty>
        </div>
        <div v-show="activeName == 'five'">
          <el-form :disabled="true" :model="detailsAwardNum" label-width="130px" class="demo-ruleForm">
            <el-row>
              <div style="display: inline-flex">
                <div class="infoIcon"></div>
                <div class="caseInfo">案件信息：</div>
              </div>
              <el-divider></el-divider>
              <el-col :span="24">
                <el-form-item label="申请人调解请求" prop="arbitratClaims" :rules="[
      {
        required: true,
        message: '申请人调解请求不能为空',
        trigger: 'blur',
      },
    ]">
                  <el-input v-model="detailsAwardNum.arbitratClaims" placeholder="请输入申请人调解诉求" type="textarea"
                    :autosize="{ minRows: 4, maxRows: 8 }" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="事实和理由" prop="facts" :rules="[
      {
        required: true,
        message: '事实和理由不能为空',
        trigger: 'blur',
      },
    ]">
                  <el-input v-model="detailsAwardNum.facts" placeholder="请输入事实和理由" type="textarea"
                    :autosize="{ minRows: 4, maxRows: 8 }" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="调解申请书:">
                  <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 3">
                    <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath, 1)">
                      {{ item.annexName }}
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="签署前调解书:">
                  <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 7">
                    <div style="color: blue; cursor: pointer" @click="fileDetil(item.onlyOfficeFileId, 2)">
                      {{ item.annexName }}
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="签署后调解书:">
                  <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 13">
                    <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath, 1)">
                      {{ item.annexName }}
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="调解结果:">
                  <el-link v-if="detailsAwardNum.mediaResult == 1">达成调解</el-link>
                  <el-link v-if="detailsAwardNum.mediaResult == 2">未达成调解</el-link>
                  <el-link v-if="detailsAwardNum.mediaResult == 3">未达成调解但不在争议</el-link>
                  <el-link v-if="detailsAwardNum.mediaResult == 4">未达成调解但同意引入仲裁</el-link>
                  <el-link v-if="detailsAwardNum.mediaResult == 5">达成和解</el-link>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="display: inline-flex">
                  <div class="infoIcon"></div>
                  <div class="caseInfo">双方信息：</div>
                </div>
                <el-divider></el-divider>
              </el-col>
              <div class="applicant" v-for="(item, index) in detailsAwardNum.affiliate.applicant" :key="item.key">
                <el-col :span="24">
                  <div style="display: inline-flex">
                    <div class="infoIcon"></div>
                    <div class="caseInfo">申请人</div>
                  </div>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="选择机构或自然人">
                    <el-radio-group v-model="item.applicant.organizeFlag">
                      <el-radio :label="0">自然人</el-radio>
                      <el-radio :label="1">机构</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label="机构名称" :prop="'affiliate.applicant.' + index + '.applicant.name'" :rules="[
      {
        required: true,
        message: '申请机构名称不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.name" placeholder="请输入申请机构名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="申请人" :prop="'affiliate.applicant.' + index + '.applicant.name'" :rules="[
      {
        required: true,
        message: '申请人名称不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.name" placeholder="请输入申请人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="是否为操作人" :prop="'affiliate.applicant.' + index + '.applicant.operatorFlag'"
                    :rules="[
      {
        required: true,
        message: '请选择是否为操作人',
        trigger: 'blur',
      },
    ]">
                    <el-select v-model="item.applicant.operatorFlag" placeholder="请选择" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label-width="140px" label="统一社会信用代码"
                    :prop="'affiliate.applicant.' + index + '.applicant.code'" :rules="[
      {
        required: true,
        message: '统一社会信用代码不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.code" placeholder="请输入统一社会信用代码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :prop="'affiliate.applicant.' + index + '.applicant.nationality'" label="国籍" :rules="[
      {
        required: true,
        message: '国籍不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-select v-model="item.applicant.nationality" placeholder="请选择国籍" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in nationalityList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item :prop="'affiliate.applicant.' + index + '.applicant.idType'" label="证件类型" :rules="[
      {
        required: true,
        message: '证件类型不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-select v-model="item.applicant.idType" placeholder="证件类型" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in idTypeList" :key="Number(item.dictValue)" :label="item.dictLabel"
                        :value="Number(item.dictValue)">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="证件号码" :prop="'affiliate.applicant.' + index + '.applicant.idCard'" :rules="[
      {
        required: true,
        message: '证件号码不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.idCard" placeholder="请输入申请人的证件号码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label-width="140px" label="出生年月："
                    :prop="'affiliate.applicant.' + index + '.applicant.birth'">
                    <el-date-picker disabled v-model="item.applicant.birth" type="date" placeholder="申请人出生年月日">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="性别：" :prop="'affiliate.applicant.' + index + '.applicant.sex'" :rules="[
      {
        required: true,
        message: '请选择性别',
      },
    ]">
                    <el-radio-group v-model="item.applicant.sex" disabled>
                      <el-radio :label="'0'">男</el-radio>
                      <el-radio :label="'1'">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="邮箱" :prop="'affiliate.applicant.' + index + '.applicant.email'" :rules="[
      {
        required: true,
        message: '申请人邮箱不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.email" placeholder="请输入申请人邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="申请人电话" :prop="'affiliate.applicant.' + index + '.applicant.phone'" :rules="detailsAwardNum.affiliate.nationality == 0 ? [
      {
        required: true,
        message: '申请人联系电话不能为空',
        trigger: 'blur',
      },
      {
        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ] : []">
                    <el-input v-model="item.applicant.phone" placeholder="请输入申请人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label="法定代表人" :prop="'affiliate.applicant.' + index + '.applicant.compLegalPerson'"
                    :rules="[
      {
        required: true,
        message: '法定代表人不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.compLegalPerson" placeholder="请输入法定代表人" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请人住所" :prop="'affiliate.applicant.' + index + '.applicant.home'" :rules="[
      {
        required: true,
        message: '申请人住所不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.home" placeholder="请输入申请人住所" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请人联系地址" :prop="'affiliate.applicant.' + index + '.applicant.address'" :rules="[
      {
        required: true,
        message: '申请人联系地址不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicant.address" placeholder="请输入申请人联系地址" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div style="display: inline-flex">
                    <div class="infoIcon"></div>
                    <div class="caseInfo">申请人代理人</div>
                  </div>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label="联系电话" :prop="'affiliate.applicant.' + index + '.applicantAgent.phone'" :rules="[
      {
        required: true,
        message: '代理人联系电话不能为空',
        trigger: 'blur',
      },
      {
        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicantAgent.phone" placeholder="请输入代理人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="联系电话" :prop="'affiliate.applicant.' + index + '.applicantAgent.phone'">
                    <el-input v-model="item.applicantAgent.phone" placeholder="请输入代理人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label="姓名" :prop="'affiliate.applicant.' + index + '.applicantAgent.name'" :rules="[
      {
        required: true,
        message: '代理人姓名不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicantAgent.name" placeholder="请输入代理人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="姓名" :prop="'affiliate.applicant.' + index + '.applicantAgent.name'">
                    <el-input v-model="item.applicantAgent.name" placeholder="请输入代理人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="是否为操作人" :prop="'affiliate.applicant.' + index + '.applicant.operatorFlag'">
                    <el-select v-model="item.applicantAgent.operatorFlag" placeholder="请选择" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 1">
                  <el-form-item label="邮箱" :prop="'affiliate.applicant.' + index + '.applicantAgent.email'" :rules="[
      {
        required: true,
        message: '代理人邮箱不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicantAgent.email" placeholder="请输入代理人邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.applicant.organizeFlag == 0">
                  <el-form-item label="邮箱" :prop="'affiliate.applicant.' + index + '.applicantAgent.email'" :rules="[
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.applicantAgent.email" placeholder="请输入代理人邮箱" />
                  </el-form-item>
                </el-col>
              </div>
              <div class="res" v-for="(item, index) in detailsAwardNum.affiliate.res" :key="index">
                <el-col :span="24">
                  <div style="display: inline-flex">
                    <div class="infoIcon"></div>
                    <div class="caseInfo" style="margin-right: 40px;">被申请人</div>
                  </div>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="选择机构或自然人">
                    <el-radio-group v-model="item.res.organizeFlag">
                      <el-radio :label="0">自然人</el-radio>
                      <el-radio :label="1">机构</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="被申请人" :prop="'affiliate.res.' + index + '.res.name'" :rules="[
      {
        required: true,
        message: '被申请人姓名不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.name" placeholder="请输入被申请人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
                  <el-form-item label="机构名称" :prop="'affiliate.res.' + index + '.res.name'" :rules="[
      {
        required: true,
        message: '机构名称不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.name" placeholder="请输入机构名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="是否为操作人" :prop="'affiliate.res.' + index + '.res.operatorFlag'">
                    <el-select v-model="item.res.operatorFlag" placeholder="请选择" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :prop="'affiliate.res.' + index + '.res.nationality'" label="国籍" :rules="[
      {
        required: true,
        message: '国籍不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-select v-model="item.res.nationality" placeholder="请选择国籍" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in nationalityList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item :prop="'affiliate.res.' + index + '.res.idType'" label="证件类型" :rules="[
      {
        required: true,
        message: '证件类型不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-select v-model="item.res.idType" placeholder="证件类型" auto-complete="off" style="width: 100%;">
                      <el-option v-for="item in idTypeList" :key="Number(item.dictValue)" :label="item.dictLabel"
                        :value="Number(item.dictValue)">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="联系电话" :prop="'affiliate.res.' + index + '.res.phone'" :rules="[
      {
        required: true,
        message: '被申请人联系电话不能为空',
        trigger: 'blur',
      },
      {
        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.phone" placeholder="请输入被申请人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="150px" label="住所" :prop="'affiliate.res.' + index + '.res.home'" :rules="[
      {
        required: true,
        message: '被申请人申请人住所不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.home" placeholder="请输入被申请人申请人住所" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系地址" :prop="'affiliate.res.' + index + '.res.address'" :rules="[
      {
        required: true,
        message: '联系地址不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.address" placeholder="请输入联系地址" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱" :prop="'affiliate.res.' + index + '.res.email'" :rules="[
      {
        required: true,
        message: '被申请人邮箱不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.email" placeholder="请输入被申请人邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="身份证号" :prop="'affiliate.res.' + index + '.res.idCard'"
                    :rules="[
      {
        required: true,
        message: '被申请人身份证号不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
        message: '请输入正确的身份证号码',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.idCard" @blur="handleBlur(index)" placeholder="请输入被申请人身份证号" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
                  <el-form-item label-width="140px" label="统一社会信用代码" :prop="'affiliate.res.' + index + '.res.code'"
                    :rules="[
      {
        required: true,
        message: '统一社会信用代码不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.res.code" placeholder="请输入统一社会信用代码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
              <el-form-item label="法定代表人" :prop="'affiliate.res.' + index + '.res.compLegalPerson'" :rules="[
      {
        required: true,
        message: '法定代表人不能为空',
        trigger: 'blur',
      },
    ]">
                <el-input v-model="item.res.compLegalPerson" placeholder="请输入法定代表人" />
              </el-form-item>
            </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="出生年月：" :prop="'affiliate.res.' + index + '.res.birth'">
                    <el-date-picker disabled v-model="item.res.birth" type="date" placeholder="被申请人出生年月日">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="被申请人性别：" :prop="'affiliate.res.' + index + '.res.sex'" :rules="[
      {
        required: true,
        message: '请选择性别',
      },
    ]">
                    <el-radio-group v-model="item.res.sex" disabled>
                      <el-radio :label="'0'">男</el-radio>
                      <el-radio :label="'1'">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <div style="display: inline-flex">
                    <div class="infoIcon"></div>
                    <div class="caseInfo">被申请人代理人</div>
                  </div>
                  <el-divider></el-divider>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
                  <el-form-item label="联系电话" :prop="'affiliate.res.' + index + '.resAgent.phone'" :rules="[
      {
        required: true,
        message: '代理人联系电话不能为空',
        trigger: 'blur',
      },
      {
        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.resAgent.phone" placeholder="请输入代理人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="联系电话" :prop="'affiliate.res.' + index + '.resAgent.phone'">
                    <el-input v-model="item.resAgent.phone" placeholder="请输入代理人联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
                  <el-form-item label="姓名" :prop="'affiliate.res.' + index + '.resAgent.name'" :rules="[
      {
        required: true,
        message: '代理人姓名不能为空',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.resAgent.name" placeholder="请输入代理人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="是否为操作人" :prop="'affiliate.res.' + index + '.resAgent.operatorFlag'">
                    <el-select v-model="item.resAgent.operatorFlag" placeholder="请选择" auto-complete="off"
                      style="width: 100%;">
                      <el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">

                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="姓名" :prop="'affiliate.res.' + index + '.resAgent.name'">
                    <el-input v-model="item.resAgent.name" placeholder="请输入代理人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 1">
                  <el-form-item label="邮箱" :prop="'affiliate.res.' + index + '.resAgent.email'" :rules="[
      {
        required: true,
        message: '代理人邮箱不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.resAgent.email" placeholder="请输入代理人邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="item.res.organizeFlag == 0">
                  <el-form-item label="邮箱" :prop="'affiliate.res.' + index + '.resAgent.email'" :rules="[
      {
        pattern:
          /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ]">
                    <el-input v-model="item.resAgent.email" placeholder="请输入代理人邮箱" />
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  caseApplicationSelectById,
  getIdType
} from "@/api/caseManagement/caseManagement.js";
export default {
  props: ["showarchiveDetails", "detailsAwardNum", "videoList", "flagLoadingS", "trialTranscripts", "caseFilingData"],
  components: {

  },
  data() {
    return {
      activeName: 'five',
      fileURL: window.location.origin + "/API",
      noData: false,
      filedata: {
        annexType: 2,
      },
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      showEvidence: false,
      showmediate: false,
      showConciliation: false,
      roleTypeList: [
        {
          value: '否',
          id: 0
        },
        {
          value: '是',
          id: 1
        }
      ],
      nationalityList: [
        {
          value: '境内',
          id: 0
        },
        {
          value: '境外',
          id: 1
        }
      ],
      idTypeList: [

      ]
    };
  },
  watch: {
    showarchiveDetails: {
      handler(val) {
        if (val) {
          this.getIdTypeFn();
          this.activeName = 'five'
          this.caseApplicationSelectByIdFn(this.caseFilingData.id)
          this.showEvidence = false,
            this.showmediate = false,
            this.showConciliation = false
          // this.detailsAwardNum.affiliate.respondentSex = Number(this.detailsAwardNum.affiliate.respondentSex)
        }
      },
    },

  },
  created() {

  },
  methods: {
    isNoData(data, type) {
      let resNumber = 0
      if (data) {
        let list = data.filter(item => item.annexType == type)
        if (list) {
          resNumber = list.length
        }
      }
      return resNumber
    },
    /** 获取证件类型 */
    getIdTypeFn() {
      getIdType().then(res => {
        this.idTypeList = res.data;
      })
    },
    /** 根据案件id获取对应信息 */
    caseApplicationSelectByIdFn(data) {
      caseApplicationSelectById({ id: data }).then((res) => {
        res.data.caseAttachList.forEach(item => {
          if (item.annexType == 2) {
            this.showmediate = true
          } else if (item.annexType == 3) {
            this.showEvidence = true
          } else if (item.annexType == 7) {
            this.showConciliation = true
          }
        });
      });
    },
    /** 查看证据 */
    fileDetil(val, flag) {
      if (flag == 1) {
        window.open(this.fileURL + val);
      } else if (flag == 2) {
        this.$router.push({ path: '/onlyoffice', query: { id: val, flag: 0 } })
      }

    },
    /** 文件上传地址 */
    UploadUrl() {
      return window.location.origin + "/API/common/upload";
    },
    /**文件上传成功*/
    handlSuccess(res, file) {
      this.detailsAwardNum.caseAttachList.push({
        annexId: res.annexId,
      });
    },
    /**文件超出个数限制时的钩子*/
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      this.caseAttachListArr = this.caseAttachListArr.filter(
        (item) => item.annexId != file.annexId
      );
    },
    handlePreview(file) {
      window.open(
        window.location.origin + "/API" + file.certificatePath,
        "_blank"
      );
    },
    handleClick(tab, event) {

    },

    cancel() {
      this.$emit("cancelDetail");
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px !important;
  overflow: auto !important;
}

::v-deep .el-dialog {
  width: 925px;
  background: #ffffff;
  border-radius: 20px;
}

.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-icon-loading {
    font-size: 50px;
  }
}
</style>