<template>
  <BaseContainer>
    <!-- 搜索框 -->
    <template slot="search-container">
      <el-form :inline="true">
        <!-- 中心 -->
        <el-form-item :label="$t('trials:researchRecord:table:siteId')">
          <el-select v-model="searchData.TrialSiteId" clearable filterable style="width: 120px">
            <el-option v-for="(item, index) of siteOptions" :key="index" :label="item.TrialSiteCode"
              :value="item.TrialSiteId" />
          </el-select>
        </el-form-item>
        <!-- 联系人 -->
        <el-form-item :label="$t('trials:researchRecord:table:contactor')">
          <el-input v-model="searchData.UserKeyInfo" class="mr" clearable :placeholder="`${$t(
            'trials:researchRecord:placeholder:contactorInfo'
          )}`" style="width: 140px" />
        </el-form-item>
        <!-- 初审人 -->
        <el-form-item :label="$t('trials:researchRecord:table:preliminaryUser')">
          <el-input v-model="searchData.PreliminaryUserName" class="mr" clearable style="width: 140px" />
        </el-form-item>
        <!-- 审核人 -->
        <el-form-item :label="$t('trials:researchRecord:table:ReviewerUser')">
          <el-input v-model="searchData.ReviewerUserName" class="mr" clearable style="width: 140px" />
        </el-form-item>
        <!-- 状态 -->
        <!-- <el-form-item :label="$t('trials:researchRecord:table:status')">
          <el-select v-model="searchData.State" clearable filterable style="width: 120px">
            <el-option v-for="(item, index) of $d.ResearchRecord" :key="index" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item> -->
        <!-- 是否废除 -->
        <el-form-item :label="$t('trials:researchRecord:table:isDeleted')">
          <el-select v-model="searchData.IsDeleted" clearable filterable style="width: 120px">
            <el-option v-for="item of $d.YesOrNo" v-show="item.raw.ValueCN !== '无'" :key="`IsDeleted${item.value}`"
              :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- 更新时间 -->
        <el-form-item :label="$t('trials:researchRecord:table:updateTime')">
          <el-date-picker v-model="searchData.DateRange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            style="width: 250px" />
        </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-button type="primary" @click="handleExport">
          {{ $t('common:button:export') }}
        </el-button>
        <!-- 中心人员 -->
        <el-button v-show="searchData.State === 3"
          v-hasPermi="['trials:trials-panel:attachments:site-research:summary-record']" type="primary"
          icon="el-icon-info" @click="showResearchUser">
          {{ $t('trials:researchRecord:button:researchData') }}
        </el-button>
        <!-- 调查表链接 -->
        <el-button v-show="searchData.State === 0"
          v-hasPermi="['trials:trials-panel:attachments:site-research:questionnaire-link']" type="primary"
          icon="el-icon-link" @click="showResearchLink">
          {{ $t('trials:researchRecord:button:questionLink') }}
        </el-button>
      </el-form>
    </template>

    <template slot="main-container">
      <!-- 系统文件列表 -->
      <el-table ref="siteResearchList" v-loading="loading" v-adaptive="{ bottomOffset: 60 }" :data="list" stripe
        height="100" @sort-change="handleSortByColumn">
        <el-table-column type="index" width="50" />
        <!-- 中心编号 -->
        <el-table-column prop="TrialSiteCode" :label="$t('trials:researchRecord:table:siteId')" min-width="100"
          sortable="custom" show-overflow-tooltip />
        <!-- 中心名称 -->
        <el-table-column prop="SiteName" :label="$t('trials:researchRecord:table:siteName')" min-width="100"
          sortable="custom" show-overflow-tooltip />
        <!-- 联系人 -->
        <el-table-column prop="UserName" :label="$t('trials:researchRecord:table:contactor')" min-width="100"
          sortable="custom" show-overflow-tooltip />
        <!-- 联系电话 -->
        <el-table-column prop="Phone" :label="$t('trials:researchRecord:table:contactorPhone')" min-width="100"
          show-overflow-tooltip />
        <!-- 联系邮箱 -->
        <el-table-column prop="Email" :label="$t('trials:researchRecord:table:contactorEmail')" min-width="150"
          show-overflow-tooltip />
        <!-- 初审人 -->
        <el-table-column prop="preliminaryUser" :label="$t('trials:researchRecord:table:preliminaryUser')"
          min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{
              scope.row.PreliminaryUser
                ? scope.row.PreliminaryUser.RealName
                : ''
            }}
          </template>
        </el-table-column>
        <!-- 审核人 -->
        <el-table-column prop="ReviewerUser" :label="$t('trials:researchRecord:table:ReviewerUser')" min-width="150"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.ReviewerUser ? scope.row.ReviewerUser.RealName : '' }}
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="State" :label="$t('trials:researchRecord:table:status')" min-width="150"
          sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.State === 0" type="primary">{{
              $fd('ResearchRecord', scope.row.State)
            }}</el-tag>
            <el-tag v-if="scope.row.State === 1" type="info">{{
              $fd('ResearchRecord', scope.row.State)
            }}</el-tag>
            <el-tag v-if="scope.row.State === 2" type="warning">{{
              $fd('ResearchRecord', scope.row.State)
            }}</el-tag>
            <el-tag v-if="scope.row.State === 3" type="danger">{{
              $fd('ResearchRecord', scope.row.State)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 是否废除 -->
        <el-table-column prop="IsDeleted" :label="$t('trials:researchRecord:table:isDeleted')" min-width="100"
          sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsDeleted" type="danger">{{
              $fd('YesOrNo', scope.row.IsDeleted)
            }}</el-tag>
            <el-tag v-else type="primary">{{
              $fd('YesOrNo', scope.row.IsDeleted)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 更新时间 -->
        <el-table-column prop="UpdateTime" :label="$t('trials:researchRecord:table:updateTime')" min-width="150"
          show-overflow-tooltip sortable="custom" />
        <el-table-column width="150">
          <template slot-scope="scope">
            <!-- 查看 -->
            <el-button v-show="searchData.State === 3" :disabled="scope.row.State !== 3" circle
              :title="$t('common:button:view')" icon="el-icon-view" @click="handleViewResearchList(scope.row)" />
            <!-- 审批 -->
            <el-button v-show="(searchData.State === 1 || searchData.State === 2) && isAudit"
              v-hasPermi="['trials:trials-panel:attachments:site-research:auidt']"
              :disabled="scope.row.State === 0 || scope.row.State === 3 || scope.row.IsDeleted" circle
              :title="$t('trials:researchRecord:action:view')" icon="el-icon-s-check"
              @click="handleViewResearchList(scope.row)" />
            <!-- 日志 -->
            <el-button circle :title="$t('trials:researchRecord:action:log')" icon="el-icon-tickets"
              @click="viewLog(scope.row)" />
            <!-- 废除 -->
            <el-button v-show="searchData.State === 0" v-hasPermi="[
              'trials:trials-panel:attachments:site-research:abolish',
            ]" :disabled="scope.row.State !== 0 || scope.row.IsDeleted" circle
              :title="$t('trials:researchRecord:action:abolish')" icon="el-icon-delete"
              @click="handleRepealResearch(scope.row)" />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
        @pagination="getList" />
    </template>

    <!-- 中心数据 trials:researchRecord:button:researchData-->
    <!-- 中心人员 trials:researchRecord:dialogTitle:questionStaff-->
    <el-dialog v-if="researchUserVisible" :visible.sync="researchUserVisible"
      :title="$t('trials:researchRecord:button:researchData')" custom-class="base-dialog-wrapper" :fullscreen="true">
      <div class="base-modal-body" style="border: 1px solid #ccc; padding: 10px">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$t('trials:researchRecord:dialogTitle:questionStaff')" name="first">
            <Users v-if="activeName === 'first'" />
          </el-tab-pane>
          <el-tab-pane label="中心设备" name="second">
            <Equipments v-if="activeName === 'second'" />
          </el-tab-pane>
          <el-tab-pane label="基本情况" name="third">
            <Questions v-if="activeName === 'third'" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 调查表 -->
    <el-dialog v-if="researchInfoVisible" :visible.sync="researchInfoVisible" :fullscreen="true"
      :close-on-click-modal="false">
      <research-form v-if="researchInfoVisible" @refreshPage="getList" />
    </el-dialog>
    <!-- 调查表编辑 -->
    <el-dialog v-if="ImageManualVisible" :visible.sync="ImageManualVisible" :fullscreen="true"
      :close-on-click-modal="false" :title="$t('trials:researchRecord:dialogTitle:ImageManualEdit')">
      <ImageManual v-if="ImageManualVisible" :trialSiteSurveyId="trialSiteSurveyId" @getList="getList" />
    </el-dialog>
    <!-- 调查表链接 -->
    <base-model :config="share_model">
      <template slot="dialog-body" v-loading="shareLoading">
        <el-button size="small" type="primary" style="margin-bottom: 10px;" @click.stop="openImageManual">{{
          $t('trials:researchRecord:label:edit')
        }}</el-button>
        <div style="width: 100%; display: flex">
          <div class="date">
            <el-form :model="shareForm" :rules="rules" ref="shareForm" label-width="100px">
              <el-form-item :label="$t('trials:researchRecord:label:ExpirationDays')" prop="ExpirationDays">
                <el-radio-group v-model="shareForm.ExpirationDays" @input="shareForm.OtherExpirationDays = null">
                  <el-radio :label="1">{{ $t('trials:researchRecord:label:day1') }}</el-radio>
                  <el-radio :label="7">{{ $t('trials:researchRecord:label:day7') }}</el-radio>
                  <el-radio :label="15">{{ $t('trials:researchRecord:label:day15') }}</el-radio>
                  <el-radio :label="`default`">{{ $t('trials:researchRecord:label:default') }}
                    <el-input placeholder="" type="number" @input="handleInput" v-model="shareForm.OtherExpirationDays"
                      clearable size="mini" style="width: 60px;" class="dayInput" />
                    <span style="margin-left: 10px;">{{ $t('trials:researchRecord:label:day') }}</span>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('trials:researchRecord:label:LinkVerificationCode')" prop="LinkVerificationCode">
                <el-radio-group v-model="shareForm.LinkVerificationCode"
                  @input="shareForm.OtherLinkVerificationCode = null">
                  <el-radio label="researchProgramNo">{{ $t('trials:researchRecord:label:researchProgramNo')
                  }}</el-radio>
                  <el-radio label="default">{{ $t('trials:researchRecord:label:default') }}
                    <el-input placeholder="" type="number" v-model="shareForm.OtherLinkVerificationCode" clearable
                      size="mini" style="width: 100px;" />
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-button type="primary" round @click="setLink" style="float: right;">
              {{ $t('trials:researchRecord:button:setLink') }}
            </el-button>
          </div>
          <div class="share">
            <div class="shareLink">
              <h3>{{ $t('trials:researchRecord:label:link') }}</h3>
              <el-input ref="shareLink" v-model="shareLink" readonly type="textarea" autosize :rows="3" />
              <div class="dateBox">
                <span>{{ $t('trials:researchRecord:label:linkVerificationCode') }}</span>
                <span>{{ LinkVerificationCode }}</span>
              </div>
              <div class="dateBox">
                <span>{{ $t('trials:researchRecord:label:ValidityPeriod') }}</span>
                <span>{{ validityPeriod }}</span>
                <span style="color: red;" v-if="isExpired">({{ $t('trials:researchRecord:label:Expired') }})</span>
              </div>
              <el-button type="primary" round @click="copyLink" class="shareLinkBtn"
                :disabled="!validityPeriod || isExpired">
                {{ $t('trials:researchRecord:button:copyLink') }}
              </el-button>
            </div>
            <div class="shareCode">
              <h3>{{ $t('trials:researchRecord:label:shareCode') }}</h3>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div class="qrCodeBox">
                  <div id="qrcode" ref="qrcode"></div>
                </div>
                <div class="codeBtnBox">
                  <el-button @click="handleCopyImg" type="primary" round :disabled="!validityPeriod || isExpired">{{
                    $t('trials:researchRecord:button:copyCode')
                  }}</el-button>
                  <el-button @click="savePic" round :disabled="!validityPeriod || isExpired">{{
                    $t('trials:researchRecord:button:savePic')
                  }}</el-button>
                </div>
              </div>

            </div>
          </div>
        </div>

      </template>
    </base-model>
    <el-dialog v-if="logVisible" :visible.sync="logVisible"
      :custom-class="isFullscreen ? 'full-log-dialog-container' : 'log-dialog-container'" :close-on-click-modal="false"
      :fullscreen="isFullscreen" :show-close="false" width="60%" append-to-body>
      <span slot="title" class="dialog-footer">
        <div style="display: flex;flex-direction: row;justify-content: space-between;">
          <div>
            {{ $t('trials:researchForm:button:log') }}
          </div>
          <div>
            <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
              style="vertical-align: baseline;cursor: pointer;font-size: 20px;" @click="toggleLogFullscreen" />
            <svg-icon icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;"
              @click="logVisible = false" />
          </div>
        </div>
      </span>
      <div class="log-dialog-content">
        <LogList :trial-site-survey-id="trialSiteSurveyId" />
      </div>
    </el-dialog>
  </BaseContainer>
</template>
<script>
import {
  getTrialSiteSurveyList,
  getTrialSiteSelect,
  abandonSiteSurvey,
  setTrialLinkExpirationTime,
  getTrialLinkExpirationTime,
  getLinkLinkExpirationTime,
} from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import Users from './users'
import Equipments from './Equipments'
import Questions from './Questions'
import ResearchForm from '@/views/research/form'
import BaseModel from '@/components/BaseModel'
import ImageManual from './ImageManual'
import QRCode from 'qrcodejs2'
import LogList from '@/views/research/components/LogList'
import { getTrialSiteSurveyList_Export } from '@/api/export'
const searchDataDefault = () => {
  return {
    SortField: '',
    Asc: true,
    PageIndex: 1,
    PageSize: 20,
    TrialSiteId: '',
    UserKeyInfo: '',
    State: null,
    IsDeleted: '',
    DateRange: [],
    PreliminaryUserName: null,
    ReviewerUserName: null,
  }
}
export default {
  name: 'ResearchList',
  components: { BaseContainer, Pagination, Users, Equipments, Questions, ResearchForm, BaseModel, ImageManual, LogList },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchData: searchDataDefault(),
      loading: false,
      list: [],
      total: 0,
      trialId: this.$route.query.trialId,
      siteOptions: [],
      researchUserVisible: false,
      researchInfoVisible: false,
      share_model: {
        visible: false,
        title: this.$t('trials:researchRecord:title:shark'),
        width: '1000px',
      },
      shareLink: '',
      researchState: this.$d.ResearchRecord,
      qrcode: null,
      validityPeriod: null,
      LinkVerificationCode: null,
      isExpired: false,
      shareLoading: false,
      shareForm: {
        ExpirationDays: null,
        OtherExpirationDays: null,
        LinkVerificationCode: null,
        OtherLinkVerificationCode: null,
      },
      rules: {
        ExpirationDays: [
          { required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === 'default' && !this.shareForm.OtherExpirationDays) {
                callback(new Error(this.$t("common:ruleMessage:specify")));
              } else {
                callback()
              }

            }, trigger: 'blur'
          }
        ],
        LinkVerificationCode: [
          { required: true, message: this.$t("common:ruleMessage:select"), trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === 'default' && !this.shareForm.OtherLinkVerificationCode) {
                callback(new Error(this.$t("common:ruleMessage:specify")));
              } else {
                callback()
              }

            }, trigger: 'blur'
          }
        ],
      },
      ImageManualVisible: false,
      trialSiteSurveyId: null,
      activeName: 'first',
      isFullscreen: false,
      logVisible: false
    }
  },
  mounted() {
    // this.getList()
    this.getSite()
  },
  methods: {
    async handleExport() {
      await getTrialSiteSurveyList_Export(this.searchData)
    },
    toggleLogFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    viewLog(row) {
      this.trialSiteSurveyId = row.Id
      this.isFullscreen = false
      this.logVisible = true
    },
    async getLinkTimeIsExpired() {
      try {
        let data = {
          TrialId: this.$route.query.trialId,
        }
        this.shareLoading = true
        let res = await getLinkLinkExpirationTime(data)
        this.shareLoading = false
        if (res.IsSuccess) {
          this.isExpired = res.Result.IsIsExpired
        }
      } catch (err) {
        this.shareLoading = false
        console.log(err)
      }
    },
    async getLinkTime() {
      try {
        let data = {
          TrialId: this.$route.query.trialId,
        }
        this.shareLoading = true
        let res = await getTrialLinkExpirationTime(data)
        this.shareLoading = false
        if (res.IsSuccess) {
          this.validityPeriod = res.Result.LinkExpirationTime
          this.LinkVerificationCode = res.Result.LinkVerificationCode || res.Result.ResearchProgramNo
          if (!this.validityPeriod) {
            this.LinkVerificationCode = null
          }
          if (!this.validityPeriod) return false
          this.getLinkTimeIsExpired()
          this.shareLink = `${location.protocol}//${location.host}/researchLogin?trialId=${this.$route.query.trialId}`
          this.$nextTick(() => {
            this.creatQrCode()
          })
        }
      } catch (err) {
        this.shareLoading = false
        console.log(err)
      }
    },
    async setLink() {
      try {
        let validate = await this.$refs.shareForm.validate()
        if (!validate) return false
        let data = {
          TrialId: this.$route.query.trialId,
          ExpirationDays: this.shareForm.ExpirationDays,
          LinkVerificationCode: this.shareForm.LinkVerificationCode
        }
        if (this.shareForm.LinkVerificationCode === 'researchProgramNo') {
          data.LinkVerificationCode = null
        }
        if (this.shareForm.LinkVerificationCode === 'default') {
          data.LinkVerificationCode = this.shareForm.OtherLinkVerificationCode
        }
        if (this.shareForm.ExpirationDays === 'default') {
          data.ExpirationDays = this.shareForm.OtherExpirationDays
        }
        this.shareLoading = true
        let res = await setTrialLinkExpirationTime(data)
        this.shareLoading = false
        if (res.IsSuccess) {
          this.getLinkTime()
        }
      } catch (err) {
        this.shareLoading = false
        console.log(err)
      }
    },
    handleInput(val) {
      // 过滤掉非数字字符，并取整为正整数
      this.shareForm.OtherExpirationDays = val.replace(/[^\d]/g, '').replace(/^0+/, '')
    },
    openImageManual() {
      // if (!this.trialSiteSurveyId) return false
      this.ImageManualVisible = true
    },
    // 获取系统文件数据
    getList() {
      this.loading = true
      this.searchData.TrialId = this.trialId
      if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
        this.searchData.updateTimeEnd = this.searchData.DateRange[1]
      } else {
        this.searchData.UpdateTimeBegin = ''
        this.searchData.updateTimeEnd = ''
      }
      getTrialSiteSurveyList(this.searchData)
        .then((res) => {
          this.loading = false
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查看调查表记录详情
    handleViewResearchList(row) {
      changeURLStatic('trialSiteSurveyId', row.Id)
      this.researchInfoVisible = true
    },
    // 废除待提交的调查表
    handleRepealResearch(row) {
      // 是否确认废除？
      this.$confirm(this.$t('trials:researchRecord:message:abolish'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      }).then(() => {
        abandonSiteSurvey(this.trialId, row.Id).then((res) => {
          if (res.IsSuccess) {
            this.getList()
            // 废除成功
            this.$message.success(
              this.$t('trials:researchRecord:message:abolishSuccessfully')
            )
          }
        })
      })
    },
    // 展示当前项目下所有调查表需生成账户的用户信息
    showResearchUser() {
      this.researchUserVisible = true
      this.activeName = 'first'
    },
    // 复制链接
    copyLink() {
      // 中心调研表链接
      this.$copyText(
        `${this.$t('trials:researchRecord:message:researchFormLink')}: ${this.shareLink
        }\n${this.$t('trials:researchRecord:label:linkVerificationCode')}${this.LinkVerificationCode}\n${this.$t('trials:researchRecord:label:ValidityPeriod')}${this.validityPeriod}`
      )
        .then((res) => {
          // 复制成功
          this.$message.success(
            this.$t('trials:researchRecord:message:copySuccessfully')
          )
        })
        .catch(() => {
          // 复制失败
          this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
        })
    },
    // 创建二维码
    creatQrCode() {
      this.$refs.qrcode.innerHTML = '' //清除二维码方法一
      let text = this.shareLink
      this.qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      // qrcode.clear(); // 清除二维码方法二
    },
    // 下载二维码
    savePic() {
      let qrCodeCanvas = document
        .getElementById('qrcode')
        .getElementsByTagName('canvas')
      let a = document.createElement('a')
      a.href = qrCodeCanvas[0].toDataURL('image/url')
      a.download = `${this.$route.query.researchProgramNo}${this.$t('trials:researchRecord:title:code')}.png`
      a.click()
    },
    // 复制二维码
    handleCopyImg() {
      let qrCodeCanvas = document
        .getElementById('qrcode')
        .getElementsByTagName('canvas')
      qrCodeCanvas[0].toBlob(async (blob) => {
        console.log(blob)
        const data = [
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ] // https://w3c.github.io/clipboard-apis/#dom-clipboard-write
        await navigator.clipboard.write(data).then(
          () => {
            this.$message.success(
              this.$t('trials:researchRecord:message:copySuccess')
            )
          },
          () => {
            this.$message.error(
              this.$t('trials:researchRecord:message:UnableWrite')
            )
          }
        )
      })
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then((res) => {
        this.siteOptions = res.Result
      })
    },
    // 展示调查表链接
    showResearchLink() {
      this.shareForm = {
        ExpirationDays: null,
        OtherExpirationDays: null,
        LinkVerificationCode: null,
        OtherLinkVerificationCode: null,
      }
      this.validityPeriod = null
      this.isExpired = false
      this.share_model.visible = true
      this.getLinkTime()
      // &lang=${this.$i18n.locale}
      // this.trialSiteSurveyId = this.list[0].Id
    },
    // 重置
    handleReset() {
      const state = this.searchData.State
      this.searchData = searchDataDefault()
      this.searchData.DateRange = []
      if (this.searchData.DateRange && this.searchData.DateRange.length === 2) {
        this.searchData.UpdateTimeBegin = this.searchData.DateRange[0]
        this.searchData.updateTimeEnd = this.searchData.DateRange[1]
      } else {
        this.searchData.UpdateTimeBegin = ''
        this.searchData.updateTimeEnd = ''
      }
      this.searchData.State = state
      this.getList()
      this.$nextTick(() => {
        this.$refs.siteResearchList.clearSort()
      })
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.getList()
    },
  },
  beforeDestroy() {
    if (this.qrcode) {
      this.qrcode = null
    }
  },
}
</script>
<style lang="scss" scoped>
.date,
.share {
  width: 55%;
  height: 100%;
}

.dayInput {
  ::v-deep .el-input__inner {
    padding-left: 5px;
  }
}


.date {
  padding-right: 10px;
}

.share {
  width: 45%;
  padding-left: 5%;
  border-left: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.shareLinkBtn {
  float: right;
}

.qrCodeBox {
  width: 220px;
  height: 220px;
  display: flex;
  border: 1px solid #c0c4cc;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #c0c4cc;
  align-items: center;
  justify-content: center;
}

.dateBox {
  margin: 10px;
}

.codeBtnBox {

  ::v-deep .el-button {
    display: block;
    margin: 10px auto;
  }
}
</style>
