<template>
  <div class="accountReport">
    <div class="optionLine">
      
          <span>项目选择：</span>
          <a-tree-select
            v-model="treeValue"
            style="width: 50%"
            :tree-data="treeData"
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
            searchPlaceholder="请选择项目和账户"
            :allowClear="true"
            @change="treeChange"
          />
     
     
      <div style="float:right"   @click="opendate">
            <DatePicker :openOptions='openOptions' :left=left />
      </div>
      <div class="optionTow">
          <div class="optItem">
              <span>折扣：</span>
              <a-input-number :min="0" :max="10" :step="0.1" v-model="discount" />
          </div>
          <div class="optItem">
              <span>返点比例：</span>
              <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" />
          </div>
          <div class="btn">
            <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
            <a-button type="primary" @click="refreshgetData" :disabled='refreshDisabled' class="mybtn">刷新</a-button>
            <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
          </div>
      </div>
      
    </div>
    <div class="show">
        
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import DatePicker from '@/components/DatePicker.vue'
// 引入基本模板
var echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/graphic')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
export default {
   components:{
        DatePicker,
       
    },
  data() {
    return {
      left:0,
      //treeselect的参数
      treeValue: [],
      treeData: [],
      SHOW_PARENT,
      //折扣数值
      discount:1.0,
      //返点比例
      rebateProp:1.0,
      //日期矿打开
      openOptions:false,
      //子元素的数据存储
    
        type:1,
        dateValue:[moment(),moment()],

        //处理按钮禁用
        searchDisabled:false,
        refreshDisabled:false,
        resetDisabled:false,
    }
  },
  methods: {
    //项目改变后的事件
    treeChange(val) {
      this.projectId = []
      this.accountName = []
      console.log(val, this.treeValue)
      this.treeValue.forEach((item, index) => {
        if (parseInt(item)) {
          this.projectId.push(item)
        } else {
          this.accountName.push(item)
        }
      })
      if (this.treeValue.length == 0) {
        this.optionArr = []
      }
      postAction('/pangolin/api/app/list', {
        projectId: this.projectId,
        accountName: this.accountName
      }).then(res => {
        console.log(res)
        if (res.success) {
          this.optionArr = res.data
        }
      })
    },
    disabledDate(current) {
      // console.log(current)

      return current && current > moment().subtract(1, 'day')
    },

    //查询按钮的事件
    searchgetData(){
           
        console.log();
        this.loading=true;
        this.searchDisabled=true;
        // this.HttpPost()
            
    },
    //刷新
    refreshgetData(){
         this.loading=true;
         this.refreshDisabled=true;
    },
    //重置
    resetgetData(){
         this.loading=true;
         this.resetDisabled=true;
    },
      //打开日期框
   opendate(){
       this.openOptions=!this.openOptions;
      //  console.log(this.openOptions)
   },

   HttpPost(params){
     return new Promise((resolve, reject) => {
        postAction('/ctop/byteDance/homePage/report/week', {}).then(res => {
        //   console.log(res)
          if (res.success) {
            this.loading = false
            this.refreshDisabled=false;
            this.resetDisabled=false;
            this.searchDisabled=false;
            this.cost = res.result.costWeekLink
            this.click = res.result.clickWeekLink
            this.showNum = res.result.showNumWeekLink
            // res.result.top.top7.forEach((element, index) => {
            //   this.topOption.xAxis[0].data.push(element.authName)
            //   this.topOption.series[0].data.push(element.cost)
            // })

            // for (let [key, value] of Object.entries(res.result.costWeek)) {
            //   this.costOption.xAxis[0].data.push(key)
            //   this.costOption.series[0].data.push(value)
            // }
            // for (let [key, value] of Object.entries(res.result.clickWeek)) {
            //   this.clickOption.xAxis[0].data.push(key)
            //   this.clickOption.series[0].data.push(value)
            // }
            // for (let [key, value] of Object.entries(res.result.showNumWeek)) {
            //   this.showOption.xAxis[0].data.push(key)
            //   this.showOption.series[0].data.push(value)
            // }

            // this.getEchartData('topChart', this.topOption)
            // this.getEchartData('costChart', this.costOption)
            // this.getEchartData('clickChart', this.clickOption)
            // this.getEchartData('showChart', this.showOption)
            
          }
        })
      })
   },
    //获取echart的值
    getEchartData(idName, optionName) {
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName))
        myChart.setOption(optionName)
        window.addEventListener('resize', function() {
          myChart.resize()
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.accountReport {
  .optionLine {
    padding: 0  15px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 15px;
    // border: 1px solid #ccc;
    
    .optionTow{
      margin-top: 15px;
      position: relative;
        .optItem{
          display: inline-block;
          margin-right: 15px;
            span {
            display: inline-block;
            padding: 0 3px;
            }
        }
    }

    .btn {
      position: absolute;
      right: 0px;
      top: 0px;
      .mybtn{
        margin-left: 10px;
      }
    }
  }
  .show{
    background-color: #fff;
    padding: 15px 15px;
    
  }
 
}
</style>