<style>
.btn-d-cancel{border:1px #cfd4d7 solid;background:#cfd4d7;color:#fff;}
.purchase-tab1{width:480px;display: inline-block;min-height: 280px;}
.purchase-tab1 h1{background:#4aa8e5;height:30px;line-height: 30px;
text-indent: 20px;font-size:16px;color:#fff;}

</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="purchase-tab1" style="margin-right:30px;">
    <h1>单量分析</h1>
    <div id="echart1" style="height:250px;"></div>
  </div>
  <div class="purchase-tab1">
    <h1>金额分析</h1>
    <div id="echart2"  style="height:250px;"></div>
  </div>


  <div class="ctable ct-parent" 
  style="border-top:1px #e8ebef solid;padding-top:20px;">
    <div class="ct-head">
      <span class="ct-col w40">序号</span>
      <span class="ct-col w200">月份</span>
      <span class="ct-col w200">医疗机构订单数量</span>
      <span class="ct-col w200">订单金额（万元）</span>
      <span class="ct-col w200">供应商出库单数</span>
      <span class="ct-col w120">出库金额（万元）</span>
    </div>
    <div class="ct-row " 
    :class="{'active focus ':item.show || item.showb}"
    v-for="item in list">
      <div class="row-line">
        <span class="ct-col w40">{{$index+1}}</span>
        <span class="ct-col w200">{{item.months}}</span>
        <span class="ct-col w200 focus"  
        :class="{'activate':item.show}">
        <a href="javascript:" v-on:click="setshow(item)">{{item.pocount==''?0:item.pocount}}</a></span>
        <span class="ct-col w200">{{item.money / 10000 | numDigit 2}}</span>
        <span class="ct-col w200  focus"  :class="{'activate':item.showb}">
          <a href="javascript:" v-on:click="setshowb(item)">{{item.count==''?0:item.count}}</a></span>
        <span class="ct-col w120 activate">{{item.money / 10000 | numDigit 2}}</span>
      </div>
      <boxpagebpd :id="item.months" :show.sync="item.show"
       :count="'医疗机构订单列表'" :type="search.billType" :action="'1'"></boxpagebpd>

      <boxpagebpd :id="item.months" :show.sync="item.showb"
       :count="'供应商出订单列表'" :type="search.billType" :action="'2'"></boxpagebpd> 

    </div>

   
  </div>

  <!-- <div class="pagination page-line" style="margin-top:40px;">
      <ul>
        <li><span class="active">1</span></li>
        <li><a href="###">2</a></li>
        <li><a href="###">3</a></li>
        <li><a href="###">下一页</a></li>
      </ul>
  </div> -->

</div>
</template>
<script>
var echarts_api=require('../../options/echarts_api.js')
module.exports={
  data:function(){
    return {
      list:[
        
      ],search:{city:'',district:'',province:'',endDate:'',
      startDate:'',billType:''},list1:[],list2:[]
    }
  },methods:{
    setshow:function(item){
        if(item.show==undefined || item.show==false){
          item.show=true;
          item.showb=false;
        }else{
          item.show=false;
        }
    },setshowb:function(item){
        if(item.showb==undefined || item.showb==false){
          item.showb=true;
          item.show=false;
        }else{
          item.showb=false;
        }
    },getData:function(casetxt){//请求数据     
      Ajax.get('/api/goverment_report_findBillListByMonth',
        this.search).then(function(res){
          var result=res.data;

          if(result.data){
              var list=result.data;
              for(var i=0;i<list.length;i++){
                list[i].show=false;
                list[i].showb=false;
              }
              this.$set('list',list);
              //this.$set('list',result.data);
          }
      }.bind(this))

      Ajax.get('/api/goverment_report_findCountLineGraph',
        this.search).then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list1',result.data);
              this.echarts();
          }
      }.bind(this))
      Ajax.get('/api/goverment_report_findMoneyLineGraph',
        this.search).then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list2',result.data);
              this.echarts2();
          }
      }.bind(this))
    },echarts:function(){   
      var obj={
        title:{
          text:''
        },legend:{
          data:['订单','出库单']
        },xAxis:{
          data:['1月','2月','3月','4月','5月','6月','7月','8月','9月',
          '10月','11月','12月']
        },series:[
          {
            name:'订单',
            data:[
            120, 132, 101, 134, 90, 230, 210,323,322,324,111,232
            ]
          },{
            name:'出库单',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          }          
        ]
      }
      obj.legend=this.list1.legend;
      obj.xAxis=this.list1.xAxis;
      obj.series=this.list1.series;
      this.chart1=echarts_api.init('echart1',obj,'line')        
    },echarts2:function(){
       var obj2={
        title:{
          text:''
        },legend:{
          data:['订单','出库单']
        },xAxis:{
          data:['1月','2月','3月','4月','5月','6月','7月','8月','9月',
          '10月','11月','12月']
        },series:[
          {
            name:'订单',
            data:[
            120, 132, 101, 134, 90, 230, 210,323,322,324,111,232
            ]
          },{
            name:'出库单',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          }          
        ]
      }
      obj2.legend=this.list2.legend;
      obj2.xAxis=this.list2.xAxis;
      obj2.series=this.list2.series;
      this.chart2=echarts_api.init('echart2',obj2,'line')       
    }

  },route:{
    activate:function(){
      //this.getData();
      //$(function(){
          this.search.city=this.$route.query.city;
          this.search.district=this.$route.query.district;
          this.search.province=this.$route.query.province;
          this.search.startDate=this.$route.query.startDate;
          this.search.endDate=this.$route.query.endDate;
          this.search.billType=this.$route.params.id;
          
          setTimeout(function(){
            //this.echarts();
            this.getData();
          }.bind(this),1000)
          
      //}.bind(this))      
    }
  }
}
</script>