<template>
  <div class="certificate">
    <div class="title">{{ $t('curriculumVitae:certificate:title') }}</div>
    <div class="fileBox">
      <!--最高医学学位毕业证书-->
      <div class="file_title">
        {{ $t('curriculumVitae:certificate:fileTitle:diploma') }}
      </div>
      <div class="file" v-if="diplomaFile">
        <div class="name" :title="diplomaFile.FileName">
          {{ diplomaFile.FileName }}
        </div>
        <i
          class="el-icon-view"
          :title="$t('common:button:preview')"
          @click.stop="preview(diplomaFile)"
        />
        <i
          class="el-icon-delete"
          :title="$t('common:button:delete')"
          @click.stop="handleRemoveFile(diplomaFile)"
        />
      </div>
      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
      <!--医师资格证-->
      <div class="file_title">
        {{ $t('curriculumVitae:certificate:fileTitle:certificate') }}
      </div>
      <div class="file" v-if="certificateFile">
        <div class="name" :title="certificateFile.FileName">
          {{ certificateFile.FileName }}
        </div>
        <i
          class="el-icon-view"
          :title="$t('common:button:preview')"
          @click.stop="preview(certificateFile)"
        />
        <i
          class="el-icon-delete"
          :title="$t('common:button:delete')"
          @click.stop="handleRemoveFile(certificateFile)"
        />
      </div>
      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
      <!--医师执业证-->
      <div class="file_title">
        {{ $t('curriculumVitae:certificate:fileTitle:license') }}
      </div>
      <div class="file" v-if="licenseFile">
        <div class="name" :title="licenseFile.FileName">
          {{ licenseFile.FileName }}
        </div>
        <i
          class="el-icon-view"
          :title="$t('common:button:preview')"
          @click.stop="preview(licenseFile)"
        />
        <i
          class="el-icon-delete"
          :title="$t('common:button:delete')"
          @click.stop="handleRemoveFile(licenseFile)"
        />
      </div>
      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
      <!--大型医用设备上岗证-->
      <div class="file_title">
        {{ $t('curriculumVitae:certificate:fileTitle:workPermit') }}
      </div>
      <template v-if="workPermitFiles && workPermitFiles.length > 0">
        <div class="file_title">
          {{ $t('curriculumVitae:certificate:fileTitle:CT') }}
        </div>
        <div v-for="item in workPermitFiles" :key="item.Id">
          <div class="file">
            <div class="name" :title="item.FileName">{{ item.FileName }}</div>
            <i
              class="el-icon-view"
              :title="$t('common:button:preview')"
              @click.stop="preview(item)"
            />
            <i
              class="el-icon-delete"
              :title="$t('common:button:delete')"
              @click.stop="handleRemoveFile(item)"
            />
          </div>
        </div>
      </template>
      <div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
      <div class="btnBox" style="margin-top: 10px">
        <el-button
          type="primary"
          size="small"
          :disabled="loading"
          :loading="loading"
          @click.stop="openBox"
        >
          {{ $t('curriculumVitae:certificate:btn:upload') }}
        </el-button>
      </div>
    </div>
    <base-model :config="model_cfg">
      <template slot="dialog-body">
        <div class="box">
          <div class="clearfix">
            <p style="line-height: 30px; font-size: 13px">
              {{ $t('system:Credentials:title:Default Certificate') }}
            </p>
            <el-card class="e-card">
              <p class="title">
                {{
                  $t(
                    'system:Credentials:title:Diploma of the highest medical degree'
                  )
                }}
              </p>
              <upload-file
                :doctor-id="reviewerId"
                type="Diploma of the highest medical degree"
                @getFileList="$emit('getInfo')"
              />
            </el-card>
            <el-card class="e-card">
              <p class="title">
                {{
                  $t(
                    'system:Credentials:title:Medical Qualification Certificate'
                  )
                }}
              </p>
              <upload-file
                :doctor-id="reviewerId"
                type="Medical Qualification Certificate"
                @getFileList="$emit('getInfo')"
              />
            </el-card>
            <el-card class="e-card">
              <p class="title">
                {{ $t('system:Credentials:title:Practice License') }}
              </p>
              <upload-file
                :doctor-id="reviewerId"
                type="Practice License"
                @getFileList="$emit('getInfo')"
              />
            </el-card>
          </div>

          <div class="clearfix">
            <p style="line-height: 30px; font-size: 13px">
              {{ $t('system:Credentials:title:Modality Certificate') }}
            </p>
            <el-card class="e-card">
              <p class="title">CT</p>
              <upload-file
                :doctor-id="reviewerId"
                type="Modality Certificate(CT)"
                @getFileList="$emit('getInfo')"
              />
            </el-card>

            <el-card class="e-card">
              <p class="title">MRI</p>
              <upload-file
                :doctor-id="reviewerId"
                type="Modality Certificate(MRI)"
                @getFileList="$emit('getInfo')"
              />
            </el-card>

            <el-card class="e-card">
              <p class="title">NM</p>
              <upload-file
                :doctor-id="reviewerId"
                type="Modality Certificate(NM)"
                @getFileList="$emit('getInfo')"
              />
            </el-card>

            <el-card class="e-card">
              <p class="title">US</p>
              <upload-file
                :doctor-id="reviewerId"
                type="Modality Certificate(US)"
                @getFileList="$emit('getInfo')"
              />
            </el-card>
          </div>
        </div>
      </template>
      <template slot="dialog-footer">
        <el-button size="small" type="primary" @click="handleCancle">
          {{ $t('common:button:confirm') }}
        </el-button>
      </template>
    </base-model>
  </div>
