<template>
  <div class="form-container">
    <div class="title-wrapper">
      <p>{{ $t('system:TrialExperience:title:Clinical Trial Experience') }}</p>
      <el-button
        :disabled="$route.query.ReviewStatus === '1'"
        class="add"
        size="small"
        @click="handleAddClinicalTrial"
        >{{ $t('common:button:add') }}</el-button
      >
    </div>
    <div style="padding: 0 40px">
      <el-table
        ref="clinicalTrialTbl"
        v-loading="loading"
        :data="clinicalTrialList"
        class="table"
        size="small"
      >
        <el-table-column type="index" width="40" />
        <el-table-column
          prop="Phase"
          :label="$t('system:TrialExperience:title:Phase')"
          min-width="50"
        >
          <template slot-scope="scope">
            {{
              scope.row.OtherStages ? scope.row.OtherStages : scope.row.Phase
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="EvaluationCriteriaList"
          :label="$t('system:TrialExperience:title:Review Criteria')"
          min-width="100"
        >
          <template slot-scope="scope">
            {{
              scope.row.EvaluationCriteriaList.length > 0
                ? scope.row.EvaluationCriteriaList.join(', ')
                : ''
            }}
            <span v-if="scope.row.OtherCriterion">
              {{
                scope.row.EvaluationCriteriaList.length > 0
                  ? `, ${scope.row.OtherCriterion}`
                  : scope.row.OtherCriterion
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="EvaluationCriteriaList"
          :label="$t('system:TrialExperience:title:Starting And Ending Date')"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.StartTime"
              >{{ scope.row.StartTime.split('-')[0] }} ~
              {{
                scope.row.EndTime ? scope.row.EndTime.split('-')[0] : '至今'
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="VisitReadingCount"
          :label="$t('system:TrialExperience:title:Visit Reading Count')"
          min-width="70"
        />
        <el-table-column
          prop="EvaluationContent"
          :label="$t('system:TrialExperience:Indication')"
          min-width="70"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.EvaluationContent">
              {{ scope.row.EvaluationContent }}
            </span>
            <span v-else>
              {{ $fd('Indication', scope.row.IndicationEnum) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:TrialExperience:Operation')"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="$route.query.ReviewStatus === '1'"
              @click="handleEdit(scope.row)"
            >
              {{ $t('common:button:edit') }}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="$route.query.ReviewStatus === '1'"
              @click="handleDel(scope.row)"
            >
              {{ $t('common:button:delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title-wrapper" style="margin-top: 10px">
      <p>{{ $t('system:TrialExperience:title:GCP Certificate') }}</p>
    </div>
    <div style="margin-left: 40px; width: 40%">
      <gcp-certificate
        :doctor-id="doctorId"
        :gcp="GCP"
        :gcp-id="GCPID"
        :DATA="GCPData"
      />
    </div>
    <div class="title-wrapper" style="margin-top: 10px">
      <p>{{ $t('system:TrialExperience:title:Other Relevant Experience') }}</p>
    </div>
    <div style="padding: 0 40px">
      <el-row type="flex" justify="space-between">
        <el-col :span="11">
          <el-input
            v-model="OtherClinicalExperience"
            type="textarea"
            rows="8"
            placeholder="Please specify in English"
            size="small"
            :maxlength="4000"
          />
        </el-col>
        <el-col :span="11">
          <el-input
            v-model="OtherClinicalExperienceCN"
            :disabled="$route.query.ReviewStatus === '1'"
            type="textarea"
            rows="8"
            placeholder="请用中文注明"
            size="small"
            :maxlength="4000"
          />
        </el-col>
      </el-row>
      <el-button
        type="primary"
        size="small"
        style="margin-top: 20px"
        :disabled="isBtnDisabled || $route.query.ReviewStatus === '1'"
        @click="handleSaveOtherClinical"
      >
        {{ $t('common:button:save') }}</el-button
      >
    </div>
    <el-dialog
      v-if="clinicalTrialDialogVisible"
      :title="clinicalTrialDialogTitle"
      :visible.sync="clinicalTrialDialogVisible"
      width="480px"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form
        ref="clinicalTrialForm"
        label-width="150px"
        :rules="clinicalTrialRules"
        class="demo-ruleForm"
        :model="clinicalTrialForm"
        size="small"
      >
        <el-form-item
          :label="$t('system:TrialExperience:label:Phase')"
          prop="PhaseId"
        >
          <el-select
            v-model="clinicalTrialForm.PhaseId"
            clearable
            placeholder=""
          >
            <el-option
              v-for="item of dictionaryList.Trial_Phase"
              :key="item.Id"
              :label="item.Value"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="OtherStages" v-if="Trial_Phase_isOther">
          <el-input
            v-model="clinicalTrialForm.OtherStages"
            clearable
            :placeholder="
              $t('curriculumVitae:clinicalTrials:placeholder:byStagesOther')
            "
            :maxlength="400"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('system:TrialExperience:label:Review Criteria')"
          prop="EvaluationCriteriaIdList"
        >
          <el-select
            v-model="clinicalTrialForm.EvaluationCriteriaIdList"
            multiple
          >
            <!-- <el-option v-for="(key,value) of dictionaryList.CriterionType" :key="value" :label="key" :value="value" /> -->
            <el-option
              v-for="item in CriterionType"
              :key="item.Id"
              :label="item.Value"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="OtherCriterion" v-if="ReadingStandard_isOther">
          <el-input
            v-model="clinicalTrialForm.OtherCriterion"
            clearable
            :placeholder="
              $t('curriculumVitae:clinicalTrials:placeholder:criterionOther')
            "
            :maxlength="400"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('system:TrialExperience:label:Start Time')"
          prop="StartTime"
        >
          <el-date-picker
            v-model="clinicalTrialForm.StartTime"
            type="year"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="$t('system:TrialExperience:label:End Time')"
          prop="EndTime"
        >
          <el-date-picker
            v-model="clinicalTrialForm.EndTime"
            type="year"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="$t('system:TrialExperience:Visit Reading Count')"
          prop="VisitReadingCount"
        >
          <el-input
            style="width: 100%"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="clinicalTrialForm.VisitReadingCount"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
        <!-- 适应症类型 IndicationType -->
        <el-form-item
          :label="$t('system:TrialExperience:indicationType')"
          prop="IndicationTypeId"
        >
          <el-select
            v-model="clinicalTrialForm.IndicationTypeId"
            @change="handleIndicationTypeChange"
          >
            <el-option
              v-for="item of $d.IndicationType"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:TrialExperience:Indication')"
          prop="IndicationEnum"
        >
          <el-select
            v-model="clinicalTrialForm.IndicationEnum"
            :disabled="!clinicalTrialForm.IndicationTypeId"
          >
            <el-option
              v-for="item of IndicationOptions"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="EvaluationContent" v-if="IndicationEnum_isOther">
          <el-input
            v-model="clinicalTrialForm.EvaluationContent"
            clearable
            :maxlength="400"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          :loading="isDisabled"
          @click="handleSave"
          >{{ $t('common:button:save') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import UploadFile from '@/components/UploadFile'
import {
  getTrialExperience,
  addOrUpdateTrialExperience,
  deleteTrialExperience,
  updateOtherExperience,
} from '@/api/reviewers'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import GcpCertificate from './GcpCertificate.vue'
import moment from 'moment'
const getClinicalTrialDefault = () => {
  return {
    PhaseId: '',
    EvaluationCriteriaIdList: [],
    EvaluationContent: '',
    VisitReadingCount: 0,
    StartTime: null,
    EndTime: null,
    OtherStages: '',
    OtherCriterion: '',
    IndicationEnum: null,
    IndicationTypeId: null,
  }
}
export default {
  name: 'TrialExperience',
  components: { GcpCertificate },
  props: {
    reviewerId: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      clinicalTrialList: [],
      clinicalTrialDialogTitle: '',
      clinicalTrialDialogVisible: false,
      clinicalTrialForm: getClinicalTrialDefault(),
      clinicalTrialRules: {
        PhaseId: [
          {
            required: true,
            message: 'Please select',
            trigger: ['blur', 'change'],
          },
        ],
        EvaluationCriteriaIdList: [
          {
            required: true,
            message: 'Please select',
            trigger: ['blur', 'change'],
          },
        ],
        VisitReadingCount: [
          { required: true, message: 'Please specify', trigger: 'blur' },
        ],
        EvaluationContent: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        IndicationEnum: [
          { required: true, message: 'Please select', trigger: 'blur' },
        ],
        StartTime: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                this.clinicalTrialForm.EndTime &&
                moment(value).isAfter(moment(this.clinicalTrialForm.EndTime))
              ) {
                callback(
                  new Error(
                    this.$t('system:TrialExperience:rule:startBeforeEnd')
                  )
                )
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        EndTime: [
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                this.clinicalTrialForm.StartTime &&
                moment(value).isBefore(moment(this.clinicalTrialForm.StartTime))
              ) {
                callback(
                  new Error(
                    this.$t('system:TrialExperience:rule:endBeforeStart')
                  )
                )
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        OtherStages: [
          {
            required: true,
            message: 'Please input',
            trigger: ['blur', 'change'],
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        OtherCriterion: [
          {
            required: true,
            message: 'Please input',
            trigger: ['blur', 'change'],
          },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
      },
      GCP: 0,
      GCPID: '',
      OtherClinicalExperience: '',
      OtherClinicalExperienceCN: '',
      isDisabled: false,
      doctorId: this.$route.query.Id || this.reviewerId,
      isBtnDisabled: false,
      selectId: '00000000-0000-0000-0000-000000000000',
      dictionaryList: {},
      // otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
      otherId: '00000000-0000-0000-0000-000000000000',
      GCPData: {},
    }
  },
  computed: {
    IndicationOptions() {
      console.log(
        this.$d.IndicationType,
        this.clinicalTrialForm.IndicationTypeId
      )
      if (!this.clinicalTrialForm.IndicationTypeId) return []
      let indicationGroupingArr = this.$d.IndicationType.filter(
        (item) => item.id === this.clinicalTrialForm.IndicationTypeId
      )
      let indicationGrouping = null
      if (
        Array.isArray(indicationGroupingArr) &&
        indicationGroupingArr.length > 0
      ) {
        indicationGrouping = indicationGroupingArr[0].raw.ChildGroup
      }
      let arr =
        this.$d.Indication.filter(
          (item) => indicationGrouping === item.raw.ChildGroup
        ) || []
      return arr
    },
    IndicationEnum_isOther() {
      if (!this.clinicalTrialForm.IndicationEnum) return false
      let value = this.$d.Indication.find(
        (item) => item.value === this.clinicalTrialForm.IndicationEnum
      ).label
      return value === this.$t('curriculumVitae:selectLabel:Other')
    },
    Trial_Phase_isOther() {
      if (!this.clinicalTrialForm.PhaseId) return false
      let value = this.dictionaryList.Trial_Phase.find(
        (item) => item.Id === this.clinicalTrialForm.PhaseId
      ).Value
      return value === this.$t('curriculumVitae:selectLabel:Other')
    },
    ReadingStandard_isOther() {
      if (
        !this.clinicalTrialForm.EvaluationCriteriaIdList ||
        this.clinicalTrialForm.EvaluationCriteriaIdList.length <= 0
      )
        return false
      return this.clinicalTrialForm.EvaluationCriteriaIdList.includes(
        this.otherId
      )
    },
    CriterionType() {
      if (!this.dictionaryList.CriterionType) return []
      return [
        ...this.dictionaryList.CriterionType,
        {
          Id: this.otherId,
          Value: this.$t('curriculumVitae:selectLabel:Other'),
        },
      ]
    },
  },
  watch: {
    reviewerId() {
      if (this.reviewerId) {
        this.doctorId = this.reviewerId
        this.initForm()
      }
    },
    Trial_Phase_isOther() {
      if (!this.Trial_Phase_isOther) {
        this.clinicalTrialForm.OtherStages = null
      }
    },
    ReadingStandard_isOther() {
      if (!this.ReadingStandard_isOther) {
        this.clinicalTrialForm.OtherCriterion = null
      }
    },
    IndicationEnum_isOther() {
      if (!this.IndicationEnum_isOther) {
        this.clinicalTrialForm.EvaluationContent = null
      }
    },
  },
  created() {
    this.initForm()
  },
  methods: {
    async initForm() {
      await this.getDicData()
      const id = this.$route.query.Id || this.reviewerId
      if (id) {
        this.loading = true
        let data = {
          DoctorId: id,
        }
        if (this.$route.query.trialId) {
          data.TrialId = this.$route.query.trialId
        }
        getTrialExperience(data)
          .then((res) => {
            this.clinicalTrialList = res.Result.ClinicalTrialExperienceList
            this.GCP = res.Result.GCP
            this.GCPID = res.Result.GCPId
            this.GCPData = {
              GCPAgencies: res.Result.GCPAgencies,
              GCPTime: res.Result.GCPTime,
            }
            this.OtherClinicalExperience = res.Result.OtherClinicalExperience
            this.OtherClinicalExperienceCN =
              res.Result.OtherClinicalExperienceCN
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    getDicData() {
      getBasicDataSelects(['Trial_Phase', 'CriterionType']).then((res) => {
        this.dictionaryList = { ...res.Result }
      })
    },
    handleAddClinicalTrial() {
      this.clinicalTrialDialogTitle = 'New'
      this.clinicalTrialDialogVisible = true
      this.clinicalTrialForm.Id = null
      this.clinicalTrialForm = Object.assign({}, getClinicalTrialDefault())
    },
    handleEdit(row) {
      const {
        Id,
        PhaseId,
        EvaluationCriteriaIdList,
        EvaluationContent,
        StartTime,
        EndTime,
        VisitReadingCount,
        OtherStages,
        OtherCriterion,
        IndicationEnum,
        IndicationTypeId,
      } = row
      this.clinicalTrialForm = Object.assign({}, getClinicalTrialDefault())
      this.clinicalTrialDialogTitle = 'Edit'
      this.clinicalTrialDialogVisible = true
      this.clinicalTrialForm.Id = Id
      this.clinicalTrialForm.StartTime = StartTime
      this.clinicalTrialForm.EndTime = EndTime
      this.clinicalTrialForm.PhaseId = PhaseId
      this.clinicalTrialForm.VisitReadingCount = VisitReadingCount
      this.clinicalTrialForm.EvaluationCriteriaIdList = EvaluationCriteriaIdList
      this.clinicalTrialForm.EvaluationContent = EvaluationContent
      this.clinicalTrialForm.OtherStages = OtherStages
      this.clinicalTrialForm.OtherCriterion = OtherCriterion
      this.clinicalTrialForm.IndicationEnum = IndicationEnum
      this.clinicalTrialForm.IndicationTypeId = IndicationTypeId
    },
    handleSave() {
      this.$refs.clinicalTrialForm.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          this.clinicalTrialForm.DoctorId =
            this.$route.query.Id || this.reviewerId
          var dateTime
          if (this.clinicalTrialForm.StartTime) {
            dateTime = new Date(this.clinicalTrialForm.StartTime)
            this.clinicalTrialForm.StartTime =
              moment(new Date(dateTime.setDate(dateTime.getDate() + 1))).format(
                'YYYY'
              ) + '-01'
          }
          if (this.clinicalTrialForm.EndTime) {
            dateTime = new Date(this.clinicalTrialForm.EndTime)
            this.clinicalTrialForm.EndTime =
              moment(new Date(dateTime.setDate(dateTime.getDate() + 1))).format(
                'YYYY'
              ) + '-01'
          }
          if (this.$route.query.trialId) {
            this.clinicalTrialForm.TrialId = this.$route.query.trialId
          }
          addOrUpdateTrialExperience(this.clinicalTrialForm)
            .then((res) => {
              this.isDisabled = false
              this.initForm()
              if (this.clinicalTrialForm.Id) {
                this.$message({
                  message: 'Updated successfully',
                  type: 'success',
                })
              } else {
                this.$message({
                  message: 'Addedd successfully',
                  type: 'success',
                })
              }
              this.clinicalTrialDialogVisible = false
            })
            .catch(() => {
              this.isDisabled = false
            })
        }
      })
    },
    handleDel(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          deleteTrialExperience(row.Id).then((res) => {
            this.clinicalTrialList.splice(
              this.clinicalTrialList.findIndex((item) => item.Id === row.Id),
              1
            )
            this.$message.success('Deleted successfully !')
          })
        })
        .catch((action) => {})
    },
    handleSaveOtherClinical() {
      const param = {
        DoctorId: this.doctorId,
        OtherClinicalExperience: this.OtherClinicalExperience,
        OtherClinicalExperienceCN: this.OtherClinicalExperienceCN,
      }
      if (this.$route.query.trialId) {
        param.TrialId = this.$route.query.trialId
      }
      updateOtherExperience(param).then((res) => {
        if (res.IsSuccess) {
          if (this.id) {
            this.$message.success('Updated successfully')
          } else {
            this.$message.success('Addedd successfully')
          }
        }
      })
    },
    handleIndicationTypeChange(val) {
      this.clinicalTrialForm.EvaluationContent = null
      this.clinicalTrialForm.IndicationEnum = null
    },
  },
}
</script>
