<template>
  <div class="performance-detail">
    <div class="title-box-common title-box">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><a href="javascript:;" @click="$router.go(-1)"
            >员工绩效</a
          ></a-breadcrumb-item
        >
        <a-breadcrumb-item>查看详情</a-breadcrumb-item>
      </a-breadcrumb>
      <h3 style="font-size: 20px">{{ uname }}</h3>
    </div>
    <div class="padding-box-common">
      <div class="search-box data-box">
        <h3>绩效总览</h3>
        <div class="detail-data-item">
          <p>成本合计（元）</p>
          <p style="color: black">{{ sum.cost_amount }}</p>
        </div>
        <a-divider type="vertical" />
        <div class="detail-data-item">
          <p>提现合计（元）</p>
          <p style="color: black">{{ sum.cash_withdrawal_amount }}</p>
        </div>
        <a-divider type="vertical" />
        <div class="detail-data-item">
          <p>回本（元）</p>
          <p style="color: black">{{ sum.back_amount }}</p>
        </div>
        <a-divider type="vertical" />
        <div class="detail-data-item">
          <p>用户充值（元）</p>
          <p style="color: black">{{ sum.user_charge_amount_sum }}</p>
        </div>
      </div>
      <div class="search-box" style="border: none">
        <h3>绩效明细</h3>
        <div class="right-search">
          <span v-show="search.type === 'month'">自定义月数：</span>
          <span v-show="search.type === 'day'">自定义天数：</span>
          <a-input
            v-model:value="search.value"
            placeholder="请输入"
            style="width: 100px"
            type="number"
            :min="0"
            :onkeyup="
              (search.value =
                Number(String(search.value).replace(/^(0+)|[^\d]+/g, '')) == 0
                  ? ''
                  : Number(String(search.value).replace(/^(0+)|[^\d]+/g, '')))
            "
            @keyup.enter="getList"
          />&nbsp;
          <a-select
            style="width: 100px"
            v-model:value="search.type"
            @change="onTypeChange"
          >
            <a-select-option value="month">按月查询</a-select-option>
            <a-select-option value="day">按日查询</a-select-option> </a-select
          >&nbsp;
          <a-range-picker
            :placeholder="
              search.type === 'month'
                ? ['开始月份', '结束月份']
                : ['开始日期', '结束日期']
            "
            :format="search.type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'"
            :value="value"
            :mode="mode2"
            @panelChange="handlePanelChange2"
            @change="handleChange"
            :allowClear="false"
          />
        </div>
      </div>
      <div id="chart-container" v-if="!loading">
        <a-empty v-if="!chartFlag"></a-empty>
      </div>
      <div class="chart-loading" v-show="loading">加载中......</div>
      <div class="table-box">
        <a-radio-group
          v-model:value="search.model"
          @change="getList"
          style="margin: 10px 0"
        >
          <a-radio-button value="natural">自然日数据</a-radio-button>
          <a-radio-button value="precise">顺延24小时数据</a-radio-button>
        </a-radio-group>
        <a-table
          bordered
          :scroll="{ x: 1500 }"
          :data-source="list"
          :columns="columns"
          @change="getList"
          rowKey="uid"
          :loading="loading"
          :pagination="tablePageOptions"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>
<script lang="tsx">
import { Line } from "@antv/g2plot";
import usePagination from "@/hooks/usePagination";
import { defineComponent, reactive, toRefs, ref } from "vue";
import { Moment } from "moment";
import moment from "moment";
import { TableColumnOfStuffDetail } from "../_pageOptions/table_data";

import { ColumnProps } from "ant-design-vue/es/table/interface";

