<template>
  <div class="frame">
    <div class="top">
      <img src="../../image/组6.png"/>
      <span>{{date}}</span>
    </div>
    <div class="main">
      <div class="row" style="height: auto;color: #9effff;">
        <div class="col-sm-3" style="width: 22%;padding: 0 0 0 20px;z-index: 99999999;">
          <label for="startDate">开始日期:</label>
          <datepicker id="startDate" placeholder="开始日期" class="childrendatestyle"
                      v-model="model.startDate"
                      :value.sync="model.startDate"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="col-sm-3" style="width: 22%">
          <label for="endDate">结束日期:</label>
          <datepicker id="endDate" placeholder="结束日期" class="childrendatestyle"
                      v-model="model.endDate"
                      :value.sync="model.endDate"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="col-sm-3" style="width: 22%">
          <label class="control-label">组织机构</label>
          <right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes"
                      class="childrenorgstyle"></right-tree>
        </div>
      </div>
      <div class="main-1">
        <div class="bar-1" id="hidden1"></div>
        <div class="bar-2" id="hidden2"></div>
        <div class="bar-3">
          <label style="text-align: center"><p style="color: #c3325f">{{hiddenclick}}</p>解决方案</label>
          <div style="height: 77%;overflow-y: auto;color: white;text-align: center">
            <p @click="amplification" style="text-align: center">
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
              1.****************************<br/>
            </p>
          </div>
        </div>
      </div>

      <div class="main-2">
        <div class="bar-4" id="hidden3"></div>
        <div class="bar-5">
          <criteria-paged :model="model1" v-ref:paged style="overflow-x: auto; overflow-y: auto;"
                          id="childrencriteriastyle">
            <data-grid :model="model" partial='list' v-ref:grid :classname="'table'" id="childrendatagridstyle"
                       :customize="false">
              <template partial='head'>
                <!--<th>-->

                <!--<h4 align="center">详情表</h4>-->
                <!--</th>-->
                <th class="thstyle" @click="$parent.$parent.$parent.exportss" style="color: #c3325f">用户编号</th>
                <th class="thstyle">用户名称</th>
                <th class="thstyle">小区</th>
                <th class="thstyle">用户地址</th>
                <th class="thstyle">隐患类型</th>
              </template>
              <template partial='body'>
                <tr class="tr-1">
                  <td class="td-1" style="text-align: center;">{{row.f_userinfo_code}}</td>
                  <td class="td-1" style="text-align: center;">{{row.f_user_name}}</td>
                  <td class="td-1" style="text-align: center;">{{row.f_residential_area}}</td>
                  <td class="td-1" style="text-align: center;">{{row.f_address}}</td>
                  <td class="td-1" style="text-align: center;">{{row.f_item_name}}</td>
                </tr>
              </template>
              <!--              <template partial='foot'></template>-->
            </data-grid>
          </criteria-paged>

        </div>
      </div>
    </div>
    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header text-center">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title"><p style="color: #c3325f">{{hiddenclick}}</p>{{opera}}</h4>

      </header>
      <article slot="modal-body">
        <div class="auto col-sm-11 col-md-offset-1" style="margin-top: 10px;text-align: center" v-if="!exportshow">
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
          1.****************************<br/>
        </div>
        <div style="margin-top: 10px;height: 400px;width: 400px" v-if="exportshow">
          <export-excel :data="condition"
                        :field="filename"
                        sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="getHidden3" :template-name='templatename'
                        :choose-col="true"></export-excel>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>

