<template>
  <ai-list class="AppAnnounceStatistics">
    <template slot="content">
      <div class="statistics-content">
        <ai-title title="宣发日历"></ai-title>
        <div class="flex-content">
          <div class="flex-left">
            <div class="date-header">
              <p>{{chooseYear}}年{{chooseMonth}}月</p>
              <div>
                <el-date-picker size="small"
                  v-model="searchMonth"
                  type="month" value-format="yyyy-MM"
                  placeholder="选择日期" @change="searchMonthChange">
                </el-date-picker>
              </div>
            </div>
            <el-calendar v-model="calendarDate">
              <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div class="flex-date">
                  <span>{{Number(data.day.substring(8, 10))}}</span>
                  <span class="tips" v-if="data.day.substring(5, 7) == chooseMonth && dateList[Number(data.day.substring(8, 10))] && dateList[Number(data.day.substring(8, 10))].taskList.length">{{dateList[Number(data.day.substring(8, 10))].taskList.length}}</span>
                </div>
              </template>
            </el-calendar>
          </div>
          <div class="flex-right">
            <div class="title">{{chooseMonth}}月{{chooseDay}}日宣发内容</div>
            <div class="list-content" v-if="taskList.length">
              <el-timeline >
                <el-timeline-item v-for="(item, index) in taskList" :key="index">
                  <el-card>
                    <div class="flex-between">
                      <p class="item-title">{{item.taskTitle}}</p>
                      <span class="item-time" v-if="item.choiceTime">{{item.choiceTime.substring(10, 16)}}</span>
                    </div>
                    <div class="item-info item-created">
                      <span class="label">创建人：</span>{{item.createUserName}}
                    </div>
                    <div class="item-info item-dept">
                      <span class="label">创建部门：</span>{{item.createUserDeptName}}
                    </div>
                    <div class="flex-between">
                      <!-- <div class="item-info">群发类型：<span>{{$dict.getLabel('mstSendType', item.sendType) || ''}}</span></div> -->
                      <div class="item-info"><span class="label">群发类型：</span><span>群发居民群</span></div>
                      <span class="item-btn" @click="$router.push({name: '357e228ba8e64008ace90d095a7a0dd7', params: { id: item.id }})">详情</span>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>

            </div>
            <ai-empty v-if="!taskList.length" />
          </div>
        </div>
      </div>
      <div class="statistics-content">
        <div class="flex-between mar-b16">
          <ai-title title="宣发效果"></ai-title>
          <div class="right-search">
            <div class="time-select" :class="effectType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeEffectType(index)">{{item}}</div>
            <ai-picker :instance="instance" @pick="e => onUserChange(e)" :multiple="false" dialogTitle="选择部门" action="/app/wxcp/wxdepartment/departList">
              <div class="time-select">
                <span class="dept-name" style="color:#999;" v-if="deptList && !deptList.length">宣发部门</span>
                <span class="dept-name" v-else>{{deptList[0].name}}</span>
                <i class="el-icon-arrow-down"></i>
              </div>
            </ai-picker>
          </div>
        </div>
        <div class="line-content">
          <div class="flex1">
            <div class="header">
              <p>累计创建宣发任务数</p>
              <h2>{{effectData.createCount}}</h2>
            </div>
            <div class="chart-content">
              <div class="chart-title">宣发任务数</div>
              <div class="chart-box" id="createChart"></div>
            </div>
          </div>
          <div class="flex1">
            <div class="header">
              <p>累计执行宣发次数</p>
              <h2>{{effectData.executeCount}}</h2>
            </div>
            <div class="chart-content">
              <div class="chart-title">宣发次数</div>
              <div class="chart-box" id="executeChart"></div>
            </div>
          </div>
          <div class="flex1 mar-r0">
            <div class="header">
              <p>累计触达人次</p>
              <h2>{{effectData.receiveCount}}</h2>
            </div>
            <div class="chart-content">
              <div class="chart-title">触达人次</div>
              <div class="chart-box" id="receiveChart"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <ai-card title="宣发分类数" style="flex: 1; margin-right: 20px;">
          <template #content>
            <div id="chart1" style="width: 100%; height: 300px;"></div>
          </template>
        </ai-card>
        <ai-card title="宣发分类占比" style="width: 600px">
          <template #content>
            <div id="chart2" style="width: 100%; height: 300px;"></div>
          </template>
        </ai-card>
      </div>
      <div class="statistics-content">
        <div class="flex-between mar-b16">
          <ai-title title="宣发明细"></ai-title>
          <div class="right-search">
            <div class="time-select" :class="departType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeDepartType(index)">{{item}}</div>
          </div>
        </div>
        <div id="departBarChart" v-if="isDepartData"></div>
        <ai-empty v-if="!isDepartData"></ai-empty>
      </div>

      <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
        <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
  import * as echarts from "echarts";
  import { mapActions, mapState } from 'vuex';
  export default {
    name: 'AppAnnounceStatistics',
    label: '协同宣发统计',
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },
    data () {
      return {
        calendarDate: new Date(),
        dateList: {},
        chooseYear: '',
        chooseMonth: '',
        chooseDay: '',
        searchMonth: '',
        taskList: [],
        effectType: 0, // 宣发效果类型 0：近七天、1：近30天、2：近一年、3：自定义
        effectData: {},
        createChart: null,
        executeChart: null,
        receiveChart: null,
        departType: 0, // 宣发明细类型 0：近七天、1：近30天、2：近一年、3：自定义
        dateTypeList: ['近7天', '近30天', '近1年', '自定义'],
        departData: {},
        departBarChart: null,
        dialogDate: false,
        timeListEffect: '',
        timeListDepart: '',
        timeList: '',
        isEffectTimeSelect: false,
        deptList: [],
        selectDeptName: '',
        isDepartData: true,
        departBarData: [],
        type: '',
        date: '',
        search: {
          current: 1,
          size: 10,
          type: '0'
        },
        chart1: null,
        chart2: null
      }
    },
    computed: {
      ...mapState(['user']),
    },
    watch: {
      calendarDate: function() {
        var year = '' , month = '', date = ''
        if(this.calendarDate.length == 9) { // 月份选择器触发
          year = this.calendarDate.substring(0, 4)
          month = this.calendarDate.substring(5, 7)
          date = this.calendarDate.substring(8, 10)
        }else { // 日历点击
          year = this.calendarDate.getFullYear();
          month = this.calendarDate.getMonth() + 1;
          date = this.calendarDate.getDate()
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }

          if(this.chooseMonth != month) { // 日历点击不同月
            this.searchMonth = ''
          }

        }

        this.chooseDay = date

        if(this.chooseMonth != month || this.chooseYear != year) { // 不同年/不同月重新请求日历列表
          this.getCalendarList(year, month)
        } else {
          this.getTaskList(date)
        }

        this.chooseMonth = month
        this.chooseYear = year

      }
    },
    created() {
      var year = this.calendarDate.getFullYear();
      var month = this.calendarDate.getMonth() + 1;
      var date = this.calendarDate.getDate()
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      this.chooseMonth = month
      this.chooseYear = year
      this.chooseDay = date
      this.getCalendarList(year, month)
      this.getEffect()
      this.getDepart()
      this.dict.load('mstSendType')
    },

    mounted () {
      this.$nextTick(() => {
        this.chart1 = echarts.init(document.querySelector('#chart1'))
        this.chart2 = echarts.init(document.querySelector('#chart2'))
        window.addEventListener('resize', this.onResize)
      })
    },
    methods: {
      ...mapActions(['initOpenData', 'transCanvas']),
      onUserChange (e) {
        this.deptList = e
       this.getEffect()
      },
      selectDete() {
        if(!this.timeList || !this.timeList.length) {
          return this.$message.error('请选择自定义时间');
        }

        if(this.isEffectTimeSelect) { //宣发效果
          this.timeListEffect = this.timeList
          this.effectType = 3
          this.getEffect()
        } else {  //宣发明细
          this.timeListDepart = this.timeList
          this.departType = 3
          this.getDepart()
        }

        this.dialogDate = false
      },
      searchMonthChange() {
        this.calendarDate = this.searchMonth + '-1'
      },
      getCalendarList(year, month){
        this.instance.post(`/app/appmasssendingtask/statisticsCalendar?yyyyMM=${year}${month}`).then(res => {
          if (res.code == 0) {
            this.dateList = res.data
            this.getTaskList(this.chooseDay)
          }
        })
      },
      getTaskList(day) {
        this.taskList = this.dateList[day].taskList
      },
      changeEffectType(type) {
        if(this.effectType != 3) {
          this.timeList = []
        }else {
          this.timeList = this.timeListEffect
        }
        if(type == 3) {
          this.isEffectTimeSelect = true
          this.dialogDate = true
        }else {
          this.effectType = type
          this.getEffect()
        }
      },
      getEffect() {
        var startTime = this.timeListEffect[0] || '' , endTime = this.timeListEffect[1] || '', departId = ''
        if(this.deptList && this.deptList.length) {
          departId = this.deptList[0].id
        }
        this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}&startTime=${startTime}&endTime=${endTime}&departId=${departId}`).then(res => {
          if (res.code == 0) {
            this.effectData = res.data
            var xData = [], createData = [], executeData = [], receiveData = []
            res.data.trend.map(e => {
              if(this.effectType == 0 || this.effectType == 1) {
                e.ymd = e.ymd.substring(5, 10)
              }
              xData.push(e.ymd)
              createData.push(e.createCount)
              executeData.push(e.executeCount)
              receiveData.push(e.receiveCount)
            })

            this.setLineChart(xData, createData, 'createChart', ['#2891FF'])
            this.setLineChart(xData, executeData, 'executeChart', ['#FFB865'])
            this.setLineChart(xData, receiveData, 'receiveChart', ['#26D52B'])
            this.initChart1(res.data.tagTrend)
            this.initChart2(res.data.tagDistribution)
          }
        })
      },
      setLineChart(xData, yData, id, colorList) {
        this[id] = echarts.init(document.querySelector(`#${id}`))
        var option = {
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          grid: {
            left: '10px',
            right: '28px',
            bottom: '14px',
            top: '30px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: "plain"
          },
          color: colorList,
          series: [
            {
              data: yData,
              type: 'line'
            }
          ]
        }
        this[id].setOption(option)
      },
      changeDepartType(type) {
        if(this.departType != 3) {
          this.timeList = []
        }else {
          this.timeList = this.timeListDepart
        }
        if(type == 3) {
          this.isEffectTimeSelect = false
          this.dialogDate = true
        }else {
          this.departType = type
          this.getDepart()
        }
      },
      getDepart() {
        var startTime = this.timeListDepart[0] || '' , endTime = this.timeListDepart[1] || ''
        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}&startTime=${startTime}&endTime=${endTime}`).then(res => {
          if (res.code == 0) {
            if(res.data && res.data.length) {
              this.isDepartData = true
              var xData = [], yData = []
              res.data.map((item) => {
                this.departBarData.push(item)
                xData.push(item.deptName)
                yData.push(item.taskCount)
              })
              this.setBarChart(xData, yData)
            }else {
              this.isDepartData = false
            }
          }
        })
      },
      setBarChart(xData, yData) {
        this.departBarChart = echarts.init(document.querySelector(`#departBarChart`))
        var option = {
          color: ['#2891FF'],
          grid: {
            top: '10%',
            left: '2%',
            right: '2%',
            bottom: 90,
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: false
          //     },
          //     saveAsImage: {
          //       pixelRatio: 2
          //     }
          //   }
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: (data) => {
              var index = data[0].dataIndex
              return `<ww-open-data type="departmentName" openid="${this.departBarData[index].deptId}"></ww-open-data><br/>宣发任务数：${data[0].value}`
            }
          },
          dataZoom: [
            {
              type: 'inside'
            },
            {
              type: 'slider'
            }
          ],
          xAxis: {
            data: xData,
            silent: false,
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          yAxis: {
            splitArea: {
              show: false
            }
          },
          series: [
            {
              type: 'bar',
              data: yData,
              barWidth: 20,
              barGap: '250%',
              large: true
            }
          ]
        };

        // {
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       type: 'shadow'
        //     }
        //   },
        //   grid: {
        //     top: '10%',
        //     left: '2%',
        //     right: '2%',
        //     bottom: '2%',
        //     containLabel: true
        //   },
        //   color: ['#2891FF'],
        //   xAxis: {
        //     type: 'category',
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //   },
        //   yAxis: {
        //     type: 'value'
        //   },
        //   series: [
        //     {
        //       data: [120, 200, 150, 80, 70, 110, 130],
        //       type: 'bar',
        //       barWidth: 20,
        //       barGap: '250%',
        //     }
        //   ]
        // };
        this.departBarChart.setOption(option)
      },

      initChart1 (data) {
        const x = Object.keys(data)
        const tags = data[x[0]].map(v => v.tag)
        const a = tags.map(v => {
          return {
            name: v,
            type: 'line',
            data: x.map(e => {
              return data[e].filter(i => i.tag === v)[0].c
            })
          }
        })
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            type: "plain"
          },
          grid: {
            left: '10px',
            right: '28px',
            bottom: '14px',
            top: '30px',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 7,
              minValueSpan: 7
            },
            {
              start: 0,
              end: 7
            }
          ],
          // color: ['#2266FF', '#22AA99', '#F8B425', '#29ABF7', '#49DFCB'],
          xAxis: {
            type: 'category',
            axisLabel: {
              align: 'center',
              padding: [2, 0, 0, 0],
              interval: 0,
              fontSize: 14,
              color: '#666666'
            },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#E1E5EF'
              }
            },
            data: x
          },
          yAxis: {
            axisTick: {
              length: 0,
              show: false
            },
            splitLine: {
              show: true,
              lineStyle:{
                color: ['#E1E5EF'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#666666',
              align: 'left'
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#666666'
            },
            type: 'value'
          },
          series: tags.map(v => {
            return {
              name: v,
              type: 'line',
              data: x.map(e => {
                return data[e].filter(i => i.tag === v)[0].c
              })
            }
          })
        }
        this.chart1.setOption(option)
      },

      initChart2 (data) {
        let option = {
          grid: {
            left: '1%',
            right: '0%',
            bottom: '2%',
            top: '0px',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            axisPointer: {
            }
          },
          legend: {
            left: 'center',
            top: '0px',
            textStyle: {
            }
          },
          // color: ['#2266FF', '#22AA99', '#F8B425', '#29ABF7', '#49DFCB'],
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data.map(v => {
                return {
                  value: v.c,
                  name: v.tag
                }
              }),
              label: {
                normal: {
                  textStyle: {
                    fontSize: '12'
                  },
                  formatter: '{b}: {@2012} ({d}%)'
                }
              }
            }
          ]
        }
        this.chart2.setOption(option)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppAnnounceStatistics {
    height: 100%;
    .flex-between{
      display: flex;
      justify-content: space-between;
    }

    .bottom {
      display: flex;
    }
    .mar-b16{
      margin-bottom: 16px;
    }
    .mar-r0{
      margin-right: 0!important;
    }
    .statistics-content{
      padding: 0 24px 24px;
      background-color: #fff;
      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
      border-radius: 4px;
      margin-bottom: 20px;
      .flex-content{
        width: 100%;
        display: flex;
        margin-top: 16px;
        .flex-left{
          width: 50%;
          .date-header{
            padding: 12px 16px;
            border: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            p{
              line-height: 32px;
            }
          }
          .flex-date{
            display: flex;
            justify-content: space-between;
          }
          .tips{
            display: inline-block;
            padding: 0 4px;
            height: 16px;
            line-height: 16px;
            border-radius: 8px;
            background: #2891FF;
            font-size: 12px;
            font-family: ArialMT;
            color: #FFF;
            margin-top: 8px;
          }
        }
        .flex-right{
          width: 50%;
          margin-left: 16px;
          border: 1px solid #eee;
          .title{
            line-height: 56px;
            border-bottom: 1px solid #EEE;
            padding-left: 16px;
            font-size: 16px;
            font-family: MicrosoftYaHeiSemibold;
            color: #333;
          }
          .list-content{
            padding: 16px;
            height: 339px;
            box-sizing: border-box;
            overflow-y: scroll;
            background-color: #F9F9F9;
            box-sizing: border-box;
            .item-title{
              width: calc(100% - 100px);
              word-break: break-all;
              margin-bottom: 8px;
              font-size: 16px;
              font-family: MicrosoftYaHeiSemibold;
              color: #222;
              line-height: 24px;
            }
            .item-time{
              width: 100px;
              text-align: right;
              font-size: 16px;
              font-family: ArialMT;
              color: #888;
              line-height: 24px;
            }
            .item-info{
              display: inline-block;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              color: #222;
              line-height: 22px;
              span{
                display: inline-block;
                color: #222;
                word-break: break-all;
                // vertical-align: text-top;
              }
              .label{
                color: #999;
              }
            }
            .item-created{
              width: 152px;
              margin-bottom: 4px;
              .label{
                width: 56px;
              }
              .name{
                width: calc(100% - 56px);
              }
            }
            .item-dept{
              width: calc(100% - 152px);
              .label{
                width: 70px;
              }
              .name{
                width: calc(100% - 70px);
              }
            }
            .item-btn{
              color: #26f;
              cursor: pointer;
            }
          }
        }
      }
      .right-search{
        margin-top: 10px;
        div{
          display: inline-block;
        }
        .time-select{
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #222;
          line-height: 22px;
          padding: 6px 12px;
          border-radius: 2px;
          border: 1px solid #D0D4DC;
          margin-right: 8px;
          box-sizing: border-box;
          cursor: pointer;
          .dept-name{
            display: inline-block;
            width: 200px;
            height: 22px;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: bottom;
          }
          .el-icon-arrow-down{
            vertical-align: middle;
          }
        }
        .active{
          border: 1px solid #26f;
          color: #26f;
        }
      }
      .line-content{
        display: flex;
        .flex1{
          flex: 1;
          margin-right: 16px;
          .header{
            padding: 16px;
            width: 100%;
            height: 90px;
            background: #F9F9F9;
            border-radius: 2px;
            box-sizing: border-box;
            margin-bottom: 16px;
            p{
              font-size: 14px;
              font-family: MicrosoftYaHeiSemibold;
              color: #222;
              line-height: 22px;
              margin-bottom: 4px;
            }
            h2{
              font-size: 24px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #26F;
              line-height: 32px;
            }
          }
          .chart-content{
            width: 100%;
            padding: 16px;
            background: #F9F9F9;
            border-radius: 2px;
            box-sizing: border-box;
            .chart-title{
              font-size: 16px;
              font-family: MicrosoftYaHeiSemibold;
              color: #333;
              line-height: 24px;
            }
            .chart-box{
              width: 100%;
              height: 280px;
            }
          }
        }

      }
      #departBarChart{
        width: 100%;
        height: 300px;
      }
    }


    :deep( .el-calendar-table:not(.is-range) td.next),
    :deep( .el-calendar-table:not(.is-range) td.prev ){
      color: #ccc;
    }
    :deep( .el-calendar-table .el-calendar-day){
      height: 48px;
      line-height: 32px;
      padding-left: 12px;
      font-size: 14px;
      font-family: ArialMT;
    }
    .el-calendar-table:not(.is-range) td .current{
      color: #888;
    }
    :deep( .el-calendar__header){
      display: none;
    }
    :deep( .el-calendar__body){
      padding: 0;
    }
    :deep( .el-calendar-table thead th:nth-of-type(1)){
      border-left: 1px solid #eee;
    }
    :deep( .el-calendar-table thead th:nth-of-type(7)){
      border-right: 1px solid #eee;
    }
    :deep( .el-calendar-table tr td:first-child ){
      border-left: 1px solid #eee;
    }
    :deep( .el-calendar-table tr:first-child td ){
      border-top: 1px solid #eee;
    }
    :deep( .el-calendar-table td ){
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    :deep( .el-timeline-item__timestamp.is-top){
      margin-bottom: 0;
      padding-top: 0;
    }
    :deep( .el-timeline-item__node){
      background-color: #26F;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      left: 1px;
    }
    :deep( .el-card){
      border: none;
    }
    :deep( .el-card__body){
      padding: 8px;
    }
  }

  :deep( .ai-list__content ){
    padding: 0!important;

    .ai-list__content--right-wrapper {
      background: transparent!important;
      box-shadow: none!important;
      margin: 0!important;
      padding: 0 0 0!important;
    }
  }

  :deep( .AiPicker){
    display: inline-block;
  }
</style>
