<template>
 
  <div>

    <el-card class="box-card">

       <!-- 搜索区域 -->
       <div class="search-bx1">


        <el-date-picker v-model="searchData.date_for_year" class="g-mr20" type="year" value-format="yyyy"  style="width: 250px;" />


        <!-- <el-date-picker v-model="table.get_table_dataParm.parammaps.year" style="width:100px;" :clearable="false"  type="year" placeholder="选择年" format="yyyy" value-format="yyyy" @change="changeYear" />
      <el-date-picker v-model="month"  type="month" style="width:90px;" placeholder="选择月" format="MM" value-format="MM" /> -->

        <el-select v-model="searchData.calf_category_id" filterable placeholder="犊牛类型" style="width: 180px;" class="g-mr20">
          <el-option v-for="item in calfTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <el-select   v-model="searchData.diseased_id"   placeholder="疾病类型" style="width: 180px;" class="g-mr20" clearable>
          <el-option v-for="item in diseaseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

       


         
          <el-button type="primary"   @click="form_search">搜索</el-button>
          <!-- <el-button type="primary"   @click="form_clear">重置</el-button> -->
     
            <el-button type="primary"   @click="form_export">导出</el-button>  
      </div>


      <div id="chartBar1"  style="width: 100%;height:280px;"></div>


      <!-- 表格 -->
      <el-table   key="0"  :data="tableList"  v-loading="tableLoading" element-loading-text="给我一点时间"    border fit>
        <el-table-column label="日期"  width="250px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.date_month }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发病次数" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.disease_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="治愈次数" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.recover_count }}</span>
          </template>
        </el-table-column>  
        <el-table-column label="治愈率" min-width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.recover_ratio }}</span>
          </template>
        </el-table-column>  
        
      </el-table>

      


    </el-card >
  </div>


</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'

import * as echarts from 'echarts';

