<template>
  <el-button type="primary" class="export" @click="exportfun"> 导出 </el-button>
  <!-- <div style="line-height: 3.5em;" v-if="item.showTime" v-text="'播出时间：' + item.showTime"></div> -->
  <el-table :data="list" @sort-change="sortFun">
    <el-table-column type="expand">
      <template #default="props">
        <self-video v-if="props.row.video_url && props.row.flow_url" :item="props.row" />
        <self-line v-else :item="props.row" />
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="日期"
      prop="stadate"
      sortable="custom"
    />
    <el-table-column
      align="center"
      label="播出时间"
      prop="statime"
    />
    <el-table-column align="center" label="栏目" prop="program_name" />
    <el-table-column
      align="center"
      label="市场占有率"
      prop="occrate"
      sortable="custom"
    >
      <template #default="scope"> {{ scope.row.occrate }}% </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="收视率"
      prop="watchrate"
      sortable="custom"
    >
      <template #default="scope">
        <watchrate-ele
          :watchrate="scope.row.watchrate"
          :zoom="scope.row.maxRate"
        />
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    @current-change="changePage"
    background
    layout="prev, pager, next"
    :total="resultP.total"
  />
</template>
<script setup>
// @ is an alias to /src
import config from '../../../config/index';
import { epgResult } from '@/api/index';
import { defineProps, ref } from 'vue';
import watchrateEle from '../components/watchrate.vue';
import selfVideo from '../components/video.vue';
import selfLine from '../components/line.vue';

const props = defineProps({
  item: Object,
  select: String,
});
const resultP = ref({
  programId: props.item.id,
  page: 1,
  pageSize: 10,
  sort: 'STADATE',
  order: 'DESC',
  total: 1000,
});

const list = ref([]);

function getEpgResult() {
  epgResult(resultP.value).then(r => {
    resultP.value.total = r.total || 0;
    list.value = (r.data || []).map(v => {
      v.maxMarketRate = r.maxMarketRate;
      v.maxRate = r.maxRate;
      return v;
    });
  });
}
getEpgResult();

function sortFun(column) {
  resultP.value.order = column.order ? config.order[column.order] : 'DESC';
  resultP.value.sort = column.prop ? column.prop.toUpperCase() : 'STADATE';
  resultP.value.page = 1;
  getEpgResult();
}

function changePage(num) {
  resultP.value.page = num;
  getEpgResult();
}

function exportfun() {
  let xhttp;
  if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
  else xhttp = new window.ActiveXObject('Microsoft.XMLHTTP');
  xhttp.responseType = 'blob';
  xhttp.open(
    'GET',
    config.base.url2 + '/epg-export?programId=' + props.item.id,
    true
  );
  xhttp.send();
  xhttp.onreadystatechange = function () {
    if (this.readyState != 4 || this.status != 200) return;
    // 组装a标签
    let elink = document.createElement('a');
    // 设置下载文件名
    let D = new Date(),
      M = D.getMonth() + 1,
      E = D.getDate();
    M > 9 ? '' : (M = ['0', M].join(''));
    E > 9 ? '' : (E = ['0', E].join(''));
    elink.download =
      props.item.programName + ' ' + [D.getFullYear(), M, E].join('-') + '.csv';
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(this.response);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
  };
}
</script>

<style></style>
