<template>
  <div v-loading="loading" class="resumes-container">
    <div class="resume-content" v-if="!$route.query.ReviewStatus">
      <p>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>(must be in pdf format)</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="Consultant Agreement" width="300" />
        <el-table-column prop="CreateTime" label="Upload Time" width="150" />
        <el-table-column label="Action" width="400">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handlePreview(scope.row)">View</el-button>
            <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile(scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:20px">
      <span style="margin-right: 20px">
        {{$t('trials:enrolledReviews:button:sow')}}
      </span>
      <el-button size="small" type="primary" :disabled="$route.query.ReviewStatus === '1'"  @click="addCol(0, $t('trials:enrolledReviews:button:sow'))">Upload</el-button>
      <el-button size="small" type="primary" @click="handleDownload('Reviewer_SOW_Template')">
        <i class="el-icon-view el-icon-download"></i>
        Template
      </el-button>
    </div>
    <el-table :data="sowList" size="small">
      <el-table-column type="index" width="40" />
      <el-table-column label="Criterion Type" width="120">
        <template slot-scope="scope">
          {{ scope.row.CriterionName }}
        </template>
      </el-table-column>
      <el-table-column prop="FileName" label="Statement of Work" width="400" />
      <el-table-column prop="IsEnable" label="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="Remark" width="200" />
      <el-table-column prop="CreateTime" label="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)">View</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEditCol(scope.row, 0, $t('trials:enrolledReviews:button:sow'))">Edit</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile3(scope.row)">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:button:asow')}}
      </span>
      <el-button size="small" type="primary" :disabled="$route.query.ReviewStatus === '1'" @click="addCol(1, $t('trials:enrolledReviews:button:asow'))">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="Criterion Type" width="120">
        <template slot-scope="scope">
          {{ scope.row.CriterionName }}
        </template>
      </el-table-column>
      <el-table-column prop="FileName" label="Acknowledgement of SOW" width="400" />
      <el-table-column prop="IsEnable" label="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="Remark" width="200" />
      <el-table-column prop="CreateTime" label="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)">View</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEditCol(scope.row, 1, $t('trials:enrolledReviews:button:asow'))">Edit</el-button>
          <el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleRemoveFile3(scope.row)">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="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="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">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="Remark">
            <el-input :maxLength="$inputMax" v-model="form.Remark"  type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </el-form-item>
          <el-form-item 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">Cancel</el-button>
        <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">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.$message.error('最多只能传一个附件')
        return
      }
    },
    handlePreview3(row) {
      if (row.FilePath) {
        window.open(row.FilePath, '_blank')
      }
    },
    handlePreview2(row, r2) {
      if (row.fullPath) {
        window.open(row.fullPath, '_blank')
      }
    },
    handleUploadFile(param) {
      this.btnLoading = true
      const formData = new FormData()
      formData.append('file', param.file)
      this.form.FileName = param.file.name
      uploadFile(param.file, this.form.FileType === 0 ? '既往阅片情况声明' : '入项资格确认书', this.doctorId).then(res => {
        this.form.FilePath = res.Result.FilePath
        this.btnLoading = false
        this.fileList[0] = { name: param.file.name, path: res.Result.FilePath, fullPath: res.Result.FullFilePath }
      })
    },
    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() {
      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(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>
