<template>
  <div class="enquiry-analysis-page">
    <div class="search-form">
      <!-- 站点选择和时间筛选 -->
      <a-row class="r1 search-form-container" :gutter="8">
        <a-col :xl="7" :xxl="6">
          <div class="choose-site">
            <span class="t1">站点：</span>
            <select-site @set-site-info="changeSite" select-width="100%" />
          </div>
        </a-col>
        <a-col :xl="8" :xxl="6">
          <div class="choose-site">
            <span class="t1">统计时间：</span>
            <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
          </div>
        </a-col>
        <a-col :xl="9" :xxl="12">
          <a-button-group class="time-btn-group">
            <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
            <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
            <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
            <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
            <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </div>
    <a-spin :spinning="loading" tip="加载中...">
      <a-row class="r2">
        <a-col :span="8">
          <p class="t1">询盘数</p>
          <p class="t3">{{ enquiryIndexNumber.enquiry.toLocaleString() }}</p>
        </a-col>
        <a-col :span="8">
          <p class="t1">未读询盘数</p>
          <p class="t3">{{ enquiryIndexNumber.unRead.toLocaleString() }}</p>
        </a-col>
        <a-col :span="8">
          <p class="t1">UV到询盘的转化率</p>
          <p class="t3">{{ enquiryIndexNumber.conversionRate }}</p>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <a-card style="margin: 10px" title="询盘趋势图">
            <a-row class="r5" :gutter="[20, 20]">
              <a-row class="r5-1">
                <a-col :span="24">
                  <enquiry-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart" />
                  <a-empty v-else style="float: right; width: 100%; margin-top: 110px" />
                </a-col>
              </a-row>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card style="margin: 10px" title="询盘地域分布">
            <a-row class="r5">
              <a-col :span="18">
                <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400" />
                <a-empty v-else style="margin-top: 50px" />
              </a-col>

              <a-col :span="6">
                <a-table
                  :rowKey="
                    (record, index) => {
                      return index;
                    }
                  "
                  class="chartTable"
                  :scroll="{ y: 500 }"
                  :pagination="false"
                  :columns="chartDetailDataCol"
                  :data-source="chartDetailData"
                  :showHeader="false"
                >
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'flagSlot'">
                      <span class="img-box">
                        <span :class="'flag-icon flag-icon-' + record.countryCode"></span>
                      </span>
                    </template>
                    <template v-if="column.key === 'numSlot'"> {{ record.enquires }} | {{ record.enquiresProportion }} </template>
                  </template>
                </a-table>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script lang="ts" name="data-enquiryAnalysis" setup>
  import selectSite from '@/components/Adweb/selectSite.vue';
  import enquiryChart from './chart/enquiryChart.vue';
  import { reactive, ref } from 'vue';
  import { getAction } from '@/api/manage/manage';
  import MapAdweb from '@/components/chart/mapAdweb.vue';
  import 'flag-icon-css/css/flag-icons.css';
  import dayjs from 'dayjs';

  const queryParam = reactive<any>({});
  queryParam.limit = 10;
  queryParam.siteCode = localStorage.getItem('siteCode');
  const loading = ref(false);
  const chartDetailDataCol = ref([
    {
      title: '国旗',
      align: 'center',
      key: 'flagSlot',
      width: 30,
      scopedSlots: { customRender: 'flagSlot' },
    },
    {
      title: '国家',
      align: 'left',
      dataIndex: 'countryName',
      customRender: function (text, record) {
        return text === null ? record.country : text;
      },
    },
    {
      title: '数量',
      align: 'right',
      key: 'numSlot',
      scopedSlots: { customRender: 'numSlot' },
    },
  ]);
  const enquiryIndexNumber = ref<any>({
    unRead: 0,
    conversionRate: '0%',
    enquiry: 0,
  });
  const countryMapData = ref<any>([]);
  const coreDataChart = ref({
    x: [],
    uv: [],
    pv: [],
    enquiry: [],
  });

  const chartDetailData = ref<any>([]);

  function changeSite(selectedSiteInfo: any) {
    queryParam.siteCode = selectedSiteInfo.code;
    localStorage.setItem('siteCode', queryParam.siteCode);
    reloadData();
  }

  function reloadData() {
    loading.value = true;
    getFlowIndexNumber();
    getCountryMapData();
  }
  //访客量、浏览量、询盘数量、折线图以及统计
  const getFlowIndexNumber = async () => {
    try {
      const res = await getAction('/dmp-data/site-overview/stats', queryParam);
      if (!res.result) {
        enquiryIndexNumber.value = {
          unRead: 0,
          conversionRate: '0%',
          enquiry: 0,
        };
        coreDataChart.value = {
          x: [],
          uv: [],
          pv: [],
          enquiry: [],
        };
        loading.value = false;
        return;
      }

      enquiryIndexNumber.value.unRead = res.result.unreadEnquires;
      enquiryIndexNumber.value.conversionRate = res.result.enquiryConversionRate;
      enquiryIndexNumber.value.enquiry = res.result.enquires;
      const r = res.result.dailyStats;
      const x = [],
        pv = [],
        uv = [],
        enquiry = [];
      if (r != null && r.length > 0) {
        for (let item of r) {
          x.push(item.date);
          pv.push(item.pageViews);
          uv.push(item.totalUsers);
          enquiry.push(item.enquires);
        }
      }
      coreDataChart.value.x = x;
      coreDataChart.value.pv = pv;
      coreDataChart.value.uv = uv;
      coreDataChart.value.enquiry = enquiry;
      loading.value = false;
    } catch (error) {
      console.error(error);
    }
  };
  const getCountryMapData = async () => {
    try {
      const res = await getAction('/dmp-data/enquiry-country/stats', queryParam);
      if (res.code === 200) {
        chartDetailData.value = res.result;
        countryMapData.value = chartDetailData.value.map((entry) => ({
          name: entry.countryName,
          value: entry.enquires,
        }));
      }
    } catch (error) {
      console.error(error);
    }
  };
  const rangeDate = ref([]);

  const onChangeDatePicker = (date, dateString) => {
    if (dateString.length > 0) {
      console.log('rangeDate:', rangeDate.value);
      rangeDate.value = date;
      console.log('date:', date);
      queryParam.start = dateString[0];
      queryParam.end = dateString[1];
      queryParam.dateType = undefined;
      reloadData();
    }
  };

  function disabledDate(current) {
    return current && current > dayjs();
  }

  const setTime = (time) => {
    queryParam.dateType = time;
    queryParam.start = '';
    queryParam.end = '';

    if (time == '') {
      rangeDate.value = undefined;
    } else if (time == 'sevenDay') {
      rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
    } else if (time == 'thirtyDay') {
      rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
    } else if (time == 'yesterday') {
      rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
    } else if (time == 'today') {
      rangeDate.value = [dayjs(), dayjs()];
    }

    reloadData();
  };
