<template>
  <page-content-wrapper ref="pageContentWrapper" style="background: #f5f5f5">
    <div class="data-view">
      <!-- 表单查询区 -->
      <base-form :form="form" @handleQuery="getTableList"/>

      <!-- 列表区域 -->
      <pro-table
        :fullscreenEl="fullscreenEl"
        :showLoading="showLoading"
        :column="mainColumn"
        :data="mainData"
        :pagination="pagination"
        @handleColumn="(filters) => { mainColumn = filters }"
        @handleChange="getTableList"
        @handleCellClick="openModal"
      >
        <template v-slot:action>
          <el-button>导出</el-button>
        </template>
      </pro-table>
    </div>
  </page-content-wrapper>
</template>

<script>
import BaseForm from 'test-quick-create-demo/vueComponents/BussBaseForm'
import ProTable from 'test-quick-create-demo/vueComponents/BussProTable'

export default {
  name: '<%_name_%>',
  components: {
    BaseForm,
    ProTable
  },
  data () {
    return {
      fullscreenEl: null, // 传递给ProTable的全屏幕元素，需要在mounted后赋值
      showLoading: false,
      // 保存查询条件
      form: [
        {
          type: 'daterange',
          label: '投放日期',
          model: 'date'
        }, {
          type: 'input',
          label: '广告位',
          placeholder: '广告位ID/名称',
          width: '170px',
          model: 'adKeyword'
        }, {
          type: 'input',
          label: '投放',
          placeholder: '投放ID/名称',
          model: 'putKeyword'
        }, {
          type: 'input',
          label: '创意',
          placeholder: '创意ID/名称',
          model: 'creativeKeyword'
        }
      ],
      mainData: [],
      mainColumn: [],
      // 分页对象
      pagination: {
        total_count: 0
      }
    }
  },
  mounted () {
    this.setFullscreenEl()
    this.mainColumn = [
      {
        prop: 'date',
        label: '日期',
        click: true
      },
      {
        prop: 'put_name',
        label: '投放名称'
      },
      {
        prop: 'put_id',
        label: '投放ID'
      },
      {
        prop: 'adsense_name',
        label: '广告位名称'
      },
      {
        prop: 'adsense_id',
        label: '广告位ID'
      },
      {
        prop: 'creative_name',
        label: '创意名称'
      },
      {
        prop: 'creative_id',
        label: '创意ID'
      },
      {
        prop: 'exposure_cn',
        label: '曝光'
      },
      {
        prop: 'click_cn',
        label: '点击'
      },
      {
        prop: 'click_rate',
        label: '点击率'
      }
    ]
    this.getTableList()
  },
  methods: {
    // 设置全屏幕元素
    setFullscreenEl () {
      this.fullscreenEl = this.$refs.pageContentWrapper.$el
    },
    // 首页列表查询
    getTableList (query = {}) {
      this.showLoading = true
      setTimeout(() => {
        this.showLoading = false
        this.mainData = [
          {
            date: '1985-02-21',
            put_id: '178927720805104',
            put_name: '$VDkJX',
            adsense_id: '4958451025467236',
            adsense_name: 'itQ6g*@',
            creative_id: '403096317398464',
            creative_name: 'U*oQ82J',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1981-11-03',
            put_id: '4958814359514188',
            put_name: '2QEE3yC',
            adsense_id: '-257426956894396',
            adsense_name: 'QzJMZ33',
            creative_id: '-5076059496582796',
            creative_name: 'Nh2x',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1974-04-29',
            put_id: '6483858211981976',
            put_name: 'w@l',
            adsense_id: '7401803876971316',
            adsense_name: 'Uqrd4',
            creative_id: '-836427397020048',
            creative_name: 'elxkny',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1975-09-27',
            put_id: '-1450323107012060',
            put_name: 'q6N',
            adsense_id: '-3860033928348040',
            adsense_name: '!GNz',
            creative_id: '-8748467410222416',
            creative_name: 'TRV',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1973-12-26',
            put_id: '-4680248695355508',
            put_name: 'pKV]e',
            adsense_id: '5636779671732716',
            adsense_name: 'vythJ',
            creative_id: '1938636756637276',
            creative_name: 'VvWSYvS',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1977-04-27',
            put_id: '4322525746990136',
            put_name: 'SWX]',
            adsense_id: '-6673987497814764',
            adsense_name: 'n5I',
            creative_id: '3185104121314288',
            creative_name: 'ADf$',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '2002-12-06',
            put_id: '-3384814412557448',
            put_name: 'k(AJhY',
            adsense_id: '5282765293609296',
            adsense_name: 'SkM^)x',
            creative_id: '2335635208857864',
            creative_name: 'SzE!',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1988-06-06',
            put_id: '4996944321117668',
            put_name: 'DJB8',
            adsense_id: '3025627644371216',
            adsense_name: 'iLZVCJD',
            creative_id: '-4743806888963416',
            creative_name: 'n8ubjg',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '1986-06-01',
            put_id: '-4988796660996292',
            put_name: 'hIv[',
            adsense_id: '-2885842159762056',
            adsense_name: 'LMEJi',
            creative_id: '-2666981834573632',
            creative_name: '5zU8PAF',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          },
          {
            date: '2013-07-18',
            put_id: '-3938968138879732',
            put_name: '0gy(Y',
            adsense_id: '-6563728419595944',
            adsense_name: '$kr%',
            creative_id: '-6991402789852616',
            creative_name: '&s[]V',
            exposure_cn: '300',
            click_cn: '200',
            click_rate: '100'
          }
        ]
        this.pagination.total_count = 50
      }, 500)
    },
    // 执行列点击事件
    openModal () {
      console.log('在这里添加你的事件')
    }
  }
}
</script>
