    <template>
      <div class="app-container calendar-list-container">
          <el-form label-position="right" label-width="100px"  style='width:100%;'>
          <el-row :gutter="24">
            <el-col :xs="23" :sm="23" :md="12" :lg="12" :xl="12">
              <div class="grid-content bg-purple" >
                <el-form-item  :label="$t('dc.dates')" >
                  <div class="block">
                  <el-date-picker
                    style="width:100%;"
                    v-model="listQuery.pcl_date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                  </div>
                </el-form-item>
              </div>
          </el-col>
          <el-col :xs="23" :sm="23" :md="11" :lg="11" :xl="11">
            <div class="grid-content bg-purple" >
              <el-form-item  :label="$t('promotion.name')" >
                <div class="block">
                    <el-select class="filter-item" v-model="reportQuery.prx_id" default-first-optionplaceholder="请选活动" style="width: 100%;">
                    <el-option v-for="item in promotionOptions" :key="item.id" :label="item.pd_title" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
          </el-row>          
          <el-row :gutter="24" style="margin-bottom:15px;" >
            <div  align="center" > <el-button class="filter-item" type="primary" v-waves :loading ="buttonloading" icon="el-icon-search" @click="handleFilterfirst">
            {{$t('table.search')}}
          </el-button>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-delete" @click="handleref">
            {{$t('table.cancel')}}
          </el-button>
          </div>
          </el-row>
          </el-form>
        <div class="dashboard-editor-container">
        <el-row class="panel-group" :gutter="40">
            <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col" v-for="item in channelOptions" :key="item.id">
            <div class='card-panel' @click="handleSetLineChartData(item)">
              <div class="card-panel-icon-wrapper icon-people">
                <svg-icon icon-class="chart" class-name="card-panel-icon" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">{{item.pcl_channel_name}}</div>
                <count-to class="card-panel-num" :startVal="0" :endVal="item.pcl_channel_group" :duration="2600"></count-to>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--LineChart-->
        <el-row v-if="lineChartData !== null" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <line-chart :chart-data="lineChartData"></line-chart>
        </el-row>
        <el-row v-else >
          <span class = "el-table__empty-text">暂无数据</span>
        </el-row>
        </div>          
      </div>
    </template>
    <script>
      import { getBranches } from '@/api/article'
      import { getPromotionDCs, groupPromotionChannelLogs, getPClCharts, getPromotionChannel } from '@/api/promotion'
      import waves from '@/directive/waves' // 水波纹指令
      import CountTo from 'vue-count-to'
      import LineChart from './components/LineChart'
      export default {
        components: {
          CountTo,
          LineChart
        },
        name: 'promotionchannel',
        directives: {
          waves
        },
        data() {
          return {
            lineChartData: {
              lineData: {},
              dataDays: [],
              dataChannel: []
            },
            buttonloading: false,
            listQuery: {
              pcl_date: null
            },
            reportQuery: {
              prx_id: null,
              pcl_startdate: null,
              pcl_enddate: null,
              pcl_channel_code: null
            },
            downloadLoading: false,
            branchesOptions: [],
            promotionOptions: [],
            channelOptions: [],
            queryChannelOptions: []
          }
        },
        created() {
          this.list = []
          getBranches().then(response5 => {
            this.branchesOptions = response5.data
          })
          getPromotionChannel().then(response7 => {
            this.queryChannelOptions = response7.data
          })
          this.getList()
        },
        methods: {
          getList() {
            if (this.listQuery.pcl_date !== null) {
              var startdate = new Date(this.listQuery.pcl_date[0])
              var enddate = new Date(this.listQuery.pcl_date[1])
              this.reportQuery.pcl_startdate = startdate.getFullYear() + '-' + (startdate.getMonth() + 1) + '-' + startdate.getDate()
              this.reportQuery.pcl_enddate = enddate.getFullYear() + '-' + (enddate.getMonth() + 1) + '-' + enddate.getDate()
            } else {
              this.reportQuery.pcl_startdate = null
              this.reportQuery.pcl_enddate = null
            }
            getPromotionDCs().then(response6 => {
              if (response6.data !== null && response6.data !== 'undefined' && response6.data !== undefined && response6.data !== '') {
                this.promotionOptions = response6.data
                this.reportQuery.prx_id = response6.data[0].id
              }
              groupPromotionChannelLogs(this.reportQuery).then(response => {
                this.channelOptions = response.data
              })
              getPClCharts(this.reportQuery).then(response2 => {
                if (response2.data !== null && response2.data !== 'undefined' && response2.data !== undefined && response2.data !== '') {
                  this.lineChartData = response2.data.lineChartData
                } else {
                  this.lineChartData = null
                }
              })
            })
          },
          handleFilterfirst() {
            this.buttonloading = true
            if (this.listQuery.pcl_date !== null) {
              var startdate = new Date(this.listQuery.pcl_date[0])
              var enddate = new Date(this.listQuery.pcl_date[1])
              this.reportQuery.pcl_startdate = startdate.getFullYear() + '-' + (startdate.getMonth() + 1) + '-' + startdate.getDate()
              this.reportQuery.pcl_enddate = enddate.getFullYear() + '-' + (enddate.getMonth() + 1) + '-' + enddate.getDate()
            } else {
              this.reportQuery.pcl_startdate = null
              this.reportQuery.pcl_enddate = null
            }
            groupPromotionChannelLogs(this.reportQuery).then(response => {
              this.channelOptions = response.data
            })
            getPClCharts(this.reportQuery).then(response2 => {
              if (response2.data !== null && response2.data !== 'undefined' && response2.data !== undefined && response2.data !== '') {
                this.lineChartData = null
                this.lineChartData = response2.data.lineChartData
              } else {
                this.lineChartData = null
              }
              this.buttonloading = false
            })
          },
          handleSetLineChartData(val) {
            this.reportQuery.pcl_channel_code = val.pcl_channel_code
            if (this.listQuery.pcl_date !== null) {
              var startdate = new Date(this.listQuery.pcl_date[0])
              var enddate = new Date(this.listQuery.pcl_date[1])
              this.reportQuery.pcl_startdate = startdate.getFullYear() + '-' + (startdate.getMonth() + 1) + '-' + startdate.getDate()
              this.reportQuery.pcl_enddate = enddate.getFullYear() + '-' + (enddate.getMonth() + 1) + '-' + enddate.getDate()
            } else {
              this.reportQuery.pcl_startdate = null
              this.reportQuery.pcl_enddate = null
            }
            getPClCharts(this.reportQuery).then(response2 => {
              if (response2.data !== null && response2.data !== 'undefined' && response2.data !== undefined && response2.data !== '') {
                this.lineChartData = null
                this.lineChartData = response2.data.lineChartData
              } else {
                this.lineChartData = null
              }
              this.buttonloading = false
            })
          },
          handleref() {
            this.listQuery.pcl_date = null
            this.reportQuery.pcl_channel_code = null
          }
        }
      }
    </script>
  <style rel="stylesheet/scss" lang="scss" scoped>
    .panel-group {
      margin-top: 18px;
      .card-panel-col{
        margin-bottom: 32px;
      }
      .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);
        &:hover {
          .card-panel-icon-wrapper {
            color: #fff;
          }
          .icon-people {
            background: #40c9c6;
          }
          .icon-message {
            background: #36a3f7;
          }
          .icon-money {
            background: #f4516c;
          }
          .icon-shoppingCard {
            background: #34bfa3
          }
        }
        .icon-people {
          color: #40c9c6;
        }
        .icon-message {
          color: #36a3f7;
        }
        .icon-money {
          color: #f4516c;
        }
        .icon-shoppingCard {
          color: #34bfa3
        }
        .card-panel-icon-wrapper {
          float: left;
          margin: 14px 0 0 14px;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }
        .card-panel-icon {
          float: left;
          font-size: 48px;
        }
        .card-panel-description {
          float: right;
          font-weight: bold;
          margin: 26px;
          margin-left: 0px;
          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }
          .card-panel-num {
            font-size: 20px;
          }
        }
      }
    }
  </style>
  <style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
    