<template>
  <box-content class="reviewers-list">
    <!-- 顶部搜索条件 -->
    <div class="search">
      <div class="base-search-form">
        <el-form size="small" :inline="true">
          <el-form-item :label="$t('reviewers-list:label:Name')">
            <el-input
              v-model="searchData.Name"
              style="width:100px;"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('reviewers-list:label:Modality')">
            <el-select
              v-model="searchData.ReadingTypeIdList"
              clearable
              multiple
              collapse-tags
              style="width:150px;"
            >
              <!-- <el-option
                v-for="(key,value) of dictionaryList.ReadingType"
                :key="key"
                :label="key"
                :value="value"
              /> -->
              <el-option
                v-for="item of dict.type.ReadingType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('reviewers-list:label:Subspeciality')">
            <el-select
              v-model="searchData.SubspecialityIdList"
              multiple
              collapse-tags
              clearable
              style="width:180px;"
            >
              <el-option
                v-for="item of dict.type.Subspeciality"
                :key="item.value"
                :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-button
              icon="el-icon-download"
              type="primary"
              :disabled="!(selectArr.length>0)"
              @click="handleDownLoadOffical"
            >{{$t('reviewers-list:label:DownloadCV')}}</el-button>
            <el-button
              type="primary"
              icon="el-icon-link"
              @click="showResearchLink"
            >
              {{$t('reviewers-list:label:showResearchLink')}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <span style="margin-left:auto;">
<!--        <el-switch-->
<!--          v-model="isEN"-->
<!--          active-text="EN"-->
<!--          inactive-text="中文"-->
<!--          style="margin-right:10px;"-->
<!--          @change="handleIsEnChange"-->
<!--        />-->
        <el-button size="small" icon="el-icon-plus" type="primary" @click="handleNew">{{$t('common:button:new')}}</el-button>
      </span>
    </div>

    <!-- 医生列表 -->
    <el-table
      v-adaptive="{bottomOffset:55}"
      v-loading="listLoading"
      stripe
      height="100"
      :data="list"
      @sort-change="sortByColumn"
      @selection-change="handleSelectChange"
    >
      <el-table-column type="selection" align="left" width="45" :selectable="hasResume" />
      <el-table-column type="index" width="40" align="left" />
      <el-table-column
        align="left"
        prop="LastName"
        :label="$t('reviewers-list:table:Name')"
        show-overflow-tooltip
        width="130"
        sortable="custom"
      >
        <template slot-scope="scope">
          {{ scope.row.LastName + ' / ' + scope.row.FirstName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="ChineseName"
        :label="$t('reviewers-list:table:NameCN')"
        show-overflow-tooltip
        width="90"
        align="left"
      />
      <el-table-column prop="ReviewerCode" :label="$t('reviewers-list:table:ID')" width="80" show-overflow-tooltip sortable="custom" />
      <el-table-column prop="AccountUserName" :label="$t('reviewers-list:table:UserName')" width="140" show-overflow-tooltip sortable="custom" />
      <el-table-column
        :label="$t('reviewers-list:table:Reading')"
        width="100"
        show-overflow-tooltip
        sortable="custom"
        align="left"
        prop="Reading"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.Reading" style="color:#428bca">
            <router-link
              tag="a"
              :to="{
                path: `/trialStats?name=${scope.row.FirstName+' '+scope.row.LastName}&doctorId=${scope.row.Id}&status=10&TokenKey=${tokenKey}`
              }"
              target="_blank"
            >{{ scope.row.Reading }}</router-link>
          </span>
          <span v-else>{{ scope.row.Reading }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('reviewers-list:table:Finished')"
        width="100"
        show-overflow-tooltip
        sortable="custom"
        align="left"
        prop="Finished"
      >
        <template slot-scope="scope">
          <span v-if=" scope.row.Finished" style="color:#428bca">
            <router-link
              tag="a"
              :to="{
                path: `/trialStats?name=${scope.row.FirstName+' '+scope.row.LastName}&doctorId=${scope.row.Id}&status=14&TokenKey=${tokenKey}`
              }"
              target="_blank"
            >{{ scope.row.Finished }}</router-link>
          </span>
          <span v-else>{{ scope.row.Finished }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="SpecialityId"
        :label="$t('reviewers-list:table:Specialty')"
        sortable="custom"
        show-overflow-tooltip
        width="130"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.SpecialityId === otherId ? scope.row.SpecialityOther : isEnglish?scope.row.Speciality:scope.row.SpecialityCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="Subspeciality"
        :label="$t('reviewers-list:table:Subspecialty')"
        show-overflow-tooltip
        min-width="150"
      >
        <template slot-scope="scope">
          <span v-if="isEnglish">
            {{ 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('reviewers-list:table:Institution')"
        min-width="110"
        align="left"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ isEnglish?scope.row.HospitalName:scope.row.HospitalNameCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="City"
        :label="$t('reviewers-list:table:Location')"
        width="110"
        align="left"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ isEnglish?scope.row.City:scope.row.CityCN }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="IsVirtual"
        :label="$t('reviewers-list:table:Virtual')"
        min-width="80"
        align="left"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.IsVirtual ? 'Yes' : 'No' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ReviewStatus"
        :label="$t('reviewers-list:table:Confirmed')"
        min-width="80"
        align="left"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.ReviewStatus === 1 ? 'Yes' : 'No' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common:action:action')" min-width="200" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            circle
            icon="el-icon-info"
            :title="$t('reviewers-list:table:Detail')"
            @click="handleDetail(scope.row)"
          />
          <el-button
            size="mini"
            circle
            icon="el-icon-edit-outline"
            :title="$t('reviewers-list:table:Edit')"
            @click="handleEdit(scope.row)"
          />
          <el-button
            size="mini"
            icon="el-icon-view"
            circle
            :title="$t('reviewers-list:table:Blind')"
            @click="lookResumeInfo(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      class="page"
      :total="total"
      :page.sync="searchData.PageIndex"
      :limit.sync="searchData.PageSize"
      @pagination="getList"
    />
    <base-model :config="share_model">
      <template slot="dialog-body">
        <div>
          <i style="color:#428bca;" class="el-icon-success" />
          <span>{{ $t('reviewers-list:message:msg1')}}</span>
        </div>
        <div style="margin:10px 0;">
          <span style="">{{ $t('reviewers-list:message:msg2') }}</span><el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="shareLink" readonly style="width: 100%;margin-top: 10px" />
        </div>
        <div>
          <el-button type="primary" round @click="copyCode">{{ $t('reviewers-list:button:copyCode') }}</el-button>
        </div>
      </template>
    </base-model>
    <!-- 下载简历模态框 -->
    <base-model :config="model_cfg">
      <template slot="dialog-body">
        <label>Language: </label>
        <el-radio-group v-model="language">
          <el-radio :label="2">English</el-radio>
          <el-radio :label="1">中文</el-radio>
        </el-radio-group>
      </template>
      <template slot="dialog-footer">
        <el-button :disabled="btnLoading" size="small" type="primary" @click="model_cfg.visible = false">Cancel</el-button>
        <el-button size="small" type="primary" :loading="btnLoading" @click="handleDownloadResumes">Ok</el-button>
      </template>
    </base-model>
  </box-content>
</template>
<script>
import { getDoctorSearchList, downloadOfficialCV, getOfficialResume } from '@/api/reviewers'
import store from '@/store'
import { mapGetters, mapMutations } from 'vuex'
import Pagination from '@/components/Pagination'
import BoxContent from '@/components/BoxContent'
import BaseModel from '@/components/BaseModel'
import { getToken } from '@/utils/auth'
import JSZip from 'jszip'
import axios from 'axios'
import { saveAs } from 'file-saver'

const searchDataDefault = () => {
  return {
    Name: '',
    ReadingTypeIdList: [],
    SubspecialityIdList: [],
    DepartmentId: '',
    SpecialityId: '',
    PositionId: '',
    RankId: '',
    HospitalId: '',
    ContractorStatus: '',
    InformationConfirmed: '',
    EnrollStatus: '',
    AcceptingNewTrial: '',
    ActivelyReading: '',
    EvaluationCriteriaIdList: [],
    Nation: '',
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: ''
  }
}
const otherId = 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5'
export default {
  name: 'Reviewers',
  components: { BoxContent, BaseModel, Pagination },
  data() {
    return {
      otherId,
      searchData: searchDataDefault(),
      list: null,
      total: 0,
      listLoading: false,
      selectArr: [],
      isShow: false,
      dialogVisible: false,
      language: 2,
      isEN: true,
      btnLoading: false,
      token: store.getters.token,
      model_cfg: {
        visible: false,
        title: '',
        width: '500px',
        showClose: true
      },
      tokenKey: getToken(),
      share_model: { visible: false, title: '', width: '500px' },
      shareLink: null,
      isEnglish: false
    }
  },
  dicts: ['ReadingType', 'Subspeciality', 'Department', 'Rank', 'Position', 'ReadingStandard'],
  computed: {
    ...mapGetters(['hospitalList', 'reviewersQuery'])
  },
  created() {
    this.reviewersQuery ? this.listQuery = this.reviewersQuery : ''
    this.initPage()
    // this.isEnglish = !!((this.$route.query.isEnglish === true || this.$route.query.isEnglish === 'true'))
    this.isEnglish = this.$i18n.locale === 'zh' ? false : true
    this.isEN = this.isEnglish
  },
  methods: {
    copyCode() {
      this.$copyText(`链接: ${this.shareLink}`).then(
        res => {
          this.$message.success('复制成功')
        }
      ).catch(() => { this.$alert('复制失败') })
    },
    // 复制链接
    copyLink() {
      // 中心调研表链接
      this.$copyText(`${this.$t('trials:researchRecord:message:researchFormLink')}: ${this.shareLink}`).then(
        res => {
          // 复制成功
          this.$message.success(this.$t('trials:researchRecord:message:copySuccessfully'))
        }
      ).catch(() => {
        // 复制失败
        this.$alert(this.$t('trials:researchRecord:message:copyFailed'))
      })
    },
    showResearchLink() {
      const trialId = this.trialId
      this.shareLink = `${location.protocol}//${location.host}/ReviewersResearch`
      this.share_model.visible = true
    },
    lookResumeInfo(row) {
      console.log(row)
      window.open(`/blindResumeInfo?doctorId=${row.Id}&token=${this.token}`)
    },
    initPage() {
      store.dispatch('global/getHospital')
      this.getList()
    },
    // 获取医生列表数据
    getList() {
      this.setQueryParam(this.searchData)
      this.listLoading = true
      // ??
      // this.searchData.InformationConfirmed = 1
      // this.searchData.ContractorStatus = 1
      getDoctorSearchList(this.searchData)
        .then(res => {
          this.listLoading = false
          this.list = res.Result.CurrentPageData
          this.list.forEach(item => {
            if (item.SubspecialityOther) {
              item.SubspecialityList.push(item.SubspecialityOther)
            }
            if (item.SubspecialityOtherCN) {
              item.SubspecialityCNList.push(item.SubspecialityOtherCN)
            }
          })
          this.total = res.Result.TotalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 新增医生信息
    handleNew() {
      this.$router.push({ path: `/reviewers/reviewers-add?Id=&isEnglish=${this.isEnglish}&tabActive=BasicInfo` })
    },
    // More按钮回调
    handleMore() {
      this.isShow = !this.isShow
    },
    // 重置列表
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleDetail(row) {
      this.$router.push({ path: `/reviewers/reviewers-detail?doctorId=${row.Id}&isEnglish=${this.isEnglish}` })
    },
    handleEdit(row) {
      this.$router.push({ path: `/reviewers/reviewers-edit?Id=${row.Id}&isEnglish=${this.isEnglish}&tabActive=BasicInfo` })
    },
    getFileData(fileUrl) {
      return new Promise((resolve, reject) => {
        axios(fileUrl, {
          method: 'GET',
          responseType: 'blob'  // 返回的数据会被强制转为blob类型 ，转换成arraybuffer 也行
        }).then((res) => {
          console.log('res', res)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },
    async handleBatchDown(dataSource) {
      return new Promise(resolve => {
        console.log('开始压缩')
        const zip = new JSZip() // 创建实例对象
        const promises = []
        dataSource.FileList.forEach((item) => {
          console.log(this.OSSclientConfig.basePath + item.Path)
          const promise = this.getFileData(this.OSSclientConfig.basePath + item.Path).then((res) => {
            const fileName = item.FileName + ''
            // 创建文件用file()，创建文件夹用 floder()
            zip.file(fileName, res.data, {binary: true})
          })
          promises.push(promise)
        })
        console.log(promises)
        // 生成 zip 文件
        Promise.all(promises).then(() => {
          // 生成zip 文件
          zip.generateAsync({
            type: 'blob',
            compression: 'DEFLATE',  // STORE: 默认不压缩， DEFLATE：需要压缩
            compressionOptions: {
              level: 9          // 压缩等级 1~9   1 压缩速度最快， 9 最优压缩方式
            }
          }).then((res) => {
            saveAs(res, dataSource.ReviewerCode + '_CV.zip') // 使用FileSaver.saveAs保存文件，文件名可自定义
            resolve()
          })
        }).catch(reason => {
          resolve()
        })
      })
    },
    // 下载指定语言类型的简历
    handleDownloadResumes() {
      this.btnLoading = true
      this.model_cfg.showClose = false
      getOfficialResume({
        doctorIdList: this.selectArr,
        language: this.language
      }).then(async res => {
        try {
          this.btnLoading = false
          this.model_cfg.visible = false
          this.model_cfg.showClose = true
          console.log(res.Result)
          for (let i = 0; res.Result.length > i; i++) {
            let item = res.Result[i]
            console.log(item)
            await this.handleBatchDown(item)
          }
        } catch (e) {
          console.log(e)
        }
        // window.open(res.Result.FullFilePath)
      }).catch(() => {
        this.btnLoading = false
        this.model_cfg.showClose = true
      })
      // downloadOfficialCV(this.selectArr, parseInt(this.language)).then(res => {
      //   this.btnLoading = false
      //   this.model_cfg.visible = false
      //   this.model_cfg.showClose = true
      //   window.open(res.Result.FullFilePath)
      // }).catch(() => {
      //   this.btnLoading = false
      //   this.model_cfg.showClose = true
      // })
    },
    // 查询
    handleSelectSearch() {
      this.searchData.PageIndex = 1
      this.isShow = false
      this.getList()
    },
    // language change事件回调
    handleIsEnChange(val) {
      this.setIsEnglish(val)
    },

    handleDownLoadOffical() {
      this.language = 2
      this.model_cfg.title = this.$t('trials:seletctedReviews:title:language')
      this.model_cfg.visible = true
    },

    // 获取数据表排序类型及排序字段
    sortByColumn(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()
    },
    // 获取勾选行数据
    handleSelectChange(val) {
      const arr = []
      for (let index = 0; index < val.length; index++) {
        arr.push(val[index].Id)
      }
      this.selectArr = arr
    },
    ...mapMutations({
      setQueryParam: 'reviewer/SET_QUERYPARAM',
      setIsEnglish: 'reviewer/SET_ISENGLISH'
    }),
    hasResume(row) {
      if (row.HasResume) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .reviewers-list{
//  .base-search-form{
//     .el-form-item{
//       margin-bottom: 0px;
//     }
//   }
//   .page{
//     text-align: right;
//     margin-top: 5px;
//   }
// }
</style>
