<template lang="html">
  <div class="div-4">
    <div :style="{height:headheight,background:'#eaeff4'}">
      <div class="div-2">
        <div class="form-group">
          <label v-show="full_screen" class="control-label">安检类型</label>
          <v-select v-show="full_screen" :value.sync="plan_type"
                    :value-single="true"
                    :options='plan_types' close-on-select clear-button> </v-select>
          <button class="but-1" @click="barrdios" v-show="full_screen"><img src='../../../assets/echarts6.png' class="img-1"/>&nbsp;全屏显示
          </button>
          <button @click="showall" v-show="show_all" class="but-2">返回</button>
        </div>
      </div>
    </div>
    <div v-bind:style="{height: barheight,width:'100%'}">
      <div class="flex-row" style="height: 90%;">
      <div class="span">
        <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
          <div class="form-group">
            <label class="control-label">开始时间</label>
            <datepicker
              :value.sync="f_start_time"
              placeholder='开始时间' style="margin-top: 8px"
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd'"
              :show-rest-button="reset"
              v-model = "f_start_time"
              condition="f_offsite_time > ='{} 00:00:00'">
            </datepicker>
          </div>
          <div class="form-group">
            <label class="control-label">结束时间</label>
            <datepicker
              :value.sync="f_end_time"
              placeholder='结束时间' style="margin-top: 8px"
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd'"
              :show-rest-button="reset"
              v-model = "f_end_time"
              condition="f_offsite_time <=  '{} 23:59:59'">
            </datepicker>
          </div>
          <!--<div class="form-group">-->
            <!--<label  class="control-label">安检员</label>-->
            <!--<chooser  :userid.sync='f.id' resource-type="user" :width='200' :select-data.sync='chosenOrg'></chooser>-->
          <!--</div>-->
          <div class="form-group">
            <label  class="control-label">安检类型</label>
            <v-select :value.sync="plan_type"
                      :value-single="true"
                      :options='plan_types' close-on-select clear-button> </v-select>
          </div>
        </div>

        <div id="chechersafedetail"></div>
      </div>



      <!--调用子组件绘图查表-->
      <div v-show="echartsshow">
        <h4  v-if="plan_type == ''" align="center">安检员居民用户安检工作量统计表</h4>
        <h4  v-if="plan_type == 'false'" align="center">安检员居民用户年度安检工作量统计表</h4>
        <h4  v-if="plan_type == 'true'" align="center">安检员居民用户首次同期安检工作量统计表</h4>
        <criteria-paged :model="model" v-ref:crip >
          <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1 classname="table table-bordered table table-hover">
            <template partial='head'>
              <tr>
                <th><nobr>安检员</nobr></th>
                <th><nobr>入户</nobr></th>
                <th><nobr>入户(在用)</nobr></th>
                <th><nobr>入户(未用)</nobr></th>
                <th><nobr>到访不遇</nobr></th>
                <th><nobr>拒检</nobr></th>
              </tr>
            </template>
            <template partial='body'  >
              <tr class="tr-1">
                <td class="td-1" style="text-align: center;">
                  {{row.f_checker_name}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.rh+row.wsy}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.rh}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.wsy}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.dfby}}
                </td>
                <td class="td-1" style="text-align: center;">
                  {{row.jj}}
                </td>
              </tr>
            </template>
            <!--<template partial='foot'>-->
              <!--<tr>-->
                <!--<td colspan="1" style="text-align: right">合计：</td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.zongliang}}</nobr></td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.rh}}</nobr></td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.dfby}}</nobr></td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.jj}}</nobr></td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.wsy}}</nobr></td>-->
                <!--<td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.checkrate}}</nobr></td>-->
              <!--</tr>-->
            <!--</template>-->
          </data-grid>
        </criteria-paged>
      </div>
  </div>
  </div>
  </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 getData = function * (self) {
    let load = new HttpResetClass()
    console.log('getData')
    console.log('self.plan_type',self.plan_type)
    console.log('self.orgid',self.orgid)
    self.set()
    load.load('POST','rs/sql/YearCheckerCountRate', {data: {orgid:self.orgid,plan_type:self.plan_type,f_start_time:self.f_start_time,f_end_time:self.f_end_time,f_safecheck_type:self.f_safecheck_type}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let checkerArrray = []
        let ruhuArray = []
        let dfbyArray = []
        let jjArray = []
        let wsytrqArray = []
        // self.count.zongliang = 0
        // self.count.rh = 0
        // self.count.dfby = 0
        // self.count.jj = 0
        // self.count.wsy = 0
        // self.count.checkrate = '0.00%'
        for (var i = 0; i < res.data.length; i++) {
          checkerArrray[i] = res.data[i].f_checker_name
          ruhuArray[i] = res.data[i].rh
          dfbyArray[i] = res.data[i].dfby
          jjArray[i] = res.data[i].jj
          wsytrqArray[i] = res.data[i].wsytrq
          // self.count.rh += res.data[i].rh
          // self.count.dfby += res.data[i].dfby
          // self.count.jj += res.data[i].jj
          // self.count.wsy += res.data[i].wsy
        }
        // self.count.checkrate =  (100*self.count.rh/ self.count.zongliang).toFixed(0)+'%'
      //掉绘图
        self.set(checkerArrray,ruhuArray,dfbyArray,jjArray,wsytrqArray)
        self.settable()
      })
  }
  export default {
    title: '安检员安检情况统计',
    data () {
    let options = []
    let ye = (new Date()).getFullYear()
    for(let i = ye - 5 ; i <= ye; i++ )
    {
      options.push({label: i + '', value: i + ''})
    }
      return {
        full_screen: true,//控制全屏按键显示状态
        show_all: false,//控制返回按键显示状态
        //控制图表的显示状态
        echartsshow: false,
        detailshows: true,

        //控制图表的style
        barheight: '88.37%',
        headheight: '11.61%',
        styledate: {
          echartsheight: '95%',
          echartsfloat: 'none',
        },
        c_year_list: options,
        f:this.$login.f,
        chosenOrg: {
          id: 0
        },
        count:{
          zongliang:0,
          rh:0,
          dfby:0,
          jj:0,
          wsy:0,
          checkrate:'0.00%',
        },
        model:new PagedList('rs/sql/YearCheckerCountRate',20, {year:'this.year',orgid:'this.orgid',plan_type:'this.plan_type',f_start_time:'this.f_start_time',f_end_time:'this.f_end_time',f_safecheck_type: 'this.f_safecheck_type'}),
        orgid:`('${this.$login.f.orgid}')`,
        //测试
        // orgid:'2586252.6314787',
        year:(new Date()).getFullYear(),
        plan_type:'',
        f_safecheck_type:'',
        f_start_time:'',
        f_end_time:'',
        xc: '',
        plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}]
      }
    },
    props:{
      f_filialeids:{
        type:String
      }
    },
    methods: {
      barrdios() {//全屏按键事件
        console.log("checker`全屏显示事件")
        this.barshow = true
        this.detailshows = false
        this.echartsshow = true
        this.show_all = true
        this.full_screen = false
        this.buttonshow = true
        this.showdetail = false
        this.styledate.echartsfloat = 'left'
        this.styledate.echartsheight = '65%'
        this.echartswidth = '50%'
        this.headheight = '8%'
        this.$parent.echarts = '5'
        this.$emit('echarts-changed')
        this.newecharts = true

        console.log(this.$parent.echarts, '主图状态')
      },
      showall() {//返回按键事件
        //修改显示状态
        this.barshow = false
        this.detailshows = true
        this.echartsshow = false
        this.buttonshow = false
        this.newecharts = false
        this.show_all = false
        this.full_screen = true
        this.showdetail = false
        this.styledate.echartsheight = '95%'
        this.echartswidth = '95%'
        this.$parent.echarts = -1
        this.headheight = '11.61%'
        this.$emit('echarts-changed', this.echarts)
      },
      settable() {
        this.model= new PagedList('rs/sql/YearCheckerCountRate',20, {year:'this.year',orgid:'this.orgid',plan_type:'this.plan_type',f_start_time:'this.f_start_time',f_end_time:'this.f_end_time',f_safecheck_type: 'this.f_safecheck_type'})
        this.model.year = this.year
        this.model.orgid = this.orgid
        this.model.f_start_time = this.f_start_time
        this.model.f_end_time = this.f_end_time
        this.model.plan_type = this.plan_type
        this.model.f_safecheck_type = this.f_safecheck_type
        this.model.search('1=1')
      },
      set(checkerArrray,ruhuArray,dfbyArray,jjArray,wsytrqArray) {
        let serieData = [{     //绘图数据
          name: '入户',
          type: "bar",
          barWidth: '15%',
          barGap: "30",
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              borderColor: '#acf3ed',
              color: '#fff',
              label: {
                show: true,
                textStyle: {
                  color: "#4a7cae"
                },
                position: "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }

              }
            }
          },
          data: ruhuArray,
        },
          {     //绘图数据
            name: '到访不遇',
            type: "bar",
            barWidth: '15%',
            barGap: "-30%",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: '',
                label: {
                  show: true,
                  textStyle: {
                    color: "#fccb05"
                  },
                  position: "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: dfbyArray,
          },
          {     //绘图数据
            name: '拒检',
            type: "bar",
            barWidth: '15%',
            barGap: "-30%",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: '',
                label: {
                  show: true,
                  textStyle: {
                    color: "#fccb05"
                  },
                  position: "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: jjArray,
          },
          {     //绘图数据
            name: '未使用天然气',
            type: "bar",
            barWidth: '15%',
            barGap: "-30%",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: '',
                label: {
                  show: true,
                  textStyle: {
                    color: "#fccb05"
                  },
                  position: "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: wsytrqArray
          }]

        this.xc = echarts.init(document.getElementById('chechersafedetail'))
        let text = ''
        if(this.plan_type == ''){
          text = '安检员居民用户安检工作量'
        }
        if(this.plan_type == 'false'){
          text = '安检员居民用户年度安检工作量'
        }
        if(this.plan_type == 'true'){
          text = '安检员居民用户首次通气安检工作量'
        }
        this.xc.setOption({
            title : {
              text: text,
              x: 'left'
            },
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },

              extraCssText: 'width: auto;height: auto;'
            },
            dataZoom: [{
              type: 'inside',
              show: true,
              startValue: '0',
              xAxisIndex: [0],
              left: '9%',
              bottom: -5,
              start: 2,
              end: 90 //初始化滚动条
            }],
            grid: {
              left: '10',
              right: '10',
              bottom: '8',
              containLabel: true
            },
            legend: {
              data: ['入户', '到访不遇','拒检','未使用天然气'],
              right: 10,
              top: 12,
              textStyle: {
                color: "black"
              },
              itemWidth: 12,
              itemHeight: 10,
              // itemGap: 20
            },
            xAxis: [
              {
                type: 'category',
                name: "安检员",
                nameTextStyle: {color: "#6f8ba8"},
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {show: true,lineStyle :{color:'#999999'}},
                axisLabel: {show: true,interval:0,showMinLabel: true,
                  showMaxLabel: true, textStyle: {color: "#6f8ba8"}},
                data: checkerArrray
              }
            ],
            yAxis: [{
              type: "value",
              name: "数量",
              nameTextStyle: {color: "#6f8ba8"},
              splitLine: {show: true,lineStyle:{type:'dashed',color:'#e1e1e1'}},
              axisTick: {show: true},
              axisLine: {show: true,lineStyle :{color:'#999999'}},
              axisLabel: {show: true, textStyle: {color: "#6f8ba8"}}
            }],
            series: serieData
          }, true)
      },
      searchdata () {
        console.log('searchdata')
        console.log('this.orgid',this.orgid)
        console.log('this.plan_type',this.plan_type)
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      // this.orgid = `('${this.$login.f.orgid}')`
      // this.orgid = this.f_filialeids
      //测试
      // this.orgid = '2586252.6314787'
      // this.plan_type = ''
      console.log('checker-safe-detail-ready')
      // this.year =(new Date()).getFullYear()

      this.searchdata()
    },
    watch: {
      'year' (val) {
        console.log("我是watch")
        this.searchdata()
      },
      'plan_type' (val) {
        console.log("我是plan_type")
        this.f_safecheck_type = ''
        if (this.plan_type == 'false') {
          this.f_safecheck_type = '年度普检'
        }
        if (this.plan_type == 'true') {
          this.f_safecheck_type = '首次通气'
        }
        this.searchdata()
      },
      'f_filialeids'(){
        console.log('safeer改变了')
        this.orgid = this.f_filialeids
        this.searchdata()
      }
    }

  }
