<template>
  <BaseContainer>
    <template slot="search-container">
      <el-form :inline="true">
        <!-- Name -->
        <el-form-item :label="$t('trials:stats:form:name')">
          <el-input
            v-model="listQuery.ReviewerName"
            disabled
          />
        </el-form-item>
        <!-- Source -->
        <el-form-item class="my_multiple" :label="$t('trials:stats:form:source')">
          <el-select v-model="listQuery.WorkLoadFromStatus" style="width: 140px" class="handle-select" multiple clearable>
            <el-option
              v-for="item in statusOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- Begin Month -->
        <el-form-item :label="$t('trials:stats:form:beginMonth')">
          <el-date-picker
            v-model="listQuery.SearchBeginDateTime"
            type="month"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :picker-options="beginPickerOption"
          />
        </el-form-item>
        <!-- End Month -->
        <el-form-item :label="$t('trials:stats:form:endMonth')">
          <el-date-picker
            v-model="listQuery.SearchEndDateTime"
            type="month"
            value-format="yyyy-MM"
            format="yyyy-MM"
            :picker-options="endpickerOption"
          />
        </el-form-item>
        <el-form-item>
          <!-- 查询 -->
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">
            {{ $t('common:button:search') }}
          </el-button>
          <!-- 重置 -->
          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
            {{ $t('common:button:reset') }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <template slot="main-container">
      <el-table
        v-loading="listLoading"
        v-adaptive="{bottomOffset:55}"
        size="small"
        height="100"
        :data="list"
        :cell-style="cellColor"
        row-key="RowGuid"
        lazy
        border
        :load="load"
        :tree-props="{ hasChildren: 'hasChildren' }"
      >
        <el-table-column width="60" />
        <!-- Month -->
        <el-table-column :label="$t('trials:stats:table:month')" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-show="ShowMonthSelect(scope.row.DataFrom)">{{ scope.row.WorkTimeStr }}</div>
          </template>
        </el-table-column>
        <!-- Source -->
        <el-table-column
          prop="DataFrom"
          :label="$t('trials:stats:form:source')"
          min-width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.DataFrom===0?'Reviewer':scope.row.DataFrom===1?'Client':'Reconciled' }}</template>
        </el-table-column>

        <el-table-column
          prop="Training"
          :label="$t('trials:enrolledReviews:table:training')"
          min-width="75"
          show-overflow-tooltip
        />
        <el-table-column
          prop="RefresherTraining"
          :label="$t('trials:enrolledReviews:table:refresherTraining')"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column :label="$t('trials:enrolledReviews:table:tp')" align="center">
          <el-table-column
            prop="Timepoint"
            :label="$t('trials:enrolledReviews:table:tpRegular')"
            min-width="80"
            show-overflow-tooltip
          />

          <el-table-column
            prop="TimepointIn48H"
            :label="$t('trials:enrolledReviews:table:tp48H')"
            min-width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="TimepointIn24H"
            :label="$t('trials:enrolledReviews:table:tp24H')"
            min-width="90"
            show-overflow-tooltip
          />
        </el-table-column>
        <el-table-column
          :label="$t('trials:enrolledReviews:table:ad')"
          align="center"
        >
          <el-table-column
            prop="Adjudication"
            :label="$t('trials:enrolledReviews:table:adRegular')"
            min-width="80"
            show-overflow-tooltip
          />

          <el-table-column
            prop="AdjudicationIn48H"
            :label="$t('trials:enrolledReviews:table:ad48H')"
            min-width="90"
            show-overflow-tooltip
          />
          <el-table-column
            prop="AdjudicationIn24H"
            :label="$t('trials:enrolledReviews:table:ad24H')"
            min-width="90"
            show-overflow-tooltip
          />
        </el-table-column>
        <el-table-column
          prop="Global"
          :label="$t('trials:enrolledReviews:table:gl')"
          min-width="100"
          show-overflow-tooltip
        />

        <el-table-column
          prop="Downtime"
          :label="$t('trials:enrolledReviews:table:downtime')"
          min-width="90"
          show-overflow-tooltip
        />

        <el-table-column :label="$t('common:action:action')" width="150" fixed="right">
          <template slot-scope="scope">
            <div v-if="scope.row.hasChildren">
              <!-- Add -->
              <el-button
                circle
                icon="el-icon-plus"
                :disabled="scope.row.IsLock"
                :title="$t('trials:stats:action:add')"
                @click="handleAdd(scope.row)"
              />
            </div>
            <div v-else>
              <!-- Edit -->
              <el-button
                circle
                icon="el-icon-edit-outline"
                :title="$t('trials:stats:action:edit')"
                :disabled="scope.row.IsLock"
                @click="handleUpdate(scope.row)"
              />
              <!-- 重置 -->
              <el-button
                v-if="scope.row.DataFrom"
                circle
                :title="$t('trials:stats:action:reset')"
                icon="el-icon-refresh"
                :disabled="scope.row.Id==guidEmpty|| scope.row.Id==null || scope.row.IsLock"
                @click="handleDelete(scope.row)"
              />
              <!-- 删除 -->
              <el-button
                v-if="(!scope.row.DataFrom)"
                circle
                :title="$t('trials:stats:action:del')"
                icon="el-icon-delete"
                :disabled="scope.row.IsLock"
                @click="handleDelete(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      ref="dialog__wrapper"
      :key="timer"
      v-dialogDrag
      size="small"
      :visible.sync="dialogVisible"
      width="40%"
      :title="title"
      :close-on-click-modal="false"
    >
      <add-workload
        :id="Id"
        :trial-id="trialId"
        :doctor-id="doctorId"
        :trial-expedited-state="expeditedState"
        :info="row"
        :year-month="yearMonth"
        @handleClose="handleClose"
        @setTitle="setTitle"
      />
    </el-dialog>
  </BaseContainer>