<script>
  import * as Util from '../../../stores/Util'
  import * as DataSql from '../../../stores/DataSql'
  import {PagedList} from "vue-client";

  export default {
    name: "TelephoneAnaly",
    title: "大屏分析",
    data() {
      return {
        date: '',
        timer: '',
        model: {         //时间参数
          startDate: Util.toStandardDateString().substring(0, 7),
          endDate: Util.toStandardDateString().substring(0, 7),
        },
        userid: this.$login.f.id,
        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
        selldata: [],
        xc: '',
        xc1: '',
        xc2: '',
        hiddenclick: '',
        areaclick: '',
        hiddendata: [],
        hiddendata2: [],
        model1: new PagedList(),
        filialeNameStr: '',
        filialeCodeStr: '',
        show: false,
        opera: '',
        condition: {},
        filename: {
          f_userinfo_code: '用户编号',
          f_user_name: '用户名称',
          f_residential_area: '小区',
          f_address: '用户地址',
          f_item_name: '隐患类型',
        },
        templatename: '',
        exportshow: false,
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('hidden1'))

        var scale = 1

        var lname = []
        var maxdata = 0
        var kdata = []
        this.selldata.forEach(function (s) {
          if (s.value > maxdata) {
            maxdata = s.value
          }
          lname.push(s.name)
        })
        this.selldata.forEach(function () {
          kdata.push(maxdata)
        })
        var maxindex = this.selldata.length - 1
        var option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params, ticket, callback) {
              return params[0].marker + '   <span style="font-weight: normal">' + params[0].name + '</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">' + params[0].value + '</span>';
            },
            textStyle: {
              fontSize: 16 * scale
            },
            show: true,
            alwaysShowContent: true,
            backgroundColor: '#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth: 0,
            hideDelay: 100,
            triggerOn: 'mousemove',
            padding: 10 * scale,
            enterable: true,
            position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置
              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }
              posX = posX - 20
              return [posX, posY];
            },
            extraCssText: 'width: auto;height:auto;',
          },
          grid: {
            left: '3%',
            top: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            scale: true,
            position: 'bottom',
            min: 0,
            nameGap: 30,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#08738e'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 8,
              textStyle: {
                color: '#95bad7'
              }
            },
          },
          yAxis: {
            type: 'category',
            //  name: 'TOP 20',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#08738e'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#15dce2'
              }
            },
            data: lname
          },
          dataZoom: [{
            type: "inside",
            startValue: maxindex - 5,
            endValue: maxindex,
            zoomLock: true,
            throttle: 10,
            orient: 'vertical',
          }],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                barBorderRadius: [0, 16, 16, 0],
                color: '#6fd9d0',
              },
              emphasis: {
                itemStyle: {
                  color: '#ffff2c'
                }
              },
              zlevel: 2,
              data: this.selldata
            },
            {
              type: 'bar',
              barGap: '-100%',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 16, 16, 0],
                  color: '#2a374e'
                },
              },
              labelLine: {
                show: true,
              },
              zlevel: 0,
              data: kdata
            }
          ]
        }

        this.xc.setOption(option1)
        var self = this
        this.xc.on('click', function (params) {
          console.log(params)
          self.hiddenclick = params.name

        })
      },
      setBar1() {
        this.xc1 = this.$echarts.init(document.getElementById('hidden2'))
        var scale = 1
        var xAxisData = [];
        var legendData = [this.hiddenclick];
        var serieData = [];
        var metaDate = []

        this.hiddendata.forEach(function (s) {

          xAxisData.push(s.name.substring(2, 7))
          metaDate.push(s.value)
        })

        var yname = '      月份'
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[v],
            type: 'line',
            symbol: "circle",
            symbolSize: 5 * scale,
            color: '#a39241',
            lineStyle: {
              width: 1,
              color: '#a39241'
            },
            label: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#fefefe',
                fontSize: 14 * scale
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1,
                  color: '#031a2b' // 0% 处的颜色
                },
                  {
                    offset: 0.5,
                    color: '#273531' // 50% 处的颜色
                  },
                  {
                    offset: 0,
                    color: '#444c3e' // 100% 处的颜色
                  }],
                globalCoord: false // 缺省为 false
              },
            },

            data: metaDate
          }
          serieData.push(serie)
        }
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]


        this.xc1.setOption({
          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},

          color: colors,
          grid: {left: '2%', top: "15%", bottom: "1%", right: "8%", containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params.data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.seriesName + " : " + item.value + "</br>";
              });
              return params[0].axisValue + '月<br/>' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [40 * scale, 0, 0, -40 * scale],
              },
              boundaryGap: true,
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '隐患数量',
              nameTextStyle: {
                fontSize: 12 * scale,
                padding: [-12 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {textStyle: {color: '#15dce2', fontSize: 12 * scale}},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 12 * scale}},
            },
          ],
          series: serieData
        })
      },
      setBar2() {
        this.xc2 = this.$echarts.init(document.getElementById('hidden3'))
        var scale = 0.8
        let echartData = this.hiddendata2

        let legendname = []
        echartData.forEach(function (s) {
          legendname.push(s.name)
        })
        var rich = {
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 14 * scale,

            padding: [8 * scale, 8 * scale]
          },
          blue: {
            color: '#e1e52a',
            fontSize: 16 * scale,
            align: 'center',
            padding: [8 * scale, 8 * scale]
          },
          hr: {
            borderColor: '#64d8d4',
            width: '100%',
            borderWidth: 0.5,
            height: 0,
          },
        }
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc2.setOption({
          title: [],
          legend: {
            show: false
          },
          grid: {
            left: '10%',
            right: '10%',
            top: '0',
            bottom: '0'
          },

          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['21%', '22%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }]
            },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['26%', '40%'],
              center: ['50%', '50%'],
              minAngle: 15,//最小角度
              startAngle: 300, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f', '#e5e280', '#6e93e0', '#c7e06e', '#e68d8d'],
              label: {
                normal: {
                  borderWidth: 1,
                  borderRadius: 4,
                  backgroundColor: '#004b5c',
                  borderColor: '#64d8d4',
                  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{blue|  ' + params.value + '}{blue|   ' + percent + '%}';
                  },
                  rich: rich,
                }
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 12,
                }
              },
              data: echartData
            },
            {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['44%', '45%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
              ]
            }
          ]
        }, true)

        var self = this
        this.xc2.on('click', function (params) {
          console.log(params)
          self.areaclick = params.name

        })
      },
      amplification() {
        this.show = true
        this.opera = '解决方案'
        this.exportshow = false
      },
      exportss() {
        this.show = true
        this.opera = '导出'
        this.exportshow = true
        this.templatename = this.hiddenclick + '隐患用户导出'
      },
      close() {
        this.show = false
      },
      // 获取组织结构
      getRes(obj) {
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
      refdate() {
        var self = this
        setInterval(function () {
          var ss = Util.toStandardTimeString()
          self.date = ss.toString().replace('-/g', '/')
        }, 1000)
      },
      init() {
        var condition = {
          startDate: this.model.startDate,
          endDate: this.model.endDate,
          f_filialeids: ''
        }
        DataSql.getData1(this, 'getHidden', condition, 'selldata')
      },
      getHidden() {
        var condition = {
          startDate: this.model.startDate,
          endDate: this.model.endDate,
          f_filialeids: '',
          itemname: this.hiddenclick
        }
        DataSql.getData1(this, 'getHidden1', condition, 'hiddendata')
        DataSql.getData1(this, 'getHidden2', condition, 'hiddendata2')
      }
    },
    watch: {
      'model': {
        deep: true,
        handler() {
          console.log('ces')
          this.init()
        }
      },
      'selldata'() {
        if (this.selldata.length == 0) {
          this.$showMessage('数据为空')
          return
        }
        console.log(this.selldata, '测试')
        this.setBar()
        this.hiddenclick = this.selldata[this.selldata.length - 1].name
      },
      'hiddenclick'() {
        this.getHidden()
      },
      'areaclick'() {
        var condition = {
          startDate: "\"" + this.model.startDate + "\"",
          endDate: "\"" + this.model.endDate + "\"",
          f_filialeids: "\"\"",
          itemname: "\"" + this.hiddenclick + "\""
        }

        condition.condition = "\" and  1=1 \""
        if (this.areaclick != '') {
          condition.condition = "\" and b.f_residential_area =\'" + this.areaclick + " \'\""
        }
        this.condition = condition
        this.model1 = new PagedList('/api/af-revenue/sql/getHidden3', 10, condition)
        this.model1.search()
      },
      'hiddendata'() {
        console.log(this.hiddendata, '测试')
        this.setBar1()
      },
      'hiddendata2'() {
        console.log(this.hiddendata2, '测试')
        this.setBar2()

        var condition = {
          startDate: "\"" + this.model.startDate + "\"",
          endDate: "\"" + this.model.endDate + "\"",
          f_filialeids: "\"\"",
          itemname: "\"" + this.hiddenclick + "\""
        }

        condition.condition = "\" and  1=1 \""

        this.condition = condition
        this.model1 = new PagedList('/api/af-revenue/sql/getHidden3', 10, condition)
        this.model1.search()
      }
    },
    ready() {
      this.refdate()
      this.model.startDate = '2001-01'
      this.init()
    }

  }
