<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <el-input size="small" style="width:150px;" @keyup.enter.native='searchAction' v-model.trim="search_input"
                  class="filter-item"/>
        <el-button size="small" style="margin:0 10px;" class="filter-item" type="primary" @click="searchAction">搜索
        </el-button>
        <el-date-picker v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange"
                        :editable="false" :clearable="false" style="width: 196px;margin-right:10px;" type="date"
                        placeholder="选择日期时间" align="right"></el-date-picker>
      </div>
      <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }"
                :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
        <el-table-column align="center" label="序号" width="60" type="index">
          <!--<template slot-scope="scope">{{ scope.$index +1 }}</template>-->
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="100">
          <template slot-scope="scope">{{ scope.row.patient.name }}</template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="处方日期" width="110">
          <template slot-scope="scope"> {{getTimes(scope.row.record_date)}}</template>

        </el-table-column>
        <!--<el-table-column align="center" prop="name" label="患者类型">-->
          <!--<template slot-scope="scope">{{}}</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" prop="name" label="处方号">
          <template slot-scope="scope">{{scope.row.prescription_number}}</template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="开立医生">
          <template slot-scope="scope">{{scope.row.doctor}}</template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="诊断">
          <template slot-scope="scope">{{ scope.row.diagnosis }}</template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="状态">
          <template slot-scope="scope">
            <div v-if=" scope.row.prescription_status == 1">新建</div>
            <div v-if=" scope.row.prescription_status == 2">待结算</div>
            <div v-if=" scope.row.prescription_status == 3">已结算</div>
            <div v-if=" scope.row.prescription_status == 4">已退费</div>

          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handerShowDetail(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
        style="margin-top:20px;float: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"

      >
      </el-pagination>
      <inquiries-detail ref="inquiriesDetail"></inquiries-detail>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import inquiriesDetail from './components/inquiriesDetail'
  import { getHisPrescriptionList } from '@/api/his/his'
  import { uParseTime } from '@/utils/tools'

  export default {
    components: {
      BreadCrumb,
      inquiriesDetail
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '门诊医生站' },
          { path: false, name: '既往查询' }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      getTimes(time) {
        return uParseTime(time, "{y}-{m}-{d}");
      },
      handerShowDetail(row) {
        console.log(row)
        this.$refs.inquiriesDetail.show(row.id)
      }, getHisPrescriptionList() {
        getHisPrescriptionList().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.tableData = response.data.data.order

          }
        })

      }
    }, created() {

      this.getHisPrescriptionList()

    }
  }
</script>
