<template>
  <div v-if="visibility" class="Dialog">
    <div class="DialogTit">
      <div class="back" @click="cancle()">
        <span class="iconfont">&#xe720; </span>返回
      </div>
      <h1 class="name">
        {{ patient_prop.name }} [透析号 {{ patient_prop.dialysis_no }} ]
      </h1>
      <span @click="comfirm" class="success" style="visibility: hidden;"
        >确定</span>
    </div>

    <div class="DialogContent">
      <div class="item">
        <label class="name" for="txms">本次透析日期</label>
        <div class="content">
          <span class="text" id="txms"> {{ dialysis_date }}</span>
        </div>
      </div>
      <div class="item" style="display:block;">
        <div class="name" style="width:100%;text-align:left;line-height:1.5rem;font-size:0.7rem;" for="txms">透前称重（kg）<span style="text-align:right;float: right;color:#ec6618;">{{ getBeforeWeight(predialysis)}}</span></div>
        <div class="content" style="margin-top:5px;margin-left:0;">
          <span class="text" style="text-align:left;display:block;height:0.4rem;" id="txms">透前称重:<span style="color:#ec6618;display:inline-block;text-align:center;margin:0 2px;">{{ getBeforeWeight(predialysis)}}</span>kg=
          透前总重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{predialysis.weight_before}}</span>kg-
          衣服重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{predialysis.additional_weight}}</span>kg
           </span>
        </div>
        <br>
      </div>
      <div class="item">
        <label class="name" for="txms">干体重（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{ getDryWeight() }}</span>
        </div>
      </div>
      <!-- <div class="item">
        <label class="name" for="txms">衣物重（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{
            predialysis.additional_weight
          }}</span>
        </div>
      </div> -->
      <div class="item" style="display:block;">
        <div class="name" style="width:100%;text-align:left;line-height:1.5rem;font-size:0.7rem;" for="txms">体重增加（kg）<span style="text-align:right;float: right;color:#ec6618;">{{add_weight}}</span></div>
        <div class="content" style="margin-top:5px;margin-left:0;">
          <span class="text" style="text-align:left;display:block;height:0.8rem;line-height:0.6rem;" id="txms">体重增加:<span style="color:#ec6618;display:inline-block;text-align:center;margin:0 2px;">{{add_weight}}</span>kg=
          透前称重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{getBeforeWeight(predialysis)}}</span>kg -
          上次透后称重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{getLastAfterWeight(last_record)}}</span>kg
          </span>
        </div>
        <br>
      </div>
      <!-- <div class="item">
        <label class="name" for="txms">体重增加（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{ add_weight }}</span>
        </div>
      </div> -->
      <div class="item" style="display:block;">
        <div class="name" style="width:100%;text-align:left;line-height:1.5rem;font-size:0.7rem;" for="txms">透后称重（kg）<span style="text-align:right;float: right;color:#ec6618;">{{getAfterWeight(record)}}</span></div>
        <div class="content" style="margin-top:5px;margin-left:0;">
          <span class="text" style="text-align:left;display:block;height:0.4rem;" id="txms">透后称重:<span style="color:#ec6618;display:inline-block;text-align:center;margin:0 2px;">{{getAfterWeight(record)}}</span>kg=
          透后总重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{record.weight_after}}</span>kg-
          衣服重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{record.additional_weight}}</span>kg
           </span>
        </div>
        <br>
      </div>
      <!-- <div class="item">
        <label class="name" for="txms">透后体重（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{ getAfterWeight(record)}}</span>
        </div>
      </div> -->
      <div class="item">
        <label class="name" for="txms">体重减少（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{ weight_loss }}</span>
        </div>
      </div>

      <div class="item" style="display:block;">
        <div class="name" style="width:100%;text-align:left;line-height:1.5rem;font-size:0.7rem;" for="txms">上次透后称重（kg）<span style="text-align:right;float: right;color:#ec6618;">{{getLastAfterWeight(last_record)}}</span></div>
        <div class="content" style="margin-top:5px;margin-left:0;">
          <span class="text" style="text-align:left;display:block;height:0.4rem;" id="txms">上次透后称重:<span style="color:#ec6618;display:inline-block;text-align:center;margin:0 2px;">{{getLastAfterWeight(last_record)}}</span>kg=
          上次透后总重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{last_record.weight_after}}</span>kg-
          上次衣服重:<span style="color:#ec6618;display:inline-block;text-align:center;center;margin:0 2px;">{{last_record.additional_weight}}</span>kg
           </span>
        </div>
        <br>
      </div>
      <!-- <div style="text-align:center;">近六次体重变化图</div>
      <div id="newMain" style="width: 100%;height:400px;"></div> -->
      <!-- <div class="item">
        <label class="name" for="txms">上次透后体重（kg）</label>
        <div class="content">
          <span class="text" id="txms">{{
           getLastAfterWeight(last_record)
          }}</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import echarts from "echarts";