</script>

<style>
  #childrendatagridstyle table tr:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  #childrendatagridstyle table tr:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  #childrendatagridstyle table .customizestyle {
    background-color: #013e48 !important;
    color: #ffffff !important;
  }

  #childrencriteriastyle nav ul {
    background-color: #013e48 !important;
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul li {
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul input {
    margin: 0% 1%;
    background-color: #0fa397 !important;
    color: #ffffff !important;
  }

  #childrencriteriastyle nav ul a {
    border: #02fbe6 1px solid;
    border-radius: 4px;
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul a:visited {
    background-color: #0fa397 !important;
  }

  #childrencriteriastyle nav ul a:hover {
    border: 1px solid #65d2bc;
  }

  .childrendatestyle input {
    background-color: rgba(1, 207, 242, 0.01);
    border: solid 1px #6fd9d0;
    color: white;
  }

  .childrendatestyle .datepicker-popup {
    background-color: #023740 !important;
    border: solid 1px #6fd9d0;
    color: white !important;
  }

  .childrendatestyle .datepicker-monthRange span:hover,
  .datepicker-ctrl p:hover,
  .datepicker-ctrl i:hover,
  .datepicker-dateRange span:hover,
  .datepicker-dateRange-item-hover {
    background-color: #00f3ff !important;
    /*border: solid 1px #6fd9d0;*/
    color: white !important;
  }

  .childrenselectstyle button {
    background-color: #013e48 !important;
    border: solid 1px #6fd9d0 !important;
    color: white !important;
  }

  .childrenselectstyle ul {
    background-color: #013e48 !important;
    border: solid 1px #6fd9d0 !important;

  }

  .childrenselectstyle div {
    background-color: #013e48 !important;
    color: white !important;
  }

  .childrenselectstyle li a {
    color: white !important;
  }

  .childrenselectstyle li a:hover {
    background-color: #05525f;
  }

  .childrenorgstyle > button {
    background-color: #013e48 !important;
    color: #fff !important;
  }

  /*.childrenorgstyle #vc-chooser .list-group {*/
  /*  background-color: #6fd9d0 !important;*/
  /*  color: #fff !important;*/
  /*}*/

  /*.childrenorgstyle #vc-chooser button {*/
  /*  border: solid 1px #6fd9d0;*/
  /*  background-color: rgba(1, 207, 242, 0.01) !important;*/
  /*  color: #fff !important;*/
  /*}*/
