<template>
  <el-dialog
    :title="$t('system:Setting:title:Vacation')"
    :visible.sync="visible"
    width="50%"
    :close-on-click-modal="false"
    :before-close="closeDialog"
    append-to-body
  >
    <div v-if="!isPreview">
      <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="loading" :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"
        v-if="!isPreview"
      >
        <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>
</template>
<script>
import {
  getVacationList,
  addOrUpdateVacation,
  deleteVacation,
} from '@/api/reviewers'
import { fmtDate } from '@/utils/formatter'
export default {
  name: 'holiday',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    reviewerId: {
      type: String,
      default: '',
    },
    isPreview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      daterange: [],
      loading: false,
      gridData: [],
      pageIndex: 1,
      pageSize: 5,
      totalItems: 0,
    }
  },
  mounted() {
    this.initHolidayList()
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
    },
    handleAddHoliday() {
      if (this.daterange && this.daterange.length > 0) {
        const param = {
          DoctorId: this.reviewerId,
          StartDate: this.daterange[0],
          EndDate: this.daterange[1],
        }
        this.loading = 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.loading = false
          })
          .catch(() => {
            this.daterange = ''
            this.loading = false
          })
      }
    },
    handleDelete(row) {
      this.$confirm(this.$t('trials:uploadedDicoms:message:deleteMes'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.loading = 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.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch((action) => {})
    },
    initHolidayList() {
      this.loading = true
      getVacationList(this.reviewerId, this.pageIndex, this.pageSize)
        .then((res) => {
          if (res.IsSuccess) {
            this.gridData = res.Result.CurrentPageData
            this.totalItems = res.Result.TotalCount
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    beginTimeFormatter(row) {
      if (row.StartDate) {
        return fmtDate(row.StartDate)
      }
    },
    endTimeFormatter(row) {
      if (row.EndDate) {
        return fmtDate(row.EndDate)
      }
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.initHolidayList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.initHolidayList()
    },
  },
}
</script>