<template>
  <div class="container">
    <el-form inline>
      <el-form-item label="应用选择">
        <el-select
          v-model="pkg"
          filterable
          clearable
          placeholder="请选择应用"
          @change="fetchData()"
        >
          <el-option
            v-for="item in pkgList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

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

    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      element-loading-text="玩命加载中"
      height="500"
      border
    >
      <el-table-column align="center" label="缩略图" prop="thumbnail" width="150">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img :src="scope.row.thumbnail" alt="" style="width: 350px;height: 500px">
            <img slot="reference" :src="scope.row.thumbnail" style="width: 105px;height: 196px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号id" prop="account_id"></el-table-column>
      <el-table-column align="center" label="广告主id" prop="advertiser_id"></el-table-column>
      <el-table-column align="center" label="广告主名称" prop="advertiser_name"></el-table-column>
      <el-table-column align="center" label="落地页_ID" prop="site_id"></el-table-column>
      <el-table-column align="center" label="落地页名称" prop="site_name"></el-table-column>
      <el-table-column align="center" label="落地页类型" prop="site_type"></el-table-column>
      <el-table-column align="center" label="落地页地址" prop="site_url" width="150" :formatter="unitCopy">
        <template slot-scope="scope">
          <a :href="scope.row.site_url"
            target="_blank"
            class="buttonText">{{scope.row.site_url}}</a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteRow(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSelectApps } from '@/api/cloud.js';
import { getBusinIncome } from '@/api/cloud.js';
export default {
  data() {
    return {
      pkg: '',
      pkgList: [],
      tableData: [],
      loading: false
    }
  },
  created() {
    this._fetchAppList();
  },
  methods: {
    // 网络请求 获取app列表
    _fetchAppList() {
      const params = {
        platformId: 5,
        menuCode: "game.Overview,android,thirdPkg",
      };
      getSelectApps(params).then((response) => {
        if (response.result.data[0].value == "") {
          response.result.data.splice(0, 1);
        }
        this.pkgList = response.result.data;
      });
    },
    // 网络请求 获取表格数据
    fetchData() {
      this.loading = true;
      const params = {
        sqlId: 1356,
        pkg: this.pkg,
      };
      getBusinIncome(params).then((res)=>{
        this.loading = false;
        this.tableData = res.result.data;
      })
    },
    // 点击复制单元格内容方法
    unitCopy (row, col, cellValue) {
      return (
        <span
          onClick={() => {
            this.copyText(cellValue);
          }}
        >
          {cellValue}
        </span>
      );
    },
    // 点击复制功能实现
    copyText(text) {
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = text; // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message.success(`${text}复制成功`);
    },
  }
}
</script>

<style scoped>
  .container {
    padding: 25px;
  }
</style>