<style>
.btn-d-cancel{border:1px #cfd4d7 solid;background:#cfd4d7;color:#fff;}
.businessul1{display: block;margin:0px;padding:0px;}
.businessul1:after{content:"";display:block;width:100%;
height:1px;clear:both;}
.businessul1 li{width:333px;padding:0px 60px;float:left;
border-right:1px #e8ebf0 solid;}
.businessul1 li:nth-child(3){border-right:0px;}
.businessul1 li h3{font-size:18px;padding:0px;margin:0px;}
.businessul1 li p{padding:5px 0px;text-align: right;
  border-bottom:1px #e8ebef solid ;margin:0px;font-size:14px;}
.businessul1 li p b{font-size:30px;font-weight: bold;padding-right:4px;
color:#86b8bc;}
.businessul1 li  h4{padding:0px;margin:0px;font-size:14px;
  padding-top:10px;}
.businessul1 li p.p2 b{font-size:24px;}
.province .address-select{
  margin-bottom: 0px !important;
}
</style>
<template>
<div class="container resource" style="min-height: 490px;">

  <div class="pop-banner clearfix">
    <div class="operate-btns"> 
        <!-- <a   class="fbtn fb-add"  v-show="!addrow"
          v-on:click="addrow=!addrow">添加</a>
        <a href="javascript:void(0)" class="fbtn fb-save" 
         v-show="addrow" v-on:click="add()">保存</a>
        <a href="javascript:;" class="fbtn fb-refresh"
          v-on:click="getData('refresh')">刷新</a> -->
        
      </div>
    <h3 class="current-module">医疗机构采购流向追溯</h3>
  </div>
  <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <label for="cn1" class="label label-6em">医疗机构名称</label>
          <div class="control w370">
            <input type="text" v-model="search.hosptialName" id="cn1">
          </div>
        </div>
        <div class="form-group">
          <label for="cn3" class="label label-6em">医疗机构等级</label>
          <div class="control select-style mb-0">
            <select class="w130" v-model="search.orgRank">
            <option value="">选择</option>
              <option value="1">一级</option>
              <option value="2">二级</option>
              <option value="3">三级</option>
            </select>
            <!-- <span class="text-and">至</span> -->
            <select class="w130" v-model="search.orgGrade">
            <option value="">选择</option>
              <option value="">甲等</option>
              <option value="">乙等</option>
              <option value="">丙等</option>
            </select>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <label for="cn3" class="label">省份</label>
          <div class="control province">
            <city :province.sync="search.province"
                  :city.sync="search.city"
                  :area.sync="search.district"
                  :readonly="readonlyFlag"></city>
            </div>
          </div>
        <div class="form-group">
          <label for="cn8" class="label">医疗机构类别</label>
          <div class="control">
            <div class="radio-control">

              <input type="radio" id="radio01" name="radioio"  value="1" v-model="search.orgType">
              <label class="radio" for="radio01">医院</label>

              <input type="radio" name="radioio" id="radio02" value="2" 
               v-model="search.orgType">
              <label class="radio" for="radio02">诊所</label>

              <input type="radio" name="radioio" id="radio03" value="3"
               v-model="search.orgType">
              <label class="radio" for="radio03">卫生院</label>
            </div>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group data200">
          <label for="cn3" class="label">时间范围</label>
          <div class="control control-date">
            <div style="width:58%;float:left;">
              <datepicker :target.sync="search.startDate"></datepicker>
            </div>
            <span class="text-and t-center" style="width: 39px">至</span>
            <div style="width:19%;float:left;">
              <datepicker :target.sync="search.endDate"></datepicker>
            </div>
          </div>
        </div>
         <div class="form-group">
          <label for="cn3" class="label label-6em">订单类型</label>
          <div class="control select-style mb-0">
            <select v-model="search.billType">
            <option value="">选择</option>
              <option value="04">药品</option>
              <option value="01">医疗器械</option>
              <option value="02">高值耗材</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="group-row t-right">
        <button class="fast-analysis-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle"
         v-on:click="getData('search')">
      分析</button>
      </div>
    </div>

  <ul class="businessul1">
      <li>
          <h3>订货总金额</h3>
          <p><b>{{list.totalMoney / 10000 | numDigit 2}}</b>万元</p>
          <h4>最高:{{dhmax}}</h4>
          <p class="p2"><b>{{list.maxMoney / 10000 | numDigit 2}}</b>万元</p>
          <h4>最低:{{dhmin}}</h4>
          <p class="p2" style="border-bottom:0px;"><b>{{list.minMoney / 10000 | numDigit 2}}</b>万元</p>
          <div :style="{height:height}" id="echart1">

          </div>
      </li>
      <li>
          <h3>订货总数量</h3>
          <p><b>{{list.totalNum}}</b></p>
          <h4>最高:{{dhslmax}}</h4>
          <p  class="p2" ><b>{{list.maxNum}}</b></p>
          <h4>最低:{{dhslmin}}</h4>
          <p  class="p2" style="border-bottom:0px;"><b>{{list.minNum}}</b></p>
          <div  :style="{height:height}"  id="echart2">
            
          </div>
      </li>
      <li>
          <h3>订货频次</h3>
          <p class="p1">平均<b>{{list.totalTimes}}</b>单/月</p>
          <h4>最高:{{dhpcmax}}</h4>
          <p class="p2"><b>{{list.maxTimes}}</b>单/月</p>
          <h4>最低:{{dhpcmin}}</h4>
          <p class="p2"  style="border-bottom:0px;"><b>{{list.minTimes}}</b>单/月</p>
          <div  :style="{height:height}"  id="echart3">
            
          </div>
      </li>
  </ul>


</div>
</template>
<script>
var echarts_api=require('../../options/echarts_api.js')
module.exports={
  data:function(){
    return {
      list:'',
      dhmax:'',
      dhmin:'',
      dhslmax:'',
      dhslmin:'',
      dhpcmax:'',
      dhpcmin:'',
      search:{startDate:'',endDate:'',district:'',city:'',province:'',province:'',orgGrade:'',orgRank:'',orgType:'',billType:'',
        hosptialName:''
      },height:'340px'
    }
  },methods:{
    getData:function(casetxt){//请求数据     
      Ajax.get('/api/goverment_report_showHosptialReview',
        this.search).then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list',result.data);
              var h=this.list.moneyPieChart.legend.data.length;
              this.dhmax = result.data.moneyPieChart.legend.data[0];
              this.dhmin = result.data.moneyPieChart.legend.data[h-1];
              var s=this.list.goodsPieChart.legend.data.length;
              this.dhslmax = result.data.goodsPieChart.legend.data[0];
              this.dhslmin = result.data.goodsPieChart.legend.data[s-1];
              var p=this.list.timesPieChart.legend.data.length;
              this.dhpcmax = result.data.timesPieChart.legend.data[0];
              this.dhpcmin = result.data.timesPieChart.legend.data[p-1];
              if(h>5){
                this.height=260+44*h+'px'

              }
              setTimeout(function(){
                this.echarts();
              }.bind(this),100)
              
          }
      }.bind(this))
    },echarts:function(){
      var obj={
        title:{ text:''},
        legend: {
            orient: 'vertical',
            x: 'left',y:'bottom',
            data:['北京301医院','中日友好医院','武警总院',
            '积水潭医院','朝阳医院']
        },series:[{
          data:[
            {value:335, name:'北京301医院'},
            {value:210, name:'中日友好医院'},
            {value:410, name:'武警总院'},
            {value:110, name:'积水潭医院'},
            {value:510, name:'朝阳医院'}
          ]
        }]
      };
      obj.legend=this.list.moneyPieChart.legend;
      obj.series=this.list.moneyPieChart.series;      
      this.chart1=echarts_api.init('echart1',obj,'pie')  
      this.chart1.on('click', function (params) {

          var name=params.name;
          var id=''
          for(var i=0;i<obj.series[0].data.length;i++){
            if(obj.series[0].data[i].name==name){
              id=obj.series[0].data[i].guid;
            }
          }
          this.$router.go('/businessHospitalList/'+id+'?startDate='+this.search.startDate+'&endDate='+this.search.endDate)
      }.bind(this)); 


      var obj2={
        title:{ text:''},
        legend: {
            orient: 'vertical',
            x: 'left',y:'bottom',
            data:['北京301医院','中日友好医院','武警总院',
            '积水潭医院','朝阳医院']
        },series:[{
          data:[
            {value:335, name:'北京301医院'},
            {value:210, name:'中日友好医院'},
            {value:410, name:'武警总院'},
            {value:110, name:'积水潭医院'},
            {value:510, name:'朝阳医院'}
          ]
        }]
      };
      obj2.legend=this.list.goodsPieChart.legend;
      obj2.series=this.list.goodsPieChart.series; 
      this.chart2=echarts_api.init('echart2',obj2,'pie') 
      this.chart2.on('click', function (params) {

          var name=params.name;
          var id=''
          for(var i=0;i<obj2.series[0].data.length;i++){
            if(obj2.series[0].data[i].name==name){
              id=obj2.series[0].data[i].guid;
            }
          }
          this.$router.go('/businessHospitalList/'+id+'?startDate='+this.search.startDate+'&endDate='+this.search.endDate)
      }.bind(this)); 

      var obj3={
        title:{ text:''},
        legend: {
            orient: 'vertical',
            x: 'left',y:'bottom',
            data:['北京301医院','中日友好医院','武警总院',
            '积水潭医院','朝阳医院']
        },series:[{
          data:[
            {value:335, name:'北京301医院'},
            {value:210, name:'中日友好医院'},
            {value:410, name:'武警总院'},
            {value:110, name:'积水潭医院'},
            {value:510, name:'朝阳医院'}
          ]
        }]
      }
      obj3.legend=this.list.timesPieChart.legend;
      obj3.series=this.list.timesPieChart.series; 
      this.chart3=echarts_api.init('echart3',obj3,'pie') 
      this.chart3.on('click', function (params) {

          var name=params.name;
          var id=''
          for(var i=0;i<obj3.series[0].data.length;i++){
            if(obj3.series[0].data[i].name==name){
              id=obj3.series[0].data[i].guid;
            }
          }
          this.$router.go('/businessHospitalList/'+id+'?startDate='+this.search.startDate+'&endDate='+this.search.endDate)
      }.bind(this)); 
    }
  },route:{
    activate:function(){
      //this.getData();
      //$(function(){
        setTimeout(function(){
           // this.echarts();
        }.bind(this),1000)
          
      //}.bind(this))
    }
  }
}
</script>