<template>
  <el-dialog top="30px" class="number-manage" append-to-body :visible.sync="visible" width="70%" :title="title" @close="closeDialog">
    <div class="number-manage-head">
      <div class="head-content">
        <span class="head-content-left">
          <span>医生姓名:</span>
          <span>{{ doctorName }}</span>
        </span>
        <span class="head-content-right">
          <span>排台日期:</span>
          <span>{{ dataForm.operaDate }}</span>
          <span>{{ weekName }}</span>
          <span>{{ morOrAft===1 ? '上午' : '下午' }}</span>
        </span>
      </div>
    </div>
    <el-form v-if="title !=='排台详情'" ref="dataForm" :model="dataForm" :rules="dataRule" class="form-content">
      <div class="form-one">
        <el-form-item label="总数:" prop="total" label-width="70px" class="total-form">
          <el-input-number
            v-model="dataForm.total"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </div>
      <div class="button" @click="creatNumberClick">生成预约号</div>
    </el-form>
    <div class="number-list">
      <el-table
        ref="multipleTable"
        class="number-table"
        :highlight-current-row="title !=='排台管理' ? true : false"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        :height="title==='排台管理' ? '300px' : '450px'"
        :row-class-name="tableRowClassName"
        @row-click="rowClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="title !=='排台详情'" type="selection" width="55" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="appointmentDate" label="预约日期" align="center" />
        <el-table-column label="时间段" align="center">
          <template slot-scope="scope">{{ scope.row.morOrAft===1 ? '上午' : '下午' }}</template>
        </el-table-column>
        <el-table-column label="预约时间" align="center">
          <template slot-scope="scope">{{ scope.row.appointmentTime ? scope.row.appointmentTime.substr(0, 5) : '-' }}</template>
        </el-table-column>
        <template v-if="title=='排台详情'">
          <el-table-column
            prop="patientName"
            label="姓名"
          >
            <template slot-scope="scope">{{ scope.row.patientName ? scope.row.patientName : '-' }}</template>
          </el-table-column>
          <el-table-column
            prop="patientSex"
            label="性别"
          >
            <template slot-scope="scope">{{ scope.row.patientSex ? scope.row.patientSex : '-' }}</template>
          </el-table-column>
          <el-table-column
            prop="patientAge"
            label="年龄"
          >
            <template slot-scope="scope">{{ scope.row.patientSex ? scope.row.patientAge : '-' }}</template>
          </el-table-column>
        </template>
        <!-- 状态 0:可用，1:已预约,2:已过时 -->
        <el-table-column label="号源状态" prop="status" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.status == 0">
              <span class="circle-status circle-blue" />
              <span>可用</span>
            </div>
            <div v-show="scope.row.status == 1">
              <span class="circle-status circle-green" />
              <span>已预约</span>
            </div>
            <div v-show="scope.row.status == 2">
              <span class="circle-status circle-red" />
              <span>已过时</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="operation" label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <!-- 号源状态 0 可用 1 已预约 2 过时 -->
            <span
              v-if="title==='排台详情' && scope.row.status=== 1 && new Date(scope.row.appointmentDate + ' ' + (morOrAft=== 1 ? '12:00:00' : '20:00:00') ) > new Date()"
              style="color: #1890ff; padding-right: 8px"
              class="operation-details"
              @click="editHandle(scope.row,'修改')"
            >修改</span>
            <span
              v-if="title==='排台管理' && scope.row.status ===0 && new Date(scope.row.appointmentDate + ' ' + (morOrAft=== 1 ? '12:00:00' : '20:00:00') ) > new Date()"
              style="color: #fd4d4f; padding-right: 8px"
              class="operation-details"
              @click="deleteHandle(scope.row)"
            >删除</span>
            <span
              v-if="(title==='排台管理' && scope.row.status ===1) ||
                (title==='排台详情' && scope.row.status ===0) ||
                scope.row.status ===2 ||
                new Date(scope.row.appointmentDate + ' ' + (morOrAft=== 1 ? '12:00:00' : '20:00:00') ) < new Date()"
            >无</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-if="title !=='排台详情'" slot="footer">
      <div>
        <el-button v-if="title==='排台管理' && dataList.length>0" type="danger" plain @click="batchDeleteClick">批量删除</el-button>
      </div>
      <div>
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
    <editOperation
      v-if="editOperationVisible"
      ref="editOperationRef"
      @closeDialog="editOperationVisible=false"
      @getPatientList="getPatientList"
    />
  </el-dialog>
</template>

<script>
import EditOperation from '@/page-subspecialty/views/modules/nurseManagement/reservation/schedule/edit-operation.vue'