</script>
<style lang="less" scoped>
  .self-pop {
    .ant-popover-inner-content {
      background: rgb(245, 243, 254);

      p {
        font-size: 13px;
      }
    }

    .ant-popover-arrow {
      border-color: rgb(245, 243, 254) !important;
    }
  }

  .img-box {
    width: 22px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .ant-alert {
    /deep/ .ant-btn {
      border-radius: 0;
      margin-left: 10px;
    }
  }

  .theme-color {
    color: @primary-color;
  }

  .r1 {
    margin: 20px;

    .choose-site {
      display: flex;
    }

    .t1 {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 32px;
      margin-left: 10px;
    }

    .ant-form-item {
      flex: 1;
    }

    .ant-calendar-picker {
      margin-right: 20px;
    }

    /deep/ .ant-btn {
      background: transparent;
      margin-right: 10px;
      padding: 4px 15px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        color: @primary-color;
        border-color: @primary-color;
      }

      &.active {
        color: @primary-color;
        background: #e6f7ff;
        border-color: @primary-color;
      }
    }

    .time-btn-group {
      /deep/ .ant-btn {
        background: #fff;
        padding: 4px 15px;
        border: 1px solid #d9d9d9;
        transition: all 0.3s;
        margin-right: 0;

        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }

        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        &:not(:first-child) {
          margin-left: -1px;
        }

        &:hover {
          color: @primary-color;
          border-color: @primary-color;
          position: relative;
          z-index: 1;
          background: #fff;
        }

        &.active {
          color: @primary-color;
          background: #e6f7ff;
          border-color: @primary-color;
          position: relative;
          z-index: 2;
        }
      }
    }
  }

  .r2 {
    background: #fff;
    padding: 30px 20px;
    margin: 0 10px 10px 10px;

    .ant-col:not(:last-child) {
      border-right: 1px solid #e6e6e6;
    }

    p {
      margin: 0;
      text-align: center;

      &.t1 {
        color: #333;
        margin-bottom: 15px;

        img {
          margin-right: 10px;
          width: 15px;
          margin-top: -5px;
        }
      }

      &.t2 {
        color: @primary-color;
        font-size: 30px;
        font-weight: 500;
        line-height: 1;
        padding-left: 25px;
      }

      &.t3 {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 38px;
        color: rgba(13, 62, 122, 1);
      }
    }
  }

  .r5 {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 0 !important;

    .wrap {
      box-shadow: 0px 2px 4px 0px @primary-color;
      padding: 15px;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      transition: all 0.3s;

      &.blue {
        box-shadow: 0px 2px 4px 0px @primary-color;
      }

      &.effect:hover {
        box-shadow: none;
        background: rgb(241, 248, 255);
      }

      img {
        width: 15px;
      }

      .fr {
        float: right;
        width: calc(100% - 15px);
        text-align: center;

        p:last-child {
          font-size: 30px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }

    /deep/ .ant-table-thead > tr > th {
      background: rgb(241, 248, 255);
      border: none;
      color: #000;
      padding: 10px;
    }

    /deep/ .ant-table-tbody .ant-table-row td {
      padding: 10px;
      color: #000;
    }

    .r5-1 {
      display: inline-block;
      width: 100%;
      margin-top: 30px;

      .fl {
        float: left;
        position: relative;

        .ant-btn {
          border-radius: 0;
          border: none;
          margin-right: 10px;
        }
      }

      .fr {
        float: right;
        line-height: 2;

        span {
          margin-right: 30px;

          i {
            display: inline-block;
            width: 25px;
            height: 3px;
            background: #544beb;
            position: relative;
            top: -4px;
            margin-right: 20px;
          }

          &:last-child i {
            background: #f0b358;
          }
        }
      }
    }

    .box {
      border-radius: 10px;
      text-align: center;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      p {
        color: #fff;

        img {
          width: 19px;
          margin: -5px 10px 0 0;
        }
      }

      .num {
        font-size: 30px;
        margin-bottom: 10px;
      }

      &.b1 {
        background: rgb(233, 107, 95);
      }

      &.b2 {
        background: rgb(88, 204, 168);
      }

      &.b3 {
        background: rgb(124, 152, 252);
      }

      &.b4 {
        background: #f0b358;
      }
    }
  }
</style>