</template>
<script>
import PreviewFile from '@/components/PreviewFile/index'
import BaseModel from '@/components/BaseModel'
import UploadFile from '@/components/UploadFile'
import { deleteAttachment } from '@/api/attachment'
export default {
  name: 'certificate',
  components: {
    PreviewFile,
    BaseModel,
    UploadFile,
  },
  props: {
    DATA: {
      type: Array,
      default: () => {
        return []
      },
    },
    reviewerId: {
      type: String,
      default: '',
    },
    isEN: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      faccept: ['.pdf'],
      loading: false,
      model_cfg: {
        visible: false,
        showClose: true,
        width: '800px',
        title: this.$t('curriculumVitae:certificate:form:title'),
        appendToBody: true,
      },
    }
  },
  computed: {
    //最高医学学位毕业证书
    diplomaFile() {
      if (!this.DATA || this.DATA.length <= 0) return false
      return this.DATA.find(
        (item) => item.Type === 'Diploma of the highest medical degree'
      )
    },
    //医师资格证
    certificateFile() {
      if (!this.DATA || this.DATA.length <= 0) return false
      return this.DATA.find(
        (item) => item.Type === 'Medical Qualification Certificate'
      )
    },
    //医师执业证
    licenseFile() {
      if (!this.DATA || this.DATA.length <= 0) return false
      return this.DATA.find((item) => item.Type === 'Practice License')
    },
    //大型医用设备上岗证
    workPermitFiles() {
      if (!this.DATA || this.DATA.length <= 0) return false
      return this.DATA.filter(
        (item) => item.Type && item.Type.indexOf('Modality Certificate') >= 0
      )
    },
  },
  methods: {
    openBox() {
      this.model_cfg.visible = true
    },
    handleCancle() {
      this.model_cfg.visible = false
    },
    handleRemoveFile(row) {
      this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          deleteAttachment(row.Id, row.Path).then((res) => {
            if (res.IsSuccess) {
              this.$emit('getInfo')
              this.$message({
                message: this.$t('common:message:deletedSuccessfully'),
                type: 'success',
              })
            }
          })
        })
        .catch((action) => {})
    },
    preview(row) {
      this.$preview({
        path: row.Path || row.FullPath,
        type: 'pdf',
        title: row.FileName,
      })
    },
    beginScanFiles(e) {
      let files = e.target.files
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-dialog__body {
//   padding-top: 0;
// }
.box {
  display: flex;
  justify-content: space-between;
  .clearfix {
    width: 48%;
    .e-card {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>