<template>
  <div class="container">
    <el-form inline>
      <el-form-item label="应用选择">
        <el-select
          v-model="pkg"
          placeholder="应用选择"
          @change="fetchData"
          filterable
          clearable
        >
          <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
      :data="datas"
      style="width:100%"
      border
    >
      <el-table-column align="center" label="图标" prop="icon_url">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img :src="scope.row.icon_url" alt="" style="width: 150px;height: 150px">
            <img slot="reference" :src="scope.row.icon_url" style="width: 50px;height: 50px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="APP_ID" prop="app_cloud_id"></el-table-column>
      <el-table-column align="center" label="应用名" prop="app_name"></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="版本" prop="version"></el-table-column>
      <el-table-column align="center" label="上架时间" prop="publish_time"></el-table-column>
      <el-table-column align="center" label="包下载地址" prop="download_url" width="150" show-overflow-tooltip :formatter="unitCopy"></el-table-column>
      <el-table-column label="下载二维码" align="center" width="200">
        <template slot-scope="scope">
          <qrcode :value="scope.row.download_url" :options="{ width:100,height:100 }"></qrcode>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="primary"  @click="toDownload(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getBusinIncome, getSelectApps } from "@/api/cloud";
import  VueQrcode from '@chenfengyuan/vue-qrcode';
export default {
  components: {
    qrcode :  VueQrcode
  },
  data() {
    return {
      pkg: '',
      pkgList: [],
      datas: []
    }
  },
  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() {
      let params = {
        sqlId: 1354,
        pkg: this.pkg
      };
      getBusinIncome(params).then(res => {
        console.log(res)
        this.datas = res.result.data;
      })
    },
    toDownload(val) {
      console.log(val);
      window.location.href = val.download_url;
    },
    // 点击复制单元格内容方法
    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>
