<template>
  <div class="app-container">
    <el-card>
      <div class="cardbox">
        <div class="top">
          <div class="l">成员</div>
          <div class="r">
            <el-input
              v-model="serchKey"
              style="width: 240px"
              placeholder="输入姓名/电话"
              :suffix-icon="Search"
              @clear="listSearch"
              @keydown="listSearch"
              clearable
            />
              <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
             
            />
            <el-button
              type="primary"
              @click="dialogVisible = true"
              :icon="CirclePlus"
              >添加成员</el-button
            >
          </div>
        </div>
        <div class="container">
          <div class="l">
            <el-tree
              :data="data"
              :props="defaultProps"
              class="tree"
              :check-on-click-leaf="false"
              :default-expand-all="true"
            
            >
              <template #default="{ node, data }">
                <div class="treeitem">
                  <div
                    class="icon"
                    v-if="data.children && data.children.length"
                  >
                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
                  </div>
                  <div
                    class="title"
                    :class="{ on: name == node.label && deptId == data.deptId }"
                    @click.stop="screen(data)"
                  >
                    {{ node.label }}
                  </div>
                </div>
              </template>
            </el-tree>
          </div>

          <div class="r">
            <el-table
              :data="tableData"
              class="table"
              border
              v-loading="loading"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="120"
                align="center"
              >
               <template #default="{row,$index}">
                 {{ (pageNum - 1) * pageSize + $index + 1 }}
               </template>
              </el-table-column>
              <el-table-column
                prop="deptId"
                label="部门ID"
                width="120"
                align="center"
              />
              <el-table-column prop="deptName" label="部门名称" />
              <el-table-column prop="remark" label="备注" />
              <el-table-column
                prop="createTime"
                label="添加时间"
                sortable
                align="center"
                width="180"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="120"
                align="center"
              >
                <template #default="scope">
                  
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="editshow(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="remove(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getusertlist" />

          </div>
        </div>
      </div>
    </el-card>
  </div>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    width="500"
    :title="form.id ? '编辑部门' : '添加部门'"
    header-class="dialogheader"
    :align-center="true"
    center
  >
      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
      <el-form-item label="成员姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="成员账号" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="选择部门">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择角色" prop="deptLevel">
        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
          <el-radio :value="1">普通角色</el-radio>
          <el-radio :value="2">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(formEl)">取消</el-button>
        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  listDepttree,
  getDept,
  levelOptions,
  addDept,
  updateDept,
  delDept,
} from "@/api/system/SysSpeedingDept.js";
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
import { ref } from "vue";

import { ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")

const userdata = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined
  },
  rules: {
    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  }
})

const { queryParams, form, rules } = toRefs(userdata)

const loading=ref(false)

const dialogVisible = ref(false);
const deptId = ref("");

const Options = ref([]);
const tableData = ref([]);
const defaultProps = {
  children: "children",
  label: "deptName",
  class: "custtree",
};
const data = ref([]);
function screen(item) {
  name.value = item.deptName;
  deptId.value = item.deptId;
  pageNum.value = 1;
  serchKey.value = "";
  getDeptlist();
}

const resetForm = (formEl) => {
  if (!formEl) return;
  dialogVisible.value = false;
  formEl.resetFields();
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false;
      if (form.value.deptId) {
        updateDept(form.value).then((res) => {
          getDeptlist();
          formEl.resetFields();
          form.value.deptLevel=1;
          form.value.deptId = "";
        });
      } else {
        addDept(form.value).then((res) => {
          getthreedata();
          formEl.resetFields();
           form.value.deptLevel=1;
          form.value.deptId = "";
        });
      }

      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
function remove(item) {
  ElMessageBox.confirm("确定删除该部门？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delDept(item.deptId).then((r) => {
        getthreedata(false);
      });
    })
    .catch(() => {});
}

// 左边数据
function getthreedata(type = true) {
  listDepttree().then((res) => {
    data.value = res.data;
    if (res.data.length && type) {
      deptId.value = 0;
      name.value = res.data[0].deptName;
    }
    getusertlist();
  });
}
getthreedata();

/** 查询用户列表 */
function getusertlist() {
  loading.value = true
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}






// 编辑数据
function editshow(item) {
  console.log(item.parentId);
  form.value = {
    deptId: item.deptId,
    parentId: item.parentId,
    deptName: item.deptName,
    deptLevel: item.deptLevel,
    remark: item.remark,
  };
  dialogVisible.value = true;
  elradiogroup(false);
}

// 获取相关部门
elradiogroup();
function elradiogroup(type = true) {
  levelOptions({ level: form.value.deptLevel }).then((res) => {
    if (type) {
      form.value.parentId = "";
    }
    Options.value = res.data;
  });
}

// 搜索
function listSearch(e) {
  if ((e.keyCode && e.keyCode == 13) || !e) {
    pageNum.value = 1;
    getDeptlist();
  }
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  .l {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }
  .r {
    display: flex;
    gap: 20px;
  }
}
.cardbox {
  height: calc(100vh - 84px - 30px - 30px - 30px);
}

.container {
  border-top: 1px solid #eee;
  height: calc(100% - 47px);
  display: flex;
  .l {
    width: 350px;
    padding: 15px;
    overflow: auto;
    flex-shrink: 0;
    height: 100%;
    :deep(.tree) {
      --el-tree-node-content-height: 35px;
      height: 100%;
      overflow: auto;
      .is-focusable .el-tree-node__content {
        background: transparent;
      }
      .el-tree-node > .el-tree-node__children {
        overflow: inherit;
      }
      .custtree {
        .custtree {
          padding-left: 25px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            height: calc(100% + 12px);
            width: 1px;
            top: 0px;
            left: 7px;
            border-right: 1px dashed #979797;
          }

          .el-tree-node__content {
            padding: 0px !important;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              height: 1px;
              width: 10px;
              top: 13px;
              left: -15px;
              border-top: 1px dashed #979797;
            }
            &::before {
              content: "";
              position: absolute;
              height: 14px;
              width: 1px;
              top: 0px;
              left: -18px;
              border-left: 1px dashed #979797;
            }
          }

          &:nth-last-of-type(1) {
            &::before {
              display: none;
            }
          }
        }

        & > .el-tree-node__content {
          .el-tree-node__expand-icon {
            display: none;
          }
          .icon .iocnPlus {
            display: block;
          }
          .icon .iocnMinus {
            display: none;
          }
        }
      }
      .is-expanded {
        & > .el-tree-node__content {
          .icon .iocnPlus {
            display: none !important;
          }
          .icon .iocnMinus {
            display: block !important;
          }
        }
      }
    }
    .tree {
      width: fit-content;
      min-width: 100%;
      .treeitem {
        display: flex;
        align-items: center;
        width: 100%;
      }
      .icon {
        color: #4d7bff;
        border: 1px solid;
        padding: 2px;
        border-radius: 2px;
        margin-right: 10px;
      }
      .title {
        white-space: nowrap;
        padding: 5px 3px;
        width: 100%;

        display: block;
        &.on {
          background: #ecf1ff;
          color: #000;
        }
      }
    }
  }
  .r {
    flex: 1;
    .table {
      height: calc(100% - 60px);
    }
  }
}
</style>
