<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="用户ID" prop="uid">
          <el-input v-model="id" name="uid" clearable />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="miniprogram_name" label="小程序" />
        <el-table-column prop="uid" label="用户ID" />
        <el-table-column prop="user_created_at" label="小程序注册时间" />
        <el-table-column prop="ranse_start_at" label="最新染色时间" />
        <el-table-column prop="charge_coin" label="看币余额" />
        <el-table-column prop="reward_coin" label="充送币余额" />
        <el-table-column prop="total_charge_count" label="累计充值次数" />
        <el-table-column prop="vip_text" label="VIP状态" />
        <el-table-column prop="vip_end" label="VIP结束时间" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button v-action="'channel.orders.userDetails'" link type="primary" size="small"
              @click="openDetail(scope.row)">用户详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog v-model="userDetailVisible" width="50%" title="用户详情" :alignCenter="true" destroy-on-close>
      <userDetail @close="closeDetail" :primary="userDetailData"></userDetail>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, } from 'vue';
import userDetail from './userDetail/index.vue';
import router from '@/router'
import { getUserInfo } from "@/api/customer/audience"
import { list } from 'postcss';
const rolesIdentify = inject('rolesIdentify');
const loading = ref(false)
const id = ref('');
const tableData = ref([]);
const userDetailData = ref({})
const userDetailVisible = ref(false)
const search = async () => {
  if (id.value < 1) {
    ElMessage.error("请输入用户id");
    return false;
  };
  loading.value = true;
  tableData.value = [];
  if (rolesIdentify.value.includes('optimizer')) {
    let res = await getUserInfo({ uid: id.value })
    if (res.data) {
      tableData.value.push(res.data);
    }
  }
  loading.value = false;

};
const reset = () => {
  id.value = '';
  tableData.value = [];
}


const closeDetail = () => {
  userDetailVisible.value = false;
}
const openDetail = (data: object) => {
  userDetailVisible.value = true;
  userDetailData.value = data;
}
onMounted(() => {
  // tableData.push();
  // console.log(tableData);
})
</script>



<style></style>