/* eslint-disable */
<template>
  <BaseContainer class="auditRecord">
    <template slot="search-container">
      <el-form :inline="true">
        <div style="margin-bottom: 15px;">
          <!-- 研究方案号 -->
          <el-form-item :label="$t('trials:auditRecord:table:researchNo')">
            <el-input v-model="ResearchProgramNo" disabled />
          </el-form-item>
          <!-- 中心 -->
          <el-form-item :label="$t('trials:auditRecord:table:siteNo')">
            <el-select v-model="searchData.SiteId" clearable filterable>
              <el-option
                v-for="(item,index) of siteOptions"
                :key="index"
                :label="item.TrialSiteCode"
                :value="item.SiteId"
              />
            </el-select>
          </el-form-item>
          <!-- 受试者 -->
          <el-form-item :label="$t('trials:auditRecord:table:subject')">
            <el-input v-model="searchData.SubjectInfo" />
          </el-form-item>
          <!-- 访视 -->
          <el-form-item :label="$t('trials:auditRecord:table:visit')">
            <el-select
              v-model="searchData.VisitPlanInfo"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) of visitPlanOptions"
                :key="index"
                :label="item.VisitName"
                :value="item.VisitNum"
              />
              <el-option
                key="Other"
                label="Out of Plan"
                value="1.11"
              />
            </el-select>
          </el-form-item>
          <!-- 阅片标准 -->
          <el-form-item :label="$t('trials:auditRecord:table:criterion')">
            <el-select v-model="searchData.TrialReadingCriterionId" clearable filterable>
              <el-option
                v-for="(item,index) of trialCriterionList"
                :key="index"
                :label="item.TrialReadingCriterionName"
                :value="item.TrialReadingCriterionId"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <!-- 功能模块 -->
          <el-form-item :label="$t('trials:auditRecord:table:funcModule')">
            <el-select v-model="searchData.ModuleType" style="width:120px"  clearable @change="getModuleTypeDescriptionList">
              <el-option v-for="item of $d.ModuleType" :value="item.id" :label="item.label" :key="`ModuleType${item.value}`"/>
            </el-select>
          </el-form-item>
          <!-- 操作名 -->
          <el-form-item :label="$t('trials:auditRecord:table:operationName')">
            <el-select v-model="searchData.Description" style="width:120px"  clearable>
              <el-option v-for="item of DescriptionOptions" :value="item" :label="item" :key="item"/>
            </el-select>
          </el-form-item>
          <!-- 操作人 -->
          <el-form-item :label="$t('trials:auditRecord:table:operator')">
            <el-input v-model="searchData.OpByUserName" style="width:120px" />
          </el-form-item>
          <!-- 操作时间 -->
          <el-form-item :label="$t('trials:auditRecord:table:operateTime')">
            <el-date-picker
              v-model="timeList"
              @change="changeTimeList"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange">
            </el-date-picker>
          </el-form-item>
          <!--<el-form-item label="阅片人: ">-->
          <!--<el-select v-model="searchData.ModuleType" placeholder="模块" clearable>-->
          <!--<el-option v-for="item of dict.type.ModuleType" :value="item.label" :label="item.raw.ValueCN"></el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!-- 是否签名 -->
          <el-form-item :label="$t('trials:auditRecord:table:isSign')">
            <el-select v-model="searchData.IsSign" style="width:120px"  clearable>
              <el-option v-for="item of $d.YesOrNo" v-show="item.raw.ValueCN !== '无'" :label="item.label" :value="item.value" :key="`IsSign${item.value}`"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch"> {{ $t('common:button:search') }}</el-button>
            <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset"> {{ $t('common:button:reset') }}</el-button>
          </el-form-item>
        </div>

      </el-form>
    </template>
    <template slot="main-container">
      <el-table
        v-adaptive="{bottomOffset:60}"
        v-loading="loading"
        :data="list"
        @sort-change="handleSortChange"
        stripe
        height="100"
      >
        <el-table-column type="index" width="40" fixed="left" align="left" />
        <!-- 研究方案号 -->
        <el-table-column
          prop="ResearchProgramNo"
          width="120"
          :label="$t('trials:auditRecord:table:researchNo')"
          fixed="left"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 中心编号 -->
        <el-table-column
          prop="SiteCode"
          min-width="100"
          :label="$t('trials:auditRecord:table:siteNo')"
          fixed="left"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 受试者 -->
        <el-table-column
          prop="SubjectCode"
          min-width="100"
          :label="$t('trials:auditRecord:table:subject')"
          fixed="left"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 访视 -->
        <el-table-column
          prop="VisitName"
          min-width="100"
          :label="$t('trials:auditRecord:table:visit')"
          fixed="left"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 任务名称 -->
        <el-table-column
            prop="TaskName"
            min-width="130"
            :label="$t('trials:auditRecord:table:taskName')"
            fixed="left"
            show-overflow-tooltip
            sortable="custom"
        />
        <!-- 盲态任务标识 -->
        <el-table-column
          prop="BlindName"
          min-width="170"
          :label="$t('trials:auditRecord:table:taskBlindName')"
          fixed="left"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 阅片标准 -->
        <el-table-column
          prop="TrialReadingCriterionName"
          min-width="100"
          :label="$t('trials:auditRecord:table:criterion')"
          show-overflow-tooltip
        />
        <!-- 功能模块 -->
        <el-table-column
          prop="ModuleTypeName"
          width="160"
          :label="$t('trials:auditRecord:table:funcModule')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{$fd('ModuleType', scope.row.ModuleTypeId, 'id')}}
          </template>
        </el-table-column>
        <!-- 操作名 -->
        <el-table-column
          prop="Description"
          width="160"
          :label="$t('trials:auditRecord:table:operationName')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{$i18n.locale === 'zh' ? scope.row.DescriptionCN : scope.row.Description}}
          </template>
        </el-table-column>
        <!-- 修改原因 -->
        <el-table-column
          prop="Reason"
          min-width="100"
          :label="$t('trials:auditRecord:table:modifyReason')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 是否电签 -->
        <el-table-column
          prop="IsSign"
          min-width="120"
          align="center"
          :label="$t('trials:auditRecord:table:isSign')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <div>
              <el-tooltip v-if="scope.row.IsSign" class="item" effect="dark" placement="top">
                <div slot="content">
                  {{ scope.row.SignText }}
                </div>
                <el-tag type="success">{{ $fd('YesOrNo', scope.row.IsSign) }}</el-tag>
              </el-tooltip>
              <el-tag v-else type="info">{{ $fd('YesOrNo', scope.row.IsSign) }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- 操作人 -->
        <el-table-column
          prop="CreateUserRealName"
          min-width="120"
          :label="$t('trials:auditRecord:table:operator')"
          show-overflow-tooltip
          sortable="custom"
        >
          <!-- <template slot-scope="scope">
            <div>
              {{ scope.row.UserLastName }}/{{ scope.row.UserFirstName }}
            </div>
          </template> -->
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column
          prop="CreateUserName"
          min-width="120"
          :label="$t('trials:auditRecord:table:userName')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 角色 -->
        <el-table-column
          prop="RoleName"
          min-width="100"
          :label="$t('trials:auditRecord:table:role')"
          show-overflow-tooltip
          sortable="custom"
        />
        <!-- 操作时间 -->
        <el-table-column
          prop="CreateTime"
          min-width="160"
          :label="$t('trials:auditRecord:table:operateTime')"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop="IP"
          min-width="100"
          label="IP"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop=""
          min-width="150"
          fixed="right"
          :label="$t('common:action:action')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <!-- 详情 -->
            <el-button type="text" @click="lookDetails(scope.row)">
              {{$t('trials:auditRecord:action:detail')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
      <base-model :config="model_cfg">
        <template slot="dialog-body">
          <div style="display: flex;align-items: center;justify-content: flex-start;">
            <!-- 同一对象历史操作 -->
            <el-button size="small" style="position: relative;top: -15px;" type="primary" @click="lookAssociated(1)">{{$t('trials:auditRecord:title:historicalOperations')}}</el-button>
            <!-- 同一对象关联操作 -->
            <el-button size="small" style="position: relative;top: -15px;" type="primary" @click="lookAssociated(0)">{{$t('trials:auditRecord:title:relationOperations')}}</el-button>
          </div>
          <el-table
            v-if="auditData.length > 0"
            :data="auditData"
            border
            style="width: 100%"
            size="small"
          >
          <!-- 字段名 -->
            <el-table-column
              prop="Enum"
              :label="$t('trials:auditRecord:title:fieldName')"
              show-overflow-tooltip
            />
            <!-- OptType === 'Add' ? '值' : OptType === 'Delete' ? '删除前' : '修改前' -->
            <el-table-column
              v-if="OptType !== 'Add' && OptType !== 'Upload' && OptType !== 'Init'"
              prop="oldValue"
              :label="OptType === 'Add' ? $t('trials:auditRecord:title:fieldValue') : OptType === 'Delete' ? $t('trials:auditRecord:title:beforeDeletion') : $t('trials:auditRecord:title:beforeModification')"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                 <span>
                  <!-- 查看详情 -->
                  <a v-if="scope.row.DataType === 'Link' || scope.row.DataType === 'Router'" target="_blank" :href="scope.row.oldValue">
                    {{$t('trials:auditRecord:title:viewDetail')}}
                  </a>
                   <viewer v-else-if="(scope.row.DataType === 'Image' || scope.row.DataType === 'ImageList') && scope.row.oldValue" :ref="scope.row.oldValue" :images="imagesList">
                    <!-- 查看图片 -->
                     <span style="color:#409eff;cursor: pointer"  @click="openImage(scope.row.oldValue)">{{$t('trials:auditRecord:title:viewImage')}}{{scope.row.oldValue instanceof Array ? `(${scope.row.oldValue.length})` : ''}}</span>
                       <img v-if="scope.row.DataType === 'ImageList'" v-for="item of scope.row.oldValue" :src="item" v-show="false" crossorigin="anonymous" alt="">
                     <img v-if="scope.row.DataType === 'Image'" :src="scope.row.oldValue" v-show="false" crossorigin="anonymous" alt="">
                   </viewer>
                  <span v-else>
                    {{ scope.row.oldValue }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <!-- OptType === 'Add' || OptType === 'Init' ? '值' : OptType === 'Delete' ? '删除后' : '修改后' -->
            <el-table-column
              prop="newValue"
              :label="OptType === 'Add' || OptType === 'Init' ? $t('trials:auditRecord:title:fieldValue') : OptType === 'Delete' ? $t('trials:auditRecord:title:afterDeletion') : $t('trials:auditRecord:title:afterModification')"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.newValue !== scope.row.oldValue ? '#f66' : null }">
                  <!-- 查看详情 -->
                  <a v-if="scope.row.DataType === 'Link' || scope.row.DataType === 'Router'" target="_blank" :href="scope.row.newValue">
                    {{$t('trials:auditRecord:title:viewDetail')}}
                  </a>
                   <viewer v-else-if="(scope.row.DataType === 'Image' || scope.row.DataType === 'ImageList') && scope.row.newValue" :ref="scope.row.newValue" :images="imagesList">
                    <!-- 查看图片 -->
                     <span style="color:#409eff;cursor: pointer"  @click="openImage(scope.row.newValue)">{{$t('trials:auditRecord:title:viewImage')}}{{scope.row.newValue instanceof Array ? `(${scope.row.newValue.length})` : ''}}</span>
                     <img v-if="scope.row.DataType === 'ImageList'" v-for="item of scope.row.newValue" :src="item" v-show="false" crossorigin="anonymous" alt="">
                     <img v-if="scope.row.DataType === 'Image'" :src="scope.row.newValue" v-show="false" crossorigin="anonymous" alt="">
<!--                     <img :src="scope.row.newValue" v-show="false" crossorigin="anonymous" alt="">-->
                   </viewer>
                  <span v-else>{{ scope.row.newValue }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableListData"
            v-if="tableListData.length > 0"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column
              v-for="item of tableList"
              :prop="item.ColumnValue"
              :label="item.IsMerge ? item.MergeColumnName : item.headName"
              align="center"
              show-overflow-tooltip
            >
              <template v-if="!item.IsMerge" slot-scope="scope">
                <viewer v-if="item.IsPicture" :images="imagesList" :ref="scope.row[item.ColumnValue]">
                  <!-- 查看图片 -->
                  <span style="color:#409eff;cursor: pointer"  @click="openImage(scope.row[item.ColumnValue])">{{$t('trials:auditRecord:title:viewImage')}}</span>
                  <img :src="scope.row[item.ColumnValue]" v-show="false" crossorigin="anonymous" alt="">
                </viewer>
                <span v-else>{{scope.row[item.ColumnValue]}}</span>
              </template>
              <el-table-column
                v-if="item.IsMerge"
                v-for="(ite, index) of item.ChildrenList"
                :prop="ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue"
                :label="ite.headName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <viewer v-if="item.IsPicture" :images="imagesList" :ref="scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue]">
                    <!-- 查看图片 -->
                    <span style="color:#409eff;cursor: pointer" @click="openImage(scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue])">
                      {{$t('trials:auditRecord:title:viewImage')}}
                    </span>
                    <img :src="scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue]" v-show="false" crossorigin="anonymous" alt="">
                  </viewer>
                  <span v-else>{{scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue]}}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div v-if="otherData.length > 0" style="margin-top: 20px;margin-bottom: 10px;">
            <!-- 签名信息: -->
            {{$t('trials:auditRecord:title:signInfo')}}
          </div>
          <div v-if="otherData.length > 0" style="color:#f66;font-size: 12px">
            {{otherData[0].Value}}
          </div>
        </template>
        <template slot="dialog-footer">
          <!-- 关闭 -->
          <el-button size="small" type="primary" @click="model_cfg.visible = false">
            {{$t('common:button:close')}}
          </el-button>
        </template>
      </base-model>
      <!-- 新增/编辑项目 -->
      <el-dialog
        v-if="model_cfg2.visible"
        :visible.sync="model_cfg2.visible"
        :title="model_cfg2.title"
        :fullscreen="true"
        append-to-body
        custom-class="base-dialog-wrapper"
      >
        <el-table
            v-adaptive="{bottomOffset:300}"
            v-loading="loading"
            :data="list2"
            stripe
            height="100"
          >
            <el-table-column type="index" width="40" align="left" />
            <!-- 研究方案号 -->
            <el-table-column
              prop="ResearchProgramNo"
              min-width="90"
              :label="$t('trials:auditRecord:table:researchNo')"
              show-overflow-tooltip
            />
            <!-- 中心编号 -->
            <el-table-column
              prop="SiteCode"
              min-width="100"
              :label="$t('trials:auditRecord:table:siteNo')"
              show-overflow-tooltip
            />
            <!-- 受试者 -->
            <el-table-column
              prop="SubjectCode"
              min-width="100"
              :label="$t('trials:auditRecord:table:subject')"
              show-overflow-tooltip
            />
            <!-- 访视 -->
            <el-table-column
              prop="VisitName"
              min-width="100"
              :label="$t('trials:auditRecord:table:visit')"
              show-overflow-tooltip
            />
            <!-- 任务名称 -->
            <el-table-column
                prop="TaskName"
                min-width="100"
                :label="$t('trials:auditRecord:table:taskName')"
                show-overflow-tooltip
                sortable="custom"
            />
            <!-- 盲态任务标识 -->
            <el-table-column
                prop="BlindName"
                min-width="150"
                :label="$t('trials:auditRecord:table:taskBlindName')"
                show-overflow-tooltip
                sortable="custom"
            />
            <!-- 阅片标准 -->
            <el-table-column
              prop="TrialReadingCriterionName"
              min-width="100"
              :label="$t('trials:auditRecord:table:criterion')"
              show-overflow-tooltip
            />
            <!-- 功能模块 -->
            <el-table-column
              prop="ModuleTypeName"
              min-width="100"
              :label="$t('trials:auditRecord:table:funcModule')"
              show-overflow-tooltip
            />
            <!-- 操作名 -->
            <el-table-column
              prop="Description"
              min-width="140"
              :label="$t('trials:auditRecord:table:operationName')"
              show-overflow-tooltip
            />
            <!-- 修改原因 -->
            <el-table-column
              prop="Reason"
              min-width="100"
              :label="$t('trials:auditRecord:table:modifyReason')"
              show-overflow-tooltip
            />
            <!-- 是否电签 -->
            <el-table-column
              prop="IsSign"
              min-width="90"
              align="center"
              :label="$t('trials:auditRecord:table:isSign')"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div>
                  <el-tooltip v-if="scope.row.IsSign" class="item" effect="dark" placement="top">
                    <div slot="content">
                      {{ scope.row.SignText }}
                    </div>
                    <el-tag type="success">{{ $fd('YesOrNo', scope.row.IsSign) }}</el-tag>
                  </el-tooltip>
                  <el-tag v-else type="info">{{ $fd('YesOrNo', scope.row.IsSign) }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <!-- 操作人 -->
          <el-table-column
            prop="CreateUserRealName"
            min-width="80"
            :label="$t('trials:auditRecord:table:operator')"
            show-overflow-tooltip
          >
            <!-- <template slot-scope="scope">
              <div>
                {{ scope.row.UserLastName }}/{{ scope.row.UserFirstName }}
              </div>
            </template> -->
          </el-table-column>
          <!-- 用户名 -->
          <el-table-column
            prop="CreateUserName"
            min-width="80"
            :label="$t('trials:auditRecord:table:userName')"
            show-overflow-tooltip
          />
          <!-- 角色 -->
          <el-table-column
            prop="RoleName"
            min-width="70"
            :label="$t('trials:auditRecord:table:role')"
            show-overflow-tooltip
          />
          <!-- 操作时间 -->
            <el-table-column
              prop="CreateTime"
              min-width="140"
              :label="$t('trials:auditRecord:table:operateTime')"
              show-overflow-tooltip
            />
            <el-table-column
              prop="IP"
              min-width="100"
              label="IP"
              show-overflow-tooltip
            />
            <el-table-column
              prop=""
              min-width="150"
              :label="$t('common:action:action')"
              show-overflow-tooltip
              sortable="custom"
            >
              <template slot-scope="scope">
                <!-- 详情 -->
                <el-button type="text" @click="lookDetails2(scope.row)">
                  {{$t('trials:auditRecord:action:detail')}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>
      <base-model :config="model_cfg3">
        <template slot="dialog-body">
          <el-table
            v-if="auditData2.length > 0"
            :data="auditData2"
            border
            style="width: 100%"
            size="small"
          >
          <!-- 字段名 -->
            <el-table-column
              prop="Enum"
              :label="$t('trials:auditRecord:title:fieldName')"
              show-overflow-tooltip
            />
            <!-- OptType === 'Add' ? '值' : OptType === 'Delete' ? '删除前' : '修改前' -->
            <el-table-column
              v-if="OptType !== 'Add' && OptType !== 'Upload' && OptType !== 'Init'"
              prop="oldValue"
              :label="OptType === 'Add' ? $t('trials:auditRecord:title:fieldValue') : OptType === 'Delete' ? $t('trials:auditRecord:title:beforeDeletion') : $t('trials:auditRecord:title:beforeModification')"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  <a v-if="scope.row.DataType === 'Link' || scope.row.DataType === 'Router'" target="_blank" :href="scope.row.oldValue">{{scope.row.oldValue}}</a>
                  <span v-else>
                    {{ scope.row.oldValue }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <!-- OptType === 'Add' || OptType === 'Init' ? '值' : OptType === 'Delete' ? '删除后' : '修改后' -->
            <el-table-column
              prop="newValue"
              :label="OptType === 'Add' || OptType === 'Init' ? $t('trials:auditRecord:title:fieldValue') : OptType === 'Delete' ? $t('trials:auditRecord:title:afterDeletion') : $t('trials:auditRecord:title:afterModification')"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.newValue !== scope.row.oldValue ? '#f66' : null }">
                  <a v-if="scope.row.DataType === 'Link' || scope.row.DataType === 'Router'" target="_blank" :href="scope.row.newValue">{{scope.row.newValue}}</a>
                  <span v-else>{{ scope.row.newValue }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-if="tableListData.length > 0"
            :data="tableListData"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column
              v-for="item of tableList"
              :prop="item.ColumnValue"
              :label="item.IsMerge ? item.MergeColumnName : item.headName"
              align="center"
              show-overflow-tooltip
            >
              <el-table-column
                v-if="item.IsMerge"
                v-for="(ite, index) of item.ChildrenList"
                :prop="ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue"
                :label="ite.headName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <!-- 查看图片 -->
                  <span v-if="ite.IsPicture" @click="openImage(scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue])">
                    {{$t('trials:auditRecord:title:viewImage')}}
                  </span>
                  <span v-else>{{scope.row[ite.ListName ? ite.ListName + ite.ColumnValue + index : ite.ColumnValue]}}</span>
                </template>
              </el-table-column>
              <template v-else slot-scope="scope">
                <!-- 查看图片 -->
                <span v-if="item.IsPicture" @click="openImage(scope.row[item.ColumnValue])">
                  {{$t('trials:auditRecord:title:viewImage')}}
                </span>
                <span v-else>{{scope.row[item.ColumnValue]}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="otherData.length > 0" style="margin-top: 20px;margin-bottom: 10px;">
            <!-- 签名信息: -->
            {{$t('trials:auditRecord:title:signInfo')}}
          </div>
          <div v-if="otherData.length > 0" style="color:#f66;font-size: 12px">
            {{otherData[0].Value}}
          </div>
        </template>
        <template slot="dialog-footer">
          <!-- 关闭 -->
          <el-button size="small" type="primary" @click="model_cfg3.visible = false">
             {{$t('common:button:close')}}
          </el-button>
        </template>
      </base-model>
<!--      <base-model :config="model_cfg4">-->
<!--        <template slot="dialog-body">-->

<!--        </template>-->
<!--        <template slot="dialog-footer">-->
<!--          <el-button size="small" type="primary" @click="model_cfg4.visible = false; openImageUrl = null">关闭</el-button>-->
<!--        </template>-->
<!--      </base-model>-->
<!--      <div v-viewer v-if="isViewer">-->
<!--        <img-->
<!--            :src="openImageUrl"-->
<!--            style="width: 50px;height: 50px; cursor:pointer">-->
<!--      </div>-->
    </template>
  </BaseContainer>
</template>

<script>
import {
  getTrialSiteSelect,
  getTrialVisitStageSelect,
  getTrialCriterionList
} from '@/api/trials'
import { getInspectionList, getInspectionJsonDataList } from '@/api/trials/inspection'
import { getFrontAuditConfigList, getAuditConfigChildList, getModuleTypeDescriptionList, setInspectionEnumValue } from '@/api/dictionary/checkConfig'
import Pagination from '@/components/Pagination'
import BaseContainer from '@/components/BaseContainer'
import BaseModel from '@/components/BaseModel'
import { getToken } from '@/utils/auth'

export default {
  components: { BaseContainer, Pagination, BaseModel },
  dicts: ['OptType', 'ModuleType', 'ChildrenType'],
  data() {
    const searchDataDefault = () => {
      return {
        SortField: '',
        Asc: false,
        PageIndex: 1,
        PageSize: 20,
        ModuleType: null,
        BlindName: null,
        TrialId: this.$route.query.trialId,
        SiteId: null,
        SubjectId: null,
        SubjectInfo: null,
        SubjectVisitId: null,
        VisitPlanInfo: null,
        OptType: null,
        ChildrenType: null,
        Reason: null,
        IsSign: null,
        StartTime: null,
        EndTime: null,
        Description: null,
        OpByUserName: null,
        BatchId: null,
        TrialReadingCriterionId: null
      }
    }
    return {
      isViewer: true,
      otherData:[],
      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true },
      model_cfg2: { visible: false, showClose: true, width: '1000px', title: this.$t('trials:auditRecord:title:viewRelationOperations'), appendToBody: true },//'查看关联操作'
      model_cfg3: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true },
      model_cfg4: { visible: false, showClose: true, width: '600px', title: this.$t('trials:auditRecord:title:viewImage'), appendToBody: true },//查看图片
      total: 0,
      loading: false,
      searchData: searchDataDefault(),
      ResearchProgramNo: null,
      list: [],
      list2: [],
      isOpen: false,
      typeConfigList: [],
      DescriptionOptions: [],
      auditData: [],
      auditData2: [],
      siteOptions: [],
      visitPlanOptions: [],
      OptType: null,
      trialId: this.$route.query.trialId,
      configList2: [],
      otherData2: [],
      timeList: [],
      tableList: [],
      tableListData: [],
      trialCriterionList: [],
      openImageUrl: null,
      $viewer: null,
      imagesList: []
    }
  },
  mounted() {
    this.ResearchProgramNo = this.$route.query.researchProgramNo
    this.getSite()
    this.getVisitPlanOptions()
    this.getTrialCriterionList()
    this.getList()
  },
  methods: {
    openImage(url) {
      console.log(url)
      if (url instanceof Array) {
        this.imagesList = url
      } else {
        this.imagesList = [url]
      }
      if(this.$refs[url][0]) {
        this.$refs[url][0].$viewer.show()
      } else {
        this.$refs[url].$viewer.show()
      }
    },
    getTrialCriterionList() {
      getTrialCriterionList(this.trialId, false).then(res => {
        this.trialCriterionList = res.Result
      }).catch(() => {})
    },
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    },
    changeTimeList() {
      if (this.timeList) {
        this.searchData.StartTime = this.timeList[0]
        this.searchData.EndTime = this.timeList[1]
      } else {
        this.searchData.StartTime = null
        this.searchData.EndTime = null
      }

    },
    getModuleTypeDescriptionList(v) {
      this.searchData.Description = null
      getModuleTypeDescriptionList( v ).then(res => {
        this.DescriptionOptions = res.Result
      })
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then(res => {
        this.siteOptions = res.Result
      })
    },
    // 获取访视下拉框数据
    getVisitPlanOptions() {
      getTrialVisitStageSelect(this.trialId)
        .then((res) => {
          this.visitPlanOptions = res.Result
        })
    },
    toTree(arr, ParentId) {
      function loop(ParentId) {
        const res = []
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i]
          item.hasChildren = false
          if (item.ParentId !== ParentId) {
            continue
          }
          item.Children = loop(item.Id)
          res.push(item)
        }
        return res
      }
      return loop(ParentId)
    },
    formatting(config, obj, upObj, parentRow, row, auditData) {
      this.tableList = []
      this.tableListData = []
      this[auditData] = []
      config.forEach(v => {
        var item
        if (!v.IsEnable) return
        if (v.IsShowByTrialConfig) {
          if (!parentRow[v.TrialConfigRelyFieldName]) return
        }
        if (v.IsTableFiled) {
          if (obj[v.TableFiledName] && obj[v.TableFiledName].length > 0) {
            obj[v.TableFiledName].forEach((o, i) => {
              let uo = upObj[v.TableFiledName][i]
              if (row.OptType === 'Add' || row.OptType === 'Init') {
                item = {
                  newValue: o[v.Code] ? (o[v.Code] ? o[v.Code] : '--') : '--',
                  oldValue: ''
                }
              } else if (row.OptType === 'Delete') {
                item = {
                  oldValue: o[v.Code] ? (o[v.Code] ? o[v.Code] : '--') : '--',
                  newValue: '--'
                }
              } else {
                item = {
                  newValue: o[v.Code] ? (o[v.Code] ? o[v.Code] : '--') : '--',
                  oldValue: uo ? uo[v.Code] : '--'
                }
              }
              item.key = o ? ((o[v.Code] && o[v.Code] !== null && o[v.Code] !== '' || o[v.Code] !== 0) ? o[v.Code] : '--') : '--'
              item.Enum = v.ValueCN
              item.DataType = v.DataType
              item.IsTableFiled = v.IsTableFiled
              this[auditData].push(item)
            })
          }
          return
        }
        if (v.DataType === 'ImageList') {
          if (obj[v.Code] && obj[v.Code].length > 0) {
            // obj[v.Code].forEach((o,i) => {
            //   var uo = upObj && upObj.length > 0 ? upObj[v.Code][i] : 0
            if (row.OptType === 'Add' || row.OptType === 'Init') {
              item = {
                key: v.Code,
                Enum: v.ValueCN,
                newValue: obj[v.Code] ? obj[v.Code] : '--',
                oldValue: ''
              }
            } else if (row.OptType === 'Delete') {
              item = {
                key: v.Code,
                Enum: v.ValueCN,
                oldValue: obj[v.Code] ? obj[v.Code] : '--',
                newValue: '--'
              }
            } else {
              item = {
                key: v.Code,
                Enum: v.ValueCN,
                newValue: obj[v.Code] ? obj[v.Code] : '--',
                oldValue: upObj[v.Code] ? upObj[v.Code] : '--'
              }
            }
            item.DataType = v.DataType
            this[auditData].push(item)
          //   })
          }
          return
        }
        if (v.DataType === 'Array' || v.DataType === 'array') {
          if (obj[v.Code] && obj[v.Code].length > 0) {
            obj[v.Code].forEach((o) => {
              var uo = upObj ? upObj[v.Code].find(u => u[v.ChildDataLabel] == o[v.ChildDataLabel]) : null
              if (row.OptType === 'Add' || row.OptType === 'Init') {
                item = {
                  key: o[v.ChildDataLabel],
                  Enum: o[v.ChildDataLabel],
                  newValue: o[v.ChildDataValue] ? (o[v.ChildDataValue] ? o[v.ChildDataValue] : '--') : '--',
                  oldValue: ''
                }
              } else if (row.OptType === 'Delete') {
                item = {
                  key: o[v.ChildDataLabel],
                  Enum: o[v.ChildDataLabel],
                  oldValue: o[v.ChildDataValue] ? (o[v.ChildDataValue] ? o[v.ChildDataValue] : '--') : '--',
                  newValue: '--'
                }
              } else {
                item = {
                  key: o[v.ChildDataLabel],
                  Enum: o[v.ChildDataLabel],
                  newValue: o[v.ChildDataValue] ? (o[v.ChildDataValue] ? o[v.ChildDataValue] : '--') : '--',
                  oldValue: uo ? uo[v.ChildDataValue] : '--'
                }
              }
              this[auditData].push(item)
            })
          }
          return
        }
        if (v.DataType === 'Router') {
          item = {
            oldValue: v.UrlConfig.IsHaveParameters ?  v.UrlConfig.RoutePath + '?' +
              v.UrlConfig.ParameterList.map((v) => {
                let a = obj[v.UrlParameterValueName] ? obj[v.UrlParameterValueName] : parentRow[v.UrlParameterValueName]
                if (v.UrlParameterValueName === 'token') {
                  a = getToken()
                }
                return v.UrlParameterName + '=' + a + '&'
              }).toString().replaceAll(',', '') : v.UrlConfig.RoutePath,
            newValue: v.UrlConfig.IsHaveParameters ?  v.UrlConfig.RoutePath + '?' +
              v.UrlConfig.ParameterList.map((v) => {
                let a = obj[v.UrlParameterValueName] ? obj[v.UrlParameterValueName] : parentRow[v.UrlParameterValueName]
                if (v.UrlParameterValueName === 'token') {
                  a = getToken()
                }
                return v.UrlParameterName + '=' + a + '&'
              }).toString().replaceAll(',', '') : v.UrlConfig.RoutePath
          }
          console.log(item)
          item.IsTableFiled = v.IsTableFiled
          item.DataType = v.DataType
          item.key = v.Code
          item.Enum = v.ValueCN
          this[auditData].push(item)
          return
        }
        if (v.DataType === 'Table') {
          var head = []
          var body = []
          v.TableConfigList.forEach((j, i) => {
            if (j.IsFixedColumn) {
                head.push({IsPicture: j.IsPicture, headName: j.FixedColumnName, IsMerge: j.IsMerge, ColumnName: j.ColumnName, ColumnValue: j.ColumnValue, ListName: j.ListName, MergeColumnName: j.IsMerge ? j.MergeColumnName : null, ChildrenList: []})
            } else {
              if (j.ListName) {
                obj[v.Code][0][j.ListName].forEach((x, o) => {
                  head.push({IsPicture: j.IsPicture, headName: x[j.ColumnName], IsMerge: j.IsMerge, ColumnName: j.ColumnName, ColumnValue: j.ColumnValue, ListName: j.ListName, MergeColumnName: j.IsMerge ? j.MergeColumnName : null, ChildrenList: []})
                })
              } else {
                head.push({IsPicture: j.IsPicture, headName: j.ColumnName, IsMerge: j.IsMerge, ColumnName: j.ColumnName, ColumnValue: j.ColumnValue, ListName: j.ListName, MergeColumnName: j.IsMerge ? j.MergeColumnName : null, ChildrenList: []})
              }
            }
          })
          obj[v.Code].forEach((o, i) => {
            var b = {}
            v.TableConfigList.forEach((j) => {
              if (j.ListName) {
                o[j.ListName].forEach((ite, i) => {
                  b[j.ListName + j.ColumnValue + i] = ite[j.ColumnValue]
                })
              } else {
                b[j.ColumnValue] = o[j.ColumnValue]
              }
            })
            body.push(Object.assign({}, b))
          })
          var newHead = []
          var h = JSON.parse(JSON.stringify(head))
          h.forEach(j => {
            if (j.IsMerge) {
              var hasChildren = h.filter(o => {
                return o.MergeColumnName === j.MergeColumnName
              })
              console.log(hasChildren)
              if (!!hasChildren) {
                j.ChildrenList = Object.assign([], hasChildren)
                var has = newHead.find(v => {
                  return v.MergeColumnName === j.MergeColumnName
                })
                if (!has) {
                  newHead.push(j)
                }
              } else {
              }
            } else {
              newHead.push(j)
            }
          })
          console.log(newHead, body)
          this.tableList = newHead
          this.tableListData = body
          return
        }
        if (v.IsShowParent === 1) {
          if (row.OptType === 'Delete') {
            item = {
              // oldValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              oldValue: parentRow ? ((parentRow[v.Code] && parentRow[v.Code] !== null && parentRow[v.Code] !== '' || parentRow[v.Code] === 0) ? parentRow[v.Code] : '--') : '--',
              newValue: '--'
            }
          } else if (row.OptType === 'Add' || row.OptType === 'Init') {
            item = {
              // newValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              newValue: parentRow ? ((parentRow[v.Code] && parentRow[v.Code] !== null && parentRow[v.Code] !== '' || parentRow[v.Code] === 0) ? parentRow[v.Code] : '--') : '--',
              oldValue: '--'
            }
          } else {
            item = {
              // newValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              newValue: parentRow ? ((parentRow[v.Code] && parentRow[v.Code] !== null && parentRow[v.Code] !== '' || parentRow[v.Code] === 0) ? parentRow[v.Code] : '--') : '--',
              oldValue: parentRow ? ((parentRow[v.Code] && parentRow[v.Code] !== null && parentRow[v.Code] !== '' || parentRow[v.Code] === 0) ? parentRow[v.Code] : '--') : '--',
              // oldValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--'
            }
          }
          console.log(item, '1')
        } else if (v.IsShowParent === 0) {
          if (row.OptType === 'Delete') {
            item = {
              oldValue: obj ? ((obj[v.Code] && obj[v.Code] !== null && obj[v.Code] !== '' || obj[v.Code] === 0) ? obj[v.Code] : '--') : '--',
              newValue: '--'
            }
          } else if (row.OptType === 'Add' || row.OptType === 'Init') {
            item = {
              newValue: obj ? ((obj[v.Code] && obj[v.Code] !== null && obj[v.Code] !== '' || obj[v.Code] === 0) ? obj[v.Code] : '--') : '--',
              oldValue: '--'
            }
          } else {
            item = {
              newValue: obj ? ((obj[v.Code] && obj[v.Code] !== null && obj[v.Code] !== '' || obj[v.Code] === 0) ? obj[v.Code] : '--') : '--',
              oldValue: upObj ? ((upObj[v.Code] && upObj[v.Code] !== null && upObj[v.Code] !== '' || upObj[v.Code] === 0) ? upObj[v.Code] : '--') : '--'
            }
          }
        } else {
          if (row.OptType === 'Delete') {
            item = {
              oldValue: row ? ((row[v.Code] && row[v.Code] !== null && row[v.Code] !== '' || row[v.Code] === 0) ? row[v.Code] : '--') : '--',
              newValue: '--'
            }
          } else if (row.OptType === 'Add' || row.OptType === 'Init') {
            item = {
              newValue: row ? ((row[v.Code] && row[v.Code] !== null && row[v.Code] !== '' || row[v.Code] === 0) ? row[v.Code] : '--') : '--',
              oldValue: '--'
            }
          } else {
            item = {
              newValue: row ? ((row[v.Code] && row[v.Code] !== null && row[v.Code] !== '' || row[v.Code] === 0) ? row[v.Code] : '--') : '--',
              oldValue: row ? ((row[v.Code] && row[v.Code] !== null && row[v.Code] !== '' || row[v.Code] === 0) ? row[v.Code] : '--') : '--'
            }
          }
        }
        item.DataType = v.DataType
        item.key = v.Code
        item.Enum = this.$i18n.locale === 'zh' ? v.ValueCN : v.Value
        this[auditData].push(item)
      })
    },
    getJSON(row) {
      return new Promise(resolve => {
        getInspectionJsonDataList(this.trialId, row.Id).then(res => {
          resolve(res.Result)
        })
      })
    },
    lookAssociated(n) {
      var searchData = Object.assign({}, {
        SortField: '',
        Asc: true,
        PageIndex: 1,
        PageSize: 20,
        TrialId: this.$route.query.trialId,
        BatchId: !n ? this.currentRow.BatchId : null,
        ObjectRelationParentId: n ? this.currentRow.ObjectRelationParentId : null,
        RelationDeadlineTime: n ? this.currentRow.CreateTime : null,
        GeneralId: n ? this.currentRow.GeneralId : null
      })
      // 查看关联操作
      this.model_cfg2.title = `${this.$t('trials:auditRecord:title:viewRelationOperations')}--${this.currentRow.Description}`
      this.loading = true
      getInspectionList(searchData).then((res) => {
        this.list2 = res.CurrentPageData
        this.model_cfg2.visible = true
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    async lookDetails2(row) {
      var Json = await this.getJSON(row)
      var JsonDetail = Json[0] ? JSON.parse(Json[0]) : null
      var ParentJson = Json[1] ? JSON.parse(Json[1]) : null
      getAuditConfigChildList(row.FrontAuditConfigId).then(res => {
        console.log(res)
        var configList2 = res.Result
        this.formatting(configList2, JsonDetail.Data, ParentJson ? ParentJson.Data : null, JsonDetail.CommonData, row, 'auditData2')
        console.log(this.auditData2)
        this.otherData2 = []
        if (row.IsSign) {
          // 签名信息
          this.otherData2.push({
            Enum: this.$t('trials:auditRecord:title:signInfo2'),
            Value: row.SignText
          })
        }
        this.model_cfg3.title = row.Description
        this.model_cfg3.visible = true
      })
    },
    async lookDetails(row) {
      this.currentRow = {...row}
      this.OptType = row.OptType
      var Json = await this.getJSON(row)
      var JsonDetail = Json[0] ? JSON.parse(Json[0]) : null
      var ParentJson = Json[1] ? JSON.parse(Json[1]) : null
      getAuditConfigChildList(row.FrontAuditConfigId).then(res => {
        console.log(res)
        var configList = res.Result
        this.formatting(configList, JsonDetail.Data, ParentJson ? ParentJson.Data : null, JsonDetail.CommonData, row, 'auditData')
        this.otherData = []
        if (row.IsSign) {
          console.log(row.SignText)
          this.otherData.push({
            Enum: this.$t('trials:auditRecord:title:signInfo2'),//'签名信息'
            Value: row.SignText
          })
        }
        this.model_cfg.title = row.Description
        this.model_cfg.visible = true
      })
    },
    handleReset() {
      this.searchData = Object.assign(this.searchData, {
        SortField: '',
        Asc: false,
        PageIndex: 1,
        PageSize: 20,
        ModuleType: null,
        BlindName: null,
        TrialId: this.$route.query.trialId,
        SiteId: null,
        SubjectId: null,
        SubjectInfo: null,
        SubjectVisitId: null,
        VisitPlanInfo: null,
        OptType: null,
        ChildrenType: null,
        Reason: null,
        IsSign: null,
        StartTime: null,
        EndTime: null,
        Description: null,
        OpByUserName: null,
        BatchId: null
      })
      this.getList()
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    getList() {
      this.loading = true
      getInspectionList(this.searchData).then((res) => {
        this.list = res.CurrentPageData
        // this.list = this.list.map(v => {
        //   v.OptType = v.OptTypeName
        //   return v
        // })
        this.total = res.TotalCount
        this.model_cfg.visible = false
        this.loading = false
        this.searchData.BatchId = null
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>