<template>
  <div v-loading="loading" class="resumes-container">
    <div class="resume-content" v-if="!$route.query.ReviewStatus">
      <p>{{$t('system:Agreements:title:Consultant Agreement')}}</p>
      <div class="upload-content">
        <upload-files ref="uploadAgreement" :disabled="$route.query.ReviewStatus === '1'" :doctor-id="doctorId" type="Consultant Agreement" accept=".pdf" @getFileList="getFileList" />
      </div>
      <p>{{ $t('system:GcpCertificate:tap:must') }}</p>
    </div>
    <div v-if="!$route.query.ReviewStatus">
      <el-table :data="agreementList" size="small">
        <el-table-column type="index" width="40" />
        <el-table-column prop="FileName" :label="$t('system:Agreements:table:Consultant Agreement')" width="300" />
        <el-table-column prop="CreateTime" :label="$t('system:Agreements:table:Upload Time')" width="150" />
        <el-table-column :label="$t('common:action:action')" width="400">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handlePreview(scope.row)">{{$t('trials:enrolledReviews:button:view')}}</el-button>
            <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile(scope.row)">{{$t('common:button:delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:20px">
      <span style="margin-right: 20px">
        {{$t('trials:enrolledReviews:message:SOW')}}
      </span>
      <el-button size="small" type="primary" :disabled="$route.query.ReviewStatus === '1'"  @click="addCol(0, $t('trials:enrolledReviews:message:SOW'))">
        {{ $t('common:button:upload') }}</el-button>
      <el-button size="small" type="primary" @click="handleDownload('Reviewer_SOW_Template')">
        <i class="el-icon-view el-icon-download"></i>
        {{ $t('common:button:template') }}
      </el-button>
    </div>
    <el-table :data="sowList" size="small">
      <el-table-column type="index" width="40" />
      <el-table-column :label="$t('system:Agreements:table:Criterion Type')" width="120">
        <template slot-scope="scope">
          {{ scope.row.CriterionName }}
        </template>
      </el-table-column>
      <el-table-column prop="FileName" :label="$t('system:Agreements:table:Statement of Work')" width="400" />
      <el-table-column prop="IsEnable" :label="$t('system:Agreements:table:Is Enable')" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.IsEnable"
            :active-value="true"
            :inactive-value="false"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column prop="Remark" :label="$t('system:Agreements:Remark')" width="200" />
      <el-table-column prop="CreateTime" :label="$t('system:Agreements:Upload Time')" width="150" />
      <el-table-column :label="$t('common:action:action')" width="400">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handlePreview3(scope.row)">{{$t('trials:enrolledReviews:button:view')}}</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEditCol(scope.row, 0, $t('trials:enrolledReviews:message:SOW'))">
            {{ $t('common:button:edit') }}</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile3(scope.row)">{{ $t('common:button:delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px" v-if="!$route.query.ReviewStatus">
      <span style="margin-right: 20px">
          {{$t('trials:enrolledReviews:message:EQC')}}
      </span>
      <el-button size="small" type="primary" :disabled="$route.query.ReviewStatus === '1'" @click="addCol(1, $t('trials:enrolledReviews:message:EQC'))">{{$t('common:button:upload')}}</el-button>
    </div>
    <el-table :data="ackSowList" size="small" v-if="!$route.query.ReviewStatus">
      <el-table-column type="index" width="40" />
      <el-table-column :label="$t('system:Agreements:table:Criterion Type')" width="120">
        <template slot-scope="scope">
          {{ scope.row.CriterionName }}
        </template>
      </el-table-column>
      <el-table-column prop="FileName" :label="$t('system:Agreements:table:Acknowledgement of SOW')" width="400" />
      <el-table-column prop="IsEnable" :label="$t('system:Agreements:table:Is Enable')" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.IsEnable"
            :active-value="true"
            :inactive-value="false"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column prop="Remark" :label="$t('system:Agreements:table:Remark')" width="200" />
      <el-table-column prop="CreateTime" :label="$t('system:Agreements:table:Upload Time')" width="150" />
      <el-table-column label="Action" width="400">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handlePreview3(scope.row)">{{$t('common:button:view')}}</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEditCol(scope.row, 1, $t('trials:enrolledReviews:message:EQC'))">{{$t('common:button:edit')}}</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile3(scope.row)">{{$t('common:button:delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <BaseModel :config="model_cfg">
      <template slot="dialog-body">
        <el-form
          ref="DictionaryTypeConfigForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="small"
        >
          <el-form-item :label="$t('system:Agreements:label:Criterion Type')" prop="CriterionType">
            <el-select v-model="form.CriterionType">
              <el-option
                v-for="item of $d.CriterionType"
                :key="item.id"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('system:Agreements:label:File')" prop="FilePath">
            <el-upload
              class="upload-demo"
              action
              :before-upload="beforeUpload"
              :http-request="handleUploadFile"
              :on-preview="handlePreview2"
              :on-remove="handleRemoveFile2"
              :show-file-list="true"
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary" :disabled="fileList.length > 0">{{$t('common:button:upload')}}</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item :label="$t('system:Agreements:label:Remark')">
            <el-input v-model="form.Remark"  type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
          <el-form-item :label="$t('system:Agreements:label:Is Enable')">
            <el-switch
              v-model="form.IsEnable"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
        </el-form>
      </template>
      <template slot="dialog-footer">
        <el-button :disabled="btnLoading" size="small" type="primary" @click="handleCancle">{{ $t('common:button:cancel') }}</el-button>
        <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">{{ $t('common:button:save') }}</el-button>
      </template>
    </BaseModel>
  </div>
