<template>
    <div class="main-contain new-main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <div class="app-container" style="display:flex;flex: 1;padding: 10px 20px 0px 20px;">
            <div class="mainLeft">
                <div class="mainCell" style="margin-bottom:10px;">
                    <el-input size="small" placeholder="请输入姓名或者透析号"
                              v-model="search_input" class="filter-item" @input="searchAction"
                              @keyup.enter.native='searchAction'/>
                    <!--<el-button size="small" style="margin-left:10px;" class="filter-item" type="primary"-->
                               <!--@click="searchAction">-->
                        <!--搜索-->
                    <!--</el-button>-->
                </div>
                <div>
                    <el-table :data="data" :height="tableHeight" @row-click='choosePatient'
                               border style="width: 100%;"
                              :row-style="{ color: '#303133' }"
                              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                              highlight-current-row
                              ref="tab">
                        <el-table-column prop="name" label="姓名">
                            <template slot-scope="scope">{{scope.row.name}}（{{ scope.row.dialysis_no }}）</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="mainRight">
                <el-table :data="templates" :height="tableHeight"
                           border style="width: 100%;"
                          :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row
                >
                    <el-table-column prop="name" label="模版名称">
                        <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="透析模式">
                        <template slot-scope="scope">{{getMode(scope.row.mode)}}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="jumpDetail(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 50, 100]"
                        :page-size="10"
                        background
                        align="right"
                        style="margin-top:20px;"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { delHisPrescriptionTemplate, getPatientList, getPrescriptionTemplateList } from '@/api/his/his_config'
  import { uParseTime } from '@/utils/tools'

  const moment = require('moment')
  export default {
    components: {
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '门诊医生站' },
          { path: false, name: '处方模版' }
        ],
        search_input:'',
        templates: [],
        tableHeight: '',
        fullHeight: document.documentElement.clientHeight,
        isloading: false,
        data: [],
        all_data:[],
        page: 1,
        limit: 10,
        patient_id: 0,
        total:0,
        patient_name:''
      }
    },
    methods: {
      searchAction() {
        this.data = []
        if (this.search_input.length == 0) {
          this.data = this.all_data
        } else {

          for(let i = 0; i < this.all_data.length; i++){
            if(this.all_data[i].name.indexOf(this.search_input)  != -1 || this.all_data[i].dialysis_no.indexOf(this.search_input)  != -1){
              this.data.push(this.all_data[i])
            }
          }
        }
      },

      deleteTemplate(row) {
        this.$confirm('处方模版删除后不可恢复，是否确认删除', '删除', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: row.id
          }
          delHisPrescriptionTemplate(params).then(response => {
            if (response.data.state == 1) {
              this.GetPrescriptionTemplateList()
            }
          })

        }).catch(() => {

        })
      },
      jumpDetail(row) {
        this.$router.push('/outpatientDoctorStation/prescriptionTemplatedetail?id=' + row.id + '&patient_id=' + this.patient_id + '&patient_name=' + this.patient_name)
      },
      getMode(id) {
        let name = ''
        this.treatment_mode = Object.values(this.$store.getters.treatment_mode)
        this.treatment_mode.map(item => {
          if (item.id == id) {
            name = item.name
          }
        })
        return name
      },
      handleSizeChange(val) {
        this.limit = val
        this.GetPrescriptionTemplateList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.GetPrescriptionTemplateList()
      },
      GetPrescriptionTemplateList() {
        let params = {
          patient_id: this.patient_id,
          page: this.page,
          limit: this.limit
        }
        getPrescriptionTemplateList(params).then(response => {
          if (response.data.state == 1) {
            this.templates = response.data.data.list
            this.total = response.data.data.total
          }
        })

      },
      choosePatient(val) {
        this.page = 1
        this.limit = 10
        this.patient_id = val.id
        this.patient_name = val.name
        let params = {
          patient_id: val.id,
          page: this.page,
          limit: this.limit
        }
        getPrescriptionTemplateList(params).then(response => {
          if (response.data.state == 1) {
            this.templates = response.data.data.list
            this.total = response.data.data.total
          }
        })
      },
      getList(id) {
        getPatientList().then(response => {
          if (response.data.state == 1) {
            this.data = response.data.data.list
            this.all_data = response.data.data.list

            this.$refs.tab.setCurrentRow(this.data[0])
            this.patient_id = this.data[0].id
            this.patient_name = this.data[0].name
            this.GetPrescriptionTemplateList()

          }
        })
      },
      getTime(val, temp) {
        if (val != 0) {
          return uParseTime(val, temp)
        } else {
          return ''
        }
      },
      add() {
        if (this.patient_id == 0) {
          this.$message.error('请选择病人')
          return
        }
        this.$router.push('/outpatientDoctorStation/prescriptionTemplatedetail?id=' + 0 + '&patient_id=' + this.patient_id+ '&patient_name=' + this.patient_name)

      }
    },
    created() {
      var nowDate = new Date()
      var nowYear = nowDate.getFullYear()
      var nowMonth = nowDate.getMonth() + 1
      var nowDay = nowDate.getDate()
      this.record_date =
        nowYear +
        '-' +
        (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
        '-' +
        (nowDay < 10 ? '0' + nowDay : nowDay)
      this.getList()
      let tableHeight = document.body.clientHeight - 263
      this.tableHeight = tableHeight

    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val
          let tableHeight = val - 263
          this.tableHeight = tableHeight
          this.timer = true
          let that = this
          setTimeout(function() {
            that.timer = false
          }, 400)
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
    .new-main-contain {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .app-container {
        height: 100%;
    }

    .mainCell {
        height: 36px;
        display: flex;
        align-items: center;
    }

    .mainLeft {
        width: 200px;
        height: 100%;
        display: flex;
        flex-direction: column;

    .el-radio {
        margin-right: 5px;
    }

    }
    .mainRight {
        margin-left: 10px;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

    .cellSpan {
        min-width: 80px;
        display: inline-block;
        margin-right: 10px;
    }

    }
    .mainCenter {
        display: flex;
        flex: 1;
    }

    .centerLeft {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;

    .el-form-item {
        width: 32%;
        margin-right: 1%;
        float: left;
    }

    .el-form-item__label {
        text-align: left;
    }

    }
    .backColor {
        background: #f6f8f9;
        height: 5px;
        margin-bottom: 5px;
    }

    .tabsBox {
        position: relative;
        height: 76%;
        overflow-y: auto;
        margin-bottom: 60px;

    .el-tabs__item {
        padding: 0 10px;
    }

    }
    .preTabs {
        height: 100%;
        display: flex;
        flex-direction: column;

    .el-tabs__content {
        flex: 1;
        overflow-y: auto;
    }

    }

    .costBox {
        width: 100%;
        height: 60px;
        background: #fff;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
    }

    .addTab {
        position: absolute;
        right: 0;
        top: 14px;
        z-index: 20;
    }

    .centerRight {
        width: 300px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .rightTab {
        height: 40px;
        width: 100%;
        border: 1px solid #d2d2d2;
        box-sizing: border-box;

    p {
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #eee;
        float: left;
    }

    > p:last-child {
        border-left: 1px solid #d2d2d2;
        float: right;
    }

    .activeP {
        background: #409EFF;
        color: #fff;
    }

    }
    .comfirmBox {
        width: 100%;
        height: 60px;
        background: #fff;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mainHeader {
        width: 100%;
        background: #fff;
        position: fixed;
        z-index: 100;
        height: 36px;
    }

    .titleBox {
        position: fixed;
        z-index: 99;
        background: #fff;
    }

    .fixedCell {
        position: fixed;
        z-index: 99;
        right: 30px;
        background: #fff;
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
</style>

<style lang="scss">
    .centerLeft {

    .el-form-item__label {
        text-align: left;
    }

    }
    .tabsBox {

    .el-tabs__item {
        padding: 0 10px;
    }

    .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
        padding: 0 10px;
    }

    .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
        padding: 0 10px;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
        padding: 0 10px;
    }

    }
    .centerRight {

    .el-tabs__nav-scroll {
        display: flex;
    }

    .el-tabs__nav {
        margin: 0 auto;
    }

    .el-table th .cell, .el-table td .cell {
        padding: 0 2px;
    }

    }
    .preTabs {

    .el-tabs__content {

    }

    }
    .rightTabs {
        height: 100%;


    .el-tabs__content {

    }

    }
    .centerDialog {

    .el-dialog__body {
        max-height: calc(100vh - 100px) !important;
        padding: 0 20px;
    }

    }
</style>
