<template lang="html">
  <div class="div-4">
    <div :style="{height:headheight,background:'#eaeff4'}" style="width:100%">
      <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 for="startDate">开始日期:</label>
              <datepicker id="startDate" placeholder="开始日期"
                          v-model="startDate"
                          :value.sync="startDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="form-group">
              <label for="endDate">截至日期:</label>
              <datepicker id="endDate" placeholder="结束日期"
                          v-model="endDate"
                          v-show="show_all"
                          :value.sync="endDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
            </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="hidden" style="width:45%;float:left;"></div>
      <div id="hiddenlevel" style="width: 45%;float:right;margin-left:-5px;"></div>
    </div>

        <!--调用子组件绘图查表-->
        <div v-show="echartsshow" style="overflow:scroll">
          <div class="div-3">
          <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="model1" v-ref:crip2 >
            <data-grid :model="model" partial='list' v-ref:grid2 classname="table table-bordered table table-hover">
              <template partial='head'>
                <tr>
                  <th><nobr>分公司</nobr></th>
                  <th><nobr>A</nobr></th>
                  <th><nobr>B</nobr></th>
                  <th><nobr>C</nobr></th>
                  <th><nobr>A整改</nobr></th>
                  <th><nobr>B整改</nobr></th>
                  <th><nobr>C整改</nobr></th>
                </tr>
              </template>
              <template partial='body'  >
                <tr class="tr-1">
                  <td class="td-1" style="text-align: center;">
                    {{row.f_subcompany}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.a}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.b}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.c}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.ac}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.bc}}
                  </td>
                  <td class="td-1" style="text-align: center;">
                    {{row.cc}}
                  </td>
                </tr>
              </template>
              <template partial='foot'>
                <tr>
                  <td colspan="1" style="text-align: right">合计：</td>
                  <td style="text-align: center"><nobr>{{model.sums.a}}</nobr></td>
                  <td style="text-align: center"><nobr>{{model.sums.b}}</nobr></td>
                  <td style="text-align: center"><nobr>{{model.sums.c}}</nobr></td>
                  <td style="text-align: center"><nobr>{{model.sums.ac}}</nobr></td>
                  <td style="text-align: center"><nobr>{{model.sums.bc}}</nobr></td>
                  <td style="text-align: center"><nobr>{{model.sums.cc}}</nobr></td>
                </tr>
              </template>
            </data-grid>
          </criteria-paged>
            </div>

          <div class="div-3" style="margin-top: 10%">
            <h4  align="center" v-if="plan_type == ''">安检状态一览表</h4>
            <h4  align="center" v-if="plan_type == 'false'">年度安检状态一览表</h4>
            <h4  align="center" v-if="plan_type == 'true'">首次通气安检状态一览表</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>
                    <th><nobr>小计</nobr></th>
                  </tr>
                </template>
                <template partial='body'  >
                  <tr class="tr-1">
                    <td class="td-1" style="text-align: center;">
                      {{row.f_subcompany}}
                    </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>
                    <td class="td-1" style="text-align: center;">
                      {{row.rh+row.dfby+row.jj+row.wsy}}
                    </td>
                  </tr>
                </template>
                <template partial='foot'>
                  <tr>
                    <td colspan="1" style="text-align: right">合计：</td>
                    <td style="text-align: center"><nobr>{{model.sums.rh + model.sums.wsy}}</nobr></td>
                    <td style="text-align: center"><nobr>{{model.sums.rh}}</nobr></td>
                    <td style="text-align: center"><nobr>{{model.sums.wsy}}</nobr></td>
                    <td style="text-align: center"><nobr>{{model.sums.dfby}}</nobr></td>
                    <td style="text-align: center"><nobr>{{model.sums.jj}}</nobr></td>
                    <td style="text-align: center"><nobr>{{model.sums.rh+model.sums.dfby+model.sums.jj+model.sums.wsy}}</nobr></td>
                  </tr>
                </template>
              </data-grid>
            </criteria-paged>
          </div>

        </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()
    load.load('POST', 'rs/sql/CheckStatusQuery', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type,f_safecheck_type:self.f_safecheck_type}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
      let echartData = res.data

      var legendname = []
      echartData.forEach(function (items) {
      legendname.push(items.name)
    })

    self.setSafe(echartData, legendname)
    self.setstatustable()
  })

  }


    let getData1 = function* (self) {
      let Http = new HttpResetClass()
      Http.load('POST','rs/sql/HiddenLevel', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type,f_safecheck_type:self.f_safecheck_type}},
        {resolveMsg: null, rejectMsg: null})
        .then((res) => {
        let legendname = []    //分类名,横坐标分类,隐患级别
        let metaDate = []         //二维数组 2*n  第一行为当前级别隐患总数,第二行为当前级别整改数
        let scaledata = []       //整改率

        let d1=[]   // 隐患数
        let d2=[]   //整改数
        //数据处理
        res.data.forEach(function (s) {
        legendname.push(s.name)
        d1.push(s.value)
        d2.push(s.change)
        var h=(s.change/s.value).toFixed(3)
        scaledata.push(h)
      })
      metaDate.push(d1)
      metaDate.push(d2)
      //掉绘图
      self.setBar(legendname,metaDate,scaledata)
      self.setleveltable()
     })
    }

  export default {
    name: "hidden-danger",

    data() {
      return {
        full_screen: true,//控制全屏按键显示状态
        show_all: false,//控制返回按键显示状态
        //控制图表的显示状态
        echartsshow: false,
        barshow: true,
        detailshows: true,

        //控制图表的style
        barheight: '88.37%',
        headheight: '11.61%',
        styledate: {
          echartsheight: '95%',
          echartsfloat: 'none',
        },
        echartswidth: '95%',
        barshowid: '1',
        model:new PagedList('rs/sql/QueryCheckStatus', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{rh:'',dfby:'',wsy:'',jj:''}),
        model1:new PagedList('rs/sql/QueryHiddenLevel', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{a:'',b:'',c:'',ac:'',bc:'',cc:''}),
        orgid: `('${this.$login.f.orgid}')`,
        f: this.$login.f,
        chosenOrg: {
          id: 0
        },
        startDate:(new Date()).getFullYear()+'-01-01',
        endDate: Util.toStandardDateString(),
        xc: '',
        plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}],
        plan_type:'',
        f_safecheck_type:''
      }
    },
    props:{
      f_filialeids:{
        type:String
      }
    },
    methods: {
      barrdios() {//全屏按键事件
        console.log("全屏显示事件")
        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 = '4'
        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)
      },
      setstatustable() {
        this.model = new PagedList('rs/sql/QueryCheckStatus', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{rh:'',dfby:'',wsy:'',jj:''})
        this.model.startDate = this.startDate
        this.model.endDate = this.endDate
        this.model.orgid = this.orgid
        this.model.plan_type = this.plan_type
        this.model.f_safecheck_type = this.f_safecheck_type
        this.model.search('1=1')
      },
      setleveltable() {
        this.model1 = new PagedList('rs/sql/QueryHiddenLevel', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{a:'',b:'',c:'',ac:'',bc:'',cc:''})
        this.model1.startDate = this.startDate
        this.model1.endDate = this.endDate
        this.model1.orgid = this.orgid
        this.model1.plan_type = this.plan_type
        this.model1.f_safecheck_type = this.f_safecheck_type
        this.model1.search('1=1')
      },
      //隐患饼状图
      setSafe(echartData,legendname) {
        this.xc = echarts.init(document.getElementById('hidden'))
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 12 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#8ee6de",
            fontSize: 12 * scale,
            align: 'center',
            confine:true
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 12 * scale,
            padding: [11, 0, 11, 0]
          },
          blue: {
            color: '#6f8ba8',
            fontSize: 8 * scale,
            align: 'center',
            padding: [10, 0]
          },
          hr: {
            borderColor: '#ffffff',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
          },
        }
        var scale = 0.8
        var total = 0; //安检总量
        echartData.forEach(function (value) {
          total = eval(total + '+' + value.value)
        });
        this.xc.setOption({
          title: [
            {
              text: '安检总量',
              x: '40%',
              y: '40%',
              textStyle: {
                color: '#6f8ba8',
                fontSize: 12 * scale,
              }
            },
            {
              text: total,
              x: '38%',
              y: '45%',
              padding: [15, 20],
              textStyle: {
                color: '#8ee6de',
                fontSize: 12 * scale,
              }
            }],
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            x: 'right',
            right: 5,
            top: 20,
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              padding: [0, 0, 0, 4],
              color: '#6f8ba8'
            },
            data: legendname
          },
          series: [{
            name: '安检总量',
            type: 'pie',
            radius: '40%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            color: ['#8ee6de', '#fbd85f', '#9bb5eb','#38dcad'],
            label: {
              normal: {
                borderWidth: 20 * scale,
                borderRadius: 4,
                lineHeight:6,
                formatter: function (params, ticket, callback) {
                  var total = 0; //隐患总数
                  var percent = 0;
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return '{blue|' + params.name + '}\n{hr|}\n{total|' + params.value + '}{blue|\n\n}{yellow|' + percent + '%' + '}';
                },
                rich: rich,
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  formatter: function (params, ticket, callback) {
                    var total = 0; //隐患总数
                    var percent = 0; //用户占比
                    echartData.forEach(function (value, index, array) {
                      total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                  },
                }
              }
            },
            data: echartData
          }]
        }, true)
      },

      setBar(legendname,metaDate,scaledata) {
        this.xc1 = echarts.init(document.getElementById('hiddenlevel'))

        let serieData = [{     //绘图数据
          name: '隐患总数',
          type: "bar",
          barWidth: '20%',
          barGap: "0",
          itemStyle: {
            normal: {
              barBorderRadius: 15,
              borderColor: '#00c0e9',
              color: '#fff',
              label: {
                show: true,
                textStyle: {
                  color: "#4a7cae"
                },
                position: "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          data: metaDate[0],
        },
          {     //绘图数据
            name: '整改数',
            type: "bar",
            barWidth: '20%',
            barGap: "-100%",
            itemStyle: {
              normal: {
                barBorderRadius: 15,
                color: '#00c0e9',
                label: {
                  show: true,
                  textStyle: {
                    color: "#4a7cae"
                  },
                  position: "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: metaDate[1],
          }]


        this.xc1.setOption({
          title: {
            text: '',
            x: '30%',
            textStyle: {color: "#333333", fontSize: "16", fontWeight: "normal"}
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result +=  item.seriesName + " : " + item.value + "</br>";
              });
              var h=eval(scaledata[params[0].dataIndex]*100).toString()

              return result+"整改率:"+h+'%'
            },
            extraCssText: 'width: 60%;height: 30%;'
          },
          grid: {
            left: '2%',
            right: '20%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              name: "隐患等级",
              nameTextStyle: {color: "#6f8ba8"},
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {show: true,lineStyle :{color:'#999999'}},
              axisLabel: {show: true, textStyle: {color: "#6f8ba8"}},
              data: legendname
            }
          ],
          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 () {
        let getGen =getData(this)
        co(getGen)
      },
      searchdata1 () {
        let getGen =getData1(this)
        co(getGen)
      }
    },
    ready () {
      // this.orgid = `('${this.$login.f.orgid}')`
      // this.searchdata()
      // this.searchdata1()
    },
    watch: {
      'startDate' (val) {
        console.log("我是watch")
        this.searchdata()
        this.searchdata1()
      },
      'endDate' (val) {
        console.log("我是watch")
        this.searchdata()
        this.searchdata1()
      },
      'plan_type' (val) {
        console.log("我是watch")
        this.f_safecheck_type = ''
        if (this.plan_type == 'false') {
          this.f_safecheck_type = '年度普检'
        }
        if (this.plan_type == 'true') {
          this.f_safecheck_type = '首次通气'
        }
        this.searchdata()
        this.searchdata1()
      },
      'f_filialeids'(){
         console.log('hidden改变了')
        this.orgid = this.f_filialeids
        this.searchdata()
        this.searchdata1()
      }
    }
  }
</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>
