import { Ref, computed, defineComponent, reactive, ref } from 'vue';
import styles from '../index2.module.less';
import {
  c,
  NButton,
  NDataTable,
  NIcon,
  NNumberAnimation,
  NTooltip,
  useMessage
} from 'naive-ui';
import { useECharts } from '@/hooks/web/useECharts';
// import Pagination from '/src/components/pagination';
import { getPracticePageStat, getTestStat } from '@/views/data-module/api';
import {
  formateSeconds,
  getHours,
  getLastMinutes,
  getMinutes,
  getSecend,
  getTimes
} from '/src/utils/dateFormat';
import { api_practiceStatPage } from '../../classList/api';
import TheEmpty from '/src/components/TheEmpty';
import iconSortDefault from '@/common/images/icon-sort-default.png';
import iconSortDesc from '@/common/images/icon-sort-desc.png';
import iconSortAsc from '@/common/images/icon-sort-asc.png';
import { convertToChineseNumeral } from '/src/utils';
import { useRouter } from 'vue-router';
import { setTabsCaches } from '/src/hooks/use-async';
import iconQuestion from '/src/common/images/icon-question.png';
export default defineComponent({
  name: 'home-practiceData',
  props: {
    timer: {
      type: Array,
      defaut: () => []
    }
  },
  setup(props, { expose }) {
    const router = useRouter();
    const message = useMessage();
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    const practiceFlag = ref(true);
    const payForm = reactive({
      height: '360px',
      width: '100%',
      practiceDuration: 0,
      evaluateUserCount: 0,
      evaluateFrequency: 0,
      publishUserCount: 0,
      publishCount: 0,
      practiceUserCount: 0,
      paymentAmount: 0,
      practiceDurationAvg: 0,
      practiceDays: 0,
      practiceDurationTotal: 0,
      dateList: [],
      timeList: []
    });

    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      searchForm: {
        orderBy: null as any,
        sort: null as any
      },
      tableList: [] as any,
      goCourseVisiable: false
    });
    const currentTimer = computed(() => {
      return props.timer;
    });

    const toolTitleTips = (title: string, item: any) => {
      return (
        <NTooltip showArrow={false} placement="top-start">
          {{
            trigger: () => (
              <div class={styles.cell}>
                {title}
                <img
                  class={styles.sortIcon}
                  src={
                    item.sortOrder === 'descend'
                      ? iconSortDesc
                      : item.sortOrder === 'ascend'
                      ? iconSortAsc
                      : iconSortDefault
                  }
                />
              </div>
            ),
            default:
              item.sortOrder === 'descend'
                ? '点击升序'
                : item.sortOrder === 'ascend'
                ? '取消排序'
                : '点击降序'
          }}
        </NTooltip>
      );
    };

    const practiceDurationRef = reactive({
      title() {
        return toolTitleTips('练习总时长', practiceDurationRef);
      },
      key: 'practiceDuration',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return <>{formateSeconds((row.practiceDuration as any) || 0)}</>;
      }
    });

    const practiceDaysRef = reactive({
      title() {
        return toolTitleTips('练习天数', practiceDaysRef);
      },
      key: 'practiceDays',
      sorter: true,
      sortOrder: false as any
    });

    const practiceDurationAvgRef = reactive({
      title() {
        return toolTitleTips('平均练习时长', practiceDurationAvgRef);
      },
      key: 'practiceDurationAvg',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return <>{formateSeconds((row.practiceDurationAvg as any) || 0)}</>;
      }
    });

    const evaluateFrequencyRef = reactive({
      title() {
        return toolTitleTips('评测次数', evaluateFrequencyRef);
      },
      key: 'evaluateFrequency',
      sorter: true,
      sortOrder: false as any
    });

    const publishCountRef = reactive({
      title() {
        return toolTitleTips('作品数量', publishCountRef);
      },
      key: 'publishCount',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return row.publishCount || 0;
      }
    });

    const publishScoreRef = reactive({
      title() {
        return toolTitleTips('最新作品分数', publishScoreRef);
      },
      key: 'publishScore',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return row.publishScore === null ? '--' : row.publishScore;
      }
    });

    const publishTimeRef = reactive({
      title() {
        return toolTitleTips('最新作品时间', publishTimeRef);
      },
      key: 'publishTime',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return row.publishTime || '--';
      }
    });

    const copyTo = (text: string) => {
      const input = document.createElement('input');
      input.value = text;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      message.success('复制成功');
    };
    const columns = () => {
      return [
        {
          title: '学生姓名',
          key: 'studentName',
          render: (row: any) => {
            return (
              <NTooltip showArrow={false} placement="top-start">
                {{
                  trigger: () => (
                    <div
                      style={{ userSelect: 'all', cursor: 'pointer' }}
                      onClick={() => copyTo(row.studentName)}>
                      {row.studentName}
                    </div>
                  ),
                  default: '点击复制'
                }}
              </NTooltip>
            );
          }
        },
        {
          title: '年级班级',
          key: 'date',
          render(row: any) {
            return (
              <>
                {row.currentGradeNum && row.currentClass
                  ? convertToChineseNumeral(row.currentGradeNum) +
                    '年级' +
                    row.currentClass +
                    '班'
                  : ''}
              </>
            );
          }
        },
        {
          title: '乐器',
          key: 'instrumentName',
          render(row: any) {
            return <>{row.instrumentName || '--'}</>;
          }
        },
        practiceDurationRef,
        practiceDaysRef,
        practiceDurationAvgRef,
        evaluateFrequencyRef,
        {
          title: () => (
            <span style={{ display: 'flex', alignItems: 'center' }}>
              发布作品{' '}
              <NTooltip showArrow={false}>
                {{
                  trigger: () => (
                    <img src={iconQuestion} class={styles.tipImg} />
                  ),
                  default: () => '筛选时间段内评测是否发布作品'
                }}
              </NTooltip>
            </span>
          ),
          key: 'publishFlag',
          render: (row: any) => (row.publishFlag ? '是' : '否')
        },
        publishCountRef,
        publishScoreRef,
        publishTimeRef,
        {
          title: '操作',
          key: 'titleImg',
          render: (row: any) => (
            <NButton
              type="primary"
              text
              onClick={() => {
                setTabsCaches('evaluatingRcode', 'tabName', {
                  path: '/studentDetail'
                });
                router.push({
                  path: '/studentDetail',
                  query: {
                    studentId: row.studentId,
                    studentName: row.studentName,
                    times: JSON.stringify(currentTimer.value)
                  }
                });
              }}>
              详情
            </NButton>
          )
        }
      ];
    };

    // 统计排序
    const handleSorterChange = (sorter: any) => {
      if (!sorter.order) {
        state.searchForm.orderBy = '' as string;
        state.searchForm.sort = '' as string;
        practiceDurationRef.sortOrder = false;
        practiceDaysRef.sortOrder = false;
        practiceDurationAvgRef.sortOrder = false;
        evaluateFrequencyRef.sortOrder = false;
        publishCountRef.sortOrder = false;
        publishScoreRef.sortOrder = false;
        publishTimeRef.sortOrder = false;
      } else {
        state.searchForm.orderBy = sorter.columnKey;
        practiceDurationRef.sortOrder = false;
        practiceDaysRef.sortOrder = false;
        practiceDurationAvgRef.sortOrder = false;
        evaluateFrequencyRef.sortOrder = false;
        publishCountRef.sortOrder = false;
        publishScoreRef.sortOrder = false;
        publishTimeRef.sortOrder = false;
        if (sorter.columnKey == 'practiceDuration') {
          practiceDurationRef.sortOrder = sorter.order;
        }
        if (sorter.columnKey == 'practiceDays') {
          practiceDaysRef.sortOrder = sorter.order;
        }

        if (sorter.columnKey == 'practiceDurationAvg') {
          practiceDurationAvgRef.sortOrder = sorter.order;
        }

        if (sorter.columnKey == 'evaluateFrequency') {
          evaluateFrequencyRef.sortOrder = sorter.order;
        }

        if (sorter.columnKey == 'publishCount') {
          publishCountRef.sortOrder = sorter.order;
        }

        if (sorter.columnKey == 'publishScore') {
          publishScoreRef.sortOrder = sorter.order;
        }

        if (sorter.columnKey == 'publishTime') {
          publishTimeRef.sortOrder = sorter.order;
        }

        state.searchForm.sort = sorter.order == 'ascend' ? 'asc' : 'desc';
      }
      getList2();
    };

    const getList2 = async () => {
      state.loading = true;
      try {
        const res = await api_practiceStatPage({
          page: 1,
          rows: 999,
          ...state.searchForm,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });

        state.tableList = res.data.rows;
      } catch (e) {
        console.log(e);
      }
      state.loading = false;
    };

    const getTestStatList = async () => {
      state.loading = true;
      try {
        const res2 = await getTestStat({
          page: 1,
          rows: 999,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });

        payForm.dateList = res2.data.trainingStatDetailList.map((item: any) => {
          return item.date;
        });

        payForm.timeList = res2.data.trainingStatDetailList.map((item: any) => {
          return item.practiceUserCount;
        });

        setChart();
      } catch {
        //
      }
      state.loading = false;
    };

    const getPracticePageStatList = async () => {
      state.loading = true;
      try {
        const { data } = await getPracticePageStat({
          page: 1,
          rows: 999,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });
        payForm.practiceDuration = data.practiceDuration;
        payForm.practiceDurationAvg = data.practiceDurationAvg;
        payForm.practiceUserCount = data.practiceUserCount;
        payForm.evaluateUserCount = data.evaluateUserCount;
        payForm.evaluateFrequency = data.evaluateFrequency;
        payForm.publishUserCount = data.publishUserCount;
        payForm.publishCount = data.publishCount;
      } catch {
        //
      }
      state.loading = false;
    };

    const getList = async () => {
      await getPracticePageStatList();
      await getTestStatList();
      await getList2();
    };

    expose({ getList });
    const setChart = () => {
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false,
          selected: {
            //在这里设置默认展示就ok了
            练习人数: practiceFlag.value
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            show: true
            // interval: 0
          },
          data: payForm.dateList
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}人'
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: ['rgba(255,255,255,0.2)']
              }
            },
            minInterval: 1,
            splitNumber: 5
          }
        ],
        grid: {
          left: '1%',
          right: '1%',
          top: '2%',
          bottom: 0,
          containLabel: true
        },
        series: [
          {
            data: payForm.timeList,
            type: 'line',
            // name: '达标人数',
            symbolSize: 10,
            symbol: 'circle',
            smooth: true,
            itemStyle: {
              color: '#198CFE',
              borderColor: '#fff',
              borderWidth: 3
            },
            lineStyle: {
              width: 2 //设置线条粗细
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(212, 231, 255, 1)'
                    // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
                  }
                ]
              }
            },
            emphasis: {
              disabled: true
            }
          }
        ],

        formatter: (item: any) => {
          if (Array.isArray(item)) {
            return [
              item[0].axisValueLabel,
              ...item.map((d: any) => {
                return `<br/>${d.marker}<span style="margin-top:10px;margin-left:5px;font-size: 13px;font-weight: 500;
                  color: #131415;font-weight: 600;
                  margin-top:12px
                  line-height: 18px;">练习人数: ${d.value}人 </span>`;
              })
            ].join('');
          } else {
            return item;
          }
        }
      });
    };

    getList();

    return () => (
      <>
        <div class={styles.homeTrainData}>
          <div class={styles.TrainDataTop}>
            <div class={styles.TrainDataTopLeft}>
              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.practiceUserCount}></NNumberAnimation>
                    </span>
                    人
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>练习人数</p>
              </div>
              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  {getHours(payForm.practiceDurationAvg) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getHours(
                            payForm.practiceDurationAvg
                          )}></NNumberAnimation>
                      </span>
                      时
                    </div>
                  ) : null}

                  {getHours(payForm.practiceDurationAvg) > 0 ||
                  getLastMinutes(payForm.practiceDurationAvg) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getLastMinutes(
                            payForm.practiceDurationAvg
                          )}></NNumberAnimation>
                      </span>
                      分
                    </div>
                  ) : null}
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={getSecend(
                          payForm.practiceDurationAvg
                        )}></NNumberAnimation>
                    </span>
                    秒
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>平均每天练习时长</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  {getHours(payForm.practiceDuration) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getHours(
                            payForm.practiceDuration
                          )}></NNumberAnimation>
                      </span>
                      时
                    </div>
                  ) : null}
                  {getHours(payForm.practiceDuration) > 0 ||
                  getLastMinutes(payForm.practiceDuration) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getLastMinutes(
                            payForm.practiceDuration
                          )}></NNumberAnimation>
                      </span>
                      分
                    </div>
                  ) : null}
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={getSecend(
                          payForm.practiceDuration
                        )}></NNumberAnimation>
                    </span>
                    秒
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>练习总时长</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.evaluateUserCount}></NNumberAnimation>
                      /
                      <NNumberAnimation
                        from={0}
                        to={payForm.evaluateFrequency}></NNumberAnimation>
                    </span>
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>评测人数/次数</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.publishUserCount}></NNumberAnimation>
                      /
                      <NNumberAnimation
                        from={0}
                        to={payForm.publishCount}></NNumberAnimation>
                    </span>
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>作品人数/数量</p>
              </div>
            </div>
            <div class={styles.TrainDataTopRight}>
              {/* <div
                onClick={() => {
                  practiceFlag.value = !practiceFlag.value;
                  setChart();
                }}
                class={[
                  styles.DataTopRightItem,
                  practiceFlag.value ? '' : styles.DataTopRightItemDis
                ]}>
                <div
                  class={[
                    styles.DataTopRightDot,
                    styles.DataTopRightDotBlue
                  ]}></div>
                <p>练习人数</p>
              </div> */}
            </div>
          </div>
          <div class={styles.chatrs}>
            <div
              ref={chartRef}
              style={{ height: payForm.height, width: payForm.width }}></div>
          </div>
          <div class={[styles.tableWrap, styles.noSort]}>
            <NDataTable
              v-slots={{
                empty: () => <TheEmpty></TheEmpty>
              }}
              class={styles.classTable}
              loading={state.loading}
              columns={columns()}
              onUpdate:sorter={handleSorterChange}
              data={state.tableList}></NDataTable>
            {/* <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
              sync
              saveKey="orchestraRegistration-key"
            /> */}
          </div>
        </div>
      </>
    );
  }
});
