/* eslint-disable */
<template>
  <BaseContainer>
    <template slot="search-container">
      <el-form :inline="true">
        <div style="margin-bottom: 15px;">
          <el-form-item label="研究方案号:">
            <el-input v-model="ResearchProgramNo" disabled />
          </el-form-item>
          <el-form-item label="中心:">
            <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="受试者:">
            <el-input v-model="searchData.SubjectInfo" placeholder="受试者" />
          </el-form-item>
          <el-form-item label="访视:">
            <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="OutPlan"
                value="1.11"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="功能模块: ">
            <el-select v-model="searchData.ModuleType" style="width:120px" placeholder="功能模块" clearable @change="getModuleTypeDescriptionList">
              <el-option v-for="item of dict.type.ModuleType" :value="item.value" :label="item.raw.ValueCN" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作名: ">
            <el-select v-model="searchData.Description" style="width:120px" placeholder="操作" clearable>
              <el-option v-for="item of DescriptionOptions" :value="item" :label="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作人:">
            <el-input v-model="searchData.OpByUserName" placeholder="操作人" style="width:120px" />
          </el-form-item>
          <el-form-item label="操作时间:">
            <el-date-picker
              v-model="timeList"
              @change="changeTimeList"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </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="是否签名: ">
            <el-select v-model="searchData.IsSign" style="width:120px" placeholder="是否签名" clearable>
              <el-option v-for="item of $d.YesOrNo" v-if="item.raw.ValueCN !== '无'" :label="item.label" :value="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"
        stripe
        height="100"
      >
        <el-table-column type="index" width="40" align="left" />
        <el-table-column
          prop="ResearchProgramNo"
          min-width="90"
          label="研究方案号"
          show-overflow-tooltip
        />
        <el-table-column
          prop="SiteCode"
          min-width="100"
          label="中心编号"
          show-overflow-tooltip
        />
        <el-table-column
          prop="SubjectCode"
          min-width="100"
          label="受试者"
          show-overflow-tooltip
        />
        <el-table-column
          prop="VisitName"
          min-width="100"
          label="访视"
          show-overflow-tooltip
        />
        <el-table-column
          prop="BlindName"
          min-width="100"
          label="盲态访视名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="ModuleTypeName"
          min-width="100"
          label="功能模块"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Description"
          min-width="140"
          label="操作名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="Reason"
          min-width="100"
          label="修改原因"
          show-overflow-tooltip
        />
        <el-table-column
          prop="IsSign"
          min-width="90"
          align="center"
          label="是否电签"
          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="操作人"
          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="用户名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="RoleName"
          min-width="70"
          label="角色"
          show-overflow-tooltip
        />
        <el-table-column
          prop="CreateTime"
          min-width="140"
          label="操作时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop=""
          min-width="70"
          label="阅片人"
          show-overflow-tooltip
        />
        <el-table-column
          prop="IP"
          min-width="100"
          label="IP"
          show-overflow-tooltip
        />
        <el-table-column
          prop="UserCount"
          min-width="150"
          label="操作"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="lookDetails(scope.row)">
              详情
            </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">
          <el-button style="position: absolute;top:15px;right:190px;" size="small" type="primary" @click="lookAssociated(1)">同一对象历史操作</el-button>
          <el-button style="position: absolute;top:15px;right:50px;" size="small" type="primary" @click="lookAssociated(0)">同一对象关联操作</el-button>
          <el-table
            :data="auditData"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column
              prop="Enum"
              label="字段名"
              show-overflow-tooltip
            />
            <el-table-column
              v-if="OptType !== 'Add' && OptType !== 'Upload' && OptType !== 'Init'"
              prop="oldValue"
              :label="OptType === 'Add' ? '值' : OptType === 'Delete' ? '删除前' : '修改前'"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                 <span>
                  <a v-if="scope.row.DataType === 'Link'" target="_blank" :href="scope.row.oldValue">{{scope.row.oldValue}}</a>
                  <span v-else>
                    {{ scope.row.oldValue }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="newValue"
              :label="OptType === 'Add' || OptType === 'Init' ? '值' : OptType === 'Delete' ? '删除后' : '修改后'"
              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'" target="_blank" :href="scope.row.newValue">{{scope.row.newValue}}</a>
                  <span v-else>{{ scope.row.newValue }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="otherData.length > 0" style="margin-top: 20px;margin-bottom: 10px;">
            签名信息:
          </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">关闭</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="研究方案号"
              show-overflow-tooltip
            />
            <el-table-column
              prop="SiteCode"
              min-width="100"
              label="中心编号"
              show-overflow-tooltip
            />
            <el-table-column
              prop="SubjectCode"
              min-width="100"
              label="受试者"
              show-overflow-tooltip
            />
            <el-table-column
              prop="VisitName"
              min-width="100"
              label="访视"
              show-overflow-tooltip
            />
            <el-table-column
              prop="BlindName"
              min-width="100"
              label="盲态访视名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="ModuleTypeName"
              min-width="100"
              label="功能模块"
              show-overflow-tooltip
            />
            <el-table-column
              prop="Description"
              min-width="140"
              label="操作名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="Reason"
              min-width="100"
              label="修改原因"
              show-overflow-tooltip
            />
            <el-table-column
              prop="IsSign"
              min-width="90"
              align="center"
              label="是否电签"
              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="IP"
              min-width="80"
              label="操作人"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.UserLastName }}/{{ scope.row.UserFirstName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="CreateUser"
              min-width="80"
              label="用户名"
              show-overflow-tooltip
            />
            <el-table-column
              prop="RoleName"
              min-width="70"
              label="角色"
              show-overflow-tooltip
            />
            <el-table-column
              prop="CreateTime"
              min-width="140"
              label="操作时间"
              show-overflow-tooltip
            />
            <el-table-column
              prop=""
              min-width="70"
              label="阅片人"
              show-overflow-tooltip
            />
            <el-table-column
              prop="IP"
              min-width="100"
              label="IP"
              show-overflow-tooltip
            />
            <el-table-column
              prop="UserCount"
              min-width="150"
              label="操作"
              show-overflow-tooltip
              sortable="custom"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="lookDetails2(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>
      <base-model :config="model_cfg3">
        <template slot="dialog-body">
          <el-table
            :data="auditData2"
            border
            style="width: 100%"
            size="small"
          >
            <el-table-column
              prop="Enum"
              label="字段名"
              show-overflow-tooltip
            />
            <el-table-column
              v-if="OptType !== 'Add' && OptType !== 'Upload' && OptType !== 'Init'"
              prop="oldValue"
              :label="OptType === 'Add' ? '值' : OptType === 'Delete' ? '删除前' : '修改前'"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  <a v-if="scope.row.DataType === 'Link'" target="_blank" :href="scope.row.oldValue">{{scope.row.oldValue}}</a>
                  <span v-else>
                    {{ scope.row.oldValue }}
                  </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="newValue"
              :label="OptType === 'Add' || OptType === 'Init' ? '值' : OptType === 'Delete' ? '删除后' : '修改后'"
              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'" target="_blank" :href="scope.row.newValue">{{scope.row.newValue}}</a>
                  <span v-else>{{ scope.row.newValue }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="otherData.length > 0" style="margin-top: 20px;margin-bottom: 10px;">
            签名信息:
          </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">关闭</el-button>
        </template>
      </base-model>
    </template>
  </BaseContainer>
</template>

<script>
import {
  getTrialSiteSelect,
  getTrialVisitStageSelect
} 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'

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
      }
    }
    return {
      otherData:[],
      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true },
      model_cfg2: { visible: false, showClose: true, width: '1000px', title: '查看关联操作', appendToBody: true },
      model_cfg3: { visible: false, showClose: true, width: '600px', title: '', 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: [],
    }
  },
  mounted() {
    this.ResearchProgramNo = this.$route.query.researchProgramNo
    this.getSite()
    this.getVisitPlanOptions()
    this.getList()
  },
  methods: {
    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[auditData] = []
      config.forEach(v => {
        var item
        if (!v.IsEnable) return
        if (v.DataType === 'Array' || v.DataType === 'array') {
          obj[v.Code].forEach((o, index) => {
            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 {
              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.IsShowParent === 1) {
          if (row.OptType === 'Delete') {
            item = {
              oldValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              newValue: '--'
            }
          } else if (row.OptType === 'Add' || row.OptType === 'Init') {
            item = {
              newValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              oldValue: '--'
            }
          } else {
            item = {
              newValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--',
              oldValue: parentRow ? (parentRow[v.Code] ? parentRow[v.Code] : '--') : '--'
            }
          }
        } 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] : '--') : '--',
              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
        // if () {
        // }
        item.key = v.Code
        item.Enum = v.ValueCN
        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.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: '签名信息',
            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: '签名信息',
            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>

<style scoped>

</style>