<template>
  <div class="autoLaunchReport">
    <div class="topOptions">
      <span class="OptinItem" style="position: relative; top: 12px; margin-right: 20px">
        <Treeselect
          :appId.sync="accountIds"
          :multiple="true"
          request="2,4"
          ref="treeSelect"
          style="width: 600px"
          :limit="1"
        />
      </span>
      <span class="OptinItem">
        <a-range-picker @change="dateChange" v-model="dateRange" :disabled-date="disabledDate" style="width: 300px" />
      </span>
      <span>
        <a-button type="primary" style="position: absolute; right: 10px; top: 45px" @click="search">查询</a-button>
        <!-- <a-button type='default' @click="reset">重置</a-button> -->
      </span>
    </div>
    <div class="chartBox">
      <div class="chartTop">
        <span>数据维度：</span>
        <a-radio-group v-model="value" @change="chartDataTypeChange">
          <a-radio :value="1"> 封面曝光数 </a-radio>
          <a-radio :value="2"> 封面点击数 </a-radio>
          <a-radio :value="3"> 素材曝光数 </a-radio>
          <a-radio :value="4"> 行为数 </a-radio>
          <a-radio :value="5"> 封面点击率 </a-radio>
          <a-radio :value="6"> 行为点击率 </a-radio>
        </a-radio-group>
      </div>
      <a-spin :spinning="spinning">
        <div class="chartBody">
          <div
            id="mapEchart"
            style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; line-height: 300px"
            ref="mapEchart"
          >
            <a-empty style="position: relative; top: 50%; margin-top: -65px" />
          </div>
          <div
            id="sexEchart"
            style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px"
            ref="sexEchart"
          >
            <a-empty style="position: relative; top: 50%; margin-top: -65px" />
          </div>
          <div
            id="ageEchart"
            style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px"
            ref="ageEchart"
          >
            <a-empty style="position: relative; top: 50%; margin-top: -65px" />
          </div>
          <div
            id="businessEchart"
            style="width: 65%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; margin-top: 20px"
            ref="businessEchart"
          >
            <a-empty style="position: relative; top: 50%; margin-top: -65px" />
          </div>
          <div
            id="systemEchart"
            style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; margin-top: 20px"
            ref="systemEchart"
          >
            <a-empty style="position: relative; top: 50%; margin-top: -65px" />
          </div>
        </div>
      </a-spin>
      <div class="tableBox">
        <!-- <div class="tableTop">
                    关联定向
                </div> -->
        <div class="tableOpt">
          <span>表格类型：</span>
          <a-radio-group v-model="tableValue" @change="tableTypeChange">
            <a-radio value="province"> 省级地域分布 </a-radio>
            <a-radio value="city"> 地级地域分布 </a-radio>
            <a-radio value="gender"> 性别分布 </a-radio>
            <a-radio value="ageSegment"> 年龄分布 </a-radio>
            <a-radio value="clientId"> 系统分布 </a-radio>
            <a-radio value="businessInterestTags"> 商业兴趣分布 </a-radio>
          </a-radio-group>
        </div>
        <div class="tableBody">
          <a-table
            size="middle"
            :columns="columns"
            :dataSource="tableData"
            :pagination="ipagination"
            bordered
            id="outTable"
            :loading="materialloading"
            style="word-break: break-all; font-size: 16px; font-weight: 600"
            :scroll="{ x: true }"
            @change="sort"
          >
            <span slot="charge" slot-scope="charge">{{ charge | decimalsHandle }}</span>
            <span slot="eventNextDayStayRatio" slot-scope="eventNextDayStayRatio">{{
              eventNextDayStayRatio + '%'
            }}</span>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import qs from 'qs'
// 引入基本模板
var echarts = require('echarts')
import 'echarts/map/js/china'
// 引入柱状图组件
require('echarts/lib/chart/bar')
// require('echarts/lib/chart/pie')
require('echarts/lib/chart/line')
require('echarts/lib/chart/map')
// 引入提示框和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')

