<template>
  <div class="tabs">
  </div>
  <div class="main">
    <div class="container system-container panel">
      <div class="box">

        <div class="left">
          <h1>用户姓名：</h1>
          <input type="text" v-model="state1" class="textInput"/>
          <div><img src="/images/search.png" @click="onSearch"></div>
        </div>

        <div class="right">
          <span @click="onAddClick">添加新用户</span>
        </div>
      </div>

      <div class="tableMessage">
        <el-table :data="tableData" border style="color: black;">
          <el-table-column type="index" label="序号" align="center" width="100px"/>
          <el-table-column prop="userName" label="用户姓名" align="center"/>
          <el-table-column prop="userAccountNumber" label="用户账号" align="center"/>
          <el-table-column prop="userPhone" label="电话" align="center"/>
          <el-table-column prop="userEmail" label="邮箱" align="center"/>
          <el-table-column prop="operation" label="操作" align="center">
            <template #default="scope">
              <div class="operation">
                <span @click.prevent="onAmendClick(scope.$index, tableData)">修改信息</span>
                <!--删除-->
                <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    @confirm="confirmEvent(scope.$index, tableData)"
                    title="确认删除?">
                  <template #reference>
                    <span>删除用户</span>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!---分页-->
        <div class="pagination">
          <el-pagination background
                         layout="prev, pager, next"
                         :total="total"
                         hide-on-single-page="hide-on-single-page"
                         @prev-click="prev"
                         @next-click="next"
                         @current-change="changEnum">
          </el-pagination>
        </div>
      </div>
    </div>

    <!--弹出框--->
    <el-dialog v-model="dialogFormVisible" :title="title" center=center width="900px" top="17%">
      <el-form :model="form">
        <el-form-item label="用户账号：" :label-width="formLabelWidth">
          <el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="用户密码：" :label-width="formLabelWidth">
          <el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话：" :label-width="formLabelWidth">
          <el-input v-model="form.userPhone" autocomplete="off" style="width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" :label-width="formLabelWidth">
          <el-input v-model="form.userEmail" autocomplete="off" style="width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off" style="width: 260px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit" style="color:#FFFFFF;">保存</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts">

  import {onMounted, reactive, toRefs} from 'vue';
  import {post} from "../uilts/axios";
  import {ElMessage} from 'element-plus'
  import {format} from '../uilts/String';

