<template>
  <div v-if="isRouterAlive">
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="query.name"
          placeholder="登录账号"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="handleEdit1">创建子账户</el-button>
        <el-button type="primary" @click="createEnterprise">创建部门</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>       
        <el-table-column prop="parentName" label="上级"></el-table-column>       
        <el-table-column prop="personNum" label="人员"></el-table-column>       
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <!-- 添加用户弹出框 -->
      <el-dialog title="编辑" :visible.sync="editVisible1" width="30%">
        <el-form
          ref="addform"
          :model="addform"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addform.username"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="addform.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addform.password"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="enterpriseName">
            <!-- <el-input v-model="addform.enterpriseName"></el-input> -->
            <el-select
              v-model="addform.enterpriseName"
              placeholder="请选择"
              @change="enterfun"
            >
              <el-option
                v-for="item in enterpriselist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户身份" prop="identity">
            <el-select v-model="identity" placeholder="请选择">
              <el-option
                v-for="item in yhsflist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="userType" placeholder="请选择">
              <el-option
                v-for="item in yhlxlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="部门ID ">
            <el-input
              v-model="addform.enterpriseId"
              :disabled="true"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="角色">
            <!-- <el-input v-model="addform.roleId"></el-input> -->
            <el-select v-model="addform.roleId" placeholder="请选择">
              <el-option
                v-for="item in rololist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit1">保 存</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="旧密码">
          <el-input v-model="modifyfrom.oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="modifyfrom.newPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="modifyfrom.confirmPassword"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 创建企业 -->
    <el-dialog title="创建部门" :visible.sync="enterpriseidedit" width="30%">
      <el-form ref="form" :model="Enterprise" label-width="70px">
        <el-form-item label="部门名字">
          <el-input v-model="Enterprise.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="enterpriseidedit = false">取 消</el-button>
          <el-button type="primary" @click="addEnterprise">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { formatTime } from '../../../echart/big-screen-vue-datav/src/utils';