let option = {
  color: ['#1890ff'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '12%',
    containLabel: false,
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      show: true,

      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      show: false,
    },
  ],
  series: [
    {
      name: '',
      type: 'bar',
      barWidth: '40%',
      smooth: true,
      areaStyle: {},
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1890ff' },
          { offset: 1, color: '#FFF' },
        ]),
      },
      data: [],
    },
  ],
}

const regionColumns = [
  {
    title: '消耗',
    dataIndex: 'charge',
    key: 'charge',
    align: 'center',
    scopedSlots: { customRender: 'charge' },
    sorter: true,
  },
  {
    title: '次留数',
    dataIndex: 'eventNextDayStay',
    key: 'eventNextDayStay',
    align: 'center',
    scopedSlots: { customRender: 'eventNextDayStay' },
    sorter: true,
  },
  {
    title: '次留率',
    dataIndex: 'eventNextDayStayRatio',
    key: 'eventNextDayStayRatio',
    align: 'center',
    scopedSlots: { customRender: 'eventNextDayStayRatio' },
    sorter: true,
  },
  {
    title: '激活数',
    dataIndex: 'activation',
    key: 'activation',
    align: 'center',
    scopedSlots: { customRender: 'activation' },
    sorter: true,
  },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
  //   {
  //     title: '地域',
  //     dataIndex: 'region',
  //     key: 'region',
  //     align: 'center',
  //     scopedSlots: { customRender: 'region' },
  //     width: 120,
  //     fixed: 'left',
  //   },
]

const province = [
  {
    title: '省份',
    dataIndex: 'province',
    key: 'province',
    align: 'center',
    scopedSlots: { customRender: 'province' },
  },
]
const city = [
  {
    title: '城市',
    dataIndex: 'city',
    key: 'city',
    align: 'center',
    scopedSlots: { customRender: 'city' },
  },
]
const ageSegment = [
  {
    title: '年龄',
    dataIndex: 'ageSegment',
    key: 'ageSegment',
    align: 'center',
    scopedSlots: { customRender: 'ageSegment' },
  },
]
const gender = [
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    align: 'center',
    scopedSlots: { customRender: 'gender' },
  },
]
const businessInterestTags = [
  {
    title: '商业兴趣',
    dataIndex: 'businessInterestTags',
    key: 'businessInterestTags',
    align: 'center',
    scopedSlots: { customRender: 'businessInterestTags' },
  },
]
const client = [
  {
    title: '系统',
    dataIndex: 'client',
    key: 'client',
    align: 'center',
    scopedSlots: { customRender: 'client' },
  },
]

