<template>
  <div v-loading="loading" class="check-container form-container">
    <el-form
      ref="checkForm"
      :model="checkForm"
      label-width="200px"
      size="small"
      :rules="rules"
    >
      <div class="title-wrapper">
        <p>{{ $t('system:Setting:title:Blinded information') }}</p>
      </div>
      <div class="check-content">
        <el-form-item
          :label="$t('system:Setting:label:Blind Name')"
          prop="BlindName"
        >
          <el-input
            v-model="checkForm.BlindName"
            style="width: 300px"
            :maxlength="400"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:Setting:label:Blind NameCN')"
          prop="BlindNameCN"
        >
          <el-input
            v-model="checkForm.BlindNameCN"
            style="width: 300px"
            :maxlength="400"
          />
        </el-form-item>
        <el-form-item
          :label="$t('system:Setting:label:Blind Publications')"
          prop="BlindPublications"
        >
          <el-input
            v-model="checkForm.BlindPublications"
            type="textarea"
            rows="8"
            style="width: 60%"
            size="small"
            :maxlength="4000"
          />
        </el-form-item>
      </div>
      <div class="title-wrapper">
        <p>{{ $t('system:Setting:title:Blinded Setting') }}</p>
      </div>
      <div class="check-content">
        <el-form-item
          :label="$t('system:Setting:label:Information Confirmed?')"
        >
          <el-radio-group
            v-model="checkForm.ReviewStatus"
            @change="handleChange"
          >
            <el-radio :label="1">{{
              $t('system:Setting:label:Information Confirmed?:Yes')
            }}</el-radio>
            <el-radio :label="2">{{
              $t('system:Setting:label:Information Confirmed?:No')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('system:Setting:label:Contractor Status?')">
          <el-radio-group
            v-model="checkForm.CooperateStatus"
            @change="handleChange"
          >
            <el-radio :label="1">{{
              $t('system:Setting:label:Information Confirmed?:Yes')
            }}</el-radio>
            <el-radio :label="2">{{
              $t('system:Setting:label:Information Confirmed?:No')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t('system:Setting:label:Accepting New Trials?')">
          <el-radio-group
            v-model="checkForm.AcceptingNewTrial"
            :disabled="radioDisabled"
          >
            <el-radio :label="true">{{
              $t('system:Setting:label:Information Confirmed?:Yes')
            }}</el-radio>
            <el-radio :label="false">{{
              $t('system:Setting:label:Information Confirmed?:No')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t('system:Setting:label:Actively Reading?')">
          <el-radio-group
            v-model="checkForm.ActivelyReading"
            :disabled="radioDisabled"
          >
            <el-radio :label="true">{{
              $t('system:Setting:label:Information Confirmed?:Yes')
            }}</el-radio>
            <el-radio :label="false">{{
              $t('system:Setting:label:Information Confirmed?:No')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t('system:Setting:label:Is Virtual?')">
          <el-radio-group
            v-model="checkForm.IsVirtual"
            :disabled="radioDisabled"
          >
            <el-radio :label="true">{{
              $t('system:Setting:label:Information Confirmed?:Yes')
            }}</el-radio>
            <el-radio :label="false">{{
              $t('system:Setting:label:Information Confirmed?:No')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t('system:Setting:label:On Vacation:')">
          <span style="font-size: 12px; margin-right: 20px">{{
            InHoliday
          }}</span>
          <el-button type="text" @click="handleView">{{
            $t('system:Setting:Planned Vacation')
          }}</el-button>
        </el-form-item>
        <el-form-item
          :label="$t('system:Setting:label:Comment:')"
          prop="AdminComment"
        >
          <el-input
            v-model="checkForm.AdminComment"
            type="textarea"
            style="width: 60%"
            rows="8"
            :maxlength="4000"
          />
        </el-form-item>

        <el-form-item style="margin-top: 20px">
          <el-button
            type="primary"
            :disabled="isDisabled"
            @click="handleSave"
            >{{ $t('common:button:save') }}</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-dialog
      :title="$t('system:Setting:title:Vacation')"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="closeDialog"
      append-to-body
    >
      <div>
        <el-date-picker
          v-model="daterange"
          style="width: 360px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="to"
          :start-placeholder="$t('system:Setting:label:Beginning Date')"
          :end-placeholder="$t('system:Setting:label:End Date')"
          size="small"
        />
        <el-button
          style="margin-left: 10px"
          type="primary"
          size="small"
          @click="handleAddHoliday"
          >{{ $t('common:button:add') }}</el-button
        >
      </div>
      <el-table v-loading="loading2" :data="gridData" size="small">
        <el-table-column type="index" />
        <el-table-column
          property="StartDate"
          :label="$t('system:Setting:table:Beginning Date')"
          min-width="120"
          :formatter="beginTimeFormatter"
        />
        <el-table-column
          property="EndDate"
          :label="$t('system:Setting:table:End Date')"
          min-width="120"
          :formatter="endTimeFormatter"
        />
        <el-table-column
          :label="$t('common:action:action')"
          fixed="right"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.row)">{{
              $t('common:button:delete')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="padding: 10px 0; text-align: right">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next"
          :total="totalItems"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :current-page.sync="pageIndex"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAuditState,
  updateAuditResume,
  getVacationList,
  addOrUpdateVacation,
  deleteVacation,
  getIsVacation,
} from '@/api/reviewers'
import { fmtDate } from '@/utils/formatter'
export default {
  name: 'Setting',
  props: {
    reviewerId: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      checkForm: {
        Id: '',
        CooperateStatus: 2,
        ResumeStatus: 2,
        ReviewStatus: 2,
        AcceptingNewTrial: false,
        ActivelyReading: false,
        IsVirtual: false,
        BlindName: '',
        AdminComment: '',
        InHoliday: '',
        BlindNameCN: '',
        BlindPublications: '',
      },
      rules: {
        AdminComment: [
          {
            max: 4000,
            message: this.$t('form:rules:maxLength:4000'),
            trigger: 'blur',
          },
        ],
        BlindName: [
          { required: true, message: 'Please specify', trigger: 'blur' },
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        BlindNameCN: [
          {
            max: 400,
            message: this.$t('form:rules:maxLength:400'),
            trigger: 'blur',
          },
        ],
        BlindPublications: [
          {
            max: 4000,
            message: this.$t('form:rules:maxLength:4000'),
            trigger: 'blur',
          },
        ],
      },
      doctorId: this.$route.query.Id || this.reviewerId,
      isDisabled: false,
      radioDisabled: false,
      dialogVisible: false,
      gridData: [],
      daterange: '',
      pageIndex: 1,
      pageSize: 5,
      totalItems: 0,
      loading2: false,
      InHoliday: '',
    }
  },
  watch: {
    reviewerId() {
      if (this.reviewerId) {
        this.doctorId = this.reviewerId
        this.initForm()
        this.getIsVacation()
      }
    },
  },
  mounted() {
    this.initForm()
    this.getIsVacation()
  },
  methods: {
    // 获取是否休假
    async getIsVacation() {
      if (!this.doctorId) return false
      try {
        let data = {
          DoctorId: this.doctorId,
        }
        let res = await getIsVacation(data)
        if (res.IsSuccess) {
          this.InHoliday = res.Result.IsVacation ? 'Yes' : 'No'
        }
      } catch (err) {
        console.log(err)
      }
    },
    initForm() {
      if (!this.doctorId) return
      getAuditState(this.doctorId).then((res) => {
        if (res.Result) {
          this.checkForm = res.Result
          this.checkForm.InHoliday = res.Result.InHoliday ? 'Yes' : 'No'
        }
      })
    },
    handleSave() {
      this.$refs.checkForm.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          const param = {}
          Object.assign(param, this.checkForm)
          param.InHoliday = this.checkForm.InHoliday === 'Yes'
          param.ResumeStatus = param.ReviewStatus
          updateAuditResume(param)
            .then((res) => {
              if (res.IsSuccess) {
                if (res.Result) {
                  this.checkForm.Id = res.Result
                }
                this.isDisabled = false
                this.$message.success(
                  this.$t('common:message:savedSuccessfully')
                )
              }
            })
            .catch(() => {
              this.isDisabled = false
            })
        }
      })
    },
    handleView() {
      this.dialogVisible = true
      this.initHolidayList()
    },
    initHolidayList() {
      this.loading2 = true
      getVacationList(this.doctorId, this.pageIndex, this.pageSize)
        .then((res) => {
          if (res.IsSuccess) {
            this.gridData = res.Result.CurrentPageData
            this.totalItems = res.Result.TotalCount
          }
          this.loading2 = false
        })
        .catch(() => {
          this.loading2 = false
        })
    },
    handleAddHoliday() {
      if (this.daterange) {
        const param = {
          DoctorId: this.doctorId,
          StartDate: this.daterange[0],
          EndDate: this.daterange[1],
        }
        this.loading2 = true
        addOrUpdateVacation(param)
          .then((res) => {
            if (res.IsSuccess) {
              param.Id = res.Result
              this.gridData.push(param)
              this.totalItems = this.totalItems + 1
              this.daterange = ''
            } else {
              this.$alert(res.ErrorMessage)
            }
            this.loading2 = false
          })
          .catch(() => {
            this.daterange = ''
            this.loading2 = false
          })
      }
    },
    handleDelete(row) {
      this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.loading2 = true
          deleteVacation(row.Id)
            .then((res) => {
              if (res.IsSuccess) {
                var index = this.gridData.findIndex(
                  (item) => item.Id === row.Id
                )
                if (index !== -1) {
                  this.gridData.splice(index, 1)
                  this.totalItems = this.totalItems - 1
                }
                this.$message.success(
                  this.$t('common:message:deletedSuccessfully')
                )
              }
              this.loading2 = false
            })
            .catch(() => {
              this.loading2 = false
            })
        })
        .catch((action) => {})
    },
    closeDialog() {
      this.getIsVacation()
    },
    handleChange() {
      if (
        this.checkForm.ReviewStatus === 2 ||
        this.checkForm.cooperateStatus === 2
      ) {
        this.checkForm.ActivelyReading = false
        this.checkForm.AcceptingNewTrial = false
        this.radioDisabled = true
      } else {
        this.radioDisabled = false
      }
    },
    beginTimeFormatter(row) {
      if (row.StartDate) {
        return fmtDate(row.StartDate)
      }
    },
    endTimeFormatter(row) {
      if (row.EndDate) {
        return fmtDate(row.EndDate)
      }
    },
    statusFormatter(row) {
      if (row.Status) {
        return 'on vacation'
      } else {
        return ''
      }
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.initHolidayList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.initHolidayList()
    },
  },
}
</script>
