<template>
  <div class="live">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/all_aedia/overview' }">
        全媒体平台
      </el-breadcrumb-item>
      <el-breadcrumb-item>直播排行</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      size="small"
      :inline="true"
      :model="search"
      class="demo-form-inline"
    >
      <el-form-item label="部门">
        <el-select v-model="search.department">
          <el-option
            v-for="v in datas.department"
            :label="v"
            :value="v"
            :key="v"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="栏目">
        <el-select v-model="search.column">
          <el-option
            v-for="v in datas.column"
            :label="v.title"
            :value="v.title"
            :key="v.title"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input clearable v-model="search.keyword" />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="search.date"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="() => getlist()"> 提交 </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
      border
      :data="tableData"
      stripe
      style="width: 100%"
      @row-click="getIncome"
    >
      <el-table-column
        align="center"
        header-align="center"
        type="index"
        label="排行"
        width="50"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="title"
        label="直播名"
        width="300"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="centerName"
        label="中心"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="column"
        label="栏目"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="displayName"
        label="创建人"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="start"
        label="直播开始时间"
      >
        <template #default="scope">
          {{ timeFormat(scope.row.start) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="views"
        label="观看人次"
      >
        <template #default="scope">
          <countTo
            :startVal="scope.row.views || 0"
            :endVal="scope.row.views || 0"
            :duration="100"
          ></countTo>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="money"
        label="收入"
      >
        <template #default="scope">
          <countTo
            :startVal="scope.row.money || 0"
            :endVal="scope.row.money || 0"
            :duration="100"
          ></countTo>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-pagination
      @current-change="currentChange"
      :current-value="search.page"
      layout="prev, pager, next"
      :total="search.total"
    />

    <el-dialog
      v-model="dialogList.length"
      :title="clickRowData.title"
      width="50%"
    >
      <el-table
        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
        border
        :data="dialogList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          align="center"
          header-align="center"
          type="userName"
          label="付款人"
        >
          <template #default="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="money"
          label="付款金额"
        />
      </el-table>
      <el-pagination
        @current-change="soncurrentChange"
        layout="prev, pager, next"
        :total="clickRowData.total || 0"
      />
    </el-dialog>
  </div>
</template>
<script>
// 直播
import countTo from '@/components/counto/vue-countTo.vue';
import {
  getCloudLive,
  getCenter,
  getCloudLiveList,
  getIncomeist,
} from '@/api/newMdeiaApi.js';
import dayjs from 'dayjs';
const T = dayjs(Date.now() - 86400000);
const T0 = dayjs(Date.now() - 86400000*30);
export default {
  name: 'live',
  data() {
    return {
      T,
      dialogVisible: false,
      search: {
        column: '',
        department: '',
        date: [T0.format('YYYY-MM-DD'), T.format('YYYY-MM-DD')],
        keyword: '',
        page: 1,
        size: 10,
        total: 0,
        sonpage: 1,
      },
      datas: {
        department: [],
        column: [],
      },
      tableData: [],
      dialogList: [],
      clickRowData: {},
    };
  },
  mounted() {
    Promise.all([getCloudLive(), getCenter()]).then(li => {
      this.datas.department = ['全部', ...li[1]];
      this.search.department = this.datas.department[0];
      this.datas.column = [
        {
          id: -1,
          title: '全部',
        },
        ...li[0],
      ];
      this.search.column = this.datas.column[0].title;
      this.getlist();
    });
  },
  methods: {
    getlist() {
      const column = this.search.column === '全部' ? '' : this.search.column;
      const center =
        this.search.department === '全部' ? '' : this.search.department;
      const st = dayjs(this.search.date[0]);
      const et = dayjs(this.search.date[1]);
      getCloudLiveList({
        start: st.format('YYYY-MM-DD'),
        end: et.format('YYYY-MM-DD'),
        column,
        center,
        keyword: this.search.keyword,
        page: this.search.page,
        pageSize: this.search.size,
      }).then(r => {
        this.search.total = r.total || 0;
        this.tableData = r.records || [];
      });
    },
    disabledDate(time) {
      let out = true;
      if (time.getTime() < Date.now()) out = false;
      return out;
    },
    timeFormat(t) {
      const d = dayjs(t);
      return d.format('YYYY-MM-DD');
    },
    currentChange(page) {
      this.search.page = page;
      this.getlist();
    },
    getIncome(row) {
      this.search.sonpage = 1;
      this.getson(row);
    },
    soncurrentChange() {
      this.getIncome(this.clickRowData);
    },
    getson(row) {
      getIncomeist({
        liveId: row.id,
        page: this.search.sonpage++,
        size: 10,
      }).then(r => {
        if (!r || !r.records.length) {
          this.dialogList = [];
          this.clickRowData = {};
          return;
        }
        this.clickRowData = { ...row, ...r };
        this.dialogList = r.records;
      });
    },
  },
  components: {
    countTo,
  },
};
</script>
<style lang="scss">
.live {
  width: 100%;
  height: 100vh;
  padding: 1em;
}
</style>