export default {
  name: 'SystemManagement',
  setup() {
    let option = reactive({
      state1: '',
      dialogFormVisible: false,
      isDisabled: false,
      title: '',
      formLabelWidth: "100px",
      total: null,
      current: 1,
      size: 10,
      form: {
        userName: '',
        userAccountNumber: '',
        userPhone: '',
        userEmail: '',
        userPassword: ''
      },
      tableData: []
    })

    onMounted(() => {
      findAllUser();
    })

    const findAllUser = () => {
      return post("user/findUserByUserName", {
        userName: option.state1.trim(),
        current: option.current,
        size: option.size
      }).then((res: any) => {
        option.tableData = res.data.records;
        option.total = res.data.total;
      })
    }

    //添加用户
    const onAddClick = () => {
      option.isDisabled = false
      option.title = '添加用户'
      option.dialogFormVisible = true
      option.form = {
        userName: '',
        userAccountNumber: '',
        userPhone: '',
        userEmail: '',
        userPassword: ''
      }
    }

    //修改用户
    const onAmendClick = (index, rows) => {
      option.isDisabled = true
      option.title = '修改信息'
      option.dialogFormVisible = true
      option.form = JSON.parse(JSON.stringify(rows[index]))
    }

    //删除用户
    const confirmEvent = (index, rows) => {
      post('user/delUser', {
        userAccountNumber: rows[index].userAccountNumber
      }).then((res: any) => {
        if (res.error != 0) {
          ElMessage.error({
            message: "删除失败",
            type: 'error'
          });
          return;
        } else {
          findAllUser()
          ElMessage.success({
            message: "删除成功",
            type: 'success'
          });
        }
      })
    }

    //图片搜索
    const onSearch = () => {
      post("user/findUserByUserName", {
        current: option.current,
        size: option.size,
        userName: option.state1
      }).then((res: any) => {
        option.tableData = res.data.records;
        option.total = res.data.total;
      })
    }

    const prev = (e) => {
      option.current = e
      findAllUser()
    }

    const next = (e) => {
      option.current = e
      findAllUser()
    }

    const changEnum = (e) => {
      option.current = e;
      findAllUser()
    }

    const verify = () => {
      let errors = [];
      if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == "") {
        errors.push("用户账号");
      }
      if (option.form.userPassword == null || option.form.userPassword.trim() == "") {
        errors.push("用户密码");
      }
      if (option.form.userName == null || option.form.userName.trim() == "") {
        errors.push("用户姓名");
      }
      if (errors.length > 0) {
        ElMessage.error({
          message: format("{0}不能为空", errors.join(", ")),
          type: 'error'
        });
      }
      return errors.length > 0;
    }

    const submit = () => {
      if (verify()) return;
      if (option.title === '修改信息') {
        post("user/updateUser", option.form, "application/json").then((res: any) => {
          option.dialogFormVisible = false
          if (res.error != 0) {
            ElMessage.error({
              message: "修改失败",
              type: 'error'
            });
            return;
          } else {
            findAllUser()
            ElMessage.success({
              message: "修改成功",
              type: 'success'
            });
          }
        })
      }

      if (option.title === '添加用户') {
        if (verify()) return;
        post("user/insertUser", option.form, "application/json").then((res: any) => {
          option.dialogFormVisible = false
          if (res.error != 0) {
            ElMessage.error({
              message: "修改失败",
              type: 'error'
            });
            return;
          } else {
            findAllUser()
            ElMessage.success({
              message: "修改成功",
              type: 'success'
            });
          }
        })
      }
    }

    return {
      ...toRefs(option),
      onAddClick,
      onAmendClick,
      onSearch,
      submit,
      findAllUser,
      confirmEvent,
      prev,
      next,
      changEnum
    }
  }
}

</script>
<style lang="less" scoped>

.system-container {
  width: 100%;
  margin-left: 0;

  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .box {
    padding: 28px 20px 0px;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .textInput {
        width: 305px;
        height: 35px;
        line-height: 35px;
        font-size: 20px;
        text-indent: 10px;
      }

      h1 {
        width: 100px;
        height: 26px;
        font-size: 20px;
        font-weight: bold;
        line-height: 26px;
        color: #000000;
        opacity: 1;
      }

      img {
        width: 44px;
        height: 44px;
        margin-left: 10px;
        padding-top: 4px;
        cursor: pointer;
      }
    }

    .right {
      width: 100px;
      height: 26px;
      font-size: 20px;
      font-weight: bold;
      line-height: 26px;
      color: #498DF0;
      opacity: 1;

      span {
        width: 96px;
        height: 0px;
        border-bottom: 1px solid #498DF0;
        opacity: 1;
        cursor: pointer;
      }
    }
  }

  .tableMessage {
    padding: 36px 20px 20px;
    font-size: 18px;

    .operation {
      display: flex;
      justify-content: space-evenly;

      span {
        border-bottom: 1px solid #000000;
        opacity: 1;
        cursor: pointer;
        font-weight: 400;
      }

    }

    :deep(.el-table thead) {
      color: black;
    }
  }
}

:deep(.el-form-item__label) {
  text-align: left;
  color: #000000;
}

:deep(.el-form) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 90%;
  //align-content: flex-start;
}

:deep(.el-button) {
  width: 159px;
  height: 44px;
  opacity: 1;
  border-radius: 4px;
  border: 1px solid #498DF0;
  font-weight: 400;
  color: #498DF0;
}
</style>

