<template>
  <div id="box">
    <el-dialog v-dialog-drag :close-on-click-modal="false"
               :title="scheduleDialog.title" :visible.sync="scheduleDialog.show" destroy-on-close
               width="500px"
    >
      <el-form ref="scheduleForm" :inline="false"
               :model="scheduleDialog.form"
               label-position="right" label-suffix=":" label-width="100px"
      >
        <el-form-item label="星期" prop="weekName">
          <el-input v-model="scheduleDialog.form.weekName" disabled/>
        </el-form-item>
        <el-form-item label="排班时段">
          <el-time-select
            v-model="scheduleDialog.form.startTime"
            :picker-options="{
                  start: '06:00',
                  step: '00:30',
                  end: '23:30',
                }"
            style="width: 40%"
          >
          </el-time-select>
          <el-time-select
            v-model="scheduleDialog.form.endTime"
            :picker-options="{
                  start: '06:00',
                  step: '00:30',
                  end: '23:30',
                  minTime: scheduleDialog.form.startTime,
                }"
            style="width: 40%"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item label="门诊号源" prop="outSingleSourceCount">
          <el-input v-model="scheduleDialog.form.outSingleSourceCount"/>
        </el-form-item>
        <el-form-item label="住院号源" prop="inSingleSourceCount">
          <el-input v-model="scheduleDialog.form.inSingleSourceCount"/>
        </el-form-item>
        <el-form-item label="体检号源" prop="phySingleSourceCount">
          <el-input v-model="scheduleDialog.form.phySingleSourceCount"/>
        </el-form-item>
        <el-form-item label="空腹号源比例" prop="emptyRatio">
          <el-input v-model="scheduleDialog.form.emptyRatio"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="scheduleSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="box_childen">
      <div id="from">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" class="form">
          <el-form-item label=" " prop="weekName">
            <!--        <el-select
                            v-model="form.weekName"
                            placeholder="星期一"
                            @change="weekChange"
                            clearable
                          >
                            <el-option
                              v-for="item in timeList"
                              :key="item"
                              :value="item"
                              :label="item"
                            />
                          </el-select>-->
            <el-tabs v-if="timeList&&timeList.length>0" v-model="form.weekName" type="card" @tab-click="weekChange">
              <el-tab-pane v-for="item in timeList" :key="item" :label="item" :name="item"/>
            </el-tabs>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="!queryParams.queueSetId" type="primary" @click="addSchedule">添加排班</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading"
                :data="queueBasicNumList"
                :row-class-name="tableRowClassName"
                height="400"
                @cell-click="tabClick"
      >
        <el-table-column align="center" label="午段" prop="timeFrame" width="100"/>
        <el-table-column align="center" label="开始时间" prop="startTime" width="100"/>
        <el-table-column align="center" label="结束时间" prop="endTime" width="100"/>
        <!-- <el-table-column label="时段号源数量" align="center" width="200" prop="sourceCount" /> -->
        <el-table-column
          :row-class-name="tableRowClassName"
          align="center" label="门诊号源数量" min-width="120"
          prop="outSingleSourceCount"
          show-overflow-tooltip
          @cell-click="tabClick"
        >
          <template slot-scope="scope">
           <span v-if="scope.row.index === tabClickIndex">
                  <el-input v-model="scope.row.outSingleSourceCount"
                            :autofocus="mark"
                            maxlength="200"
                            placeholder="请输入号源数量"
                            size="mini" @blur="inputBlur(scope.row,'outSingleSourceCount')"
                  />
            </span>
            <span v-else>{{ scope.row.outSingleSourceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :row-class-name="tableRowClassName"
          align="center" label="住院号源数量" min-width="120"
          prop="inSingleSourceCount"
          show-overflow-tooltip
          @cell-click="tabClick"
        >
          <template slot-scope="scope">
           <span v-if="scope.row.index === tabClickIndex">
                  <el-input v-model="scope.row.inSingleSourceCount"
                            :autofocus="mark"
                            maxlength="200"
                            placeholder="请输入号源数量"
                            size="mini" @blur="inputBlur(scope.row,'inSingleSourceCount')"
                  />
            </span>
            <span v-else>{{ scope.row.inSingleSourceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :row-class-name="tableRowClassName"
          align="center" label="体检号源数量" min-width="120"
          prop="phySingleSourceCount"
          show-overflow-tooltip
          @cell-click="tabClick"
        >
          <template slot-scope="scope">
              <span v-if="scope.row.index === tabClickIndex">
                      <el-input v-model="scope.row.phySingleSourceCount"
                                :autofocus="mark"
                                maxlength="200"
                                placeholder="请输入号源数量"
                                size="mini" @blur="inputBlur(scope.row,'phySingleSourceCount')"
                      />
                </span>
            <span v-else>{{ scope.row.phySingleSourceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column :row-class-name="tableRowClassName" align="center" label="空腹比例" prop="emptyRatio"
                         show-overflow-tooltip width="100" @cell-click="tabClick"
        >
          <template slot-scope="scope">
              <span v-if="scope.row.index === tabClickIndex">
                      <el-input v-model="scope.row.emptyRatio"
                                :autofocus="mark"
                                maxlength="200"
                                placeholder="请输入空腹号源比例"
                                size="mini" @blur="inputBlur(scope.row,'emptyRatio')"
                      />
                </span>
            <span v-else>{{ scope.row.emptyRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" l width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editSchedule(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteSchedule(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  listQueueBasicNum,
  getQueueBasicNum,
  delQueueBasicNum,
  addQueueBasicNum,
  updateQueueBasicNum,
  exportQueueBasicNum, updateBasicNum, addBasicNum
} from '@/api/resource/queueBasicNum'

export default {
  name: 'queueBasicNum',
  data() {
    return {
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '', // 当前点击的列名
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      timeList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      //选中星期
      weekNameCheck: '星期一',
      //队列设置表id
      queueSetIds: null,
      // 总条数
      total: 0,
      primaryVal: 0,
      mark: false,
      // 队列基础号表格数据
      queueBasicNumList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        queueSetId: null,
        visitTypeId: null,
        weekName: '星期一'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      scheduleDialog: {
        form: {},
        show: false,
        title: ''
      }
    }
  },
  mounted() {

  },
  methods: {
    // 添加排班
    addSchedule() {
      this.scheduleDialog = {
        form: {
          queueSetId: this.queueSetIds,
          weekName: this.weekNameCheck
        },
        show: true,
        title: '新增排班'
      }
    },
    deleteSchedule(row) {
      this.$confirm(`是否删除${row.startTime} - ${row.endTime}的号源设置?`, '提示')
        .then(res => {
          delQueueBasicNum(row.id)
            .then(res => {
              this.weekChange()
            })
        })
    },
    // 修改排班
    editSchedule(row) {
      console.log(row)
      this.scheduleDialog = {
        form: {
          id: row.id,
          weekName: row.weekName,
          startTime: row.startTime,
          endTime: row.endTime,
          emptyRatio: row.emptyRatio,
          inSingleSourceCount: row.inSingleSourceCount,
          outSingleSourceCount: row.outSingleSourceCount,
          phySingleSourceCount: row.phySingleSourceCount
        },
        show: true,
        title: '修改排班'
      }
    },
    // 排班提交
    scheduleSubmit() {
      console.log(this.scheduleDialog.form)
      if (this.scheduleDialog.form.id) {
        updateBasicNum(this.scheduleDialog.form)
          .then(res => {
            this.scheduleDialog.show = false
            this.weekChange()
          })
      } else {
        addBasicNum(this.scheduleDialog.form)
          .then(res => {
            this.scheduleDialog.show = false
            this.weekChange()
          })
      }
    },
    /** 查询队列基础号列表 */
    getList(id) {
      this.queryParams.queueSetId = id
      this.queueSetIds = id
      this.loading = true
      listQueueBasicNum(this.queryParams).then(response => {
        this.queueBasicNumList = response.rows
        this.loading = false
        this.tabClickIndex = null
        this.tabClickLabel = ''
      }).catch(_ => this.loading = false)
    },
    // 初始化列表数据
    init(id) {
      this.queryParams.weekName = this.timeList[0]
      this.form.weekName = this.timeList[0]
      this.weekNameCheck = this.timeList[0]
      this.getList(id)
    },
    weekChange(val) {
      this.queryParams.weekName = this.form.weekName
      this.weekNameCheck = this.form.weekName
      if (this.queryParams.queueSetId == null || this.queryParams.queueSetId == -1) {
        return
      }
      this.getList(this.queryParams.queueSetId)
    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },

    /**
     * 添加明细原因 row 当前行 column 当前列
     */
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '门诊号源数量':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          this.mark = true
          this.primaryVal = row.outSingleSourceCount
          break
        case '住院号源数量':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          this.mark = true
          this.primaryVal = row.inSingleSourceCount
          break
        case '体检号源数量':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          this.mark = true
          this.primaryVal = row.phySingleSourceCount
          break
        case '空腹比例':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          this.mark = true
          this.primaryVal = row.emptyRatio
          break
        default:
          return
      }
      // console.log('----------', this.tabClickIndex, row, column, cell, event)
    },
    /**
     * 失去焦点初始化
     */
    inputBlur(rows, sourceType) {
      console.log(rows.inSingleSourceCount)
      if (sourceType == 'phySingleSourceCount') {
        rows.sourceCount = rows.phySingleSourceCount
      } else if (sourceType == 'inSingleSourceCount') {
        rows.sourceCount = rows.inSingleSourceCount
      } else if (sourceType == 'outSingleSourceCount') {
        rows.sourceCount = rows.outSingleSourceCount
      } else if (sourceType == 'emptyRatio') {
        rows.sourceCount = rows.emptyRatio
      } else {
      }
      if (this.primaryVal != rows.sourceCount) {
        let data = {
          id: rows.id,
          sourceCount: rows.sourceCount,
          sourceType: sourceType,
          queueSetId: this.queueSetIds,
          weekName: this.weekNameCheck,
          startTime: rows.startTime,
          endTime: rows.endTime
        }
        updateQueueBasicNum(data).then(res => {
          this.primaryVal = 0
          if (res.code === 200) {
            this.$message.success('修改成功')
          }
        })
      }
      this.tabClickIndex = null
      this.tabClickLabel = ''
    }
  }

}
</script>
<style lang="scss" scoped>
.form {

}

#box {
  /* position:absolute;
  width: 500px;
 height:400px;
 overflow:auto; */
  overflow: hidden;
}

.box_childen {
  list-style-type: none;
  //font-family: "Times New Roman", Times, serif;
  //font-size: 14px;
  /* font-weight: normal; */
}

#from {
  height: 44px;

}

.boxli {
  display: flex;
  flex-direction: row;
}

.boxspan {
  width: 30px;
  line-height: 38px;
  text-align: center;
  border-right: 0.3px solid #c0c0c0;
  background-color: #F7F7F8;
}

.boxspan2 {
  width: 30px;
  line-height: 45px;
  /* margin-left: -350px; */
  /* border-left:0.3px solid  #c0c0c0; */
}

.textlist {
  line-height: 38px;
  text-align: left;
  margin-left: 20px;
}

/*tabs签页标签文字放大*/
.box_childen > > > .el-tabs__item {
  //font-size: 15px;
  //font-weight: bold;
}
</style>