export default {
  data() {

 
 
  
    return {


      //接口 - 获取 - 表格
      url_get_table:'/api/v1/ops/statistics/disease',
 
 
      //获取 - 表格数据 - 参数
      searchData:{
        date_for_year: parseTime(new Date(), '{y}'),
        month: parseTime(new Date(), '{m}'),
        calf_category_id: undefined,
        diseased_id: undefined,
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
      tableLoading: false,
      //表格内容
      tableList:[
        //  { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
        // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
        // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
        // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
      ],


      diseaseList: [
        //  {id: "疾病1", name: "疾病1"}, 
        //  {id: "疾病1", name: "疾病1"}, 
        //  {id: "疾病1", name: "疾病1"}, 
 
      ], 

      //  下拉框 - 栏舍组 
      calfTypeList: [
        // {id: "栏舍组1", name: "栏舍组1"}, 
        // {id: "栏舍组2", name: "栏舍组2"}, 
        // {id: "栏舍组3", name: "栏舍组3"}
      ], 



      chart1: {
        getdataListParm: {
          name: 'getChart1ByHomepage',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            inputDatetime: '',
            beginDate: '',
            endDate: '',
        
          }
        }
      },
      //图表实例
      chartBar1: null,
      //图表数据
      chartBar1_data: {
        // date_month:['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07'],
        // disease_count:[49, 71, 98, 92, 104, 76, 113],
        // recover_count:[83, 78, 98, 93, 106, 85, 115],
       
      },
  
       
    }
  },
  mounted() {
    //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
     //this.roadchartBar1(this.chartBar1_data)

 
  },
  created(){
    
    //获取下拉框
    this.get_select_list1()
    //表格 - 初始化 
    this.get_table_data()


     //this.getChart1

  },
  methods:{

    //获取 下拉框
    get_select_list1(){
        var me = this


        
 

        ajaxDataPost('/api/v1/ops/base_setting/calf_type/list?page=1&page_size=1000', {name:"" }).then(e => {
            console.log("犊牛类型1：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.calfTypeList = []
            } else {
              me.calfTypeList = e.data.list
            }

        })
 
        ajaxDataPost('/api/v1/ops/base_setting/category_table/list?page=1&page_size=1000', {category_type: 3 }).then(e => {
            console.log("疾病：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.diseaseList = []
            } else {
              me.diseaseList = e.data.list
            }

        })

 
    
    },


    //搜索 查询表格
    form_search(){
      var me = this
      console.log('请求表格列表searchData',me.searchData)

              
      me.get_table_data()
      //me.getChart1()

    },
    

    //获取 表格
    get_table_data() {
 
      var me = this

      me.tableLoading = true
      console.log("searchData======>", me.searchData)


      
      if( me.searchData.calf_category_id == ""){
        me.searchData.calf_category_id = undefined
      }
      if( me.searchData.diseased_id == ""){
        me.searchData.diseased_id = undefined
      }

       var send_url = me.url_get_table + '?page=' + me.searchData.page +  '&page_size=' + me.searchData.page_size

       ajaxDataPost(send_url,  me.searchData).then(e => {
          console.log("表格+图表请求结果：",e)
          //打印请求成功结果
            if(e.code == 200 ){
              me.tableList = e.data.table
              me.chartBar1_data = e.data.chart
            } else {

    
              me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
            }

            setTimeout(() => {
              me.tableLoading = false

              me.roadchartBar1(me.chartBar1_data)
            }, 100)

        })

      
    },

    getChart1() {


      var send_url = me.url_get_chart + '?page=' + me.searchData.page +  '&page_size=' + me.searchData.page_size

      ajaxDataPost(send_url,  me.searchData).then(e => {
        console.log("图表请求结果：",e)
        //打印请求成功结果
          // if(e.code == 200 ){
          //   me.tableList = e.data.list
          //   me.searchData.total = e.data.total;	// 总数
          //   me.searchData.page = e.data.page;	//页码
          //   me.searchData.page_size = e.data.page_size;	//每页数量
          
          // } else {
          //   me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
          // }

          // if (response.data.list !== null) {
          //   var chartBar1_data = response.data.list[0]
          //   this.chartBar1_data =  chartBar1_data
          //   this.roadchartBar1(chartBar1_data)
          // } else {
          //   this.chart1.list = []
          // }
 

      })

 
     
    },

    roadchartBar1(chartBar1_data) {

            
      if (this.chartBar1 != null) {
        this.chartBar1.dispose()
      }

      console.log(echarts)
      this.chartBar1 = echarts.init(document.getElementById('chartBar1'))
      var option = {
        title: { text: '疾病情况'},
        tooltip: { trigger: 'axis' },
        legend: { data: ['治愈','疾病' ] },
        grid: { left: '3%',right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          axisPointer: { type: 'shadow'},
          data: chartBar1_data.date_month 
        },
        yAxis: [
          { type: 'value',axisLabel: {formatter: '{value} 次' }},
        ],
        series: [
          { name: '治愈',  type: 'bar', data: chartBar1_data.recover_count   },
          { name: '疾病',  type: 'bar', data: chartBar1_data.disease_count   },
        ]
      }


      this.chartBar1.setOption(option)
      window.onresize = function () {
        this.chartBar1.resize()
      }
    },


    form_export() {
        //获取请求表格数据的参数
        //this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps
        //请求表格
        // GetDataByName(this.download.getdataListParm).then(response => {
        //     if (response.data.list !== null) {
        //       this.download.list = response.data.list
        //     } else {
        //       this.download.list = []
        //     }
        //     var excelDatas = [
        //       {
        //         tHeader: ['表头1', '表头2', '表头3', '表头4',],
        //         filterVal: ['title1', 'title2', 'title3', 'title4'],
        //         tableDatas: this.download.list,
        //         sheetName: 'Sheet1'
        //       }
        //     ]
        //     json2excel(excelDatas, '表格大标题', true, 'xlsx')
        // })

        var excelDatas = [
            {
                tHeader: ['表头1', '表头2', '表头3', '表头4',],
                filterVal: ['title1', 'title2', 'title3', 'title4'],
                tableDatas: [ 
                    {title1: "内容1",title2: "内容2",title3: "内容3",title4: "内容4"},
                    {title1: "内容11",title2: "内容22",title3: "内容32",title4: "内容44"},
                    {title1: "内容111",title2: "内容222",title3: "内容333",title4: "内容444"},
                ],
                sheetName: 'Sheet1'
            }
        ]
        json2excel(excelDatas, '表格大标题', true, 'xlsx')
    }


    

   
     

  }
}
</script>
 
<style scoped>

</style>
