<template>
  <div class="">
    <!-- banner 详情的弹框 -->
    <el-dialog
      title="banner详情"
      :visible.sync="detailsDlgVisible"
      width="80%"
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      @close="handleClose"
    >
      <el-table style="margin-bottom: 30px" :data="tableList" border>
        <el-table-column align="center" prop="Sort" label="序号" width="80"></el-table-column>
        <el-table-column align="center" prop="BannerTypeName" label="类型" width="80"></el-table-column>
        <el-table-column prop="Title" label="主标题" min-width="200">
          <template #header>
            <div style="text-align: center">主标题</div>
          </template>
        </el-table-column>
        <el-table-column prop="Subtitle" label="副标题" min-width="100">
          <template #header>
            <div style="text-align: center">副标题</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="img" label="背景图" width="190">
          <template slot-scope="{ row }">
            <el-image @click="previewImg(row)" style="width: 160px; height: 60px" :src="row.IndexImg"> </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="100">
          <template slot-scope="{ row }">
            {{ row.Status === 1 ? "已发布" : "已下线" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ModifyTime" label="更新时间" width="180"></el-table-column>
        <el-table-column align="center" prop="pv" label="pv/uv" width="100">
          <template slot-scope="{ row }">
            <div class="pv-uv-download">
              <span>{{ row.Pv }}/{{ row.Uv }}</span>
              <a :href="exportPvUv(row.BannerId)" download>
                <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
              </a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  props: {
    tableDetailList: {
      type: Array,
      default: [],
    },
    detailsDlgVisible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    detailsDlgVisible: {
      handler(val) {
        val && this.getDetailData();
      },
    },
  },
  data() {
    return { tableList: [] };
  },
  methods: {
    // 获取详情数据
    async getDetailData() {
      const res = await raiInterface.getBannerDetail({
        BannerId: this.tableDetailList.BannerId,
      });
      if (res.Ret === 200) {
        this.$nextTick(() => {
          this.tableList = [res.Data.Detail];
        });
      }
    },
    // 关闭弹框
    handleClose() {
      this.$emit("update:detailsDlgVisible", false);
    },
    previewImg(item) {
      let obj = {
        mainTitle: item.Title,
        twoTitle: item.Subtitle,
      };
      this.$emit("previewImg", item.ImgId, obj);
    },
    // 下载pv/uv 地址
    exportPvUv(id) {
      const url = process.env.API_ROOT + "/cygx/banner/PvExport?BannerId=" + id + "&" + localStorage.getItem("auth") || "";
      return url;
    },
  },
};
</script>
<style scoped lang="scss">
.pv-uv-download {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }
}
</style>
