<template>
  <div class="component-wrapper">
    <el-table
      ref="dataList"
      v-loading="dataListLoading"
      highlight-current-row
      height="100%"
      :data="dataList"
      border
      :row-class-name="'row-1'"
    >
      <el-table-column type="expand" :label="'展开'" width="50px">
        <template slot-scope="scope">
          <el-table :data="scope.row.data">
            <el-table-column prop="OP_TIME" :label="'开药时间'" width="155px">
              <template slot-scope="scope2">
                <div v-html="scope2.row.OP_TIME" />
              </template>
            </el-table-column>
            <el-table-column prop="MED_NAME" :label="'药品(商品名)'">
              <template slot-scope="scope2">
                <div v-html="scope2.row.MED_NAME" />
              </template>
            </el-table-column>
            <el-table-column prop="SOC_NAME" :label="'药品(通用名)'" show-overflow-tooltip>
              <template slot-scope="scope2">
                <div v-html="scope2.row.SOC_NAME" />
              </template>
            </el-table-column>
            <el-table-column prop="NUMBER_USE" :label="'用药数量'">
              <template slot-scope="scope2">
                <div v-html="scope2.row.NUMBER_USE" />
              </template>
            </el-table-column>
            <el-table-column prop="SITE" :label="'用药部位'">
              <template slot-scope="scope2">
                <div v-html="scope2.row.SITE" />
              </template>
            </el-table-column>
            <el-table-column prop="FREQUENCY" :label="'给药频率'">
              <template slot-scope="scope2">
                <div v-html="scope2.row.FREQUENCY" />
              </template>
            </el-table-column>
            <el-table-column prop="ITEM_TYPE" :label="'门诊/住院'">
              <template slot-scope="scope2">
                <div v-html="scope2.row.ITEM_TYPE" />
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="opDate" :label="'日期'" width="120px" header-align="center" align="center" />
      <el-table-column prop="opContent" :label="'主要内容（商品名）'" show-overflow-tooltip>
        <template slot="header" slot-scope="{}">
          <div class="header-wrapper">
            <span>主要内容（商品名）</span>
            <el-input v-model="searchKeyWord" class="header-search" size="mini" placeholder="关键词" @keyup.enter.native="searchNext">
              <span slot="suffix" class="search-result">
                {{ ((searchIndex==-1)?0:(searchIndex+1))+'/'+searchResult.length }}
              </span>
              <i slot="suffix" class="el-input__icon el-icon-arrow-down" title="下一个" @click="searchNext" />
              <i slot="suffix" class="el-input__icon el-icon-arrow-up" title="上一个" @click="searchLast" />
              <i slot="suffix" class="el-input__icon el-icon-refresh" title="重置" @click="searchReset" />
            </el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import myMixin from './_mixin'

export default {
  mixins: [myMixin],
  data() {
    return {
      type: '用药',
      searchColumn: [
        'OP_TIME',
        'MED_NAME',
        'SOC_NAME',
        'NUMBER_USE',
        'SITE',
        'FREQUENCY',
        'ITEM_TYPE'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
// .component-wrapper{
//   height: auto !important;
// }
</style>