export default {
  components: {
    Treeselect,
  },
  data() {
    return {
      order: '',
      target: '',
      searchShow: true,
      spinning: false,
      materialId: [],
      treeData: [],
      materialTreeData: [],
      userId: '',
      tabKey: 1,
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50'],
        total: 0,
        onChange: (current, pageSize) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
          this.ipagination.pageSize = pageSize
        },
      },

      tableValue: 'province',
      accountIds: [],
      accountList: [],
      directionalId: undefined,
      value: 1,
      columns: [...province, ...regionColumns],
      tableData: [],
      dateRange: [moment().subtract(2, 'day'), moment().subtract(2, 'day')],
      topOption: JSON.parse(JSON.stringify(option)),
      scrollX: 0,
      materialipagination: {
        current: 1,
        pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50'],
        total: 0,
        onChange: (current, pageSize) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
          this.ipagination.pageSize = pageSize
        },
      },
      materialtableData: [],
      materialloading: false,
      materialscrollX: 4000,
      province: [],
      provinceData: [],
      sexData: [],
      ageData: [],
      businessData: [],
      systemData: [],
    }
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    disabledDate(current) {
      return current && current > moment().subtract(2, 'day')
    },
    dateChange(date, dateString) {
      // console.log(date,dateString)
    },
    chartDataTypeChange(e) {
      this.getEchartData()
    },
    tableTypeChange(e) {
      //   console.log('radio checked', e.target.value)
      if (e.target.value == 'province') {
        this.columns = [...province, ...regionColumns]
      } else if (e.target.value == 'city') {
        this.columns = [...city, ...regionColumns]
      } else if (e.target.value == 'gender') {
        this.columns = [...gender, ...regionColumns]
      } else if (e.target.value == 'ageSegment') {
        this.columns = [...ageSegment, ...regionColumns]
      } else if (e.target.value == 'clientId') {
        this.columns = [...client, ...regionColumns]
      } else if (e.target.value == 'businessInterestTags') {
        this.columns = [...businessInterestTags, ...regionColumns]
      }
      this.ipagination.current = 1
      this.getDetailTableData()
    },

    directionalIdChange(val) {},
    //获取echart的值
    initEchart(idName, optionName) {
      const chart = this.$refs[idName]
      //   console.log(chart)
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName))
        // myChart.showLoading({
        //     text: "图表数据正在努力加载..."
        // });

        myChart.setOption(optionName)
        var that = this
        window.addEventListener('resize', function () {
          that.$nextTick(() => {
            myChart.resize()
          })
        })
      }
    },
    clearEchart(idName) {
      const myChart = echarts.init(document.getElementById(idName))
      myChart.dispose()
    },
    // province,data
    handlerMapEchartOption(province, data) {
      var res = []
      var dataEnd = []
      var smallValue = [
        {
          min: 100000,
          color: '#73240D',
        },
        {
          min: 50000,
          max: 100000,
          color: '#BB0000',
        },
        {
          min: 30000,
          max: 50000,
          color: '#BD430A',
        },
        {
          min: 10000,
          max: 30000,
          color: '#E08150',
        },
        {
          min: 5000,
          max: 10000,
          color: '#E9B090',
        },
        {
          min: 1000,
          max: 5000,
          color: '#F2DDD2',
        },
        {
          value: 0,
          color: '#F1eeee',
        },
      ]
      if (this.value == 1) {
        res = data.map((item) => {
          return item.photoShow
        })
      } else if (this.value == 2) {
        res = data.map((item) => {
          return item.photoClick
        })
      } else if (this.value == 3) {
        res = data.map((item) => {
          return item.aclick
        })
      } else if (this.value == 4) {
        res = data.map((item) => {
          return item.bclick
        })
      } else if (this.value == 5) {
        res = data.map((item) => {
          return item.photoClickRatio
        })
        smallValue = [
          {
            min: 55,
            color: '#73240D',
          },
          {
            min: 45,
            max: 55,
            color: '#BB0000',
          },
          {
            min: 35,
            max: 45,
            color: '#BD430A',
          },
          {
            min: 25,
            max: 35,
            color: '#E08150',
          },
          {
            min: 15,
            max: 25,
            color: '#E9B090',
          },
          {
            min: 5,
            max: 15,
            color: '#F2DDD2',
          },
          {
            value: 0,
            color: '#F1eeee',
          },
        ]
      } else if (this.value == 6) {
        res = data.map((item) => {
          return item.actionRatio
        })
        smallValue = [
          {
            min: 55,
            color: '#73240D',
          },
          {
            min: 45,
            max: 55,
            color: '#BB0000',
          },
          {
            min: 35,
            max: 45,
            color: '#BD430A',
          },
          {
            min: 25,
            max: 35,
            color: '#E08150',
          },
          {
            min: 15,
            max: 25,
            color: '#E9B090',
          },
          {
            min: 5,
            max: 15,
            color: '#F2DDD2',
          },
          {
            value: 0,
            color: '#F1eeee',
          },
        ]
      }

      for (var j = 0; j < province.length; j++) {
        dataEnd.push({
          name: province[j],
          value: res[j],
        })
      }

      var that = this
      var option = {
        title: {
          text: '省级地域分布',
          // subtext: '仅供参考',
          left: 'left',
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            var str = ''
            if (that.value == 5 || that.value == 6) {
              str = params.name + '：' + (params.value ? params.value + '%' : 0)
            } else {
              str = params.name + '：' + (params.value ? params.value : 0)
            }
            return str
          },
        },
        layoutCenter: ['30%', '30%'],
        visualMap: {
          type: 'piecewise',
          // text: ['头', '尾'],
          pieces: smallValue,
          orient: 'vertical',
          itemSymbol: 'circle',
          itemWidth: 20,
          itemHeight: 20,
          showLabel: true,
          seriesIndex: [0],
          textStyle: {
            color: '#7B93A7',
          },
          bottom: '10%',
          left: '5%',
        },
        grid: {
          right: '5%',
          top: '20%',
          left: '60%',
          bottom: '10%',
          width: '100%',
          x: '40%',
          containLabel: true,
        },
        xAxis: {
          min: 0,
          // max: 4000,
          show: false,
        },

        geo: {
          map: 'china',
          // right: '35%',
          left: '30%',
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            emphasis: {
              areaColor: '#99FF99',
            },
          },
        },
        series: [
          {
            name: 'mapSer',
            type: 'map',
            map: 'china',
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: dataEnd,
          },
        ],
      }
      return option
    },

    handlerSexOption(data) {
      var res = []
      if (this.value == 1) {
        res = data.map((item) => {
          return { value: item.photoShow, name: item.gender }
        })
      } else if (this.value == 2) {
        res = data.map((item) => {
          return { value: item.photoClick, name: item.gender }
        })
      } else if (this.value == 3) {
        res = data.map((item) => {
          return { value: item.aclick, name: item.gender }
        })
      } else if (this.value == 4) {
        res = data.map((item) => {
          return { value: item.bclick, name: item.gender }
        })
      } else if (this.value == 5) {
        res = data.map((item) => {
          return { value: item.photoClickRatio, name: item.gender }
        })
      } else if (this.value == 6) {
        res = data.map((item) => {
          return { value: item.actionRatio, name: item.gender }
        })
      }
      var option = {
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ',
        },
        toolbox: {
          show: true,
        },
        title: {
          text: '性别分布',
          // subtext: '仅供参考',
          left: 'left',
        },
        grid: {
          containLabel: true,
        },
        // legend: {
        //   type: 'scroll',
        //   orient: 'vertical',
        //   left: '10%',
        //   align: 'left',
        //   top: 'middle',
        //   textStyle: {
        //     color: '#8C8C8C',
        //   },
        //   height: 100,
        // },
        series: [
          {
            type: 'pie',
            radius: [0, 100],

            data: res,
            minAngle: 10,
          },
        ],
      }
      return option
    },

    handlerAgeOption(data) {
      var res = []
      if (this.value == 1) {
        res = data.map((item) => {
          return { value: item.photoShow, name: item.ageSegment }
        })
      } else if (this.value == 2) {
        res = data.map((item) => {
          return { value: item.photoClick, name: item.ageSegment }
        })
      } else if (this.value == 3) {
        res = data.map((item) => {
          return { value: item.aclick, name: item.ageSegment }
        })
      } else if (this.value == 4) {
        res = data.map((item) => {
          return { value: item.bclick, name: item.ageSegment }
        })
      } else if (this.value == 5) {
        res = data.map((item) => {
          return { value: item.photoClickRatio, name: item.ageSegment }
        })
      } else if (this.value == 6) {
        res = data.map((item) => {
          return { value: item.actionRatio, name: item.ageSegment }
        })
      }
      const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
      var that = this
      var option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            var str = ''
            if (that.value == 5 || that.value == 6) {
              str = params.name + '：' + (params.value ? params.value + '%' : 0)
            } else {
              str = params.name + '：' + (params.value ? params.value : 0)
            }
            return str
          },
        },
        title: {
          text: '年龄分布',
          // subtext: '仅供参考',
          left: 'left',
        },
        series: [
          {
            type: 'pie',
            // center: ['30%', '30%'],
            radius: ['30%', '60%'],
            minAngle: 10,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              color: (params) => {
                return colorList[params.dataIndex]
              },
            },
            label: {
              show: true,
              position: 'outer',
              alignTo: 'labelLine',
              // ·圆点
              backgroundColor: 'auto', //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              // height,width.lineHeight必须为0
              distanceToLabelLine: 0, //圆点到labelline距离
              borderRadius: 2.5,
              padding: [2.5, -2.5, 2.5, -2.5],
              /*radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几
                            如：圆点半径为1
                                        borderRadius: 1,
                                        padding: [1, -1, 1, -1]
                            */
              formatter: '{a|{b}  }',
              rich: {
                a: {
                  padding: [0, 0, 0, 10],
                },
                b: {
                  padding: [0, 10, 0, 0],
                },
              },
            },
            data: res,
          },
        ],
      }

      return option
    },

    handlerBusinessOption(data) {
      var res = []
      var dataX = data.map((item) => {
        return item.businessInterestTags
      })
      if (this.value == 1) {
        res = data.map((item) => {
          return item.photoShow
        })
      } else if (this.value == 2) {
        res = data.map((item) => {
          return item.photoClick
        })
      } else if (this.value == 3) {
        res = data.map((item) => {
          return item.aclick
        })
      } else if (this.value == 4) {
        res = data.map((item) => {
          return item.bclick
        })
      } else if (this.value == 5) {
        res = data.map((item) => {
          return item.photoClickRatio
        })
      } else if (this.value == 6) {
        res = data.map((item) => {
          return item.actionRatio
        })
      }
      var that = this
      const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
      var option = {
        title: {
          text: '商业兴趣分布',
          // subtext: '仅供参考',
          left: 'left',
        },
        color: colorList,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = ''
            if (that.value == 5 || that.value == 6) {
              str = params[0].name + '：' + params[0].value + '%'
            } else {
              str = params[0].name + '：' + params[0].value
            }
            return str
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'log',
          },
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: res,
          },
        ],
      }

      return option
    },
    handlerSystemOption(data) {
      var res = []
      var dataX = data.map((item) => {
        return item.client
      })
      if (this.value == 1) {
        res = data.map((item) => {
          return item.photoShow
        })
      } else if (this.value == 2) {
        res = data.map((item) => {
          return item.photoClick
        })
      } else if (this.value == 3) {
        res = data.map((item) => {
          return item.aclick
        })
      } else if (this.value == 4) {
        res = data.map((item) => {
          return item.bclick
        })
      } else if (this.value == 5) {
        res = data.map((item) => {
          return item.photoClickRatio
        })
      } else if (this.value == 6) {
        res = data.map((item) => {
          return item.actionRatio
        })
      }
      var that = this
      const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
      var option = {
        title: {
          text: '系统分布',
          // subtext: '仅供参考',
          left: 'left',
        },
        color: colorList,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = ''
            if (that.value == 5 || that.value == 6) {
              str = params[0].name + '：' + params[0].value + '%'
            } else {
              str = params[0].name + '：' + params[0].value
            }
            return str
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: dataX,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'log',
          },
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: res,
          },
        ],
      }

      return option
    },
    //点击分页
    sort(pagination, filters, sorter, { currentDataSource }) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize

      if (sorter.order == 'ascend') {
        this.order = ''
        this.target = sorter.columnKey
      } else if (sorter.order == 'descend') {
        this.order = 'desc'
        this.target = sorter.columnKey
      }
      this.getTableData()
    },
    materialTableChange(pagination, filters, sorter, { currentDataSource }) {
      this.materialipagination.current = pagination.current
      this.materialipagination.pageSize = pagination.pageSize
    },

    getEchartData() {
      this.spinning = true
      //   let params = this.handlerParams()
      //   params.dataType = this.value
      //   postAction('', params).then((res) => {
      //     console.log(res)

      // this.province = province
      if (this.province.length > 0) {
        this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
      }
      if (this.sexData.length > 0) {
        this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
      }
      if (this.ageData.length > 0) {
        this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
      }
      if (this.businessData.length > 0) {
        this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
      }
      if (this.systemData.length > 0) {
        this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
      }
      this.spinning = false
      //   })
    },

    getDetailTableData() {
      this.getTableData()
    },

    getRelativeData() {
      let params = this.handlerParams()
      // params.dataType=this.tableValue
      if (params.accountIds) {
        this.spinning = true
        getAction('/audienceReport/queryAllReportForm', params).then((res) => {
          this.spinning = false
          if (res.success) {
            this.province = res.result.province.map((item) => {
              return item.province
            })
            this.provinceData = res.result.province
            this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
            this.sexData = res.result.gender
            this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
            this.ageData = res.result.ageSegment
            this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
            this.businessData = res.result.businessInterestTags
            this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
            this.systemData = res.result.client
            this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
          } else {
            this.$message.error(res.message)
            this.province = []
            this.provinceData = []
            this.sexData = []
            this.ageData = []
            this.businessData = []
            this.systemData = []
            this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
            this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
            this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
            this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
            this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
          }
        })
      }
    },
    getTableData() {
      let params = this.handlerParams() || {}
      if (params.accountIds) {
        this.materialloading = true
        params.audienceType = this.tableValue
        params.pageNo = this.ipagination.current
        params.pageSize = this.ipagination.pageSize
        params.orderType = this.target
        params.upOrDown = this.order
        // params.dataType=this.tableValue
        getAction('/audienceReport/queryPageList', params).then((res) => {
          this.materialloading = false
          if (res) {
            this.tableData = res.list
            this.ipagination.total = res.total
          } else {
            this.$message.error('出错了')
          }
        })
      }
    },
    search() {
      this.searchShow = false
      this.getRelativeData()
      this.getTableData()
    },

    handlerParams() {
      let params = {}
      if (this.accountIds.length <= 0) {
        this.$message.error('请选择账户')
        this.materialloading = false
        this.spinning = false
        return
      } else {
        params.accountIds = ''
        this.accountIds.forEach((item, index) => {
          if (index != this.accountIds.length - 1) {
            params.accountIds += `${item},`
          } else {
            params.accountIds += `${item}`
          }
        })
      }

      if (this.dateRange[0] && this.dateRange.length == 2) {
        params.startTime = this.dateRange[0].format('YYYY-MM-DD')
        params.endTime = this.dateRange[1].format('YYYY-MM-DD')
      } else {
        this.materialloading = false
        this.spinning = false
        this.$message.error('请选择时间')
        return
      }

      //   if (this.tabKey == 1) {
      //     params.type = 'target'
      //     params.strategyId = this.directionalId[0].split('_')[0]
      //     params.targetIds = this.directionalId.map((item) => {
      //       return item.split('_')[1]
      //     })
      //   } else {
      //     params.type = 'material'
      //     params.strategyId = this.materialId[0].split('_')[0]
      //     params.codes = this.materialId.map((item) => {
      //       return item.split('_')[1]
      //     })
      //   }
      //   if (this.dateRange && this.dateRange.length > 0) {
      //     params.startDate = this.dateRange[0].format('YYYY-MM-DD')
      //     params.endDate = this.dateRange[1].format('YYYY-MM-DD')
      //   }

      return params
    },
  },
  watch: {
    accountIds: function (n, o) {
      if (n.length > 0 && this.searchShow) {
        this.search()
      }
    },
    'ipagination.current': function (n, o) {
      if (n != o) {
        this.getTableData()
      }
    },
    'ipagination.pageSize': function (n, o) {
      if (n != o) {
        this.getTableData()
      }
    },
  },
  activated() {
    this.$nextTick(() => {})
    let userInfo = localStorage.getItem('pro__Login_Userinfo')
    let userId = ''
    if (userInfo) {
      this.userId = JSON.parse(userInfo).value.id
    }
  },
  filters: {
    toPercentage(val) {
      if (val) {
        if (typeof val != 'string') {
          return (val * 100).toFixed(2) + '%'
        } else {
          return val
        }
      } else if (typeof val == 'string') {
        return val
      } else {
        return 0
      }
    },
    //保留两位小数并且变成货币格式
    decimalsHandle(val) {
      if (val && typeof val != 'string') {
        if (val >= 0) {
          val = parseFloat(val).toFixed(2)
          let numberStr = val.toString()
          let str = numberStr.split('.')

          let str0 = str[0].split('').reverse()
          for (let i = 0; i < str0.length; i++) {
            if ((i + 1) % 4 === 0) {
              str0.splice(i, 0, ',')
            }
          }
          str0.reverse()
          let handleResult = ''
          for (let j = 0; j < str0.length; j++) {
            handleResult += str0[j]
          }

          return handleResult + '.' + str[1]
        } else {
          val = parseFloat(val).toFixed(2)
          let numberStr = val.toString()
          let str = numberStr.split('.')

          let str0 = str[0].substr(1).split('').reverse()
          for (let i = 0; i < str0.length; i++) {
            if ((i + 1) % 4 === 0) {
              str0.splice(i, 0, ',')
            }
          }
          str0.reverse()
          let handleResult = ''
          for (let j = 0; j < str0.length; j++) {
            handleResult += str0[j]
          }

          return '-' + handleResult + '.' + str[1]
        }
      } else if (typeof val == 'string') {
        return val
      } else {
        return 0
      }
    },
    //变成货币格式
    formatCurrency(val) {
      if ((val || val == 0) && typeof val != 'string') {
        let numberStr = val.toString()
        let str = numberStr.split('').reverse()
        for (let i = 0; i < str.length; i++) {
          if ((i + 1) % 4 === 0) {
            str.splice(i, 0, ',')
          }
        }
        str.reverse()
        let handleResult = ''
        for (let j = 0; j < str.length; j++) {
          handleResult += str[j]
        }
        return handleResult
      } else if (typeof val == 'string') {
        return val
      } else {
        return '-'
      }
    },
  },
}
</script>