import { httpGet, httpPost } from "../api/index";
export default {
  name: "basetable",
  data() {
    return {
      modifyfrom: { oldPassword: "", newPassword: "", confirmPassword: "" },
      isRouterAlive: true,
      identity: "",
      userType: "",
      enterpriselist: [],
      Enterprise: { name: "" },
      rololist: [],
      enterpriseidedit: false,
      yhsflist: [
        // { value: 0, label: "超级管理员" },
        // { value: 1, label: "管理员" },
        { value: 2, label: "老师" },
        { value: 3, label: "学生" },
      ],
      yhlxlist: [
        { value: 1, label: "管理员" },
        { value: 2, label: "子用户" },
        { value: 3, label: "小程序用户" },
      ],
      pageSize: 10,
      pageIndex: 1,
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 10,
        options: [],
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      addform: {
        username: "",
        password: "",
        enterpriseName: "",
        identity: "",
        userType: "",
        enterpriseId: "",
        roleId: "",
      },
      rules: {
        username: [{ required: true, message: "请输入名称", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        enterpriseName: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "blur" },
        ],
      },
      idx: -1,
      id: -1,
      editVisible1: false,
      alluser:[]
    };
  },
  created() {
    this.getUserList();
  },
  mounted(){    
    this.getEnterprise(); //查询所属部门
  },
  methods: {
    // 获取用户列表
    getUserList() {
      var data = {
        pageNum: 1,
        pageSize: 10,
      };
      httpGet(data, this.$api.getUserList).then((res) => {
        this.alluser = res.data.list;
      });
    },
    enterfun(e) {
      this.enterpriselist.map((li) => {
        if (li.id == e) {
          this.addform.enterpriseName = li.name;
          this.addform.enterpriseId = li.id;
        }
      });
    },
    getEnterprise() {
      var data={
        pageNum: 1,
        pageSize: 10
      }
      httpGet(data, this.$api.getEnterprise).then((res) => {
        var that=this
        var enterpriselist=res.data.list
       enterpriselist.map(li=>{
          var obj=that.alluser.find(function (x) {
            return x.enterpriseId == li.id
          })
          if(obj){
            li.personList.push(obj)
            li.personNum =  li.personList.length
          }
        })
        console.log(enterpriselist)
        this.enterpriselist = enterpriselist;
        this.tableData = enterpriselist
        this.pageTotal = res.data.total
      });
    },
    addEnterprise() {
      httpGet("", this.$api.userInfo).then((res3) => {
        if (res3.success) {
          var data = {
            name: this.Enterprise.name,
            parentId: res3.data.enterpriseId,
          };
          httpPost(data, this.$api.addEnterprise).then((res) => {
            if (res.success) {
              this.$message.success("创建成功");
              this.enterpriseidedit = false;
              this.getEnterprise()
            }
          });
        }
      });
    },
    createEnterprise() {
      this.enterpriseidedit = true;
    },
    // 编辑操作
    handleEdit1() {
      this.editVisible1 = true;
    },
    // 保存编辑  添加用户
    saveEdit1() {
      this.addform.identity = this.identity;
      this.addform.userType = this.userType;
      if (
        this.addform.username == "" ||
        this.addform.phone == "" ||
        this.addform.password == "" ||
        this.addform.userType == ""
      ) {
        this.$message.error("请填写完整信息");
      } else if (this.addform.phone.length != 11) {
        this.$message.error("请填写正确手机号");
      } else {
		  var addform=this.addform
		  addform['tenantId']=JSON.parse(localStorage.getItem('tenantId'))
        httpPost(addform, this.$api.addUser).then((res) => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.editVisible1 = false;
            this.isRouterAlive = false;
            this.$nextTick(function () {
              this.isRouterAlive = true;
            });
          }
        });
      }
    },
    handleChange(value) {
      console.log(value);
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getUserList1(1, 10);
    },
    // 删除操作
    handleDelete(index,row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          var data=[row.id]
          httpPost(data,this.$api.deleteUser).then(res=>{
            this.$message.success("删除成功");
            this.getUserList();
          })
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + " ";
      }
      this.$message.error(`删除了${str}`);
      this.multipleSelection = [];
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      console.log(this.form);
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      if (this.modifyfrom.confirmPassword != this.modifyfrom.newPassword) {
        this.$message.error("确认密码输入错误！");
      } else {
        var data = {
          new: this.modifyfrom.newPassword,
          old: this.modifyfrom.oldPassword,
        };
        httpPost(data, this.$api.editPassword).then((res) => {
          if (res.success) {
            this.$message.success("修改成功！");
            this.editVisible = false;
          } else {
            this.$message.error("修改失败，请输入正确的旧密码！");
          }
        });
      }
    },
    // 分页导航
    handlePageChange(val) {
      // this.$set(this.query, "pageIndex", val);
      console.log(val);
      this.getUserList1(val, 10);
    },
    getUserList1(pageNum, pageSize) {
      var q = {
        username: this.query.name,
      };
      var data = {
        pageNum: pageNum,
        pageSize: pageSize,
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getUserList).then((res) => {
        this.tableData = res.data.list;
        this.pageTotal = res.data.total;
      });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.mright {
  margin-right: 10px;
  display: inline-block;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.elrow {
  margin-bottom: 20px;
}

.grid-content {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-around;
  -webkit-box-align: center;
}
/* 加的 */
.colposition {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border: 2px solid hsla(0, 0%, 100%, 0.2);
  /* width: 100%; */
}
.grid-cont-right {
  flex: 1;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  font-size: 14px;
  line-height: 32px;
}

.grid-num {
  font-size: 24px;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.grid-con-1 {
  position: relative;
}
.grid-con-1::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 1px;
  transform: translateY(-50%);
  height: 70px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px dashed #666;
}
.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #333;
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #333;
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}
</style>
