<template>
  <el-table :cell-class-name="cellClassName"
            :cell-style="cellStyle"
            :data="scheduleList"
            :span-method="mergeRows"
            class="main-table"
            empty-text="排班数据为空"
            @cell-click="cellClick"
  >
    <el-table-column align="center" header-align="center" label="排班模板（单台设备）">
      <el-table-column align="center" header-align="center" prop="week">
        <template slot-scope="scope">
          <span>{{ scope.row.blankLine ? '' : scope.row.week }}</span>
        </template>
      </el-table-column>
      <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="count"/>
      <el-table-column align="center" header-align="center" label="门诊" min-width="120" prop="mz">
        <template slot-scope="scope">
          <span v-if="scope.row.index === checked.row && checked.column === 4">
                  <el-input v-model.number="scope.row.mz"
                            :autofocus="focus"
                            :min="0"
                            auto-complete="on"
                            size="mini"
                            @blur="cellBlur(scope.row,'mz')" @change="inputChange($event,scope,'mz')"
                            @keyup.enter.native="$event.target.blur"
                  />
            </span>
          <span v-else>{{ scope.row.mz }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="住院" min-width="120" prop="zy">
        <template slot-scope="scope">
          <span v-if="scope.row.index === checked.row && checked.column === 5">
                  <el-input v-model.number="scope.row.zy"
                            :autofocus="focus"
                            :min="0"
                            auto-complete="on"
                            size="mini"
                            @blur="cellBlur(scope.row,'zy')" @change="inputChange($event,scope,'zy')"
                            @keyup.enter.native="$event.target.blur"
                  />
            </span>
          <span v-else>{{ scope.row.zy }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="体检" min-width="120" prop="tj">
        <template slot-scope="scope">
          <span v-if="scope.row.index === checked.row && checked.column === 6">
                  <el-input v-model.number="scope.row.tj"
                            :autofocus="focus"
                            :min="0"
                            auto-complete="on"
                            size="mini"
                            @blur="cellBlur(scope.row,'tj')" @change="inputChange($event,scope,'tj')"
                            @keyup.enter.native="$event.target.blur"
                  />
            </span>
          <span v-else>{{ scope.row.tj }}</span>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'ScheduleEdit',
  props: {
    scheduleList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 是否自动焦点
      focus: true,
      // 当前选中行列
      checked: {
        row: null,
        column: null
      }
    }
  },
  methods: {
    //合并行
    mergeRows({ row, column, rowIndex, columnIndex }) {
      // 计算间隔空行
      if (row.blankLine) {
        return { rowspan: 1, colspan: 9 }
      }
      // 计算星期几合并
      if (columnIndex === 0) {
        let row = 0
        let col = 0
        // 计算当前行的星期数据是不是列表中第一个,当前行索引=0 或者当前行的week值不等于上一行
        if (rowIndex === 0 || (rowIndex > 0 && this.scheduleList[rowIndex].week !== this.scheduleList[rowIndex - 1].week)) {
          // 这里因为计算空行所以减1
          row = this.scheduleList.filter(item => item.week === this.scheduleList[rowIndex].week).length - 1
          col = 1
        }
        return { rowspan: row, colspan: col }
      }
      // 计算列合并,显示中午一整行
      if (row.flag) {
        if (columnIndex === 1) {
          return { rowspan: 1, colspan: 8 }
        } else if ([2, 3, 4, 5, 6, 7, 8].includes(columnIndex)) {
          return { rowspan: 1, colspan: 0 }
        }
      }
    },
    // 表格单元点击,选中变成输入框
    cellClick(row, column, cell, event) {
      this.focus = true
      this.checked = {
        row: row.index,
        column: column.index
      }
      event.target.focus()
    },
    // 给行列加索引
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 && row.flag) {
        return { backgroundColor: '#F5F7FA', padding: '2px 0' }
      }
      if (row.blankLine) {
        return { padding: '8px 0' }
      }
      if (columnIndex === 0 && !row.blankLine) {
        return { backgroundColor: '#F5F7FA' }
      }
    },
    // 输入框移出事件/回车
    cellBlur() {
      //console.log('移出事件')
      this.checked = {
        row: null,
        column: null
      }
      this.focus = false
    },
    // 更新输入的号源值
    inputChange(value, scope, key) {
      if (!value || isNaN(parseInt(value))) {
        scope.row[key] = 0
      } else {
        scope.row[key] = parseInt(value)
      }
    }
  }
}
</script>
<style scoped>
.el-input-number--mini {
  width: 105px;
}

.main-table {
  margin-top: 10px;
}

/*高亮的上下午合并行*/
.el-table .flag {
  background-color: #F5F7FA !important;
}
</style>
