<template>
  <div>


    <div class="container">
      <Breadcrumb :items="['menu.promotion', 'menu.promotion.Table']" />
      <a-card class="general-card" :title="$t('menu.promotion.Table') + invite_code">
        <a-row style="padding: 20px;">
          <a-col :flex="1">
            <a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
              label-align="left">
              <a-row :gutter="16">
                <a-col :span="18">
                  <a-form-item field="createdTime" :label="'按照时间查询'">
                    <a-range-picker v-model="queryParams" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>

          <a-col :flex="'86px'" style="text-align: right">
            <a-space :size="18">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <div class="left-side">


          <div class="panel">


            <a-grid :cols="24" :row-gap="16" class="panel">
              <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
                <a-space>
                  <a-avatar :size="54" class="col-avatar">
                    <img alt="avatar"
                      src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
                  </a-avatar>
                  <a-statistic :title="'注册人数'" :value="data.register" :value-from="0" animation show-group-separator>
                    <template #suffix>
                      <span class="unit">个</span>
                    </template>
                  </a-statistic>
                </a-space>
              </a-grid-item>
              <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
                <a-space>
                  <a-avatar :size="54" class="col-avatar">
                    <img alt="avatar"
                      src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
                  </a-avatar>
                  <a-statistic :title="'绑定人数'" :value="data.binding" :value-from="0" animation show-group-separator>
                    <template #suffix>
                      <span class="unit">{{ $t('workplace.pecs') }}</span>
                    </template>
                  </a-statistic>
                </a-space>
              </a-grid-item>
            </a-grid>
          </div>

        </div>
      </a-card>

    </div>
    <div>
      <a-row>
        <a-col :span="12">
          <div>注册的用户</div>
          <a-table :data="data.register_user">

            <template #columns>
              <a-table-column title="用户id" data-index="id"></a-table-column>
              <a-table-column title="用户名称" data-index="username"></a-table-column>
              <a-table-column title="备注" data-index="remark"></a-table-column>
              <a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
              <a-table-column title="用户积分" data-index="money"></a-table-column>
              <a-table-column title="注册时间">
                <template #cell="{ record }">
                  {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </a-table-column>
            </template>

          </a-table>
        </a-col>
        <a-col :span="12">
          <div>绑定手机号的用户</div>
          <a-table :data="data.binding_user">

            <template #columns>
              <a-table-column title="用户id" data-index="id"></a-table-column>
              <a-table-column title="用户名称" data-index="username"></a-table-column>
              <a-table-column title="备注" data-index="remark"></a-table-column>
              <a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
              <a-table-column title="用户积分" data-index="money"></a-table-column>
              <a-table-column title="注册时间">
                <template #cell="{ record }">
                  {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
              </a-table-column>
            </template>

          </a-table>
        </a-col>
      </a-row>


    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, h, reactive } from 'vue';
import { detailed } from '@/api/promotion';
import { IconSearch } from '@arco-design/web-vue/es/icon';
import { Modal } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import { del, set_user_remark } from '@/api/jobuser';
import dayjs from 'dayjs';
import { useRoute } from 'vue-router';
const route = useRoute()

import router from '@/router';
const invite_code = ref("")

// const data = reactive({
//   register: 0,
//   binding: 0,
// });
const data = ref({
  register: 0, // 注册的用户数量
  binding: 0,  // 绑定手机号的用户数量
  register_user: [], // 注册用户的详细信息
  binding_user: [] // 绑定用户的详细信息
});
const queryParams = ref([dayjs().subtract(1, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")])
onMounted(async () => {
  if (route.params.invite_code) {
    invite_code.value = route.params.invite_code
  } else {
    router.go(-1)
  }
  const res = await detailed(invite_code.value, queryParams.value[0], queryParams.value[1]); // 调用接口

  // 将返回的数据赋值给响应式对象
  data.value.register = res.data.register;
  data.value.binding = res.data.binding;
  data.value.register_user = res.data.register_user;
  data.value.binding_user = res.data.binding_user;

});
const reset = () => { }
const search = async () => {
  const res = await detailed(invite_code.value, queryParams.value[0], queryParams.value[1]); // 调用接口

  // 将返回的数据赋值给响应式对象
  data.value.register = res.data.register;
  data.value.binding = res.data.binding;
  data.value.register_user = res.data.register_user;
  data.value.binding_user = res.data.binding_user;
}


</script>

<style lang="less" scoped>
.container {
  padding: 0 20px 20px 20px;
}

.panel {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  overflow: auto;
}

.left-side {
  flex: 1;
  overflow: auto;
}

:deep(.panel-border) {
  margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--gray-2));
}
</style>