<template>
  <div>
    <!-- <div class="card content-box">
    </div> -->
    <div class="title">
      用户管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div class="screen_view">
          登录账号&ensp;&ensp;<el-input v-model="loginName" style="width: 50%" size="large" placeholder="输入登录账号" />
        </div>
        <div class="screen_view">
          用户状态&ensp;&ensp;<el-select v-model="status" placeholder="请选择用户状态" size="large" style="width: 50%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="screen_view">
          手机号码&ensp;&ensp;<el-input
            v-model="phonenumber"
            style="width: 50%"
            size="large"
            :rules="[
              { required: true, message: '请输入手机号码', trigger: 'blur' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
            ]"
            placeholder="输入手机号码"
          />
        </div>
      </div>
      <div class="screen1">
        <div class="screen_view1">
          <div>时间&ensp;&ensp;</div>
          <el-date-picker
            v-model="createTime"
            type="daterange"
            size="large"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-value="timedate"
            :disabled-date="pickerOptions"
          />
        </div>
        <div>
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <el-button v-if="BUTTONS.useradd" type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button>

      <div>&ensp;</div>
      <el-table :data="tableData.list.records" style="width: 100%" border>
        <el-table-column prop="id" label="用户ID" show-overflow-tooltip />
        <el-table-column prop="userName" label="用户名称" />
        <el-table-column prop="loginName" label="登录账号" />
        <el-table-column prop="dept.deptName" label="部门" :show-overflow-tooltip="true" />
        <el-table-column prop="phonenumber" label="手机" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="status" label="用户状态" width="120">
          <template #default="scope">
            <div v-if="scope.row.status == 0">正常</div>
            <div v-else>错误</div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip />

        <!-- <el-table-column prop="status" label="推送" align="center">
          <template #default="scope">
            <el-select :model-value="scope.row.status" placeholder="选择推送模式" size="large" @change="postersDevice">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="260">
          <template #default="scope">
            <el-button v-if="BUTTONS.useredit" color="#0052d9" type="primary" @click="newition(scope.row)">编辑</el-button>
            <el-button v-if="BUTTONS.resetpasswords" @click="Newpassword(scope.row)">重置密码</el-button>
            <el-button v-if="BUTTONS.delete" @click="onremove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <div></div>
        <slot name="pagination">
          <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        </slot>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
      <div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" disabled placeholder="用户名：请输入用户名">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入修改密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <!-- <user /> -->
                  <lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="determine(loginFormRef)">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<!--  
-->
<script setup lang="ts">
import { useHandleData } from "@/hooks/useHandleData.js";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { platformuserlist, userremove } from "../../api/home/Multisite.js";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { Login } from "@/api/interface/index.js";
// import { ElForm, ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { ElForm, ElNotification } from "element-plus";
import { newloginApi } from "@/api/modules/login.js";
const { BUTTONS } = useAuthButtons();

const router = useRouter();

const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "停用"
  }
]);
const timedate = ref();
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
const query = (val: any) => {
  if (val == 0) {
    getplatformuserlist();
  } else {
    (createTime.value = []), (loginName.value = ""), (status.value = ""), (phonenumber.value = "");
    getplatformuserlist();
  }
};
const newaddition = () => {
  router.push({
    path: "/user/addition",
    query: {
      type: "用户新增", // 传递的参数
      id: ""
    }
  });
};
const newition = (row: any) => {
  router.push({
    path: "/user/addition",
    query: {
      type: "用户编辑", // 传递的参数
      id: row.id
    }
  });
};
// 查询

const tableData = ref();
const loginName = ref("");
const status = ref("");
const phonenumber = ref();
const createTime = ref();
createTime.value = [];

const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
const getplatformuserlist = async () => {
  let obj = {
    orderByColumn: "createTime",
    "params[beginTime]": createTime.value[0],
    'params["endTime"]': createTime.value[1],
    loginName: loginName.value,
    status: status.value,
    phonenumber: phonenumber.value,
    pn: pageable.value.pn,
    ps: pageable.value.ps
  };
  const { data } = await platformuserlist(obj);
  tableData.value = data;
  pageable.value.total = tableData.value.list.total;
};
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};
// 用户推送
// const postersDevice = async (value: any) => {
//   console.log(value);

//   ElMessageBox.confirm("确定推送模式吗？", "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning"
//   })
//     .then(() => {
//       ElMessage({
//         type: "success",
//         message: "确定"
//       });
//     })
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "取消"
//       });
//     });
// };
//
const onremove = async (row: any) => {
  await useHandleData(userremove, { ids: row.id }, "删除");
  await getplatformuserlist();
};
const currentDate = ref();
// 修改密码按钮
const userid = ref();
const Newpassword = (e: any) => {
  dialogVisible.value = true;
  userid.value = e.id;
  userid.value = e.id;
  loginForm.username = e.loginName;
};
//constant
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }]
});
// const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
  username: "",
  password: "",
  tenantNo: "",
  rememberMe: true
});
const determine = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    dialogVisible.value = true;
    try {
      const { data } = await newloginApi({
        id: userid.value,
        loginName: loginForm.username,
        password: loginForm.password
      });
      console.log(data);

      ElNotification({
        message: "重置密码成功",
        type: "success",
        duration: 3000
      });
    } finally {
      dialogVisible.value = false;
    }
  });
};
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--  -->