<style lang="scss">
.ant-tooltip-inner,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
</style>
<style lang="scss" scoped>
.autoLaunchReport {
  background-color: #fff;
  padding: 10px 20px;
  position: relative;
  width: 100%;
  .OptinItem {
    display: inline-block;
    margin-right: 15px;
    margin-top: 15px;
    .ok {
      margin-right: 15px;
    }
  }
  .OptinItem:first-child {
    margin-right: 10px;
  }
  .topOptions {
    padding: 15px 10px;
    position: relative;
    .topOpt {
      width: 100%;
      margin-bottom: 10px;
    }
  }
  .optionBtn {
    // display: inline-block;
    float: right;
    // .searchBtn{
    // margin-right: 10px;
    // }
  }
  .circul {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #32CD32;
  }

  .show {
    // background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // padding: 0px 15px;
    box-sizing: border-box;

    .showBox {
      width: 19%;
      box-sizing: border-box;
      padding: 15px 15px;
      background-color: #fff;

      .title {
        color: #999;
        font-size: 16px;
        position: relative;
        text-align: center;
        .infotitle {
          padding: 8px 0;
        }

        span {
          font-size: 1rem;
          // color: #1890ff;
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
        }
      }
      .infoNum {
        padding: 10px 0;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        span {
          font-weight: 600;
          font-size: 16px;
        }
        .red {
          font-size: 20px;
          font-weight: 600;
          color: red;
        }
        .green {
          display: block;
          text-align: center;
          margin-left: 0.2rem;
          font-size: 14px;
          font-weight: 700;
          color: #32CD32;
          .huanbi {
            // color:#999;
            font-weight: 400;
            font-size: 14px;
          }
        }
      }
    }
  }
  .chartBox {
    background-color: #fff;
    margin: 15px 0px;
    padding: 2px 10px 30px;
    .chartBody {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
  .tableBox {
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 0px;
    .tableTop {
      position: relative;
      padding: 20px 0;
      border-top: 1px solid #e0e0e0;
      font-size: 24px;
      color: black;
      .selectTime {
        margin-right: 20px;
      }
      .add {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .tableOpt {
      margin-bottom: 20px;
    }
  }
}
</style>