export default {
  name: 'LongAdviceSubMenu',
  created () {
    if (this.predialysis.weight_before > 0 && this.last_record.weight_after > 0) {
      this.add_weight = parseFloat((this.predialysis.weight_before - this.predialysis.additional_weight) - (this.last_record.weight_after - this.last_record.additional_weight)).toFixed(2)
    }
    let loss = ''
    if (this.predialysis.weight_before > 0 && this.record.weight_after > 0) {
      loss = parseFloat(this.predialysis.weight_before - this.record.weight_after).toFixed(2)
      loss = loss > 0 ? loss : ''
    }
    this.weight_loss = this.record.weight_loss ? this.record.weight_loss : loss
  },
  data () {
    return {
      result: [],
      id: 0,
      selectName: '',
      add_weight: 0,
      weight_loss: ''
    }
  },
  props: {
    predialysis: {
      type: Object,
      default: null

    },
    visibility: {
      type: Boolean,
      default: false
    },
    last_predialysis: {
      type: Object
    },
    record: {
      type: Object
    },
    last_record: {
      type: Object
    },
    patient_prop: {
      type: Object
    },
    prescription_prop: {
      type: Object
    },
    dry_weight: {
      type: Object
    }
  },
  computed: {
    dialysis_date: function () {
      return parseTime(this.$route.query.date, '{y}/{m}/{d}')
    }
  },
  methods: {
    myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = echarts.init(document.getElementById('newMain'));

		  // 指定图表的配置项和数据
		  var option = {
			  // title: {
				//   text: '近六次体重变化图'
			  // },
			  tooltip: {},
        legend: {
            data:['干体重','透前体重','透后体重']
        },
        grid: {
            left: '3%',   //图表距边框的距离
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
			  xAxis: {
				  data: ["10-31","11-01","11-02","11-03","11-04","11-05"]
			  },
			  yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} Kg'
                }
            }
        ],
        series: [
            //虚线
            {
                name:'干体重',
                type:'line',
                symbolSize:4,   //拐点圆的大小
                color:['#f18f68'],  //折线条的颜色
                data:[3, 56, 22, 33, 1, 44],
                // smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'solid'  //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },
            //实线
            {
                name:'透前体重',
                type:'line',
                symbol:'circle',
                symbolSize:4,
                color:['#5bd18b'], 
                itemStyle:{
                    normal:{
                      width:2,
                      type:'solid'  //'dotted'虚线 'solid'实线
                        // color:'#5bd18b',
                        // borderColor:'#5bd18b'  //拐点边框颜色
                    }
                },
                data:[22, 11, 35, 55, 2, 16]
            },
            {
                name:'透后体重',
                type:'line',
//                stack: '总量',
                symbolSize:4,
                color:['#409eff'],
                // smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'solid'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data:[10, 55, 22, 2, 15, 44]
            },
        ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
    },
    getDryWeight () {
      if (this.dry_weight != null && this.dry_weight.id > 0) {
        return this.dry_weight.dry_weight
      } else {
        if (this.last_predialysis != null && this.last_predialysis.id > 0) {
          return this.last_predialysis.dry_weight
        } else {
          return ''
        }
      }
    },
    getBeforeWeight (predialysis) {
      if (predialysis.id > 0) {
        if (predialysis.weight_before > 0) {
          return parseFloat(predialysis.weight_before - predialysis.additional_weight).toFixed(1)
        } else {
          return ''
        }
      }
    },
    getAfterWeight (record) {
      if (record.id > 0) {
        if (record.weight_after > 0) {
          return parseFloat(record.weight_after - this.predialysis.additional_weight).toFixed(1)
        } else {
          return ''
        }
      }
    },
    getLastAfterWeight (last_record) {
      if (last_record.id > 0) {
        if (last_record.weight_after > 0) {
          let additional_weight = 0
          if (this.last_record.additional_weight != undefined) {
            additional_weight = this.last_record.additional_weight
          }
          console.log("last_record------------------------",last_record)
          return parseFloat(last_record.weight_after - additional_weight).toFixed(1)
        } else {
          return ''
        }
      }
    },
    cancle: function () {
      this.$emit('menu-msg-tip')
    },
    comfirm: function () {
      this.$emit('menu-msg-tip')
    },
    getValue: function () {
      let form = {}

      let results = []

      for (let i = 0; i < this.propsForm.list.length; i++) {
        for (let a = 0; a < this.propsForm.result.length; a++) {
          if (this.propsForm.list[i].id == this.propsForm.result[a]) {
            results.push(this.propsForm.list[i])
          }
        }
      }

      var obj5 = {}
      results = results.reduce((cur, next) => {
        obj5[next.id] ? '' : (obj5[next.id] = true && cur.push(next))
        return cur
      }, [])

      results

      return results
    }
  },
  mounted(){
    // this.myEcharts();
  },
  watch: {
    // visibility (val) {
    //   // 初始化数据操作
    //   if(val == true){
    //     this.myEcharts();
    //   }
      
    // },
  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.optionsBox {
  background: #fff;
  max-height: 10rem;
  min-height: 5rem;
  @media only screen and (max-width: 812px) {
    min-height: 8rem !important;
  }
  ul {
    overflow-y: scroll;
    max-height: 9rem;
    li {
      height: 1.1rem;
      line-height: 1.1rem;
      border-bottom: 1px #e5e5e5 solid;
      padding: 0 0.38rem;
      font-size: 0.36rem;
      color: $title-color;
    }
    .tick {
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        border: 2px solid $main-color;
        border-top-width: 0;
        border-right-width: 0;
        width: 0.3rem;
        height: 0.15rem;
        -webkit-transform: rotate(-50deg);
        position: absolute;
        top: 0.38rem;
        right: 0.44rem;
      }
    }
  }
}
.CheckBox {
  background: #fff;
  max-height: 6.8rem;
  min-height: 5rem;
  overflow-y: scroll;
  @media only screen and (max-width: 812px) {
    max-height: 8rem !important;
    min-height: 8rem !important;
  }

  ul {
    li {
      line-height: 1rem;
    }
  }
}
</style>
