<template>
  <div class="content">
    <el-card class="right_card">
      <div class="container">
        <!-- 菜单栏 -->
        <From
          class="from"
          :form-items="dynamicFormItems"
          @formSubmitted="handleFormSubmitted"
          @formReset="handleFormReset"
          :is_add_button="'新增'"
          @addForm="edit"
        />

        <!-- 表格 -->
        <div class="table">
          <Table
            @getTableData="changeTableData"
            v-model:page="page"
            ref="table"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="userId" label="用户ID" />
            <el-table-column prop="nickName" label="用户昵称">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <!-- <el-image style="width: 50px; height: 50px; margin-right: 5px"
                                        :src="scope.row.headImage" :z-index="99999" fit="fill"
                                        :preview-src-list="[scope.row.headImage]" :preview-teleported="true">
                                    </el-image> -->
                  <div>{{ scope.row.nickName }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="loginName" label="登录用户名" />
            <!-- <el-table-column prop="deptName" label="所属部门" width="120" /> -->
            <!-- <el-table-column prop="roleList" label="角色">
                            <template #default="scope">
                                <el-tag style="margin: 5px;" v-for="item in scope.row.roleList" :key="item.roleId"
                                    type="success" effect="light">
                                    {{ item.roleName }}
                                </el-tag>
                            </template>
                        </el-table-column> -->
            <el-table-column prop="phone" label="手机号" />

            <el-table-column prop="accountStatus" label="状态">
              <template #default="scope">
                <el-tag
                  :type="scope.row.accountStatus ? 'success' : 'info'"
                  effect="light"
                >
                  {{ scope.row.accountStatus ? "生效" : "失效" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastLoginTime" label="最新登录时间">
              <template #default="scope">
                {{ convertUTCToBeijing(scope.row.lastLoginTime) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="100">
              <template #default="scope">
                <div class="button">
                  <el-link
                    class="button-item"
                    type="primary"
                    style="margin-bottom: 5px"
                    @click="edit(scope.row)"
                  >
                    编辑
                  </el-link>
                  <el-link
                    class="button-item"
                    type="danger"
                    style="margin-bottom: 5px"
                    @click="removeUser(scope.row)"
                  >
                    删除
                  </el-link>
                </div>
              </template>
            </el-table-column>
          </Table>
        </div>

        <!-- 操作弹窗 -->
        <Layer
          :layer="layer"
          @confirm="submit(ruleForm)"
          @close="layer.show = false"
        >
          <el-form
            :model="formEdit"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            style="margin-right: 30px"
          >
            <el-row :gutter="40">
              <el-col :span="12" class="grid-cell">
                <el-form-item label="用户昵称" required prop="nickName">
                  <el-input
                    v-model="formEdit.nickName"
                    placeholder="请输入用户名"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="登录用户名" required prop="loginName">
                  <el-input
                    :disabled="layer.edit"
                    v-model="formEdit.loginName"
                    placeholder="请输入用户名"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <!--   <el-form-item label="所属部门" prop="deptId">
                                    <el-tree-select v-model="formEdit.deptId" :data="deptTreeData"
                                        :render-after-expand="false" style="width: 240px" />
                                </el-form-item> -->
                <el-form-item label="手机号" required prop="phone">
                  <el-input
                    v-model="formEdit.phone"
                    placeholder="请输入用户名"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="formEdit.password"
                    placeholder="请输入用户密码"
                    clearable
                  />
                </el-form-item>
                <!-- <el-form-item label="头像" prop="headImage">
                                    <el-upload class="avatar-uploader"
                                        accept="image/jpg,image/jpeg,image/png,image/webp" action="#"
                                        :show-file-list="false" :before-upload="beforeAvatarUpload"
                                        :http-request="selfUpload">
                                        <el-image v-if="formEdit.headImage" style="width: 100px; height: 100px"
                                            :src="formEdit.headImage" fit="fill" />
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                        <template #tip>
                                            <div class="el-upload__tip">
                                                仅支持上传 jpg / png / webp 图片格式
                                            </div>
                                        </template>
                                    </el-upload>
                                </el-form-item> -->
                <!-- <el-form-item label="角色" prop="roleList">
                                    <el-select v-model="formEdit.roleList" multiple placeholder="请选择" clearable
                                        style="width: 240px">
                                        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                                            :value="item.roleId" />
                                    </el-select>
                                </el-form-item> -->
                <!--  <el-form-item label="所属渠道" prop="channelId">
                                    <el-input v-model="formEdit.channelId" placeholder="请输入所属渠道" clearable />
                                </el-form-item> -->
                <!-- <el-form-item label="是否启用" prop="accountStatus">
                                    <el-switch v-model="formEdit.accountStatus" :active-value="1" :inactive-value="0" />
                                </el-form-item> -->
              </el-col>
            </el-row>
          </el-form>
        </Layer>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, reactive, watch, computed } from "vue";
import { useEventListener } from "@vueuse/core";
import { ElMessage, ElLoading } from "element-plus";
import { useGetDictList } from "@/hooks/useGetDictList.js";
import { convertUTCToBeijing } from "@/utils/index.js";
import From from "@/components/from/index.vue";
import Table from "@/components/table/index.vue";
import Layer from "@/components/layer/index.vue";
import { attachFile, attachImage } from "@/api/common.js";
import {
  promoterUserAddOne,
  promoterUserDeleteOne,
  promoterUserQueryList,
  promoterUserUpdateOne,
} from "@/api/outBagModule.js";

const { dictData, loadDictData, getOptions, getDictionaryName } =
  useGetDictList();
const form = ref(null);
const tableData = ref([]);

// 分页参数, 供table使用
const page = reactive({
  pageNum: 1,
  pageSize: 20,
  total: 0,
});

const formSearch = ref({
  deptId: undefined, //部门ID
  accountStatus: undefined, //状态
  loginName: undefined, //登录用户名
  nickName: undefined, //用户昵称
  phone: undefined, //手机号
  page: 1, // 当前页码
  limit: 20, // 当前页数量(查询量)
});

const dynamicFormItems = ref([]);

// 展开收缩部门组织
const isCollapse = ref(false);
const resizeHandler = () => {
  // 页面小于1000px自动收缩
  if (document.body.clientWidth <= 1000 && !isCollapse.value) {
    isCollapse.value = true;
  } else if (document.body.clientWidth > 1000 && isCollapse.value) {
    isCollapse.value = false;
  }
};
// 初始化调用
resizeHandler();

onBeforeMount(() => {
  // 监听页面变化
//   useEventListener("resize", resizeHandler);
  settingData();
//   getList();
});

// 获取缓存数据设置筛选数据
const settingData = () => {
  loadDictData().then(() => {
    dynamicFormItems.value = [
      {
        label: "登录用户名",
        prop: "loginName",
        type: "input",
        needEnterEvent: true,
      },
      {
        label: "用户昵称",
        prop: "nickName",
        type: "input",
        needEnterEvent: true,
      },
      {
        label: "手机号码",
        prop: "phone",
        type: "input",
        needEnterEvent: true,
      },
    ];
  });
};

// 分页数据
const getList = async () => {
  let res = await promoterUserQueryList({ ...formSearch.value });
  console.log(res);
  tableData.value = res.data;
  page.total = res.pageMeta.total;
};

const changeTableData = (type) => {
  formSearch.value.page = type ? 1 : page.pageNum;
  formSearch.value.limit = page.pageSize;
  // 分页切换
  getList();
};

// 搜索
const handleFormSubmitted = (formData) => {
  // console.log("接收到子组件传递的数据", formData);
  formSearch.value.page = 1;
  formSearch.value.limit = 20;

  formSearch.value.accountStatus = formData.accountStatus;
  formSearch.value.loginName = formData.loginName;
  formSearch.value.nickName = formData.nickName;
  formSearch.value.phone = formData.phone;

  getList();
};

// 表单重置
const handleFormReset = () => {
  formSearch.value = {
    deptId: undefined, //部门ID
    accountStatus: undefined, //状态
    loginName: undefined, //登录用户名
    nickName: undefined, //用户昵称
    phone: undefined, //手机号
    page: 1, // 当前页码
    limit: 20, // 当前页数量(查询量)
  };

  getList();
};

// 选择监听器
const handleSelectionChange = (val) => {
  context.emit("selection-change", val);
};

// 弹窗
const layer = ref({
  show: false,
  title: "新增用户",
  showButton: true,
  width: "50vw",
  edit: false, //是否编辑
});

const formEdit = ref({
  userId: undefined, //用户ID 编辑带入 *
  deptId: undefined, //所属部门ID *
  headImage: undefined, //头像
  loginName: undefined, //登录用户名 *
  nickName: undefined, //用户昵称 *
  password: undefined, //密码 *
  phone: undefined, //手机号 *
  roleList: undefined, //角色
  accountStatus: undefined, //是否启用
  channelId: undefined, //所属渠道
});

const edit = (row) => {
  formEdit.value = {};
  ruleForm.value?.resetFields();
  if (row) {
    layer.value.title = "编辑用户";
    layer.value.edit = true;
    formEdit.value = { ...row };
    formEdit.value.password = undefined;
    formEdit.value.deptId = String(row.deptId);
  } else {
    layer.value.title = "新增用户";
    layer.value.edit = false;
    // 重置数据
    formEdit.value = {};
    formEdit.value.deptId = 1;
  }
  layer.value.show = true;
};

const ruleForm = ref(null);

const rules = reactive({
  loginName: [{ required: true, message: "请输入登录用户名", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
});

const submit = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log("提交参数", { ...formEdit.value });
      if (layer.value.edit) {
        delete formEdit.value.loginName;
        await promoterUserUpdateOne({ ...formEdit.value }).then((res) => {
          ElMessage.success("修改成功");
          getList();
          layer.value.show = false;
        });
      } else {
        if (!formEdit.value.password) {
          ElMessage.error("请输入登录密码");
          return;
        }
        await promoterUserAddOne({ ...formEdit.value }).then((res) => {
          ElMessage.success("新增成功");
          getList();
          layer.value.show = false;
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const loading = ref(null);
// 加载信息
const openFullScreen = (loadText) => {
  loading.value = ElLoading.service({
    lock: true,
    text: loadText,
    background: "rgba(0, 0, 0, 0.7)",
  });
};

const closeFullScreen = () => {
  loading.value.close();
};

// 上传二维码图片
const beforeAvatarUpload = (rawFile) => {
  let fileType = ["image/jpeg", "image/png", "image/webp"];
  if (!fileType.includes(rawFile.type)) {
    ElMessage.error("请上传图片格式为jpg/png/webp!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error(`图片大小不能超过 2MB!`);
    return false;
  }
  return true;
};

const selfUpload = async (param) => {
  const file = param.file;
  const formData = new FormData();
  formData.append("file", file);
  openFullScreen("图片上传中");
  try {
    const res = await attachFile(formData);
    formEdit.value.headImage = res.data.url;
    ElMessage.success("图片上传成功");
  } catch (err) {
    ElMessage.error("图片上传失败");
    console.error(err);
  } finally {
    closeFullScreen();
  }
};

// 删除用户
const removeUser = async (row) => {
  try {
    await promoterUserDeleteOne({ userId: row.userId });
    ElMessage.success("删除成功");
  } catch (err) {
    ElMessage.success("删除失败，请重试！");
  } finally {
    getList();
  }
};
</script>

<style lang='scss' scoped>
.button {
  display: flex;

  .button-item {
    margin: 4px;
  }
}

:deep() {
  .el-input__wrapper,
  .el-tree {
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);
  }
}

.content {
  display: flex;
  margin: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);

  .left_card {
    // min-width: 300px;
    flex: 1;
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);

    .filter_tree {
      width: 100%;
      margin-top: 20px;
    }
  }

  .right_card {
    flex: 5;
    height: calc(100% - 2px);
    width: 100%;
    position: relative;
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);

    .icon {
      position: absolute;
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--system-primary-color);
      color: var(--system-primary-text-color);
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    .container {
      width: 100%;
      height: calc(100vh - 155px);
      display: flex;
      flex-direction: column;
    }

    .from {
      margin-bottom: 10px;
    }

    .table {
      flex: 1;
      padding: 15px;
      overflow: auto;
    }
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  text-align: center;
  border: 1px solid #e4e7ed;
}
</style>