export default {
  components: { EditOperation },
  props: {
    patientTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      morOrAft: '', // 上下午
      weekName: '', // 星期几
      title: '',
      doctorName: '',
      dataForm: {
        operaDate: '', // 预约日期(年月日)
        doctorCode: '', // 医生工号
        morOrAft: '',
        total: '' // 总数
      },
      dataList: [],
      currentTableList: [],
      currentTableId: [],
      rowListObj: {},
      editOperationVisible: false
    }
  },
  computed: {
    dataRule() {
      return {
        startNum: [
          { required: true, message: '请输入起始号', trigger: 'change' }
        ],
        total: [
          { required: true, message: '请输入总数', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        interval: [
          { required: true, message: '请输入间隔时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm ? this.$refs.dataForm.resetFields() : '' // 重置表单
        this.dataForm.morOrAft = this.morOrAft
        this.title === '排台详情' ? this.getPatientList() : this.getSourceList()
      })
    },
    // 获取预约患者详情
    async getPatientList() {
      const { data: res } = await this.$http.get('/opera/schedule/getScheduleInfo', {
        params: {
          doctorCode: this.dataForm.doctorCode, // 医生工号
          morOrAft: this.morOrAft, // morOrAft --1:上午，2:下午
          searchDate: this.dataForm.operaDate // 搜索日期
        }
      })
      if (res.code === 0) {
        this.dataList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 生成预约号
    async creatNumberClick() {
      const time = this.morOrAft === 1 ? '12:00:00' : '20:00:00'
      const operaDateTime = this.dataForm.operaDate + ' ' + time
      // 时间
      const operaTime = new Date(operaDateTime)
      // 现在时间
      const nowTime = new Date()
      if (operaTime > nowTime) {
        const { data: res } = await this.$http.post('/num/source/createNumSource', this.dataForm)
        if (res.code === 0) {
          this.getSourceList()
        } else {
          this.$message.error(res.msg)
        }
      } else {
        this.$message({
          message: '当前日期已过时,不可生成号源',
          type: 'warning'
        })
      }
    },
    // 获取排台管理列表
    async getSourceList() {
      const { data: res } = await this.$http.get('/num/source/getList', {
        params: {
          doctorCode: this.dataForm.doctorCode, // 医生工号
          morOrAft: this.morOrAft, // morOrAft --1:上午，2:下午
          searchDate: this.dataForm.operaDate // 搜索日期
        }
      })
      if (res.code === 0) {
        this.dataList = res.data
        // 选中哪一行
        this.dataList.forEach((item, index) => {
          if (this.rowListObj.id === item.id) {
            this.rowListObj.operaTime && this.$refs.multipleTable ? this.$refs.multipleTable.setCurrentRow(this.dataList[index]) : ''
          }
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 表格批量选择
    handleSelectionChange(val) {
      // console.log(val)
      this.currentTableList = val
      this.currentTableId = []
      this.currentTableList.forEach(item => {
        this.currentTableId.push(item.id)
      })
      console.log(this.currentTableId)
    },
    // 点击行
    rowClick(val) {
      console.log('点击rowClick', val)
      this.rowListObj = val
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 修改
    editHandle(scopeRow) {
      this.editOperationVisible = true
      this.$nextTick(() => {
        this.$refs.editOperationRef.dataForm.operaTime = scopeRow.appointmentTime.substr(0, 5)
        this.$refs.editOperationRef.dataForm.morOrAft = scopeRow.morOrAft
        this.$refs.editOperationRef.patientInfo = scopeRow

        this.$refs.editOperationRef.init()
      })
    },
    // 删除
    async deleteHandle(scopeRow) {
      this.deleteClickFun([scopeRow.id])
    },
    // 批量删除
    batchDeleteClick() {
      if (this.currentTableId.length > 0) {
        this.deleteClickFun(this.currentTableId)
      } else {
        this.$message({
          message: '请选择删除项',
          type: 'warning'
        })
      }
    },
    // 删除--保存过的预约号
    deleteClickFun(id) {
      this.$confirmFun('您确定要删除吗？').then(async() => {
        const { data: res } = await this.$http({
          url: '/num/source',
          method: 'delete',
          data: id
        })
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getSourceList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('closeDialog')
      this.$emit('getScheduleList')
    }
  }
}
</script>
<style lang="scss" scoped>
.number-manage {
  .number-manage-head {
    border-bottom: 1px dashed #d6d6d6;
  }
  .head-content {
    font-size: 14px;
    padding: 10px;
    margin: 4px 0 12px 0;
    background: #eff4ff;
    border: 1px solid #c5d5fe;
    display: flex;
    justify-content: space-between;
    .head-content-left,
    .head-content-right {
      span {
        padding-right: 6px;
      }
      span:nth-child(1) {
        font-weight: 700;
      }
    }
  }
  .form-two {
    margin-left: 16px;
  }
  .operation-details {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.number-manage {
  .el-input {
    width: auto;
  }
  .el-form-item {
    margin-bottom: 12px;
  }
  .el-form-item__content {
    display: flex;
  }
  .form-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #d6d6d6;
  }
  .total-form,
  .time-form {
    margin-bottom: 0;
  }
  .button {
    border: 1px solid #1b6de6;
    padding: 10px 10px;
    color: #1b6de6;
    cursor: pointer;
    width: 150px;
    text-align: center;
    border-radius: 6px;
  }
  .button:hover {
    background: #1b6de6;
    color: #fff;
  }
  .number-table {
    margin-top: 8px;
  }
  .el-table-column--selection .cell {
    padding-left: 10px;
  }
  .el-input-group {
    width: 80%;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    // width: 80%;
  }

  .el-table__body tr.current-row>td.el-table__cell {
    color: #fff;
    background: #1b6de6;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: none;
  }
  .el-dialog__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
  }

}
</style>
