<template>
  <div>
    <div class="datestyle">
      <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-dd'"
                  :show-reset-button="reset">
      </datepicker>
      <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-dd'"
                  :show-reset-button="reset">
      </datepicker>
      <!--<label class="control-label">组织机构</label>-->
      <!--<right-tree :userid.sync='userid' :source.sync='source' @re-res="getRes" id="childrenorgstyle"></right-tree>-->
    </div>
    <div class="title-1">
      <span>{{parenttitle.pagename}} — <span
        style="font-size: 0.80em">{{parenttitle.pagechildrenname}}</span></span>
      <button class="button-1" @click="backclick">返回</button>
    </div>
    <div class="div-1">
      <div class="drillcontent" v-show="!listenlistshow">
        <div class="menuselect">
          <div class="selectstyle">
            <!--钻取下拉列表1-->
            <v-select id="selectid" v-ref:selected class="childrenselectstyle" :value.sync="select0"
                      :options='drillparam' placeholder='请选择' close-on-select clear-button
                      @click="getinitDate">
            </v-select>
            <!--钻取下拉列表2-->
            <v-select v-show="childrenselectshow" id="selectchildrenid" v-ref:selected1 class="childrenselectstyle"
                      :value.sync="select1"
                      :options='drillchildrenparam' placeholder='请选择' close-on-select clear-button
                      @click="getinitDate1">
            </v-select>
            <input type="text" v-model="inputtext" :placeholder='textcontent'
                   v-show="inputtextshow">
            <button class="button-21" @click="listenToChild1">钻取</button>
            <button class="button-2" @click="listenToChild2">清空</button>
          </div>
          <!--<div class="historydiv">-->
          <!--<div v-show="clickhistoryshow"><span  v-for="s in clickhistory"><span class="history">{{s}}</span>-></span></div>-->
          <!--<div v-show="clickshow"><span  v-for="s in clickparam"><span class="history">{{s}}</span>-></span></div>-->
          <!--</div>-->
        </div>
        <div class="drilltext" v-show="!listenlistshow">
          <!--图表-->
          <div id="echarts" class="echartsstyle"></div>
          <!--汇总表-->
          <drill-pool :pooldata="datapool" class="pool"></drill-pool>
        </div>
      </div>
      <!--详细列表-->
      <drill-list :listsqldata="listsqldata" :templatename="parenttitle.pagechildrenname" class="drilllist"
                  :class="{'drillliststyle':listenlistshow}"></drill-list>
    </div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import * as Dec from '../../../stores/DrillECharts'
  import * as Drillsql from '../../../stores/DrillSql'
  import co from 'co'

  export default {
    name: "DrillData",
    props: {
      parenttitle: {
        pagename: String,   //钻取页面name
        pagetitle: String,  //钻取页面标题,也是取钻取信息的字段
        pagechildrenname: String, //钻取页面子标题
      },   // 钻取页面
      drillshow: Boolean,
      idname: String,
      childname: String,    //获取初始图表的refs -name 进行setBar绘制初始echarts
      echartsdata: Array,   //初始数据来源所钻取模块，进行汇总显示
      initdatatr: Object,    //初始化配置文件数据
      listcondition: {
        clickparam: String,
        drillterm: String,
        tablename: String,
        drillcondition: String,
        sqlurl: String,
        headData: Array,
        bodyData: Array,
      },
    },
    data() {
      return {
        userid: this.$login.f.id,
        source: `tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))`,
        datapool: [],    //汇总数据
        model: {         //时间参数
          startDate: Util.toStandardDateString(),
          endDate: Util.toStandardDateString(),
        },
        drillparam: [],       //一级钻取列表
        selectparam: '',      //选择字段
        listsqldata: {        //列表sql参数
          urlcarrydata: [],
          headData: [],
          bodyData: [],
        },
        xc: '',

        childrenselectshow: false,       //二级下拉列表show
        drillchildrenparam: [],          //二级下拉列表
        inputtextshow: false,             //输入框show
        select0: [],                     //一级选中值
        select1: [],                     //二级选中值
        inputtext: '',                    //输入框
        textcontent: '',                  //输入框默认内容
        listenlistshow: false,           //列表展开控制
        clickhistoryshow: false,         //钻取历史显示
        clickshow: false,                //点击历史显示
        datedefault: true,               //默认不加载初始时间
        datelistif: false,               //时间选择发生变化

        barparam: '',        //饼状图点击字段
        clickhistory: [],    //钻取历史
        clickparam: [],      //点击历史
        sqlobtaindata: [],   //请求后台获取的数据
        echartsType: '',     //钻取后echarts的类型
        bartype: '',         //时间分类类型(按年year，按月month)

        initflag: true,    //初始化判断
        yname: '',       //柱状图y名称
        xname: '',       //柱状图x名称
        seriename: '',    //seriename名称
        namesubif: false,
      }

    },
    computed: {
      selected() {
        return this.$refs.grid.selected
      }
    },
    methods: {
      // 获取组织结构
      getRes(obj) {
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
      // 返回二级页面
      backclick() {
        this.$echarts.init(document.getElementById('echarts')).clear()
        this.$parent.drillshow = false
        this.initflag = true
        this.resetParam()
        console.log(this.datedefault,'时间判断')
      },
      //图点击事件
      eConsole(param) {
        // 对饼状图进行点击处理
        if (this.echartsType == 'pie') {
          // 点击历史
          this.clickparam.push(param.data.name)
          // 控制显示历史
          this.clickshow = true
          // 点击字段记录
          this.barparam = param.data
        }
      },
      //钻取按键响应事件
      listenToChild1() {
        // 获取下拉列表zhi
        var texttile = this.$refs.selected.selectedItems
        var texttile1 = this.$refs.selected1.selectedItems
        console.log(texttile, '钻取一级类型')
        console.log(texttile1, '钻取二级类型')
        // 判断是否进行选择
        if (typeof texttile == "undefined" || texttile == '') {
          this.$showMessage('未选择查询类型!')
          return
        }

        var conditionparamone = {}  //一级钻取字段对象
        var conditionparamtow = {}  //二级钻取字段对象

        console.log(this.datedefault,'时间判断')
        // 填充默认时间
        if (this.datedefault == true) {
            Drillsql.startDate = eval(Util.toStandardDateString().toString().substring(0, 4) + '-50') + '-01-01 00:00:00'
            Drillsql.endDate = this.model.endDate + ' 00:00:00'
        } else {
          Drillsql.startDate = this.model.startDate + ' 00:00:00'
          Drillsql.endDate = this.model.endDate + ' 00:00:00'
        }

        //特殊处理
        var param = Drillsql.param
        var param1 = Drillsql.param1

        if (this.inputtext != '' && this.idname == 'pastscale') {
          Drillsql.param = this.inputtext
          Drillsql.param1 = this.inputtext
        }

        //获取选中一级分类的信息
        conditionparamone = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, '')
        // 填充钻取状态
        this.clickhistoryshow = true
        this.bartype = conditionparamone.name
        this.clickhistory.push(conditionparamone.label)
        this.echartsType = conditionparamone.echartsType
        var dateparam = conditionparamone.dateparam
        var dateparamif = conditionparamone.dateif
        if (conditionparamone.echartsType == 'bar') {
          this.yname = conditionparamone.yname
          this.xname = conditionparamone.xname
          this.seriename = conditionparamone.seriename
          this.namesubif = conditionparamone.namesubif
        }


        // 判断是否有二级钻取
        if (texttile1 != '') {
          //获取选中二级分类的信息
          conditionparamtow = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, texttile, texttile1)
          // 填充钻取状态
          this.bartype = conditionparamtow.name
          this.clickhistory.push(conditionparamtow.label)
          this.echartsType = conditionparamtow.echartsType
          dateparam = conditionparamtow.dateparam
          dateparamif = conditionparamtow.dateif
          if (conditionparamtow.echartsType == 'bar') {
            this.yname = conditionparamtow.yname
            this.xname = conditionparamtow.xname
            this.seriename = conditionparamtow.seriename
            this.namesubif = conditionparamtow.namesubif
          }


          //往期购气特殊处理
          if (conditionparamtow.label == '高于往期购气量' && this.inputtext < 1) {
            this.$showMessage('请输入大于1的数!')
            Drillsql.param = param
            Drillsql.param1 = param1
            return
          }
          if (conditionparamtow.label == '低于往期购气量' && (this.inputtext > 1 || this.inputtext > 1)) {
            this.$showMessage('请输入0-1之间的数!')
            Drillsql.param = param
            Drillsql.param1 = param1
            return
          }
        } else {
          conditionparamtow = {}
        }

        // console.log(conditionparamone, '一级分类信息')
        // console.log(conditionparamtow, '二级分类信息')
        // console.log(this.clickhistory, this.echartsType, '图状态信息')
        // 点击字段进行sql拼接
        var barcondition = ''
        if (this.barparam != '' && conditionparamone.barparamif) {
          barcondition = this.barparam.drilltype + '=\'' + this.barparam.name + '\' and '
        }
       var dateif=true
        // 时间参数进行sql拼接
        if (this.datalistif && !this.datedefault && !dateparamif) {
          dateif=false
          barcondition = dateparam + '>=to_date(\'' +  Drillsql.startDate+ '\',\'yyyy-MM-dd hh24:mi:ss\') and '
            + dateparam + '<=to_date(\'' +  Drillsql.endDate + '\',\'yyyy-MM-dd hh24:mi:ss\') and ' + barcondition
        }
        // 拼接SQL查询条件
        // keys:分组字段  drillparam:选择字段   drillterm:查询条件
        // console.log(barcondition, '拼接字段')
        //重置明细数据

        var sqlparam = ''

        if (JSON.stringify(conditionparamtow) == '{}') {
          // 获取一级分类sql

          sqlparam = conditionparamone.sqlcondition
        } else {
          // 获取二级分类sql
          sqlparam = conditionparamtow.sqlcondition
        }
        var condition =''

        // 拼接点击条件
        if(this.idname=='usernum'|| this.idname=='pastscale'){
          condition =barcondition
        }else {
          condition =this.bartype+' and '+barcondition
        }

        //请求后台数据
        var sqlcondition = {
          startDate:Drillsql.startDate,
          endDate:Drillsql.endDate,
          param:Drillsql.param,
          param1:Drillsql.param1,
          param2:Drillsql.param2,
          condition:condition
        }
        if( this.idname=='pastscale'){
          var s1 = eval('(' + Drillsql.param + '-1)*100')
          var s1 = s1.toString().substring(0, 5)
          var s2 = eval(Drillsql.param1 + '*100')
          var s2 = s2.toString().substring(0, 5)
          var s3=''
             s3= conditionparamone.label
            if(s3=='全部'){
               s3=''
            }
          sqlcondition.s1=s1
          sqlcondition.s2=s2
          sqlcondition.s3=s3
          sqlcondition.param3=' and '+conditionparamone.name
        }
        console.log(sqlcondition, '图表请求sql')
        let getsqldata = Dec.getData(this, sqlparam ,sqlcondition)
        co(getsqldata)
        // 时间参数进行sql拼接
        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
        if (this.datalistif && !this.datedefault&&dateif) {
          barcondition = pagelist[2].dateparam + '>=to_date(\'' + this.model.startDate + ' 00:00:00\',\'yyyy-MM-dd hh24:mi:ss\') and '
            + pagelist[2].dateparam + '<=to_date(\'' + this.model.endDate + ' 00:00:00\',\'yyyy-MM-dd hh24:mi:ss\') and ' + barcondition
          this.datelistif = false
        }
        console.log(barcondition, '时间sqllist')
        //获取列表sql
        if (!conditionparamone.listif) {
          barcondition = barcondition + '  ' + conditionparamone.name + '\t and '
        }
        if (texttile1 != '') {
          barcondition = barcondition + conditionparamtow.listparam
        }
        var list = Drillsql.listparam
        // 警告特殊处理
        if (this.idname == 'caveat'||this.idname == 'lossassociation'||this.idname == 'longnotusegas'||this.idname == 'longnotbuygas') {
          Drillsql.listparam = ''
        }
        Drillsql.listparam1 = barcondition
        console.log(Drillsql.listparam1, '列表钻取条件 ')
        pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
        console.log(pagelist)
        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]
        //调用赋值函数，传递给绘图子组件
        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)
        Drillsql.param = param
        Drillsql.param1 = param1
        Drillsql.listparam = list
      },

      //清空按键事件
      listenToChild2() {
        this.xc.clear()
        this.resetParam()

        //重新初始化
        this.initdata()
      },
      //重置参数
      resetParam() {
        this.barparam = ''     //清空点击字段
        this.drillparam = []    //清空下拉列表
        this.select0 = []
        this.drillchildrenparam = []  //清空子下拉列表
        this.clickhistory = []       //清空查询历史
        this.clickparam = []          //清空点击历史

        this.model.startDate = Util.toStandardDateString()   //重置时间为当前时间
        this.model.endDate = Util.toStandardDateString()

        this.childrenselectshow = false    //关闭子下拉列表
        this.clickhistoryshow = false      //关闭查询历史显示
        this.clickshow = false             //关闭点击历史显示
        this.datelistif = false             //关闭时间更改标志
        this.datedefault = true             //打开时间初始标志
        this.inputtextshow = false          //关闭输入框
        this.textcontent = ''
        this.inputtext = ''
      },
      //传递参数赋值，传递给子组件
      Transfer(pageurl, headData, bodyData) {
        this.listsqldata.urlcarrydata = pageurl
        this.listsqldata.headData = headData
        this.listsqldata.bodyData = bodyData
      },
      //初始化图表数据参数
      initdata() {
        console.log(this.echartsdata, '钻取初始化参数')
        console.log(this.initdatatr, '初始化获取sql的参数')


        Drillsql.startDate = this.initdatatr['startDate']
        Drillsql.endDate = this.initdatatr['endDate']
        Drillsql.param = this.initdatatr['param']
        Drillsql.param1 = this.initdatatr['param1']
        Drillsql.listparam = this.initdatatr['listparam']
        Drillsql.listparam1 = ''


        //特殊处理
        if (this.parenttitle.pagechildrenname == '主要用户展示') {
          Drillsql.listparam1 = ' a.f_user_type=\'非民用\' and  '
        }

        this.$parent.$refs[this.childname].setBar("echarts")
        this.datapool = this.$parent.childdata
        var pagelist = Drillsql.getDrillList(this.parenttitle.pagetitle, this.idname, '', '')
        console.log(pagelist)
        var sqllistcondition= [this.idname+'list',20,{listparam:"\""+Drillsql.listparam+"\"",listparam1:"\""+Drillsql.listparam1+"\""}]

        //调用赋值函数，传递给绘图子组件
        this.Transfer(sqllistcondition, pagelist[0].headData, pagelist[1].bodyData)

      },

      getinitDate() {
        this.inputtextshow = false
        this.textcontent = ''
        this.inputtext = ''
        this.drillparam = Drillsql.getDrillParameter(this.parenttitle.pagetitle, this.idname, '', '')
      },
    }
    ,
    watch: {
      'model':
        {
          deep: true,
          handler(val) {
            if(!this.$parent.drillshow){
              return
            }
            this.datedefault = false
            this.datalistif = true
          }
          ,
        }
      ,
      'echartsdata':
        {
          deep: true,
          handler(val) {
            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
              this.initdata()
              this.initflag = false
            }
          }
          ,
          immediate: true
        }
      ,
      'drillshow':
        {
          deep: true,
          handler(val) {
            return
            if (typeof this.echartsdata !== "undefined" && this.drillshow == true && this.initflag) {
              this.initdata()
              this.initflag = false
            }
          }
          ,
          immediate: true
        }
      ,
      'select0':
        {
          deep: true,
          handler() {
            // console.log(this.select0, '选中分类的值')
            if (this.select0.length < 1) {
              return
            }
            this.select1 = ''

            this.childrenselectshow = false
            var self = this
            this.drillparam.forEach(function (s) {
              if (self.select0 == s.value && s.name == 't_area') {
                let gen = Dec.select(self, 't_area', '1=1')
                co(gen)
              }
            })
            setTimeout(() => {
              self.drillparam.forEach(function (s) {
                if (s.value == self.select0) {
                  if (typeof s.children != "undefined" && JSON.stringify(s.children) != '[]') {
                    self.childrenselectshow = true
                    self.drillchildrenparam = s.children
                  }
                }

              })
            }, 500)
          }
        }
      ,
      'select1':
        {
          deep: true,
          handler() {
            // console.log(this.select1, '选中分类的值')
            if (this.select1.length < 1) {
              return
            }
            var self = this
            var l = 0
            var texttile = this.$refs.selected.selectedItems
            this.drillparam.forEach(function (s) {
              if (s.label == texttile && s.inputchildren != '') {
                l++
                self.inputtextshow = true
                self.textcontent = s.inputchildren
              }
            })
            if (l == 0) {
              this.inputtextshow = false
              this.textcontent = ''
              this.inputtext = ''
            }
          }
        }
      ,
      'sqlobtaindata':
        {
          deep: true,
          handler(val) {
            if (this.sqlobtaindata.length < 1) {
              this.$showMessage('数据为空!')
              return
            }
            console.log('测试数据变化')
            if (this.echartsType == 'pie') {
              this.datapool = this.sqlobtaindata
              Dec.setPie(this, 'echarts', this.sqlobtaindata, this.sqlobtaindata)
            }
            if (this.echartsType == 'bar') {
              this.datapool = this.sqlobtaindata
              var cachebardata = Dec.DataIntegration(this.sqlobtaindata)
              // console.log(cachebardata, this.bartype, '整合数据及柱状图状态')
              Dec.setBar(this, 'echarts', cachebardata, this.xname, this.yname, this.seriename, this.idname, this.namesubif)
            }
          }
        },
    },
    ready() {
      // console.log(this.drillshow, '三级页面')
      // this.model.startDate = Util.toStandardDateString()
      // this.model.endDate = Util.toStandardDateString()
    }
  }