</template>
<script>
import { uploadFile } from '@/api/attachment'
import UploadFiles from '@/components/UploadFiles'
import { getDoctorSowList, getDoctorAckSowList, addDoctorCriterionFile, deleteDoctorCriterionFile, getDoctorCriterionFile } from '@/api/reviewers'
import BaseModel from '@/components/BaseModel'
import { DownloadCommonDoc } from '@/api/dictionary'

export default {
  name: 'Agreements',
  components: {
    UploadFiles, BaseModel
  },
  data() {
    return {
      doctorId: this.$route.query.Id,
      agreementList: [],
      sowList: [],
      ackSowList: [],
      loading: false,
      isOpen: false,
      btnLoading: false,
      model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true },
      form: {
        Remark: null,
        FileType: null,
        FileName: null,
        FilePath: null,
        DoctorId: null,
        CriterionType: null,
        IsEnable: false
      },
      rules: {
        CriterionType: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
        FilePath: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur'] }],
      },
      fileList: []
    }
  },
  mounted() {
    this.initSowList()
  },
  methods: {
    handleDownload(code) {
      this.loading = true
      DownloadCommonDoc(code).then(data => {
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleEditCol(row, fileType, title) {
      this.model_cfg.visible = true
      this.form = Object.assign({}, row)
      this.fileList[0] = { name: row.FileName, path: row.FilePath }
      this.form.FileType = fileType
      this.model_cfg.title = title
    },
    handleRemoveFile3(row) {
      this.$confirm('确定删除？').then(() => {
        deleteDoctorCriterionFile({
          Id: row.Id
        }).then(() => {
          this.initSowList()
          this.$message.success('删除成功')
        })
      })
    },
    handleRemoveFile2() {
      this.form.FileName = null
      this.form.FilePath = null
      this.fileList = []
    },
    beforeUpload() {
      if (this.fileList.length > 0) {
        this.$alert('最多只能传一个附件')
        return
      }
    },
    handlePreview3(row) {
      if (row.FilePath) {
        window.open(this.OSSclientConfig.basePath + row.FilePath, '_blank')
      }
    },
    handlePreview2(row, r2) {
      if (row.fullPath) {
        window.open(this.OSSclientConfig.basePath + row.fullPath, '_blank')
      }
    },
    async handleUploadFile(param) {
      this.btnLoading = true
      var fileName = param.file.name
      let file = await this.fileToBlob(param.file)
      let res = await this.OSSclient.put(`/SystemData/reviewer/${this.form.FileType === 0 ? '既往阅片情况声明' : '入项资格确认书'}/${this.doctorId}/${fileName}`, file)
      this.form.FileName = param.file.name
      this.form.FilePath = this.$getObjectName(res.url)
      this.fileList[0] = { name: this.$getObjectName(res.url), path: this.$getObjectName(res.url), fullPath: this.$getObjectName(res.url), url: res.url }
      this.btnLoading = false
    },
    handleCancle() {
      this.model_cfg.visible = false
    },
    handleSave() {
      this.$refs['DictionaryTypeConfigForm'].validate(valid => {
        if (!valid) return
        this.form.DoctorId = this.doctorId
        this.form.CriterionName = this.$fd('CriterionType', this.form.CriterionType)
        addDoctorCriterionFile(this.form).then(res => {
          this.$message.success('添加成功')
          this.initSowList()
          this.handleCancle()
        })
      })
    },
    addCol(fileType, title) {
      this.model_cfg.visible = true
      this.form = {
        Remark: null,
        FileType: null,
        FileName: null,
        FilePath: null,
        DoctorId: null,
        CriterionType: null
      }
      this.handleRemoveFile2()
      this.form.FileType = fileType
      this.model_cfg.title = title
    },
    initSowList() {
      if (!this.doctorId) return
      getDoctorCriterionFile({
        fileType: 0,
        DoctorId: this.doctorId
      }).then(res => {
        this.sowList = res.Result
      })
      getDoctorCriterionFile({
        fileType: 1,
        DoctorId: this.doctorId
      }).then(res => {
        this.ackSowList = res.Result
      })
    },
    handlePreview(row) {
      if (row.FullPath) {
        window.open(this.OSSclientConfig.basePath + row.FullPath, '_blank')
      }
    },
    handleRemoveFile(row) {
      this.$refs.uploadAgreement.handleDeleteFile(row)
    },
    getFileList(fileList) {
      this.agreementList = fileList
    }
  }
}
</script>
<style lang="scss" scoped>
.resumes-container{
  p {
    float: left;
    font-size: 13px;
    line-height: 30px;
    margin: 0;
  }
  .upload-content {
    float: left;
  }
}

</style>
