<template>
  <div class="container">
    <Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
    <a-card class="general-card" :title="$t('menu.jobuser.userlist')">
      <a-row>
        <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="8">
                <a-form-item field="name" :label="'关键字'">
                  <a-input v-model="queryParams.key" :placeholder="'请输入关键字'" />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-item field="createdTime" :label="$t('searchTable.form.createdTime')">
                  <a-range-picker v-model="formModel.createdTime" style="width: 100%" />
                </a-form-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-item field="status" :label="$t('searchTable.form.status')">
                  <a-select v-model="queryParams.status" :options="[
                     {
                    label: '全部',
                    value: -1,
                  },{
                    label: '封禁',
                    value: 0
                  }, {
                    label: '正常',
                    value: 1,
                  }]" :placeholder="'状态'" />
                </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="getAll">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table :data="data" :pagination="false">
        <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="上级代理" data-index="parent_username"></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>
          <a-table-column title="上次登录">
            <template #cell="{ record }">
              {{ dayjs(record.login_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </a-table-column>
          <a-table-column title="是否封禁" data-index="status"><template #cell="{ record }">
              {{ record.status == 0 ? '是' : '否' }}
            </template></a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-space>
                <a-button @click="handleBeforeOk_withdraw(record.id)">提现记录</a-button>
                <a-button @click="show_money(record.id)">增减积分</a-button>
                <a-button @click="show_group(record.id)">修改密码</a-button>
                <a-button @click="set_remark(record.id)">修改备注</a-button>
                <a-button v-if="record.status == 1" status="danger" @click="showConfirm(record.id)">封禁</a-button>
                <a-button v-if="record.status == 0" status="success" @click="showConfirm_out(record.id)">解禁</a-button>
                <a-button status="danger" @click="showConfirm_del(record.id)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div class="pagination-container">
                <a-pagination 
                    v-model:current="pagination.current"
                    v-model:page-size="pagination.pageSize"
                    :total="pagination.total"
                    :page-size-options="pagination.pageSizeOptions"
                    :show-jumper="pagination.showJumper"
                    :show-page-size="pagination.showPageSize"
                    :show-total="pagination.showTotal"
                    @change="handleTableChange"
                    @page-size-change="handlePageSizeChange"
                />
            </div>
    </a-card>
    <!-- 下级成员展示 -->
    <!-- <a-modal v-model:visible="modal_visible" width="800px">
      <template #title>
        下级成员展示
      </template>
      <FamilyTreeChart :id="show_group_id" v-if="modal_visible"></FamilyTreeChart>
      </a-modal> -->
    <a-modal v-model:visible="modal_visible" width="800px" @before-ok="handleBeforeOk">
      <template #title>
        修改密码
      </template>
      <a-col :span="8">
        <a-form-item field="password" label="密码" validate-trigger="blur">
          <a-input-password v-model="password" placeholder="请输入密码" />
        </a-form-item>
      </a-col>
    </a-modal>
    <a-modal v-model:visible="modal_visible_remark" width="800px" @before-ok="handleBeforeOk_remark">
      <template #title>
        修改备注
      </template>
      <a-col :span="8">
        <a-form-item field="remark" label="备注" validate-trigger="blur">
          <a-input v-model="remark" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-col>
    </a-modal>
    <a-modal v-model:visible="modal_visible_withdraw" width="800px">
      <template #title>
        用户提现记录
      </template>
      <withdrawitem :data="withdraw"></withdrawitem>
    </a-modal>
    <a-modal v-model:visible="modal_visible_money" width="800px" @before-ok="handleBeforeOk_money">
      <template #title>
        增减用户积分
      </template>
      <!-- <a-col :span="8"> -->
        
        <a-form-item field="money" label="积分" validate-trigger="blur">
          <a-space direction="vertical" size="large">
          <a-input-number  v-model="money.money" placeholder="请输入积分负数为减" allow-clear />
          </a-space>
        </a-form-item>
        <a-form-item field="money" label="备注" validate-trigger="blur">
          <a-space direction="vertical" size="large">
            <a-input v-model="money.memo"  placeholder="请输入备注" allow-clear />
          </a-space>
        </a-form-item>
        
      <!-- </a-col> -->
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import { PaginationProps,TableChangeExtra  } from '@arco-design/web-vue';
import { lists, black, OutBlack, del, set_user_password, set_user_remark,get_user_withdraw, add_money } from '@/api/jobuser';
import { Modal } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';
import withdrawitem from './components/withdrawitem.vue';

interface DataItem {
  id: number;
  username: string;
  password: string;
  time: Date;
  money: string;
}

const pagination =  reactive<PaginationProps>({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示的条数
    total: 0, // 总条数（根据实际情况设置）
    pageSizeOptions: [10, 20, 50, 100,10000],
    showJumper: true,
    showPageSize: true,
    showTotal: true,
})

const handlePageSizeChange = (pageSize: number) => {
    pagination.current = 1; 
    pagination.pageSize = pageSize;
    queryParams.value.current = 1;
    queryParams.value.pageSize = pageSize;
    getAll();
}

const handleTableChange = (page:number) => {
    pagination.current = page;
    queryParams.value.current = page;
    getAll();
};
//设置备注弹窗
const modal_visible_remark = ref(false)
//用户提现记录弹窗
const modal_visible_withdraw = ref(false)

//增减用户积分
const modal_visible_money = ref(false)

const money=reactive({money:0,memo:"系统赠送"})

const remark = ref("")
const password = ref("")
let data = ref<DataItem[]>([])
//弹窗控制
const modal_visible = ref(false)
//保存需要修改的用户id
const userid = ref(0)
const show_group = (id: number) => {
  userid.value = id
  modal_visible.value = true
}
//展示增减用户积分弹窗
const show_money = (id: number) => {
  userid.value = id
  modal_visible_money.value = true
}


const set_remark = (id: number) => {
  userid.value = id
  modal_visible_remark.value = true
}
const withdraw=ref([])
const handleBeforeOk_withdraw = async (id: number) => {
  userid.value = id
  modal_visible_withdraw.value = true
  const res= await get_user_withdraw(id);
  withdraw.value=[];
  withdraw.value=res.data;
}

const showConfirm = (id: string) => {
  Modal.confirm({
    title: '操作提醒',
    content: '请确认是否要拉黑该用户',
    onOk: () => handleBlock(id),
  });
};
const showConfirm_out = (id: string) => {
  Modal.confirm({
    title: '操作提醒',
    content: '请确认是否要解禁该用户',
    onOk: () => OutBlock(id),
  });
};

const showConfirm_del = (id: string) => {
  Modal.confirm({
    title: '操作提醒',
    content: '请确认是否要删除该用户',
    onOk: () => deluser(id),
  });
};
const deluser = async (id: any) => {
  const res = await del(id);
  if (res.code == 200) {
    getAll()
  }
};
const OutBlock = async (id: string) => {
  const res = await OutBlack(id);
  if (res.code == 200) {
    getAll()
  }
};

const handleBeforeOk = async () => {
  const res = await set_user_password(userid.value, password.value);
  if (res.code == 200) {
    Message.success('修改密码成功')
  }
  password.value = ""
}

const handleBeforeOk_remark = async () => {
  const res = await set_user_remark(userid.value, remark.value);
  if (res.code == 200) {
    Message.success('修改备注成功')
    getAll()
  }
  remark.value = ""
}

const handleBlock = async (id: string) => {
  const res = await black(id);
  if (res.code == 200) {
    Message.success('拉黑成功')
    getAll()
  } else {
    Message.error('拉黑失败')
  }
};


const handleBeforeOk_money=async ()=>{
  const res = await add_money(userid.value,money.money,money.memo);
  if (res.code == 200) {
    Message.success('操作成功')
    getAll()
  } else {
    Message.error('操作失败')
  }
}
const queryParams = ref({
  key: "",
  status: 1,
  current: 1,
  pageSize: 10,
});

const reset=()=>{
  queryParams.value.key=""
  queryParams.value.status=-1
  getAll();
}
/**
 * 获取所有的用户列表
 */
const getAll = async () => {
  const res: any = await lists(queryParams.value);
  if (res.code == 200) {
    data.value = res.data.data;
    pagination.total = res.data.total;
  }
};
onMounted(async () => {
  getAll()
})
</script>


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

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

.right-side {
  width: 280px;
  margin-left: 16px;
}

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

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

.moduler-wrap {
  border-radius: 4px;
  background-color: var(--color-bg-2);

  :deep(.text) {
    font-size: 12px;
    text-align: center;
    color: rgb(var(--gray-8));
  }

  :deep(.wrapper) {
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;

    &:last-child {
      .text {
        margin-bottom: 0;
      }
    }

    &:hover {
      .icon {
        color: rgb(var(--arcoblue-6));
        background-color: #e8f3ff;
      }

      .text {
        color: rgb(var(--arcoblue-6));
      }
    }
  }

  :deep(.icon) {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    color: rgb(var(--dark-gray-1));
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    background-color: rgb(var(--gray-1));
    border-radius: 4px;
  }
}
</style>

<style lang="less" scoped>
// responsive
.mobile {
  .container {
    display: block;
  }

  .right-side {
    // display: none;
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
  }
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #e8e8e8;
}
</style>
