<template>
  <div class="pageContent">
    <el-empty description="未查到信息" v-if="resultFlag"></el-empty>
    <div v-else>
    <div class="content-head">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width: 100%">
        <el-tab-pane :label="formatTital(item.prescriptionType)"
                     :name="item.children" v-for=" (item,index) in tableData"
        >
          <el-tooltip slot="label" effect="dark"
                      :content="formatTital(item.prescriptionType)"
                      placement="bottom-start"
          >
            <span class="tmp"
            > {{ formatTital(item.prescriptionType)+parseInt(index+1) }}</span>
          </el-tooltip>
          <div>
            <span class="titleSpan">{{ item.prescriptionName }}</span>
            <span class="titleSpan">医生：{{ item.prescribeDoctor }}</span>
            <span class="titleSpan">科室：{{ item.executeDepartment }}</span>
            <span class="titleSpan">时间：{{ item.prescriptionData }}</span>
            <span class="titleSpan">金额：{{ item.prescriptionAmount }}元</span>
  <!--            <span class="titleSpan" >金额：{{ item.prescriptionAmount }}元</span>-->
            <span class="titleSpan" v-if="formatTital(item.prescriptionType) === '中药处方'? true :false">副数：{{ item.drugSum }}</span>

          </div>

        </el-tab-pane>
      </el-tabs>
      <!--     <div class="content-head-title">血常规</div>-->
      <!--      <div class="content-head-right">-->
      <!--        <div class="content-head-btn">-->
      <!--          <i class="el-icon-download"/>-->
      <!--          <div>下载</div>-->
      <!--        </div>-->
      <!--        <div class="content-head-btn">-->
      <!--          <svg-icon icon-class="pdf"/>-->
      <!--          <div>查看PDF</div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <el-table
      v-loading="loding"
      :data="tableList"
      :header-cell-style="{background:'#edf4fb'}"
      style="width: 100%"
    >
      <el-table-column prop="drugName" label="药品名称" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="unit" label="数量">
        <template slot-scope="scope">
          <div>
            {{ scope.row.drugSum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="adviceType" label="使用方法">
        <template slot-scope="scope">
          <div >
            {{ formatTableUser(scope.row) }}
          </div>
          <!--          <div :class="[scope.row.resultLogoExplin === '' ? '' : 'detail_text2' , scope.row.resultLogoExplin === '↑' ? 'detail_text2-2' : '' , scope.row.resultLogoExplin === '↓' ? 'detail_text2-1' : '']">-->
          <!--            {{ resultHandeler(scope.row.resultLogoExplin) }}-->
          <!--          </div>-->
        </template>
      </el-table-column>

      <el-table-column prop="drugSpecifications" label="规格"/>

    </el-table>
    <pagination
      class="card-page"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="pageFunction"

    />
    </div>
  </div>
</template>

<script>
import { handlerRequestNoAuth } from '@/api/patient360'
import moment from 'moment'

export default {
  name: 'outpatientprescription',
  data() {
    return {
      tableData: [],
      total: 20,
      queryParams: {
        page: 1,
        pageSize: 20
      },
      activeName: 0,
      tableList: [],
      loding: false,
      resultFlag:false
    }
  },
  mounted() {
    this.initMethodMethod()
  },
  props: {
    msg: {
      type: Object
    }
  },
  methods: {
    filterColor(flag) {
      let _flag
      switch (flag) {
        case 1:
          _flag = 'textGreen'
          break
        case 2:
          _flag = 'textRed'
          break
      }
      return _flag
    },
    async initMethodMethod() {
      this.loding = true
      let param = {
        orgCode: this.msg.orgCode,
        jzlsh: this.msg.jzlsh
      }
      param = JSON.stringify(param)
      let data = {
        apiId: '153',
        param: param
      }
      const res = await handlerRequestNoAuth(data)
      if (res.code != 200 || res.data.length === 0 ){

        this.loding = false
        this.resultFlag = true
        return
      }
      let newArr = []
      const obj = {}
      res.data.forEach((item, index) => {
        if (!obj[item.orderId]) {
          newArr.push({
            pid: index + 1,
            ...item,
            children: [{
              ...item
            }]
          })
          obj[item.orderId] = item.orderId

        } else if (obj[item.orderId] === item.orderId) {
          newArr.forEach(arr => {
            if (arr.orderId === item.orderId) {
              arr.children.push(item)
            }
          })
        }
      })
      console.log('map', res, newArr)
      this.tableData = newArr || []
      this.activeName = this.tableData[0].children
      this.handleClick()
      this.loding = false
    },
    handleClick(row) {
      console.log(this.activeName)
      for (let i = 0; i < this.activeName.length; i++) {

        if (!(this.activeName[i].prescriptionType == '西药' || this.activeName[i].prescriptionType == '治疗' || this.activeName[i].prescriptionType == '成药')){
          if (this.activeName[i].drugDays === null &&  this.activeName[i].doseRegimen === null && this.activeName[i].drugFrequency === null){
            delete  this.activeName[i]
          }
        }
      }
      this.tableList = this.activeName
      this.pageFunction()


    },
    classHandeler(value) {
      if (value === '↓') {
        return 'detail_text2-1'
      } else if (value === '↑') {
        return 'detail_text2-2'
      } else {
        return 'detail_text2'
      }
    },
    resultHandeler(value) {
      if (value === '-') {
        return ''
      }
      return value
    },
    formatDate(time) {
      return moment(time).format('YYYY/MM/DD')
    },
    formatTital(tital) {
      if (tital == '西药' || tital == '治疗' || tital == '成药') {
        return '西药处方'
      } else {
        return '中药处方'
      }
    },
    formatTableUser(use){
      if (!(use.prescriptionType == '西药处方' || use.prescriptionType == '治疗处方' || use.prescriptionType == '成药处方')){
        return use.doseRegimen === null ? "" : "用法："+ use.doseRegimen
      }else if (use.prescriptionType  == '治疗处方'){
        return ""
      }else {
        return use.doseRegimen === null ? "" : '用法：' +use.drugDose + '/次 ' + use.doseRegimen + ' ' + use.drugFrequency
      }
    },
    pageFunction(){
      this.total =  this.activeName.length
      this.tableList = this.activeName.slice(
        (this.queryParams.page - 1) * this.queryParams.pageSize,
        this.queryParams.page * this.queryParams.pageSize
      )
      console.log("page",this.total, this.queryParams.pageSize,this.tableList)

    }
  }
}
</script>

<style scoped lang="scss">
.textGreen {
  color: #28b276;
}

.textRed {
  color: red;
}

.icon-trend {
  color: #0A69F3;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.detail_text2 {
  //flex: 25%;
  //text-align: center;
}

.detail_text2-1 {
  //flex: 25%;
  //text-align: center;
  color: #3bbc72;
}

.detail_text2-2 {
  //flex: 25%;
  //text-align: center;
  color: red;
}

.tmp {
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  //width: 100px;/*设置显示的最大宽度*/
  display: inline-flex;
}

.titleSpan {
  margin-right: 20px;
}

</style>