</script>
<style scoped>
  .div-1 {
    height: 85%;
    width: 10%;
    margin-left: 5%;
    float: left;
    margin-top: 1%;
  }

  .div-2 {
    float: right;
    width: 80%;
    height: 55.56%;
    margin-right: 1%;
    margin-top: 0.5%;
  }

  .div-3 {
    float: left;
    margin-left: 2%;
    padding-top: 2%;
    width: 96%;
    height: 99%;
  }

  .div-4 {
    background-color: #fafafa;
  }

  table {
    height: 100%;
    width: 100%;
    font-size: 12px
  }

  tr {
    height: 25%;
    width: 100%
  }

  td {
    width: 11%;
    font-size: 12px;
    color: #666666;
  }

  .td-1 {
    width: 16%;
    color: #90addf;
    font-size: 12px
  }

  .td-2 {
    width: 15%;
    color: #90addf;
    font-size: 12px
  }

  span {
    color: #90addf;
    font-size: 12px
  }

  .span-1 {
    color: #999999;
    font-size: 12px
  }

  .p-1 {
    font-size: 15px;
    height: 99%;
    width: 99%;
    font-weight: bold;
    color: #333333;
  }

  button {
    width: 10%;
    margin-top: 0%;
    margin-left: 2%;
    float: right;
    background-color: #73ca73;
    border-radius: 4px;
    border: 1px solid #73ca73;
    color: #ffffff;
    font-size: 15px;
    height: 120%;
  }

  .but-1 {
    width: 17%;
    float: right;
    border-radius: 4px;
    font-size: 12px;
    height: 130%;
  }

  .but-2 {
    background-color: #88b5e2;
    border: #88b5e2;
    width: 6%;
  }

  img {
    width: 5px;
    height: 18px;
  }

  .img-1 {
    height: 12px;
    width: auto;
  }

</style>

