<template>
    <div class="page justify-around">
      <div class="addbtn">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon> 新增</el-button>
            </el-form-item>
        </el-form>
      </div>
  
      <el-table
        :data="tableData"
        style="width: 100%; height: 90%"
        size="large"
        align="center"
        border
      >
        <el-table-column
          prop="name"
          label="用户ID"
          align="center"
        />
  
        <el-table-column
          prop="address"
          label="手机号"
          align="center"
        />
  
        <el-table-column
          prop="createDate"
          label="注册时间"
          align="center"
        >
          <template #default="scope">
            {{ getDate(scope.row.createDate) }}
          </template>
        </el-table-column>

        <el-table-column
          prop="poins"
          label="当前币值"
          align="center"
        />
  
        <el-table-column
          fixed="right"
          :label="$t('keyMangage.operations')"
          width="400"
          align="center"
        >
          <template #default="scope">
              <el-button link type="primary" size="small" @click="showDetail(scope.row.id)">查看</el-button>
              <el-button link type="primary" size="small" @click="rechargeDetail(scope.row)">查看充值记录</el-button>
              <el-button link type="primary" size="small" @click="videoDetail(scope.row)"> 查看视频列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    
      <!-- 登录账号 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <el-dialog v-model="detailDialogVisible" v-if="detailDialogVisible" title="查看详情"  width="60%" :before-close="handleClose" >
        <el-form :model="form" label-width="120px">
            <el-form-item label="用户ID">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Create</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>
      </el-dialog>
    </div>
  </template>
  
  <!-- videoType==1为竖,==2为横 -->
  <script setup>
  //#region  导入

  import { userListApi, userListFindByIdApi } from '@/apis/userManage.js'
  
  import { useI18n } from "vue-i18n";
  
  import dayjs from "dayjs";
  
  import { useRoute, useRouter } from "vue-router";
  
  const route = useRoute();
  const router = useRouter();
  const { locale } = useI18n();
  const lanChange = ref(locale);
  
  const tableData = ref([]);
  
  const dialogVisible = ref(false);
  
  const rechargeDetail = (item) => {
    router.push({
      path: "/rechargeList",
      query: {
        phone: item.phone
      },
    });
  };
  const videoDetail = (item) => {
    router.push({
      path: "/videoList",
      query: {
        phone: item.phone
      },
    });
  };
  
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
  const getDate = (val) => {
    return dayjs(val).format("YYYY-MM-DD");
  };
  
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getListData(pageNum.value, pageSize.value);
  };
  
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    getListData(pageNum.value, pageSize.value);
  };

const formInline = ref({
  phone: ''
})
  
  const getListData = async (PageNum, PageSize) => {
    try {
      let data = {
        PageNum: PageNum,
        PageSize: PageSize,
        phone: formInline.phone
      }
      const res = await userListApi(data);
      console.log(res, "res");
      tableData.value = res.data.list;
      total.value = res.data.total * 1;
    } catch (error) {
      console.log(error, "err");
    }
  };

  const form = ref({
    name: '',
    phone: ''
  })
  const detailDialogVisible = ref(false)
  function showDetail(id) {
    userListFindByIdApi(id).then(res => {
      detailDialogVisible.value = true
      form.value = res.data
    })
  }
  function handleClose() {
    detailDialogVisible.value = false
  }
  
  onMounted(() => {
    getListData(1, 10);
  });
  </script>
  
  <style lang="scss" scoped>
  .page {
    height: calc(100vh - 80px);
    // height: calc(100vh - 80px);
    background-color: #ffffff;
    border-radius: 30px 0 0 0;
    overflow: hidden;
    padding: 10vh;
    .addbtn {
      margin-bottom: 2vh;
    }
    .formData {
      padding: 5vh 3vh;
    }
  
    .pagination {
      position: fixed;
      left: 55%;
      bottom: 8vh;
      transform: translateX(-50%);
      border-radius: 5px;
      padding: 10px 20px;
      z-index: 99;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        background-color: #b8b8b873;
      }
    }
  }
  </style>
  