</style>
<style scoped>
  .div-1 {
    height: 85%;
    width: 100%;
  }

  .title-2 {
    margin-top: 3%;
    padding: 0% 2%;
    font-size: 1.4em;
    color: #fff;
    height: 10%;
    width: 100%;
  }

  .title-21 {
    margin-top: -6%;
    height: 8%;
    width: auto;
    float: right;
    margin-right: 10%;
    font-size: 0.8em;
    color: #333333;
  }

  .title-22 {
    margin-top: -3%;
    padding: 0% 1%;
    height: 10%;
    float: right;
    font-size: 0.65em;
  }

  .title-23 {
    margin-top: -1.6%;
    padding: 0% 1%;
    height: 9%;
    float: right;
    font-size: 0.65em;
  }

  .thstyle {
    background-color: #05525f;

    color: #06ecd8;
  }

  .td-1 {
    border: solid 1px #6fd9d0;
    color: #ffffff;
  }

  .tr-1:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  .div-2 {
    margin-top: -3%;
    color: #40cfc3;
    font-size: 0.65em;
  }

  .div-3 {
    margin-top: -1.4%;
    color: #40cfc3;
    font-size: 0.65em;
  }

  img {
    width: 20px;
    margin-right: 3px;
  }

  .title-2 span {

  }

  .execlshow {
    margin-top: -1%;
  }

  /*.criteria-paged .pager */
</style>
