<template>
  <!-- 表格信息展示 -->
  <div class="table-info">
    <el-table
      :data="income"
      style="width: 100%"
      stripe
      highlight-current-row
      :header-cell-style="tableHeader"
      height="655"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选框列 -->
      <el-table-column type="selection" width="55" align="center" fixed>
      </el-table-column>
      <el-table-column
        label="素材ID"
        prop="video_id"
        align="center"
        width="130"
        fixed
      ></el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed>
        <!-- 详情与删除操作 -->
        <template slot-scope="scope">
          <el-button type="text" @click="detailClick(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="素材" prop="video_url" align="center" width="130">
        <template slot-scope="scope">
          <div class="video-bgc" @click="playVideo(scope.row)">
            <i class="el-icon-video-play"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="消耗"
        prop="cost"
        sortable
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="展示"
        prop="show_pv"
        sortable
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="点击"
        sortable
        prop="click"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="点击率"
        sortable
        prop="click_rate"
        align="center"
        width="100"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column
        label="激活数"
        sortable
        prop="active_num"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="激活率"
        sortable
        prop="active_rate"
        align="center"
        width="100"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column
        label="转化数"
        sortable
        prop="convert_num"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="转化成本"
        sortable
        prop="convert_cost"
        align="center"
        width="140"
      />
      <el-table-column
        label="转化率"
        sortable
        prop="convert_rate"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column
        label="采购成本"
        sortable
        prop="buy_price"
        align="center"
        width="100"
      />
      <el-table-column
        label="提现成本"
        sortable
        prop="draw_cash"
        align="center"
        width="100"
      />
      <el-table-column
        label="实际转化成本"
        sortable
        prop="real_convert_price"
        align="center"
        width="140"
      />
      <el-table-column
        label="素材预估收益"
        sortable
        prop="revenue"
        align="center"
        width="140"
      />
      <el-table-column
        label="素材预估roi"
        sortable
        prop="revenue_roi"
        align="center"
        width="140"
      />
      <el-table-column
        label="返点收益"
        sortable
        prop="rebate_price"
        align="center"
        width="100"
      />
      <el-table-column
        label="头条返点收益"
        sortable
        prop="toutiao_price"
        align="center"
        width="140"
      />
      <el-table-column
        label="快手返点收益"
        sortable
        prop="kuaishou_price"
        align="center"
        width="140"
      />
      <el-table-column
        label="广点通返点收益"
        sortable
        prop="gdt_price"
        align="center"
        width="150"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    income: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    /* 表头高亮 */
    tableHeader({ rowIndex }) {
      if (rowIndex == 0) {
        return "backgroundColor: #e1e4e5;color: #000;font-weight: 400; text-align: center";
      }
    },

    /* 点击详情按钮时 保存当前点击行数据 */
    detailClick(row) {
      this.$emit("detailClick", row);
    },

    /* 播放视频 */
    playVideo(row) {
      this.$emit("playVideo", row);
    },

    handleSelectionChange(val) {
      this.$emit("getSelectRow", val);
      console.log(12311231, val);
    },
    formatter(row, col, cellValue) {
      if (col.label == "激活率" || col.label == "点击率") {
        return (cellValue * 100).toFixed(2) + "%";
      } else {
        return cellValue;
      }
    },
  },
};
</script>

<style scoped>
.video-bgc {
  position: relative;
  width: 95px;
  height: 52px;
  background: #000;
}

.el-icon-video-play {
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}
</style>