<template>
  <div class="user-data">
    <div class="table">
      <a-radio-group
        v-model:value="is_paid"
        button-style="solid"
        @change="getList({ current: 1 })"
        style="margin-bottom: 10px"
      >
        <a-radio-button value="">全部</a-radio-button>
        <a-radio-button :value="1">付费</a-radio-button>
        <a-radio-button :value="0">未付费</a-radio-button>
      </a-radio-group>
      <a-table
        bordered
        :data-source="list"
        :columns="columns"
        @change="getList"
        rowKey="uid"
        :loading="loading"
        :pagination="tablePageOptions"
      >
        <template #platform="{}">头条</template>
        <template #is_paid="{ record }">
          <span v-show="record.is_paid">付费</span>
          <span v-show="!record.is_paid">未付费</span>
        </template>
        <template #operation="{ record }">
          <a v-show="!record.is_reported" @click="onForceReport(record.uid)"
            >强制回传</a
          >
          <span v-show="record.is_reported" style="color: rgb(190, 190, 190)"
            >已上报</span
          >
        </template>
      </a-table>
      <span style="color: rgb(200, 200, 200)">总共{{ meta.total }}个项目</span>
    </div>
  </div>
</template>

<script lang="ts">
import useApp from "@/hooks/useApp";
import { defineComponent, reactive, toRefs, ref } from "vue";
import usePagination from "@/hooks/usePagination";
//getPromotionList
import { getUserData, forceReport } from "@/api";
import { message } from "ant-design-vue";
import { TableColumnOfUserData } from "@/views/_pageOptions/table_yuewen";

const UserData = defineComponent({
  props: ["channelId"],
  setup(props) {
    let { tablePageOptions } = usePagination();
    const state = reactive({
      id: "",
      columns: TableColumnOfUserData,
      list: ref<any[]>([]),
      meta: {},
      is_paid: "",
      loading: false,
    });
    return { ...toRefs(state), tablePageOptions };
  },
  mounted() {
    this.id = this.$props.channelId;
    this.getList({ current: 1 });
  },
  methods: {
    async getList(page?: any) {
      this.loading = true;
      try {
        let param: any = { channel_id: this.id, page: page.current };
        if (this.is_paid !== "") param.is_paid = this.is_paid;
        let { data } = await getUserData(param);
        this.loading = false;
        this.list = data.list;
        this.meta = data.meta;
      } catch (err) {
        console.log(err);
      }
    },
    async onForceReport(uid: number) {
      try {
        await forceReport({ uid });
        message.success("强制回传成功");
        this.getList({ current: 1 });
      } catch (err) {
        console.log(err);
      }
    },
  },
});

export default UserData;
</script>
<style lang="scss" scoped>
</style>
