<template>
  <div class="main">
    <!--上下午调整-->
    <el-row class="top">
      <el-row class="weekFrame" justify="center" type="flex">
        <el-col :span="3">周次</el-col>
        <el-col :span="3">星期一</el-col>
        <el-col :span="3">星期二</el-col>
        <el-col :span="3">星期三</el-col>
        <el-col :span="3">星期四</el-col>
        <el-col :span="3">星期五</el-col>
        <el-col :span="3">星期六</el-col>
        <el-col :span="3">星期日</el-col>
      </el-row>
      <el-checkbox-group :value="checkWeekFrame">
        <el-row class="weekFrame">
          <el-col :span="3"><span class="timeFrame">上午</span></el-col>
          <el-col v-for="item in weekAm" :key="item" :span="3">
            <el-checkbox :label="item" @change="weekFrameChange($event,item)">{{ '' }}</el-checkbox>
          </el-col>
        </el-row>
        <el-row class="weekFrame">
          <el-col :span="3"><span class="timeFrame">下午</span></el-col>
          <el-col v-for="item in weekPm" :key="item" :span="3">
            <el-checkbox :label="item" @change="weekFrameChange($event,item)">{{ '' }}</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </el-row>
    <!--一天排班调整-->
    <el-row class="table-container">
      <el-table
        :cell-class-name="cellClassName"
        :cell-style="cellStyle"
        :data="scheduleList"
        :span-method="mergeRows"
        stripe
        @cell-click="cellClick"
      >
        <el-table-column align="center" header-align="center" label="午段" prop="timeFrame"/>
        <el-table-column align="center" header-align="center" label="开始时间" prop="startTime"/>
        <el-table-column align="center" header-align="center" label="结束时间" prop="endTime"/>
        <el-table-column align="center" header-align="center" label="总号源数" prop="sourceCount"/>
        <el-table-column align="center" header-align="center" label="门诊" prop="outSingleSourceCount">
          <template slot-scope="scope">
              <span v-if="scope.row.index === checked.row && checked.column === 4">
                  <el-input
                    v-model.number="scope.row.outSingleSourceCount"
                    :autofocus="true"
                    :min="0"
                    auto-complete="on"
                    size="mini"
                    @blur="cellBlur(scope.row)"
                    @change="inputChange($event,scope.row,'outSingleSourceCount')"
                    @keyup.enter.native="$event.target.blur"
                  />
            </span>
            <span v-else>{{ scope.row.outSingleSourceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="住院" prop="inSingleSourceCount">
          <template slot-scope="scope">
              <span v-if="scope.row.index === checked.row && checked.column === 5">
                  <el-input
                    v-model.number="scope.row.inSingleSourceCount"
                    :autofocus="true"
                    :min="0"
                    auto-complete="on"
                    size="mini"
                    @blur="cellBlur"
                    @change="inputChange($event,scope.row,'inSingleSourceCount')"
                    @keyup.enter.native="$event.target.blur"
                  />
            </span>
            <span v-else>{{ scope.row.inSingleSourceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="体检" prop="phySingleSourceCount">
          <template slot-scope="scope">
              <span v-if="scope.row.index === checked.row && checked.column === 6">
                  <el-input
                    v-model.number="scope.row.phySingleSourceCount"
                    :autofocus="true"
                    :min="0"
                    auto-complete="on"
                    size="mini"
                    @blur="cellBlur"
                    @change="inputChange($event,scope.row,'phySingleSourceCount')"
                    @keyup.enter.native="$event.target.blur"
                  />
            </span>
            <span v-else>{{ scope.row.phySingleSourceCount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ScheduleManage',
  props: {
    scheduleList: {
      type: Array,
      default: []
    },
    checkWeekFrame: {
      type: Array,
      default: []
    }
  },
  model: {
    prop: 'checkWeekFrame',
    event: 'updateCheckWeekFrame'
  },
  data() {
    return {
      // 当前选中行列
      checked: {
        row: null,
        column: null
      },
      // 数据异常的行
      warnRows: [],
      weekAm: ['1-am', '2-am', '3-am', '4-am', '5-am', '6-am', '7-am'],
      weekPm: ['1-pm', '2-pm', '3-pm', '4-pm', '5-pm', '6-pm', '7-pm']
    }
  },
  methods: {
    // 给行列加索引
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    // 表格行列合并
    mergeRows({ row, column, rowIndex, columnIndex }) {
      let rowspan = 0
      let colspan = 0
      // 上下午午段合并
      if (columnIndex === 0) {
        colspan = 1
        // 计算当前行的午段数据是不是列表中第一个,当前行索引=0 或者当前行的timeFrame值不等于上一行
        if (rowIndex === 0 || row.timeFrame !== this.scheduleList[rowIndex - 1].timeFrame) {
          // 计算需要合并的数量
          rowspan = this.scheduleList.filter(item => item.timeFrame === row.timeFrame).length
        }
        return { rowspan, colspan }
      }
    },
    // 单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.timeFrame === '上午') {
          return { backgroundColor: '#67C23A', fontWeight: 600, fontSize: 'large', color: '#ffffff' }
        } else {
          return { backgroundColor: '#E6A23C', fontWeight: 600, fontSize: 'large', color: '#ffffff' }
        }
      } else if ([4, 5, 6].includes(columnIndex)) {
        if (this.warnRows.includes(rowIndex)) {
          return { backgroundColor: '#E6A23C' }
        }
      }
    },
    // 表格点击,切换单元格输入框,并且判断这一行的数据是否异常
    cellClick(row, column, cell, event) {
      this.checked = {
        row: row.index,
        column: column.index
      }
    },
    // 校验行数据,并对异常数据标记做新增清除处理
    validationRowData(row) {
      let outSingleSourceCount = parseInt(row.outSingleSourceCount)
      let inSingleSourceCount = parseInt(row.inSingleSourceCount)
      let phySingleSourceCount = parseInt(row.phySingleSourceCount)
      let sourceCount = parseInt(row.sourceCount)
      if (sourceCount !== (outSingleSourceCount + inSingleSourceCount + phySingleSourceCount)) {
        if (!this.warnRows.includes(row.index)) {
          this.warnRows.push(row.index)
        }
      } else {
        let index = this.warnRows.findIndex(item => item === row.index)
        if (index !== -1) {
          this.warnRows.splice(index, 1)
        }
      }
    },
    // 重新校验全部
    validate() {
      if (this.warnRows.length > 0) {
        const tempList = [...this.warnRows]
        const list = []
        tempList.forEach(item => {
          debugger
          const temp = this.scheduleList[item]
          let outSingleSourceCount = parseInt(temp.outSingleSourceCount)
          let inSingleSourceCount = parseInt(temp.inSingleSourceCount)
          let phySingleSourceCount = parseInt(temp.phySingleSourceCount)
          let sourceCount = parseInt(temp.sourceCount)
          if (sourceCount !== (outSingleSourceCount + inSingleSourceCount + phySingleSourceCount)) {
            list.push(item)
          }
        })
        this.warnRows = list
      }
    },
    // 清空警告
    clearWarns() {
      this.warnRows = []
    },
    // 输入框移出/回车事件
    cellBlur() {
      this.checked = {
        row: null,
        column: null
      }
    },
    // 号源输入同步更新
    inputChange(value, row, key) {
      if (!value || isNaN(parseInt(value))) {
        row[key] = 0
      } else {
        row[key] = parseInt(value)
      }
    },
    // 日期修改事件
    weekFrameChange(bool, val) {
      let list = this.checkWeekFrame
      if (bool) {
        list.push(val)
      } else {
        let index = list.findIndex(item => item === val)
        if (index !== -1) {
          list.splice(index, 1)
        }
      }
      this.$emit('updateCheckWeekFrame', list)
    }
  },
  watch: {
    checked(newVal, oldVal) {
      if (oldVal.row !== null && newVal.row !== oldVal.row) {
        this.validationRowData(this.scheduleList[oldVal.row])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  .top {
    .weekFrame {
      margin: 0 20px 10px;

      ::v-deep .el-col {
        display: flex;
        justify-content: center;
      }
    }

    .timeFrame {
      font-size: 16px;
    }
  }

  .table-container {
    margin: 5px 5px 0;
  }
}
</style>
