<template>
  <box-content>
    <div class="title">
      {{ TITLE }}
    </div>
    <!-- 搜索框 -->
    <div class="search" style="position: relative">
      <el-form :inline="true" class="base-search-form">
        <!--专业-->
        <el-form-item :label="$t('trials:trialDocument:curriculumVitae:search:Speciality')">
          <el-select v-model="searchData.SpecialityId" style="width: 200px" placeholder="" clearable>
            <el-option v-for="item in $d.Department" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--亚专业-->
        <el-form-item :label="$t('trials:trialDocument:curriculumVitae:search:Subspeciality')
          ">
          <el-select v-model="searchData.SubspecialityId" style="width: 200px" placeholder="" clearable>
            <el-option v-for="item in $d.Subspeciality" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--机构-->
        <el-form-item :label="$t('trials:trialDocument:curriculumVitae:search:HospitalName')
          ">
          <el-select v-model="searchData.HospitalId" style="width: 200px" placeholder="" clearable>
            <el-option v-for="(item, index) in hospitalList" :key="index"
              :label="isEN ? item.HospitalName : item.HospitalNameCN" :value="item.Id" />
          </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>
      </el-form>
    </div>

    <el-table v-loading="loading" v-adaptive="{ bottomOffset: 75 }" :data="list" stripe height="100"
      style="width: 100%">
      <el-table-column type="index" />
      <!--姓名-->
      <el-table-column prop="BlindName" :label="$t('trials:trialDocument:curriculumVitae:table:name')"
        show-overflow-tooltip sortable="custom">
        <template slot-scope="scope">
          <span>{{ isEN ? scope.row.BlindName : scope.row.BlindNameCN }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Code" :label="$t('trials:trialDocument:curriculumVitae:table:UserName')"
        show-overflow-tooltip sortable="custom" />
      <el-table-column prop="Speciality" :label="$t('trials:trialDocument:curriculumVitae:table:Speciality')"
        show-overflow-tooltip sortable="custom">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.SpecialityId === otherId
                ? scope.row.SpecialityOther
                : isEN
                  ? scope.row.Speciality
                  : scope.row.SpecialityCN
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="Subspeciality" :label="$t('trials:trialDocument:curriculumVitae:table:Subspeciality')"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="isEN">
            {{
              scope.row.SubspecialityList.length > 0
                ? scope.row.SubspecialityList.join(', ')
                : ''
            }}
          </span>
          <span v-else>
            {{
              scope.row.SubspecialityCNList.length > 0
                ? scope.row.SubspecialityCNList.join(', ')
                : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="HospitalName" :label="$t('trials:trialDocument:curriculumVitae:table:HospitalName')"
        show-overflow-tooltip sortable="custom">
        <template slot-scope="scope">
          <span>
            {{ isEN ? scope.row.HospitalName : scope.row.HospitalNameCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="OptTimeStr" :label="$t('trials:trialDocument:curriculumVitae:table:submmitTime')"
        show-overflow-tooltip sortable="custom" />
      <el-table-column :label="$t('common:action:action')" width="200">
        <template slot-scope="scope">
          <el-button icon="el-icon-view" :title="$t('common:button:view')" circle @click.stop="preview(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
      @pagination="getList" />
    <el-dialog :visible.sync="preview_visible" fullscreen>
      <div style="height: 100%; overflow: auto">
        <preview :isEN="isEN" :isAll="isAll" :reviewerId.sync="reviewerId" v-if="preview_visible" />
      </div>
    </el-dialog>
  </box-content>
</template>
<script>
const otherId = 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5'
import { getTrialDoctorList } from '@/api/dictionary'
import Pagination from '@/components/Pagination'
import BoxContent from '@/components/BoxContent'
import preview from '@/views/reviewers/curriculumVitae/preview.vue'
import { mapGetters } from 'vuex'
import store from '@/store'
const searchDataDefault = () => {
  return {
    SubspecialityId: null,
    SpecialityId: null,
    HospitalId: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: 'BlindName',
  }
}
export default {
  name: 'curriculumVitae',
  components: { BoxContent, Pagination, preview },
  props: {
    ArchiveTypeEnum: {
      type: Number,
      default: 0,
    },
    rowData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      searchData: searchDataDefault(),
      loading: false,
      list: [],
      total: 0,
      reviewerId: null,
      isAll: false,
      preview_visible: false,
      otherId,
    }
  },
  methods: {
    async getList() {
      try {
        this.searchData.TrialId = this.$route.query.trialId
        this.loading = true
        let res = await getTrialDoctorList(this.searchData)
        this.loading = false
        if (res.IsSuccess) {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 排序
    handleSortByColumn(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()
    },
    // 预览
    preview(row) {
      this.reviewerId = row.Id
      this.isAll = false
      this.preview_visible = true
    },
  },
  watch: {
    Id: {
      handler() {
        this.rowBtnStatus = 'edit'
        this.getList()
      },
      immediate: true,
    },
  },
  mounted() {
    store.dispatch('global/getHospital')
  },
  computed: {
    ...mapGetters(['hospitalList']),
    isEN() {
      return this.$i18n.locale !== 'zh'
    },
    isInspect() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:inspect',
      ])
    },
    isManage() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:manage',
      ])
    },
    hasAdd() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:add',
      ])
    },
    hasEdit() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:edit',
      ])
    },
    hasDel() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:del',
      ])
    },
    hasDownLoad() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:downLoad',
      ])
    },
    hasAccredit() {
      return this.hasPermi([
        'trials:trials-panel:trial-summary:trial-document:accredit',
      ])
    },
    TITLE() {
      return `${this.$fd('ArchiveType', this.ArchiveTypeEnum)} — ${this.isEN ? this.rowData.Name : this.rowData.NameCN
        }`
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

.fileName {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  /* 文本不换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
}

.fileBtnBox {
  display: inline-block;
  width: 50px;

  i {
    cursor: pointer;
    color: #409eff;
    margin-right: 3px;

    &:last-child {
      margin: 0;
    }
  }
}

.topForm {
  .el-form-item {
    margin-right: 30px;
  }
}
</style>