</script>

<style>
  .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 #vc-chooser .list-group-item {
    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>
  label {
    color: white;
  }

  .datestyle {
    padding-left: 3%;
    width: 100%;
    height: 9%;
  }

  .div-1 {

    height: 80%;
    width: 100%;
  }

  .title-1 {
    border-radius: 10px 10px 0px 0px;
    margin: 0% 2%;
    padding: 0% 2%;
    font-size: 1.6em;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    justify-content: space-between;
    color: #fff;
    height: 8%;
    width: 96%;
    background-color: rgba(1, 207, 242, 0.08);
  }

  .button-1 {
    height: 65%;
    width: 6%;
    margin-right: 1%;
    background-color: #013e48;
    border-radius: 6px;
    border: solid 1px #40cfc3;
    font-size: 0.65em;
    float: right;
  }

  .button-2 {
    color: white;
    height: 100%;
    width: 12%;
    margin-left: 2%;
    margin-top: 0.1%;
    background-color: #013e48;
    border-radius: 6px;
    border: solid 1px #40cfc3;
    font-size: 1em;
  }

  .button-1:hover {
    background-color: #40cfc3;
    border: 1px solid #00ffea;
    border-radius: 6px;
  }

  .button-2:hover {
    background-color: #00ffe9;
    border: 1px solid #013e48;
    border-radius: 6px;
  }

  .button-21 {
    background-color: #40cfc3;
    border-radius: 6px;
    color: white;
    height: 100%;
    width: 12%;
    margin-left: 2%;
    margin-top: 0.1%;
    border: solid 1px #40cfc3;
    font-size: 1em;
  }

  .button-21:hover {
    border: 1px solid #00ffea;
    border-radius: 6px;
  }

  .drillcontent {
    margin-left: 2%;
    width: 52%;
    height: 100%;
    float: left;
    background-color: rgba(1, 207, 242, 0.04);
  }

  .drilltext {
    width: 100%;
    height: 84%;
    /*background-color: #c7254e;*/
  }

  .echartsstyle {
    height: 95%;
    width: 56%;
    float: left;
    /*background-color: white;*/
  }

  .pool {
    height: 100%;
    width: 44%;
    float: left;
    /*background-color: #c7254e;*/
  }

  .drilllist {
    height: 100%;
    width: 44%;
    float: left;
    background-color: rgba(1, 207, 242, 0.04);
  }

  .drillliststyle {
    margin-left: 2%;
    height: 96%;
    width: 96%;
    float: left;
    background-color: rgba(1, 207, 242, 0.04);
  }

  .menuselect {
    margin-top: 1%;
    margin-left: 4%;
    height: 16%;
    width: 96%;
  }

  .selectstyle {
    height: 45%;
  }

  .datestyle label {
    margin-left: 1%;
    margin-top: 1%;
  }

  #selectchildrenid {
    margin-left: 1%;
  }

  .history {
    border-radius: 2px;
    border: solid 1px #2f9ad1;
    color: #2f9ad1;
  }

  .historydiv div {
    height: 49%;
  }

  .historydiv {
    height: 55%;
  }

  .selectstyle input {
    width: 20%;
    height: 95%;
    background-color: #023740 !important;
    border: solid 1px #6fd9d0;
    color: white !important;
  }
</style>
