<template>
  <div>
    <tool-bar :text="['uid']" :label="['uid']" v-model:loading="inSearching" @confirm="onSearch" @cancel="onCancel">
      <template #picker>
        <p class="label">充值日期</p>
        <a-range-picker
          v-model:value="pickered"
          :ranges="rangePick"
          format="YYYY/MM/DD"
          @change="changeTime"
        />
      </template>
    </tool-bar>
    <a-table
      bordered
      :data-source="list"
      :columns="columns"
      @change="getList"
      rowKey="order_no"
      :loading="loading"
      :pagination="tablePageOptions"
      :scroll="{ x: 1680, y: 3000 }"

    >
      <template #report_action="{ text, record }">
        <p v-if="record.report_status == 'success'">已上报</p>
        <a-popconfirm title="是否要继续强制回传?" ok-text="是" cancel-text="否" @confirm="confirmEdit(record)">
          <p v-if="record.report_status != 'success'">
            <a>强制回传</a>
          </p>
        </a-popconfirm>
      </template>
        <template #report_status="{ text, record }">
        <p>{{record.report_status=="success"?"成功":"失败"}}</p>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import usePagination from "@/hooks/usePagination";

import { defineComponent, reactive, toRefs, ref, watch, computed } from "vue";
import { TableColumnOfLog } from "@/views/_pageOptions/table-account";
import { message } from "ant-design-vue";
import { backLogList, setMustUpback } from "@/api";
import { picker } from "@/helper/config/range";
import ToolBar from "@/components/tool-bar/index.vue";
import useApp from "@/hooks/useApp";
import { MutationType } from "@/store/modules/app/_type";
import moment from "moment";
const CommonTable = defineComponent({
  props: ["visible", "channel_id"],
  components: {
    ToolBar,
  },
  setup(props) {
    let { meta, tablePageOptions } = usePagination();
    const state = reactive({
      loading: false,
      list: ref<any[]>([]),
      columns: TableColumnOfLog,
      pushVisible: false,
      curPage: ref(1),
      inSearching: false,
      fields: ref({
        date: ''
      }),
      defaultToolvalue: {},
      rangePick: picker,
      pickered: computed(() =>
        store.getters.selectTime.length > 0
          ? [
            moment(store.getters.selectTime[0]),
            moment(store.getters.selectTime[1]),
          ]
          : [moment().subtract(30, "d"), moment()]
      ),
    });
    const { store } = useApp();

    const getList = async (page?: any) => {
      state.loading = true;
      let { data } = await backLogList({
        page: page?.current ? page.current : 1,
        report_platform: "kuaishou",
        platform: "zhuishuyun",
        channel_id: props.channel_id,
        ...state.fields,
      });
      state.loading = false;
      state.curPage = page?.current ?? 1;
      state.list = data.list;
      meta.value = data.meta;
    };

    getList();

    watch(
      () => [props.visible, props.channel_id],
      ([newVal], [oldVal]) => {
        if (newVal) {
          getList();
        }
      }
    );
    const onSearch = (fields: any) => {
      const { uid } = fields;
      state.fields = fields;
      if (state.pickered.length > 0) {
        state.fields.date = [
          moment(state.pickered[0]).format("YYYY-MM-DD"),
          moment(state.pickered[1]).format("YYYY-MM-DD"),
        ].join(",");
      }
      getList();
    };
    //强制回传
    const confirmEdit = (record: any) => {
      setMustUpback({
        uid: record.uid,
        report_type: "recharge",
        platform: "zhuishuyun",
      }).then((res) => {
        message.success("上报成功！");
        getList({ current: state.curPage });
      });
    };
    const changeTime = (monent: any, string: string[]) => {
      if (Array.isArray(string) && string.join("")) {
        store.commit(MutationType.setSelectTime, string);
      }
    };
    const onCancel =()=>{
      getList()
    }
    return {
      ...toRefs(state),
      tablePageOptions,
      getList,
      confirmEdit,
      onSearch,
      changeTime,
      onCancel
    };
  },
  mounted() { },
});

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