<template>
  <div class="wrap app-container">
    <div class="tools">
      <el-select
        v-model="form.yljgId"
        placeholder="请选择医疗机构"
      >
        <el-option
          v-for="item in listMedicalMechanismArr"
          :key="item.id"
          :value="item.id"
          :label="item.name"
          :disabled="item.state == 1 ? false : true"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="form.date"
        size="mini"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-input
        v-model="form.nameReq"
        style="width: 190px;"
        placeholder="请输入调配师姓名 / 工号"
        clearable
        size="small"
        @keyup.enter.native="search"
      />
      <el-button icon="el-icon-search" size="mini" type="primary" @click="search()">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="clear()">清空</el-button>
      <!--<el-button size="mini" type="primary" @click="exportExcel">导出</el-button>-->
      <!--<el-button size="mini" type="primary" @click="print">打印</el-button>-->
    </div>
    <div class="content">
      <el-table :data="tableData" size="mini" style="width: 100%">
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">{{
              scope.$index + 1 + (
                form.pageNum - 1
              ) * form.pageSize
            }}
          </template>
        </el-table-column>
        <el-table-column label="医疗机构" align="center" prop="yljgName" show-overflow-tooltip />
        <el-table-column label="调配师" align="center" prop="nickName" />
        <el-table-column label="工号" align="center" prop="userName" />
        <el-table-column label="性别" align="center" prop="sex" />
        <el-table-column label="手机号码" align="center" prop="phoneNumber" />
        <el-table-column label="已调配处方总数" align="center" prop="totalOrders"></el-table-column>
        <el-table-column label="已调配处方剂数" align="center" prop="totalNumSum"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="width: 40px"
              @click="handleDetail(scope.row)"
            >明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getDataList"
        />
      </div>
    </div>
    <el-dialog
      title="调配明细"
      :visible.sync="subOpen"
      width="1280px"
      append-to-body
      custom-class="wrap dialog-wrap"
    >
      <div class="tools">
        <el-button size="mini" style="margin-right: 10px;">{{ subForm.nickName }}</el-button>
        <el-select v-model="subForm.preMzZy" size="mini" placeholder="门诊/住院">
          <el-option label="门诊" value="1"></el-option>
          <el-option label="住院" value="2"></el-option>
        </el-select>
        <el-select v-model="subForm.type" size="mini" placeholder="处方类型">
          <el-option label="中药处方" value="1"></el-option>
          <el-option label="中药制剂" value="2"></el-option>
        </el-select>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="search('sub')">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="clear('sub')">重置</el-button>
        <!--<el-button size="mini" type="primary" @click="exportExcel">导出</el-button>-->
        <!--<el-button size="mini" type="primary" @click="print">打印</el-button>-->
      </div>
      <div class="content">
        <el-table :data="subTableData" size="mini" style="width: 100%;" :max-height="subMaxHeight">
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">{{
                scope.$index + 1 + (
                  subForm.pageNum - 1
                ) * subForm.pageSize
              }}
            </template>
          </el-table-column>
          <el-table-column label="调配时间" align="center" prop="allocateTime" />
          <el-table-column label="门诊/住院" align="center">
            <template slot-scope="scope">{{ scope.row.preMzZy == 1 ? '门诊' : '住院' }}</template>
          </el-table-column>
          -->
          <el-table-column label="处方号" align="center" prop="preNo" />
          <el-table-column label="剂数" align="center" prop="number" />
          <el-table-column label="发药类型" align="center" >
            <template slot-scope="scope">{{
                scope.row.type == 1
                  ? '中药处方'
                  : scope.row.type == 2
                    ? '中药制剂'
                    : ''
              }}
            </template>
          </el-table-column>
          -->
          <el-table-column label="处方名称" align="center" prop="preName" show-overflow-tooltip />
          <el-table-column label="患者" align="center" prop="name" />
          <el-table-column label="性别" align="center" prop="sex" />
          <el-table-column label="临床诊断" align="center" prop="patientContent" />
          <el-table-column label="开方医生" align="center" prop="doctor" />
        </el-table>
        <div class="page">
          <pagination
            v-show="subTotal > 0"
            :total="subTotal"
            :page.sync="subForm.pageNum"
            :limit.sync="subForm.pageSize"
            @pagination="getSubDataList()"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reportStatistics, selectOralPreList } from '@/api/pharmacy/blend'
import { listMedicalMechanism }                from '@/api/medical/mechanism'
import dayjs                                   from 'dayjs'


export default {
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 10
      },
      subForm: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        preMzZy: null,
        userId: null,
        nickName: null
      },
      total: 0,
      tableData: [],
      subOpen: false,
      subLoading: false,
      subTotal: 0,
      subTableData: [],

      listMedicalMechanismArr: []
    }
  },
  computed: {
    subMaxHeight() {
      return Math.floor(window.innerHeight * 0.8) - 100
    }
  },
  created() {
    this.getListMedicalMechanism()
  },
  mounted() {
    this.clear()
  },
  methods: {
    getListMedicalMechanism() {
      listMedicalMechanism().then((res) => {
        this.listMedicalMechanismArr = res.data
      })
    },
    getDataList() {
      const { date, ...form } = this.form
      if ( date && date.length ) {
        form.startTime = date[ 0 ]
        form.endTime = date[ 1 ]
      }
      reportStatistics(form).then(res => {
        if ( res.code == 200 ) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    getSubDataList() {
      this.subLoading = true
      const { date, ...form } = { ...this.form, ...this.subForm }
      if ( date && date.length ) {
        form.startTime = date[ 0 ]
        form.endTime = date[ 1 ]
      }
      selectOralPreList(form).then(res => {
        if ( res.code == 200 ) {
          this.subTableData = res.rows
          this.subTotal = res.total
        }
        this.subLoading = false
      }).catch(() => {
        this.subLoading = false
      })
    },
    search(table) {
      if ( table === 'sub' ) {
        this.subForm.pageNum = 1
        this.getSubDataList()
      } else {
        this.form.pageNum = 1
        this.getDataList()
      }
    },
    clear(table) {
      if ( table === 'sub' ) {
        this.subForm = {
          ...this.subForm,
          type: null,
          preMzZy: null,
          pageNum: 1,
          pageSize: this.subForm.pageSize
        }
      } else {
        this.form = {
          pharmacyId: localStorage.getItem('pharmacyId'),
          pageNum: 1,
          pageSize: this.form.pageSize,
          date: [
            dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
            dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
          ],
          yljgId: null,
          nameReq: null
        }
      }
      this.search(table)
    },
    handleDetail(row) {
      this.subForm = {
        userId: row.userId,
        nickName: row.nickName,
        pageNum: 1,
        pageSize: this.form.pageSize
      }

      this.subOpen = true
      this.search('sub')
    }
  }
}
</script>
<style scoped lang="scss">
.wrap {
  .content {
    padding-top: 0;
  }

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .tools {
    margin-bottom: 20px;

    .el-date-editor {
      width: 320px;
      margin-right: 10px;
      border-radius: 8px;
    }

    .el-select {
      width: 190px;
      margin-right: 10px;
    }

    .el-input {
      width: 140px;
      margin-right: 10px;
    }
  }
}
</style>
<style>
.el-input--small .el-input__inner {
  height: 28px;
  line-height: 28px;
}
</style>
