<template>
  <div class="super-page">
    <el-table
      :data="tableData"
      :header-cell-style="headerLight"
      :cell-style="{ align: 'center' }"
      fit
      stripe
      border
      height="60vh"
    >
      <template v-for="item in tHeader">
        <template v-if="item.id == 1">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="item.id"
            align="center"
          >
            <template slot-scope="scope">
              <span :style="{ color: 'blue' }">{{ scope.row.appName }}</span>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="item.id"
            align="center"
            sortable
            :formatter="formatter"
          />
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>
import { tHeader } from "./tHeader";
import { fetchCommonTable } from "@/api/common";

export default {
  props: {
    checkedVideo: {
      type: Array,
      require: true,
    },
    jobClassify: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      tableData: [],
      tHeader: tHeader,
    };
  },

  created() {
    this._fetchCommonTable();
  },

  methods: {
    // 网络请求 一级页面的全部数据
    _fetchCommonTable() {
      let params = {
        sqlId: 1330,
        director: this.jobClassify.director,
        cameraman: this.jobClassify.cameraman,
        editor: this.jobClassify.editor,
        videoSrc: this.checkedVideo.toString(),
      };
      fetchCommonTable(params).then((res) => {
        this.tableData = res.result.data;
      });
    },

    formatter(row, col, cellValue) {
      if (col.label == "点击率" || col.label == "转化率") {
        return (cellValue * 100).toFixed(2) + "%";
      } else {
        return cellValue;
      }
    },

    // 表头单元格高亮
    headerLight() {
      return {
        backgroundColor: "#e1e4e5",
        color: "#333333",
        textAlign: "center",
      };
    },
  },
};
</script>

<style scoped>
.super-page {
  margin-top: 20px;
}
</style>