<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>盲化信息</p>
      </div>
      <div class="check-content">
        <el-form-item label="Blind Name" prop="BlindName">
          <el-input
            v-model="checkForm.BlindName"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item label="Blind NameCN" prop="BlindNameCN">
          <el-input
            v-model="checkForm.BlindNameCN"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item label="Blind Publications" prop="BlindPublications">
          <el-input v-model="checkForm.BlindPublications" type="textarea" rows="8" style="width:60%;" size="small" />
        </el-form-item>
      </div>
      <div class="title-wrapper">
        <p>Setting</p>
      </div>
      <div class="check-content">
          <el-form-item label="Information Confirmed?">
            <el-radio-group v-model="checkForm.ReviewStatus" @change="handleChange">
              <el-radio :label="1">Yes</el-radio>
              <el-radio :label="2">No</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Contractor Status?">
            <el-radio-group v-model="checkForm.CooperateStatus" @change="handleChange">
              <el-radio :label="1">Yes</el-radio>
              <el-radio :label="2">No</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="Accepting New Trials?">
            <el-radio-group v-model="checkForm.AcceptingNewTrial" :disabled="radioDisabled">
              <el-radio :label="true">Yes</el-radio>
              <el-radio :label="false">No</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="Actively Reading?">
            <el-radio-group v-model="checkForm.ActivelyReading" :disabled="radioDisabled">
              <el-radio :label="true">Yes</el-radio>
              <el-radio :label="false">No</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="Is Virtual?">
            <el-radio-group v-model="checkForm.IsVirtual" :disabled="radioDisabled">
              <el-radio :label="true">Yes</el-radio>
              <el-radio :label="false">No</el-radio>
            </el-radio-group>
          </el-form-item>

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

          <el-form-item style="margin-top:20px">
            <el-button type="primary" :disabled="isDisabled" @click="handleSave">Save</el-button>
          </el-form-item>
      </div>
    </el-form>
    <el-dialog
      title="Vacation"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div>
        <el-date-picker
          v-model="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="to"
          start-placeholder="Beginning  Date"
          end-placeholder="End Date"
          size="small"
        />
        <el-button style="margin-left:10px;" type="primary" size="small" @click="handleAddHoliday">Add</el-button>
      </div>
      <el-table v-loading="loading2" :data="gridData" size="small">
        <el-table-column type="index" />
        <el-table-column
          property="StartDate"
          label="Beginning  Date"
          min-width="120"
          :formatter="beginTimeFormatter"
        />
        <el-table-column
          property="EndDate"
          label="End Date"
          min-width="120"
          :formatter="endTimeFormatter"
        />
        <el-table-column label="Action" fixed="right" min-width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <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 } from '@/api/reviewers'
import { fmtDate } from '@/utils/formatter'
export default {
  name: 'Setting',
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  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: 500, message: 'The maximum length is 500' }],
        BlindName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        BlindNameCN: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      doctorId: this.$route.query.Id,
      isDisabled: false,
      radioDisabled: false,
      dialogVisible: false,
      gridData: [],
      daterange: '',
      pageIndex: 1,
      pageSize: 5,
      totalItems: 0,
      loading2: false
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      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('Saved successfully')
              }
            })
            .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('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .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('Deleted successfully!')
              }
              this.loading2 = false
            })
            .catch(() => {
              this.loading2 = false
            })
        })
        .catch(action => {})
    },
    closeDialog() {
      this.initForm()
    },
    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>