//getPromotionList
import {
  getStuffPerformance,
  getStuffPerformanceSum,
  getStuffPerformanceChart,
} from "@/api";
const PerformanceDetial = defineComponent({
  components: {},
  setup() {
    let { meta, tablePageOptions } = usePagination();
    const value = ref<Moment[]>([]);
    const mode2 = ref<string[]>(["month", "month"]);
    const state = reactive({
      search: {
        uid: 0,
        uname: "", // 推广员名称
        type: "day", // 时间类型 day/month
        model: "natural", // 计算方式 自然日：natural/ 顺延24小时:precise
        value: ref<any[number | string]>(""), // 自定义月数、天数
        date_arr: ref<any[]>([]),
      },
      loading: false,
      list: ref<any[]>([]),
      // columns: TableColumnOfStuffDetail,
      sum: {
        back_amount: 0, // 回本
        cash_withdrawal_amount: 0, // 体现合计
        cost_amount: 0, // 成本合计
        user_charge_amount_sum: 0, // 用户充值
      },
      uname: "",
      chartFlag: true,
    });
    const columns: ColumnProps[] = [];
    return {
      ...toRefs(state),
      tablePageOptions,
      meta,
      columns,
      value,
      mode2,
    };
  },
  mounted() {
    this.columnsInit();
    this.search.uid = Number(this.$route.query.uid);
    this.uname = String(this.$route.query.uname);
    this.search.date_arr[0] = String(this.$route.query.start_time);
    this.search.date_arr[1] = String(this.$route.query.end_time);

    console.log(this.value, "value");
    this.search.type = String(this.$route.query.type);
    this.getSum();
    this.onTypeChange(this.search.type);
  },
  methods: {
    handlePanelChange2(val: Moment[], mode: string[]) {
      this.value = val;
      console.log(this.value);
      if (this.search.type === "month") {
        this.search.date_arr = [
          moment(val[0]).format("YYYY-MM"),
          moment(val[1]).format("YYYY-MM"),
        ];
        console.log(this.search.date_arr, "1");
      } else {
        this.search.date_arr = [
          moment(val[0]).format("YYYY-MM-DD"),
          moment(val[1]).format("YYYY-MM-DD"),
        ];
        console.log(this.search.date_arr, "2");
      }
      this.getList();
    },
    handleChange(val: Moment[]) {
      this.value = val;
      this.handlePanelChange2(val, this.mode2);
    },
    // 获取推广链接数据
    async getList(page?: any, filter?: any, sorter?: any) {
      console.log("SORT", sorter);
      this.loading = true;
      let param: any = {
        start_date: this.search.date_arr ? this.search.date_arr[0] : "",
        end_date: this.search.date_arr ? this.search.date_arr[1] : "",
        ...this.search,
      };
      if (sorter) {
        if (sorter.order === "descend") param.back_amount_order = 2;
        if (sorter.order === "ascend") param.back_amount_order = 1;
      }
      delete param.date_arr;
      if (!param.value) param.value = "1,2,3,4,5,9";
      // console.log("请求参数", param);
      let { data } = await getStuffPerformance({
        page: page ? page.current : 1,
        ...param,
      });
      let chartData = await getStuffPerformanceChart(param);
      // console.log("请求结果", data);
      // console.log("CHART结果", chartData.data);
      this.loading = false;
      this.$nextTick(() => {
        this.renderChart(chartData.data);
      });
      this.list = data.list;
      this.meta = data.meta;
      this.customColumns();
      this.getSum();
    },
    // 获取绩总览
    async getSum() {
      let { data } = await getStuffPerformanceSum({
        start_date: this.search.date_arr ? this.search.date_arr[0] : "",
        end_date: this.search.date_arr ? this.search.date_arr[1] : "",
        uid: this.$route.query.uid,
      });
      // console.log("总览", data);
      this.sum.back_amount = data.back_amount; // 回本
      this.sum.cash_withdrawal_amount = data.cash_withdrawal_amount; // 体现合计
      this.sum.cost_amount = data.cost_amount; // 成本合计
      this.sum.user_charge_amount_sum = data.user_charge_amount_sum; // 用户充值
    },
    // 月、日查询类型改变
    onTypeChange(val: string) {
      var date = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
      if (val === "month") {
        //如果是月份格式化
        this.search.date_arr = [
          moment(this.search.date_arr[0]).format("YYYY-MM"),
          moment(this.search.date_arr[1]).format("YYYY-MM"),
        ];
        console.log(this.search.date_arr, "3");
        this.search.value = 3;
        var list = this.getDateRange(date, 30, true);
        this.mode2 = ["month", "month"];
        if (this.$route.query.start_time && this.$route.query.end_time) {
          this.value[0] = moment(this.search.date_arr[0], "YYYY-MM");
          this.value[1] = moment(this.search.date_arr[1], "YYYY-MM");
        } else {
          this.search.date_arr = [
            list[0].substring(0, 7),
            list[1].substring(0, 7),
          ];
          this.value = [
            moment(this.search.date_arr[0], "YYYY-MM"),
            moment(this.search.date_arr[1], "YYYY-MM"),
          ];
        }
      }
      if (val === "day") {
        //如果是日期格式化
        this.search.date_arr = [
          moment(this.search.date_arr[0]).format("YYYY-MM-DD"),
          moment(this.search.date_arr[1]).format("YYYY-MM-DD"),
        ];
        this.search.value = "";
        this.mode2 = ["date", "date"];
        if (this.$route.query.start_time && this.$route.query.end_time) {
          this.value[0] = moment(this.search.date_arr[0], "YYYY-MM-DD");
          this.value[1] = moment(this.search.date_arr[1], "YYYY-MM-DD");
        } else {
          var list = this.getDateRange(date, 30, true);
          this.search.date_arr = list;
          this.value = [
            moment(this.search.date_arr[0], "YYYY-MM-DD"),
            moment(this.search.date_arr[1], "YYYY-MM-DD"),
          ];
        }
      }
      this.getList();
    },
    // 渲染图表
    renderChart(data: any) {
      console.log("CHART DATA:", data);
      this.chartFlag = data.length === 0 ? false : true;
      const linePlot = new Line("chart-container", {
        data,
        xField: "date",
        yField: "value",
        seriesField: "name",
        yAxis: {
          label: {
            formatter: (v: any) => v,
          },
        },
        legend: {
          position: "top",
        },
        smooth: true,
        // @TODO 后续会换一种动画方式
        animation: {
          appear: {
            animation: "path-in",
            duration: 1000,
          },
        },
      });
      console.log("渲染");
      linePlot.render();
    },
    // 工具函数：获取最近日期
    getDateRange(dateNow: any, intervalDays: any, bolPastTime: any) {
      let oneDayTime = 24 * 60 * 60 * 1000;
      let list = [];
      let lastDay;

      if (bolPastTime == true) {
        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
        list.push(this.formateDate(lastDay));
        list.push(this.formateDate(dateNow));
      } else {
        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
        list.push(this.formateDate(dateNow));
        list.push(this.formateDate(lastDay));
      }
      return list;
    },
    formateDate(time: any) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day + "";
    },
    // 查看详情
    toDetial(item: any) {
      console.log("查看详情", item);
    },
    // columns初始化
    columnsInit() {
      this.columns = [
        {
          title: "日期",
          dataIndex: "date",
          fixed: "left",
          width: 150,
        },
        {
          title: "成本合计(元)",
          dataIndex: "cost_amount",
          width: 120,
        },
        {
          title: "回本(元)",
          dataIndex: "back_amount",
          sorter: (a: any, b: any) => a.back_amount - b.back_amount,
          width: 120,
        },
        {
          title: "回本率(%)",
          dataIndex: "back_rate",
          width: 120,
        },
        {
          title: "提现合计(元)",
          dataIndex: "cash_withdrawal_amount",
          width: 150,
        },
        //
        {
          title: "用户充值(元)",
          dataIndex: "user_charge_amount_sum",
          width: 120,
        },
      ];
    },
    // 搜索条件修改后 处理columns
    customColumns() {
      this.columnsInit();
      let withdrawalIndex = 0,
        chargeIndex = 0;
      this.columns.forEach((item, index) => {
        if (item.dataIndex === "cash_withdrawal_amount")
          withdrawalIndex = index;
        if (item.dataIndex === "user_charge_amount_sum")
          chargeIndex = index + 2;
      });
      // 选择按月查询 1.自然日从0加起-默认展示M+0、M+1、M+2 \ 2.24小时-从1加起-默认展示M+0、M+1
      if (this.search.type === "month") {
        //  按月查询
        if (!this.search.value) {
          // 默认 未输入自定义月数
          for (let i = 0; i < 3; i++) {
            this.columns.splice(withdrawalIndex + (i + 1), 0, {
              title: "提现(元)M+" + i,
              dataIndex: "cash_withdrawal",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计提现： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
            this.columns.splice(chargeIndex + i * 2, 0, {
              title: "用户充值(元)M+" + i,
              dataIndex: "user_charge",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计充值： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
          }
        } else {
          // 自定义月数
          for (let i = 0; i < this.search.value; i++) {
            this.columns.splice(withdrawalIndex + (i + 1), 0, {
              title: "提现(元)M+" + i,
              dataIndex: "cash_withdrawal",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计提现： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
            this.columns.splice(chargeIndex + i * 2, 0, {
              title: "用户充值(元)M+" + i,
              dataIndex: "user_charge",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计充值： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
          }
        }
      } else {
        // 选择按日查询 1.自然日从0加起-默认展示T+0、T+2、T+6、T+14、T+29 \ 2.24小时-从1加起-默认展示T+0、T+2、T+6、T+14、T+29
        if (!this.search.value) {
          // 默认 未输入自定义月数
          for (let i = 0; i < 5; i++) {
            this.columns.splice(withdrawalIndex + (i + 1), 0, {
              title: "提现(元)T+" + [0, 2, 6, 14, 29][i],
              dataIndex: "cash_withdrawal",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计提现： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
            this.columns.splice(chargeIndex + i * 2, 0, {
              title: "用户充值(元)T+" + [0, 2, 6, 14, 29][i],
              dataIndex: "user_charge",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计充值： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
          }
        } else {
          // 自定义月数
          for (let i = 0; i < this.search.value; i++) {
            this.columns.splice(withdrawalIndex + (i + 1), 0, {
              title: "提现(元)T+" + i,
              dataIndex: "cash_withdrawal",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计提现： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
            this.columns.splice(chargeIndex + i * 2, 0, {
              title: "用户充值(元)T+" + i,
              dataIndex: "user_charge",
              width: 150,
              customRender: ({ text, record }) => {
                return (
                  <div style="color:gray;font-size:13px">
                    <p style="color:black;font-size:14px">{text[i].amount}</p>
                    <p>累计充值： {text[i].accruing_amount}</p>
                    <p>回本率： {text[i].back_rate}</p>
                  </div>
                );
              },
            });
          }
        }
      }
    },
  },
});

export default PerformanceDetial;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.performance-detail {
  .title-box {
    display: block;
    padding-top: 4px;
    h3 {
      margin-top: 10px;
    }
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .table-box {
    padding: 0 20px;
  }
  h3 {
    font-weight: bold;
  }
  .data-box {
    display: block;
    height: auto;
    overflow: hidden;
    padding: 20px 20px;
    margin-bottom: 10px;
    .ant-divider,
    .ant-divider-vertical {
      float: left;
      height: 20px;
      background-color: #cfcfce;
      margin-right: 30px;
      margin-top: 14px;
    }
    .detail-data-item {
      width: 110px;
      float: left;
      color: gray;
      font-size: 13px;
    }
  }
  #chart-container {
    margin: 0 auto;
    height: 300px;
    background: white;
    padding: 10px 20px 20px;
    overflow: hidden;
  }
  .chart-loading {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: white;
    color: rgb(185, 184, 184);
  }
}
</style>