</template>
<script>
import { getDoctorWorkLoadList, getReviewerWorkLoadListDetail, getTrialExpeditedState, deleteWorkLoad } from '@/api/trials'
import '@/directive/dialogDrag'
require('@/utils/formatter')
import BaseContainer from '@/components/BaseContainer'
import AddWorkload from './components/AddWorkload'
const getListQueryDefault = () => {
  return {
    TrialId: '',
    DoctorId: '',
    WorkLoadFromStatus: [0, 1, 2],
    SearchBeginDateTime: new Date(new Date().setMonth(new Date().getMonth() - 3)).format('yyyy-MM'),
    SearchEndDateTime: new Date().format('yyyy-MM'),
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: ''
  }
}
export default {
  name: 'Stats',
  components: { BaseContainer, AddWorkload },
  data() {
    return {
      list: [],
      listQuery: getListQueryDefault(),
      statusOption: this.$d.WorkLoadStatusOption,
      listLoading: false,
      beginPickerOption: {
        disabledDate: time => {
          if (this.listQuery.SearchEndDateTime) {
            return time.getTime() > new Date(this.listQuery.SearchEndDateTime).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: time => {
          const _now = Date.now()
          return time.getTime() > _now
        }
      },
      expeditedState: 0,
      dialogVisible: false,
      Id: '',
      trialId: '',
      doctorId: '',
      title: '',
      row: {},
      timer: '',
      yearMonth: '',
      maps: new Map(),
      guidEmpty: '00000000-0000-0000-0000-000000000000',
      trialCode: ''
    }
  },
  mounted() {
    this.trialCode = this.$route.query.trialCode
    this.trialId = this.$route.query.trialId
    this.listQuery.TrialCode = this.trialCode
    this.listQuery.ReviewerName = this.$route.query.doctorName
    this.doctorId = this.$route.query.doctorId
    this.initPage()
    this.getExpeditedState()
  },
  methods: {
    initPage() {
      this.listLoading = true
      this.listQuery.DoctorId = this.$route.query.doctorId
      this.listQuery.TrialId = this.$route.query.trialId
      this.listQuery.TrialCode = this.trialCode
      this.listQuery.ReviewerName = this.$route.query.doctorName
      getDoctorWorkLoadList(this.listQuery).then(res => {
        this.listLoading = false
        const { CurrentPageData } = res.Result
        CurrentPageData.forEach(function(item) {
          item.DataFrom === 0 ? item.hasChildren = true : ''
        })
        this.list = CurrentPageData
      }).catch(() => { this.listLoading = false })
    },
    handleReset() {
      this.listQuery = getListQueryDefault()
      this.initPage()
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.initPage()
    },
    handleAdd(row) {
      this.timer = new Date().getTime()
      this.title = this.$t('trials:stats:dialogTitle:add')
      this.Id = ''
      this.row = { ...row }
      this.yearMonth = row.YearMonthStr
      this.dialogVisible = true
    },
    handleUpdate(row) {
      this.row = {}
      this.timer = new Date().getTime()
      this.title = this.$t('trials:stats:dialogTitle:edit')
      this.Id = row.Id
      this.dialogVisible = true
      this.row = { ...row }
      if (row.DataFrom === 2) {
        var clientData = this.list.find(item => item.DataFrom === 1 && item.WorkTimeStr === row.WorkTimeStr)
        this.row.clientData = clientData
      }
    },
    handleDelete(row) {
      let str = ''
      if (row.DataFrom === 0) {
        str = this.$t('trials:stats:message:del')
      } else {
        str = this.$t('trials:stats:message:reset')
      }
      this.$confirm(str, {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          deleteWorkLoad(row.Id, this.trialId).then(res => {
            if (res.IsSuccess) {
              this.initPage()
              this.$message.success(this.$t('common:message:deletedSuccessfully'))
            }
          })
        })
    },
    handleClose() {
      this.dialogVisible = false
      this.initPage()
    },
    load(tree, treeNode, resolve, type) {
      const YearMonthStr = tree.YearMonthStr
      this.maps.set(YearMonthStr, { tree, treeNode, resolve })
      const param = {
        TrialId: this.trialId,
        DoctorId: this.$route.query.doctorId,
        YearMonthStr: tree.WorkTimeStr
      }
      getReviewerWorkLoadListDetail(param).then(res => {
        if (res.IsSuccess) {
          if (res.Result) {
            const data = res.Result
            const nodes = res.Result.map(v => {
              return { ...v, hasChildren: v.level <= 2 }
            })
            resolve(nodes)
            if (data.length > 0) {
              this.reFlashTbl(data)
              this.$message.success(this.$t('common:message:savedSuccessfully'))
            }
          }
        }
      })
    },
    reFlashTbl(data) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].YearMonthStr === data[0].YearMonthStr && this.list[i].DataFrom === 0) {
          let Training = 0
          let Timepoint = 0
          let TimepointIn24H = 0
          let TimepointIn48H = 0
          let Adjudication = 0
          let AdjudicationIn24H = 0
          let AdjudicationIn48H = 0
          let Global = 0
          let Downtime = 0
          for (let j = 0; j < data.length; j++) {
            Training = data[j].Training + Training
            Timepoint = data[j].Timepoint + Timepoint
            TimepointIn24H = data[j].TimepointIn24H + TimepointIn24H
            TimepointIn48H = data[j].TimepointIn48H + TimepointIn48H
            Adjudication = data[j].Adjudication + Adjudication
            AdjudicationIn24H = data[j].AdjudicationIn24H + AdjudicationIn24H
            AdjudicationIn48H = data[j].AdjudicationIn48H + AdjudicationIn48H
            Global = data[j].Global + Global
            Downtime = data[j].Downtime + Downtime
          }
          this.list[i].Training = Training
          this.list[i].Timepoint = Timepoint
          this.list[i].TimepointIn24H = TimepointIn24H
          this.list[i].TimepointIn48H = TimepointIn48H
          this.list[i].Adjudication = Adjudication
          this.list[i].AdjudicationIn24H = AdjudicationIn24H
          this.list[i].AdjudicationIn48H = AdjudicationIn48H
          this.list[i].Global = Global
          this.list[i].Downtime = Downtime
          break
        }
      }
    },
    getExpeditedState() {
      const id = this.$route.query.trialId
      getTrialExpeditedState(id).then(res => { this.expeditedState = res.Result })
    },
    ShowMonthSelect(dataFrom) {
      return Math.min(...this.listQuery.WorkLoadFromStatus) === dataFrom
    },
    cellColor({ row, column, rowIndex, columnIndex }) {
      if (row.DataFrom === 1) {
        return {
          color: '#0099cc'
        }
      } else if (row.DataFrom === 2) {
        return {
          color: '#f56c6c'
        }
      }
    },
    setTitle(title) {
      this.title = this.$t('trials:stats:dialogTitle:edit')
    }
  }
}
</script>
<style lang="scss" scoped>
  .stats-container{
    padding: 5px 10px;
    margin-top: 10px;
    height: 100%;
    .handle-select {
      width: 300px;
      margin-right: 10px;
      margin-bottom: 5px;
    }
    .stats-list{
      height: calc(100% - 80px);
    }
  }
</style>
