<style></style>
<template>
  <div class="admin-detail">
    <a-row :gutter="10" style="margin-top:10px">
      <a-col :span="24">
        <a-card style="width:100%;">
          <!-- advertiserName -->
          <a-input
            placeholder="请输入广告主名称"
            v-model="advertiserName"
            style="width:300px;margin:10px 10px 10px 0"
          ></a-input>
          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          <a-button type="primary" @click="exportExcel" style="margin-left: 8px">导出</a-button>
          <a-button type="primary" @click="backStatistics" style="float:right;margin:10px 10px 10px 0"
            >返回公司报表</a-button
          >
          <br />
          是否展示消耗为0的数据：
          <a-radio-group buttonStyle="solid" v-model="isHasData" @change="onChageLogin" style="margin:10px">
            <a-radio-button value="1">是</a-radio-button>
            <a-radio-button value="0">否</a-radio-button>
          </a-radio-group>

          <a-table
            :columns="columns"
            :dataSource="dataList"
            bordered
            :loading="loading"
            size="middle"
            :scroll="{ x: 2500 }"
            :pagination="ipagination"
            @change="pageChange"
          >
            <!-- <span slot="isHasData" slot-scope="text">{{ text == 0 ? '否' : '是' }}</span> -->
            <!-- <span slot="fengmianClickRate" slot-scope="text">{{ text | getBo }}</span>
            <span slot="convertClickRate" slot-scope="text">{{ text | getBo }}</span> -->
            <span slot="industry" slot-scope="text">{{ text ?text:'暂无数据' }}</span>
            <span slot="secondIndustry" slot-scope="text">{{  text ?text:'暂无数据'  }}</span>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'

import { getAction, postAction, downFilePost } from '@/api/manage'
import { mapGetters } from 'vuex'

