<template>
  <div class="page-wrap page-wrap-put-books">
    <a-card :title="title" style="width: 1300px">
      <div class="flex-box card-top">
        <div style="margin-right:20px;">
          <span class="label">自定义天数</span>
          <a-input-number
            id="inputNumber"
            v-model:value="filterNumber"
            :min="7"
            :max="120"
          />
        </div>
        <div>
          <span class="label">筛选条件：</span>
          <a-range-picker
            v-model:value="pickerFilter"
            @change="switchDate"
            :ranges="rangePick"
            format="YYYY/MM/DD"
          />
        </div>
      </div>
      <div id="containers" style="margin-top:20px;"></div>
    </a-card>

    <!--   <a-table
      :columns="columns"
      :data-source="list"
      rowKey="id"
      size="small"
      :pagination="tablePageOptions"
      :loading="loading.value"
      bordered
      @change="handleTableChange"
      :scroll="{ x: 1500, y: 700 }"
    >
    </a-table> -->
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  watchEffect,
  onMounted,
  computed,
  watch,
} from "vue";
import { picker } from "@/helper/config/range";
import ToolBar from "@/components/tool-bar/index.vue";
import moment, { Moment } from "moment";
import { getAdplanData, getAdplanTable } from "@/api";
import usePagination from "@/hooks/usePagination";
import { adPlanCount, PageOptions } from "#/api";
import useApp from "@/hooks/useApp";
import { Line } from "@antv/g2plot";
import { MutationType } from "@/store/modules/app/_type";

const PutCount = defineComponent({
  components: {
    ToolBar,
  },
  props: {
    ids: Number,
    begin_date: String,
    end_date: String,
    field: String,
  },
  setup(props: any) {
    let { loading, meta, tablePageOptions } = usePagination();
    const { router, route, store } = useApp();
    let list: any[] = [];

    const state = reactive({
      liveData: ref<any>({}),
      columns: list,
      picker: [],
      inSearching: false,
      title:'回本数据',
      tablePageOptions,
      loading,
      rangePick: picker,
      hasInitChart: false,
      pickerFilter: computed(() =>
        store.getters.selectTime.length > 0
          ? [
              moment(store.getters.selectTime[0]),
              moment(store.getters.selectTime[1]),
            ]
          : [moment(), moment()]
      ),
      filterNumber: 120,
      line: ref<any>(),
    });
    const switchDate = (date: any, dateString: any[]) => {
      if(Array.isArray(dateString) && dateString.join('')){
        store.commit(MutationType.setSelectTime, dateString);
      }
      
      //getData();
    };
    //监听原始数据重新创建视图
    watch(state.liveData, () => {});
    const formats = (data: any) => {
      let result: any[] = [];
      Object.keys(data).map((item) => {
        if (item.includes("_paid_order_amount")) {
          result.push({
            label: `T+${item.split("_")[1]}`,
            value: Number(data[item]),
          });
        }
      });
      return result;
    };
    const initChart = () => {
      state.hasInitChart = true;
    };
    const getData = (page = 1) => {
      const { pickerFilter } = state;
      let [begin_dates, end_dates] = pickerFilter;
      let begin_date = moment(begin_dates).format("YYYY-MM-DD");
      let end_date = moment(end_dates).format("YYYY-MM-DD");
      let query = {
        ids: props.ids,
        begin_date: begin_date,
        end_date: end_date,
        field: props.field,
        day_num: state.filterNumber,
      };

      let data = Object.assign(query, { page });
      getAdplanData(data).then((res) => {
        const liveData = formats(res.data.list[0]);
        let cans = res.data.list[0];
        state.title = `注册用户:${cans.register_num},累计充值:${cans.paid_order_amount}`
        state.liveData = liveData;
        meta.value = res.data.meta;
        if (!state.hasInitChart) {
          const line = new Line("containers", {
            data: state.liveData,
            padding: "auto",
            xField: "label",
            yField: "value",

            height: 500,
            xAxis: {
              // type: 'timeCat',
              tickCount: 5,
            },
            smooth: true,
          });
          state.line = line;
          state.hasInitChart = true;
          line.render();
        } else {
          if (state.liveData.length > 0 && state.line) {
            state.line.changeData(state.liveData);
          }
        }
      });
    };

    watchEffect(() => {
      getData();
    });
    const handleTableChange = (pagination: PageOptions) => {
      const { current, pageSize, total } = pagination;
      getData(current);
    };

    /*  getAdplanTable({ field: props.field }).then((res) => {
      let columns: any[] = [];
      let fixedList = [
        "account_name",
        "ad_name",
        "register_num",
        "paid_order_amount",
      ];
      res.data.map((item: { desc: string; name: string }) => {
        let lolumnItem: {
          title: string;
          dataIndex: string;
          slots?: any;
          width?: string | number;
          fixed?: string;
        } = {
          title: item.desc,
          dataIndex: item.name,
          width: 120,
        };
        if (item.name == "ad_id") {
          lolumnItem.width = 200;
        }
        if (fixedList.includes(item.name)) {
          lolumnItem.fixed = "left";
        }
        columns.push(lolumnItem);
      });
      state.columns = [];
      let columnSort = columns.sort((a, b) => {
        return ~!!a.fixed - ~!!b.fixed;
      });
      state.columns.push(...columnSort);
    }); */
    onMounted(() => {});

    return { ...toRefs(state), handleTableChange, switchDate };
  },
  methods: {
    moment,
  },
});

export default PutCount;
</script>
<style lang="less" scoped>
.card-top {
  justify-content: flex-end;
  .label {
    line-height: 20px;
    margin-right: 20px;
  }
}
</style>
