<template>
  <div class="app-container">

    <el-form :inline="true">
      <el-form-item label="查询日期">
        <el-date-picker
          v-model="condition.startDate"
          :picker-options="pickerOptions"
          type="date"
          align="center"
          unlink-panels
          @change="fetchData"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item label="请选择应用">
        <zx-app-select
          v-model="condition.pkg"
          defaultValue=""
          menuCode="game.Overview,android"
          @change="fetchData"
        ></zx-app-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list">
      <el-table-column prop="datadate" label="日期" align="center"/>
      <el-table-column prop="appName" label="应用名" align="center"/>
      <el-table-column prop="hours" label="小时" align="center"/>
      <el-table-column prop="new_uv" label="激活人数" align="center">
        <template slot-scope="scope">
          {{ scope.row.new_uv? scope.row.new_uv : 0 }}
        </template>
      </el-table-column>
      <!--<el-table-column prop="pay_uv" label="付费人数" align="center">
        <template slot-scope="scope">
          {{ scope.row.pay_uv? scope.row.pay_uv : 0 }}
        </template>
      </el-table-column>-->
      <el-table-column prop="roi" label="投放建议" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.roi >= 1 ">继续放量</el-tag>
          <el-tag type="danger" v-else-if="scope.row.roi < 0.9 ">暂停放量</el-tag>
          <el-tag type="warning" v-else>注意控量</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { fetchCommonTable } from '@/api/common'
  import ZxAppSelect from '../../components/zx-common-cpn/zx-app-select'

  const moment = require("moment");
  export default {
    name: 'AgentRoi',
    components: { ZxAppSelect },
    data() {
      return {
        list: [],
        apps: [],
        condition: {
          startDate: '',
          endDate: '',
          pkg: '',
          source: 'oppo'
        }
      }
    },
    created(){
      this.condition.startDate = moment().format("YYYY-MM-DD");
      this.condition.endDate = moment().format("YYYY-MM-DD");
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.condition.endDate = this.condition.startDate
        fetchCommonTable({sqlId: 1397, ...this.condition}).then(resp => {
          this.list = resp.result.data
        })
      },

    }
  }
</script>

<style scoped>

</style>
