<template>
  <el-table
    :data="tableData"
    stripe
    border
    fit
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{
      textAlign: 'center',
      backgroundColor: '#e1e4e5',
      color: '#000',
    }"
  >
    <template v-for="(item, index) in tHeader">
      <template v-if="item.prop == 'details'">
        <el-table-column :label="item.label" :key="index">
          <template slot-scope="scope">
            <span
              style="cursor: pointer; color: blue"
              @click="check(scope.row.details)"
              >查看</span
            >
          </template>
        </el-table-column>
      </template>
      <template v-else-if="item.prop == 'url'">
        <el-table-column :label="item.label" :key="index" width="110px">
          <template slot-scope="scope">
            <div @click="playVideo(scope.row.url)" class="video">
              <i class="el-icon-video-camera-solid"></i>
            </div>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column :prop="item.prop" :label="item.label" :key="index" />
      </template>
    </template>
  </el-table>
</template>

<script>
const tHeader = [
  { prop: "id", label: "id" },
  { prop: "datadate", label: "日期" },
  { prop: "appName", label: "应用" },
  { prop: "video_id", label: "视频ID" },
  { prop: "url", label: "视频" },
  { prop: "cus_material_id", label: "素材表id" },
  { prop: "score", label: "排序得分" },
  { prop: "details", label: "json_data" },
];
export default {
  props: {
    tableData: {
      type: Array,
      require: true,
    },
  },

  data() {
    return {
      tHeader: tHeader,
    };
  },

  methods: {
    check(json) {
      this.$emit("checkDetail", json);
    },

    playVideo(url) {
      this.$store.commit("changeDialogState", { status: true, url });
    },
  },
};
</script>

<style>
.el-icon-video-camera-solid {
  color: #fff;
}
</style>

<style scoped>
.video {
  width: 80px;
  height: 40px;
  background-color: #000;
  border-radius: 8px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>