<template>
  <div class="dioptricMgt">
    <template>
      <div v-if="!detailViewVisible">
        <div class="patient-info-head">
          <el-form :inline="true" :model="dataForm" class="demo-form-inline" @keyup.enter.native="search()">
            <el-form-item label="登记号:">
              <el-input v-model="dataForm.patId" size="small" clearable placeholder="登记号" @clear="search()" />
            </el-form-item>
            <el-form-item label="就诊号:">
              <el-input v-model="dataForm.patId" size="small" clearable placeholder="就诊号" @clear="search()" />
            </el-form-item>
            <el-form-item label="患者姓名:">
              <el-input v-model="dataForm.patName" placeholder="患者姓名" size="small" clearable @clear="search()" />
            </el-form-item>
            <el-form-item label="身份证:">
              <el-input v-model="dataForm.patIdNumber" size="small" clearable placeholder="身份证" @clear="search()" />
            </el-form-item>
            <el-form-item prop="dateRange" label="就诊时间" class="form-item-date">
              <el-date-picker
                v-model="nextVisitTime"
                size="small"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="dateChange"
              />
            </el-form-item>
            <el-form-item style="flex:1">
              <el-button type="primary" icon="el-icon-search" size="small" @click="search()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: flex;justify-content: space-between;background-color: white;padding: 16px 16px 0">
          <div>
            <el-select v-model="time" placeholder="请选择" style="width:120px;float: left;margin-right: 16px" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button style="margin-left: 0px" size="small" color="white">全部</el-button>
            <el-button style="margin-left: 0px" size="small" color="white">未报到</el-button>
            <el-button style="margin-left: 0px" size="small" color="white">未诊</el-button>
            <el-button style="margin-left: 0px" size="small" color="white">回诊</el-button>
            <el-button style="margin-left: 0px" size="small" color="white">就诊中</el-button>
            <el-button style="margin-left: 0px" size="small" color="white">已诊</el-button>
          </div>
          <div>
            <el-button size="small" icon="el-icon-plus" @click="addOrUpdateHandle('','','新增患者')">新增</el-button>
            <el-button type="primary" size="small" @click="HISHandle">
              <svg-icon icon-class="icon-HIS-up" style="font-size:12px;" />
              <span style="padding-left:5px;vertical-align: middle;">HIS引入</span>
            </el-button>
          </div>
        </div>
        <div class="patient-info-content">
          <el-table
            ref="multipleTable"
            :data="dataList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @sort-change="dataListSortChangeHandle"
          >
            <el-table-column prop="patientId" label="登记号" header-align="center" align="center" />
            <el-table-column prop="patientId" label="状态" header-align="center" align="center" />
            <el-table-column prop="patientName" label="患者姓名" header-align="center" align="center" />
            <el-table-column prop="patientSex" label="患者性别" header-align="center" align="center" />
            <el-table-column label="出生日期" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.patientBirthday ? $options.filters.dateFilterTwo( scope.row.patientBirthday): '- ' }}
              </template>
            </el-table-column>
            <el-table-column prop="patientSex" label="门诊医师" header-align="center" align="center" />
            <el-table-column prop="patientSex" label="视光医师" header-align="center" align="center" />
            <el-table-column prop="patientSex" label="就诊时间" header-align="center" align="center" />
            <el-table-column prop="patientSex" label="分诊序号" header-align="center" align="center" />
            <el-table-column prop="patientSex" label="叫号状态" header-align="center" align="center" />
            <el-table-column prop="operation" label="操作" header-align="center" align="center" width="180">
              <template slot-scope="scope">
                <span
                  style="color: #1890ff; padding-right: 8px"
                  class="operation-details"
                  @click="browseClick(scope.row)"
                >叫号</span>
                <span
                  style="color: #1890ff; padding-right: 8px"
                  class="operation-details"
                  @click="browseClick(scope.row)"
                >接诊</span>
                <span
                  style="color: #1890ff; padding-right: 8px"
                  class="operation-details"
                  @click="showDetail(scope.row)"
                >患者360</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" />
        </div>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :patient-type-list="patientTypeList" @refreshDataList="search" />
      <!-- 修改身份证 -->
      <edit-patid v-if="editPatidVisible" ref="editPatidRef" @editPatidVisible="editPatidVisible=false" @refreshDataList="search" />
      <!-- HIS引入弹框 -->
      <his-add v-if="HisAddVisible" ref="HisAddRef" />
      <!-- 详情页 -->
      <detail-view v-if="detailViewVisible" :id="detailId" ref="viewRef" platform="2" :patient-id="patientId" :patient-id-number="patientIdNumber" is-search="" @detailViewVisible="detailViewVisible=false" />
    </template>
  </div>
