<template lang="html">
  <div id="charts">
    <input type="date" v-model="startdate"/>至
    <input type="date" v-model="enddate"/>
    查询条件:<select v-model="query" id="selectid" >
              <option value="rs/sql/checkHiddenDanger"  selected="selected" >安检隐患分布</option>
              <option value="rs/sql/checkUserhide" >安检状态统计</option>
              <option value="rs/sql/checkUsertype" >安检用户类型</option>
              <!--<option value="rs/sql/businessType" >任务量</option>//柱状图-->
            </select>
    钻取方向：<select v-model="drill" >
              <option selected="selected" value="F_AROUNDMETER" >左右表</option>
            </select>
    <button class="btn btn-success" id="drillbtn" @click="Ddrill()">钻取</button>
      <div id="chd" :style="{width:'100%',height:'50%'}">
      </div>
    <!--<div partial='list' id='gongye':style="{width:'100%',height:'50%'}">-->
      <!--<data-grid :model="pagelist" classname="reporttable" partial='list'>-->
        <!--<template partial='head'>-->
          <!--<tr>-->
            <!--<th colspan='9' style="border: 1px solid white; border-bottom: 1px solid black; text-align: center;">-->
              <!--<h3 align="center">{{texttile}}明细表</h3>-->
            <!--</th>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<th>序号</th>-->
            <!--<th>用户编号</th>-->
            <!--<th>用户名称</th>-->
          <!--</tr>-->
        <!--</template>-->
        <!--<template partial='body'>-->
          <!--<tr>-->
            <!--<td style="text-align: center;">{{$index+1}}</td>-->
            <!--<td style="text-align: center;">{{row.F_USERID}}</td>-->
            <!--<td style="text-align: center;">{{row.F_USERNAME}}</td>-->
          <!--</tr>-->
        <!--</template>-->
      <!--</data-grid>-->
    <!--</div>-->
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'
  import { PagedList } from 'vue-client'


  let load = new HttpResetClass()
  let getData = function * (self) {
      load.load('POST', self.query,
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        //首先获得下拉框的节点对象；
        let select = document.getElementById('selectid')
        //2.获得该下拉框所有的option的节点对象
        let options = select.options
        //3.获得当前选中的option的索引
        let index = select.selectedIndex
        //获得当前选中的option的文本内容
        self.texttile = options[index].text
        let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res)
        self.set(arrparams,res.data)
      })
  }
  export default {
    title: "安检",
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()

      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      return {
        texttile: '',
        xc: '',
        query: '',
        drill: '',
        total: '',
        param: '',
        condition: '',
        pagelist: ''
      }
    },
    methods: {
      Ddrill() {
        this.$goto('hidden', {param: this.param, drill: this.drill}, 'tab')
      },
      set (arrparams,pricedata) {
        this.xc = echarts.init(document.getElementById('chd'))
        this.xc.setOption({
          title: {
            text: this.texttile + '饼状图',
            subtext: '数据汇总',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: arrparams
          },
          series: [
            {
              name: '数据来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:pricedata
            }
          ]
        })
        this.xc.on("click", this.eConsole)
      },
      //点击饼图有点击的效果
      eConsole (param) {
        this.prama = param//因为js将其转换为8进制，在vuejs严格模式下不允许对8进制数据进行操作,会报错
        this.condition = param.name
        console.log(param.name, this.texttile, this.condition, this.startdate)
        var obj =  {startDate: this.startdate, endDate: this.enddate}
        console.log(obj)
        this.pagelist = new PagedList('rs/sql/detail', 20, obj)
        this.pagelist.search(this.condition)
      },
      searchdata () {
        let getGen = getData(this)
        co(getGen)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      },
      'query' (val) {
        this.searchdata()
      }
    }

  }
</script>