import qs from 'qs'
import { JeecgListMixin } from '@/mixins/ipagination'
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    align: 'center',
    fixed: 'left',
    width: 150
  },
  //   {
  //     title: '是否有数据',
  //     dataIndex: 'isHasData',
  //     key: 'isHasData',
  //     filters: [
  //       { text: '是', value: '1' },
  //       { text: '否', value: '0' }
  //     ],
  //     onFilter: (value, record) =>
  //       record.isHasData
  //         .toString()
  //         .toLowerCase()
  //         .includes(value.toLowerCase()),
  //     scopedSlots: { customRender: 'isHasData' },
  //     align: 'center'
  //   },
  {
    title: '快手id',
    dataIndex: 'kid',
    key: 'kid',
    align: 'center'
  },
  {
    title: '广告主名称',
    dataIndex: 'advertiserName',
    key: 'advertiserName',
    align: 'center'
  },
  {
    title: '广告主id',
    dataIndex: 'accountId',
    key: 'accountId',
    align: 'center'
  },
  {
    title: '账户名称',
    dataIndex: 'accountName',
    key: 'accountName',
    align: 'center'
  },
  {
    title: '有消费计划数',
    dataIndex: 'costCampaignCount',
    key: 'costCampaignCount',
    align: 'center',
    // sorter: (a, b) => a.costCampaignCount - b.costCampaignCount
  },
  {
    title: '总余额',
    dataIndex: 'balance',
    key: 'balance',
    align: 'center',
    // sorter: (a, b) => a.balance - b.balance
  },
  {
    title: '总消耗',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center',
    // sorter: (a, b) => a.cost - b.cost
  },
  {
    title: '消耗环比',
    dataIndex: 'chargeDayOnDayPercent',
    key: 'chargeDayOnDayPercent',
    align: 'center',
    // sorter: (a, b) => a.cost - b.cost
  },
  {
    title: '现金消耗',
    dataIndex: 'xianjinCost',
    key: 'xianjinCost',
    align: 'center',
    // sorter: (a, b) => a.xianjinCost - b.xianjinCost
  },
  {
    title: '返点消耗',
    dataIndex: 'fandianCost',
    key: 'fandianCost',
    align: 'center',
    // sorter: (a, b) => a.fandianCost - b.fandianCost
  },
  {
    title: '框返消耗',
    dataIndex: 'kuangfanCost',
    key: 'kuangfanCost',
    align: 'center',
    // sorter: (a, b) => a.kuangfanCost - b.kuangfanCost
  },
  {
    title: '激励消耗',
    dataIndex: 'jiliCost',
    key: 'jiliCost',
    align: 'center',
    // sorter: (a, b) => a.jiliCost - b.jiliCost
  },
  {
    title: '信⽤消耗',
    dataIndex: 'xinyongCost',
    key: 'xinyongCost',
    align: 'center',
    // sorter: (a, b) => a.xinyongCost - b.xinyongCostxinyongCost
  },
  {
    title: '封⾯曝光数',
    dataIndex: 'fengmianShowCount',
    key: 'fengmianShowCount',
    align: 'center',
    // sorter: (a, b) => a.fengmianShowCount - b.fengmianShowCount
  },
  {
    title: '封⾯点击数',
    dataIndex: 'fengmianClickCount',
    key: 'fengmianClickCount',
    align: 'center',
    // sorter: (a, b) => a.fengmianClickCount - b.fengmianClickCount
  },
  {
    title: '素材曝光数',
    dataIndex: 'sucaiShowCount',
    key: 'sucaiShowCount',
    align: 'center',
    // sorter: (a, b) => a.sucaiShowCount - b.sucaiShowCount
  },
  {
    title: '行为数',
    dataIndex: 'convertCount',
    key: 'convertCount',
    align: 'center',
    // sorter: (a, b) => a.convertCount - b.convertCount
  },
  {
    title: '封⾯点击率',
    dataIndex: 'fengmianClickRate',
    key: 'fengmianClickRate',
    scopedSlots: { customRender: 'fengmianClickRate' },
    align: 'center',
    // sorter: (a, b) => a.fengmianClickRate - b.fengmianClickRate
  },
  {
    title: '转化点击率',
    dataIndex: 'convertClickRate',
    key: 'convertClickRate',
    scopedSlots: { customRender: 'convertClickRate' },
    align: 'center',
    // sorter: (a, b) => a.convertClickRate - b.convertClickRate
  },
  {
    title: '一级行业',
    dataIndex: 'industry',
    key: 'industry',
    scopedSlots: { customRender: 'industry' },
    align: 'center',
 
  },
  {
    title: '二级行业',
    dataIndex: 'secondIndustry',
    key: 'secondIndustry',
    scopedSlots: { customRender: 'secondIndustry' },
    align: 'center',
    
  }
]
export default {
  name: 'company-detail',
  components: {
    ATooltip,
    ACol
  },
  mixins: [JeecgListMixin],
  data: function() {
    return {
      isHasData: '1',
      loginfo: {},
      barData,
      loading: false,
      a: '',
      columns: columns,
      dataList: [],
      dataListAll: [],
      advertiserName: ''
    }
  },
  filters: {
    getBo: function(value) {
      if (value) {
        return (value * 100).toFixed(2) + '%'
      } else {
        return '0.00%'
      }
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    onChageLogin(e) {
      // if (e.target.value == 1) {
      //   this.dataList = this.dataListAll
      // } else {
      //   this.dataList = this.dataListAll.filter(item => {
      //     return item.isHasData == 1
      //   })
      // }
      this.searchQuery();
    },
    backStatistics() {
      this.$router.replace({
        path: '/Statistics/companyStatistics'
      })
    },
    exportExcel() {
      var weekDate = localStorage.getItem('companyDate')
      var params = {}
      params.date = weekDate
      params.isExportNullData = this.isHasData
      downFilePost('/agent/kuaiShouDailyAgent/companyReportAccountDetailListExportExcel', params).then(
        res => {
          let blob = new Blob([res], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          })
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = weekDate + '详情报表' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        }
      )
    },
    searchReset() {
      this.advertiserName = ''
      this.isHasData = '1'
      this.searchQuery()
    },
    searchQuery() {
      var weekDate = localStorage.getItem('companyDate')
      this.columns = columns
      this.loading = true
      postAction('/agent/kuaiShouDailyAgent/companyReportAccountDetailList', {
        date: weekDate,
        advertiserName: this.advertiserName,
        page:this.ipagination.current,
        pageSize:10,
        isExportNullData:this.isHasData
      }).then(res => {
        this.loading = false
        if (res.success) {
          this.dataListAll = this.dataList = res.result.list.map((item, index) => {
            return {
              ...item,
              key: index
            }
          });
          this.ipagination.total=res.result.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    pageChange(pagination, filters, sorter, { currentDataSource }){            
        this.ipagination.current=pagination.current;
        this.searchQuery()
    },
  },
  mounted() {
    var weekDate = localStorage.getItem('companyDate')
    this.columns = columns
    this.loading = true
    postAction('/agent/kuaiShouDailyAgent/companyReportAccountDetailList', { 
      date: weekDate, 
      page:this.ipagination.current,
      pageSize:10,
      isExportNullData:this.isHasData
    }).then(res => {
      this.loading = false
      if (res.success) {
        this.dataListAll = this.dataList = res.result.list.map((item, index) => {
          return {
            ...item,
            key: index
          }
        })
         this.ipagination.total=res.result.total
      } else {
        this.$message.error(res.message)
      }
    })
  }
}
</script>