</template>
<script>
import checked from '@/mixins/checked'
import headTemplate from '@/components/head'
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './patient-add-or-update'
import editPatid from './editPatid'
import hisAdd from './HIS-add'
import detailView from '@/components/360View/index1' // 360试图
export default {
  components: {
    headTemplate,
    AddOrUpdate,
    editPatid,
    detailView,
    hisAdd
  },
  mixins: [checked, mixinViewModule],
  data() {
    return {
      options: [{
        value: '选项1',
        label: '今日'
      }, {
        value: '选项2',
        label: '近三天'
      }, {
        value: '选项3',
        label: '近一周'
      }, {
        value: '选项4',
        label: '近一个月 '
      }, {
        value: '选项5',
        label: '全部'
      }],
      time: '',
      mixinViewModuleOptions: {
        getDataListURL: '/sg/patient/page',
        getDataListIsPage: true
      },
      cheackAllFooter: false,
      nextVisitTime: [],
      isShowPatient: true,
      detailViewVisible: false,
      HisAddVisible: false,
      editPatidVisible: false,
      dataForm: {
        platform: '3',
        patId: '',
        patName: '',
        doctorName: '',
        beginDate: '',
        endDate: '',
        slBeginDate: '',
        slEndDate: '',
        diagNoseName: '',
        patIdNumber: ''
      },
      deleteParams: {
        drgsName: window.localStorage.getItem('identity')
      },
      doctorNameList: [],
      patientTypeList: [],
      currentTableList: [],
      addGroupVisible: false,
      patientIdNumber: '',
      detailId: ''
    }
  },
  watch: {
    $route(val) {
      // 如果两级以上就隐藏父级
      this.isShowPatient = !(val.matched.length > 2)
    }
  },
  created() {
    this.isShowPatient = !(this.$route.matched.length > 2)
    // this.getDoctorName()
    // this.gettPatType()
  },
  methods: {
    // 浏览
    browseClick(scopeRow) {
      this.$router.push({
        path: '/patientInfo',
        query: {
          info: this.$Base64.encode(JSON.stringify({
            patientIdNumber: scopeRow.patientIdNumber,
            patientId: scopeRow.patientId
            // id: scopeRow.id,
            // crfId: scopeRow.crfId,
            // patId: scopeRow.patId
          }))
        }
      })
    },
    // 日期改变时
    dateChange(e) {
      if (this.dataForm.drgsName === '青光眼') {
        this.dataForm.beginDate = e ? e[0] : ''
        this.dataForm.endDate = e ? e[1] : ''
      } else {
        this.dataForm.slBeginDate = e ? e[0] : ''
        this.dataForm.slEndDate = e ? e[1] : ''
      }

      this.search()
    },
    // 查看详情
    showDetail(scopeRow) {
      this.detailViewVisible = true
      this.patientId = scopeRow.patientId
      this.patientIdNumber = scopeRow.patientIdNumber
      this.patientIdNumber = '330282200110051983'
      this.$nextTick(() => {
        // // 根据id获取患者信息--中间上侧患者信息
        this.$refs.viewRef.getPatientData()
        // // 获取时间轴数据--左侧时间轴
        this.$refs.viewRef.getTimeAxisData()
      })
    },
    // 告知书跳转
    noticeClick(patIdNumber, scopeRow) {
      this.$router.push({
        path: '/seeDoctor',
        query: {
          info: this.$Base64.encode(JSON.stringify({
            patientIdNumber: scopeRow.patIdNumber,
            patId: scopeRow.patId
          }))
        }
      })
    },
    // 获取管理师
    async getDoctorName() {
      const { data: res } = await this.$http.get('/pat/Manage/selectDoctorName', {
        params: {
          drgsName: window.localStorage.getItem('identity')
        }
      })
      if (res.code === 0) {
        this.doctorNameList = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // // 获取患者类型
    // async gettPatType() {
    //   const { data: res } = await this.$http.get('/pat/Manage/selectPatType', {
    //     params: {
    //       drgsName: window.localStorage.getItem('identity')
    //     }
    //   })
    //   if (res.code === 0) {
    //     this.patientTypeList = res.data
    //   } else {
    //     this.$message.error(res.msg)
    //   }
    // },
    // 点击菜单触发事件回调
    handleCommandDropdowm(patIdNumber, scopeRow, e) {
      if (e === '编辑') {
        this.addOrUpdateHandle(patIdNumber, scopeRow, '修改患者')
      } else if (e === '修改身份证') {
        this.editPatidVisible = true
        this.$nextTick(() => {
          this.$refs.editPatidRef.dataForm.newIdNumber = patIdNumber
          this.$refs.editPatidRef.dataForm.oldIdNumber = patIdNumber
          this.$refs.editPatidRef.init()
        })
      } else if (e === '告知书') {
        this.noticeClick(patIdNumber, scopeRow, e)
      } else if (e === '删除') {
        this.deleteHandle(patIdNumber, 'patIdNumber')
      }
    },
    // His引入
    HISHandle() {
      this.HisAddVisible = true
      this.$nextTick(() => {
        this.$refs.HisAddRef.init()
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.dioptricMgt {
  width: 100%;
  height: calc(100vh - 70px);
  .patient-info-head,
  .patient-info-content {
    background: #fff;
    .head {
      padding-bottom: 10px;
    }
  }
  .patient-info-content {
    padding: 16px;
    margin-bottom: 45px;
  }
  .patient-info-head {
    margin-bottom: 16px;
    padding: 10px 16px;
  }
  .operation-delete,
  .operation-details {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.dioptricMgt {
  .patient-info-head {
    .el-form {
      display: flex;
      justify-content: space-between;
    }
    .el-form-item {
      display: flex;
    }
    .el-form-item__label {
      min-width: 75px;
    }
    .el-form-item {
      margin-bottom: 0;
      width: 25%;
    }
    .el-form-item__content,
    .el-select,
    .el-range-editor--small.el-input__inner {
      width: 100%;
    }
    .form-item-date .el-form-item__content {
        min-width: 180px;
      }
  }
  .el-select {
    width: 100%;
  }
  .detail-view {
    height: 100%;
    background: #0c1016;
    padding: 0;
  }
  .detail-view .el-dialog .el-dialog__header > .el-dialog__title{
    color: #FFFFFF;
  }
  .detail-view .el-dialog > .el-dialog__header{
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: linear-gradient(180deg,#0c1016, #2c3543 100%);
    padding: 0;
  }
  .detail-view .el-dialog > .el-dialog__body{
    height: calc(100% - 48px);
    flex: 1;
    background: #0c1016;
    padding: 0;
  }
}
</style>
