<template>
  <div class="tunnel-bgc">
    <div class="box-top">
      <div class="back-tunnel" @click="handleGoHome">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
      <tunnel-title/>
      <div class="all-del-btn">
        <!--        <div class="all-btn" @click="handleAll">-->
        <!--          全选-->
        <!--        </div>-->
        <!--        <div class="all-btn del-btn" @click="handleDelete">-->
        <!--          删除-->
        <!--        </div>-->
      </div>
    </div>
    <div class="user-content">
      <div class="user-box">
        <div class="user-top">
          <div class="search-box">
            <div>
              <el-input
                  v-model="username"
                  clearable
                  placeholder="输入搜索内容"
                  @clear="getInfo"
              />
            </div>
            <el-button type="primary" :icon="Search" style="margin-left: 20px" @click="getInfo">搜索</el-button>
          </div>
          <div>用户管理</div>
          <div class="all-del-btn">
            <div class="add-btn" @click="handleAddUser">添加用户</div>
            <div class="all-btn del-btn" @click="handleDelete">
              删除
            </div>
          </div>
        </div>
        <div class="device-table">
          <el-table stripe ref="multipleTable" @select="handleSelect"
                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;margin-top: 80px;"
                    :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                    :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
            <el-table-column type="selection" width="80"/>
            <el-table-column prop="userName" label="账户" align="center"/>
            <el-table-column prop="nickName" label="昵称" align="center"/>
            <el-table-column prop="roleName" label="身份" align="center"/>
            <el-table-column prop="phoneNumber" label="电话号码" align="center"/>
            <el-table-column prop="state" label="状态" align="center">
              <template #default="scope">
                {{ scope.row.state == "1" ? '启用' : '停用' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;"
                           @click="handleEditUser(scope.row)">
                  修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1658px">
      <div class="user-title">
        <span>{{ title }}</span>
      </div>
      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
        <el-form-item label="当前站点">
          <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
        </el-form-item>
        <el-form-item label="输入用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
          <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="输入昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="输入电话号码" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.state">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择身份" prop="roleId">
          <el-radio-group v-model="form.roleId" @change="(val) => {
            if (val >3){
                 getTunnel()
            }}">
            <el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
          <div class="user-select">
            <el-select
                v-model="form.tunnelList"
                multiple
                filterable
                clearable
                placeholder="请选择隧道"
                :fit-input-width="true"
                :teleported="false"
            >
              <el-option
                  v-for="item in tunnelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btns">
          <div class="cancel-btn" @click="isVisited=false">
            取消
          </div>
          <div class="sure-btn" @click="handleSubmit(formInstance)">
            确定
          </div>
        </div>
      </template>
    </el-dialog>
    <div class="pagination">
      <span @click="firstPage" v-if="showFirst">首页</span>
      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
      <span @click="lastPage" v-if="showFirst">尾页</span>
    </div>
  </div>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {addUser, editUser, getUser, getRoleOption, deleteUser, getUserDetail} from "@/api/user";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getTunnelOption} from "@/api/tunnel";
import TunnelTitle from "@/components/tunnelTitle/index.vue";

const router = useRouter()
const title = ref('添加用户')
const siteId = reactive(router.currentRoute.value.params.siteId)
const currentSite = ref(localStorage.getItem('site'))
const username = ref()
const userIds = ref()
const showFirst = ref(true)
const formInstance = ref()
const userData = ref([])
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10
});
const total = ref(10);
const isVisited = ref(false);
const showAdmin = ref(false);
const form = ref({
  password: '',
  userName: '',
  nickName: '',
  phoneNumber: '',
  state: '1',
  roleId: 3,
  tunnelList: [1]
});
const validateName = (rule, value) => {
  const reg = /^[A-Za-z0-9]+$/;
  return reg.test(value);
}
const formRules = ref({
  userName: [
    {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
    {validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
  ],
  password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
  nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
  roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
  tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
})
const radioList = ref([])
const tunnelList = ref([])
const multipleTable = ref()
onMounted(() => {
  showAdmin.value = localStorage.getItem('userId') == 2;
})
const handleGoHome = () => {
  router.push('/' + 'userToHome/' + siteId)
}
const getTunnel = () => {
  getTunnelOption(siteId).then(res => {
    if (res.code === 1000) {
      tunnelList.value = res.data
    }
  })
}

const handleAddUser = () => {
  reset()
  title.value = '添加用户'
  isVisited.value = true
  nextTick(() => {
    // 清空校验
    formInstance.value.clearValidate()
  })
}
const handleEditUser = (row) => {
  reset()
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass:'allLoading'
  })
  getUserDetail(row.userId).then(res => {
    if (res.code === 1000) {
      getTunnel()
      form.value = res.data.user
      form.value.roleId = res.data.roleIds[0]
      form.value.tunnelList = res.data.user.tunnelList
      title.value = '修改用户'
      isVisited.value = true
    }
    loading.close()
  })

}

const handleDelete = () => {
  if (userIds.value === undefined) {
    ElMessage.warning('请先选择用户进行删除')
  } else {
    ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteUser(userIds.value).then(res => {
        if (res.code === 1000) {
          ElMessage.success(res.msg)
          getInfo()
        }
      })
    })
  }
}
const reset = () => {
  form.value = {
    password: '',
    userName: '',
    nickName: '',
    phoneNumber: '',
    state: '1',
    roleId: 3,
    tunnelList: []
  }
}
const getRoleOptionInfo = () => {
  getRoleOption().then(res => {
    if (res.code === 1000) {
      radioList.value = res.data
    }
  })
}
getRoleOptionInfo()
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass:'allLoading'
  })
  getUser({
    siteId: siteId,
    userName: username.value,
    ...pageInfo
  }).then(res => {
    if (res.code === 1000) {
      userData.value = res.data.rows
      total.value = res.data.total
      showFirst.value = total.value / pageInfo.pageSize >= 1;
    }
    loading.close()
  })
}
getInfo()
const firstPage = () => {
  pageInfo.pageNum = 1
  getInfo()
}
const lastPage = () => {
  pageInfo.pageNum = total.value / pageInfo.pageSize
  getInfo()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  getInfo()
}
const handleSubmit = (formInstance) => {
  if (!formInstance) return;
  formInstance.validate((valid) => {
    if (!valid) return;
    const data = {
      siteId: siteId,
      nickName: form.value.nickName,
      password: form.value.password,
      phoneNumber: form.value.phoneNumber,
      state: form.value.state,
      userName: form.value.userName,
      roleIds: [form.value.roleId],
      tunnelList: form.value.tunnelList
    }
    if (title.value === '添加用户') {
      addUser(data).then(res => {
        if (res.code === 1000) {
          getInfo()
          isVisited.value = false
          ElMessage.success(res.msg)
        } else {
          ElMessage.warning(res.msg)
        }
      })
    } else {
      const editData = {
        userId: form.value.userId,
        ...data
      }
      editUser(editData).then(res => {
        if (res.code === 1000) {
          getInfo()
          isVisited.value = false
          ElMessage.success(res.msg)
        } else {
          ElMessage.warning(res.msg)
        }
      })
    }
  })
}
const handleSelect = async (selection, row) => {
  if (selection.length !== 0) {
    // disabled.value = false
    userIds.value = row.userId
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTable.value.toggleRowSelection(del_row, false);
    }
  } else {
    // disabled.value = true
  }
}
</script>
<style lang="scss">
.user-select {
  .el-select__wrapper.is-hovering {
    .el-select__suffix {
      .el-icon {
        font-size: 40px;
      }
    }
  }
  .el-select__wrapper {
    min-height: 75px;
    height: auto !important;
    background-color: transparent;
    border: 1px solid #08B7B8;
    font-size: 35px;
    width: 476px;
  }

  .el-select__placeholder.is-transparent {
    height: 54px;
    line-height: 54px;
  }

  .el-select__selected-item {
    //height: 54px;
    //line-height: 54px;
    .el-tag {
      max-width: none !important;
      height: 55px;
      font-size: 43px;

      .el-icon {
        font-size: 51px;
        width: auto;
        height: auto;
      }
    }
  }

  .el-select__caret {
    font-size: 35px !important;
  }

  .el-select-dropdown__item.is-hovering {
    background-color: #064B66 !important;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    width: 42px;
    height: 42px;
  }

  .el-input {
    min-height: 75px;
    height: auto !important;
  }

  .el-form-item.is-error .el-input__wrapper {
    box-shadow: none;
  }

  .el-select__popper {
    margin-top: -12px !important;
    background: #072247 !important;
    border: 1px solid #0F82AF !important;
  }

  .el-popper {
    width: auto;
    min-width: auto;
    margin-left: 0;
    box-sizing: border-box;
  }

  .el-popper__arrow::before {
    display: none;
  }

  .el-select-dropdown__item {
    font-size: 38px !important;
    height: 60px !important;
    line-height: 60px !important;

    > span {
      color: #FFFFFF;
    }
  }

  .el-select .el-input .el-select__caret {
    font-size: 35px !important;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #064B66 !important;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background-color: #064B66 !important;
  }

  .el-select-tags-wrapper {
    .el-tag {
      padding: 28px 20px !important;
      font-size: 35px;

      .el-icon {
        width: 40px;
        height: 40px;
        font-size: 40px !important;
      }
    }
  }
}
</style>
<style scoped lang="scss">
:deep(.el-select__tags .el-tag--info) {
  background-color: #05FEFF;
  color: #000;
}

:deep(.el-form-item__error) {
  font-size: 35px;
}

:deep(.el-input .el-input__password) {
  font-size: 60px;
}

:deep(.el-input__clear) {
  font-size: 40px;
}

.current-site {
  font-size: 41px;
  color: #FFFFFF;
  margin-top: 12px;

  > span {
    font-size: 38px !important;
    color: darkgray !important;
    margin-left: 20px;
  }
}

:deep(.el-table__header-wrapper  .el-checkbox) {
  display: none
}


:deep(.el-radio-group) {
  margin-top: 10px;
}

:deep(.el-radio__label) {
  color: #FFFFFF;
  font-size: 38px;
}

:deep(.el-radio__inner) {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  border: 4px solid #05FEFF;
  background-color: transparent;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #FFFFFF;
}

:deep(.el-radio__input.is-checked .el-radio__inner ) {
  background: #064B66;
  border-color: #05FEFF !important;
}

:deep(.el-radio__inner::after) {
  width: 18px;
  height: 18px;
  background: #05FEFF;
}

.user-title {
  display: flex;
  justify-content: center;
  margin: 0 0 60px 0;
  font-size: 50px;
  color: #FFFFFF;
}

:deep(.el-table__empty-block) {
  background: #064B66;
  font-size: 30px;
  min-height: 200px;
}

.tunnel-bgc {
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/tunnel/sd_bj.png');

  .box-top {
    display: flex;
    justify-content: space-between;

    .back-tunnel {
      cursor: pointer;
      margin: 0 0 0 70px;
      display: flex;
      align-items: center;
      width: 178px;
      height: 70px;
      line-height: 70px;
      border-radius: 11px;
      border: 2px solid #08B7B8;
      font-size: 38px;
      color: #FFFFFF;

      .back-icon {
        margin-right: 20px;
        margin-left: 23px;
        width: 33px;
        height: 33px;
        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
      }
    }


  }

  .all-del-btn {
    display: flex;

    .del-btn {
      width: 168px;
      height: 60px;
      background: #08B7B8;
      border-radius: 11px;
    }

    .all-btn {
      cursor: pointer;
      padding-left: 53px;
      width: 178px;
      height: 70px;
      line-height: 70px;
      border-radius: 11px;
      border: 2px solid #08B7B8;
      color: #FFFFFF;
      font-size: 38px;

      &:last-child {
        margin-left: 40px;
      }
    }
  }

  .user-content {
    display: flex;
    justify-content: center;
    margin-top: 247px;

    .user-box {
      display: flex;
      flex-direction: column;
      width: 2194px;
      height: 1480px;
      background: #064B66;
      border-radius: 20px;
      border: 2px solid #05FEFF;
      box-sizing: border-box;
      padding: 73px 58px;

      .user-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > div:nth-child(2) {
          margin-left: -250px;
          height: 61px;
          font-size: 46px;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 61px;
        }

        .add-btn {
          cursor: pointer;
          width: 180px;
          height: 70px;
          line-height: 70px;
          background: #08B7B8;
          border-radius: 6px;
          color: #FFFFFF;
          font-size: 38px;
          padding-left: 19px;
          //margin-left: 20px;
        }

        .search-box {
          display: flex;

          :deep(.el-button) {
            width: 140px;
            height: 70px;
            background: #08B7B8;
            border-radius: 6px;
            border: none;
            font-size: 38px;
            color: #FFFFFF;
          }

          //:deep(.el-input__wrapper) {
          //  width: 300px;
          //  height: 70px;
          //  border-radius: 6px;
          //  border: 1px solid #05FEFF;
          //  background-color: transparent;
          //  font-size: 38px;
          //
          //  .el-input__inner {
          //    height: 70px;
          //    line-height: 70px;
          //    color: #FFFFFF;
          //  }
          //}
        }
      }

      :deep(.el-table--fit) {
        width: 2110px !important;
      }

      :deep(.cell) {
        height: 80px;
        line-height: 80px;
        color: #fff;
        font-size: 38px;
      }

      :deep(.el-table tr) {
        background-color: #1C5971;
      }

      :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
        background-color: #1C5971;
      }

      :deep(.el-table__row--striped) {
        background-color: #13849C !important;
      }

      :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
        background-color: #13849C !important;
      }

      :deep(.el-table__inner-wrapper::before) {
        display: none;
      }
    }
  }

  :deep(.el-dialog) {
    border: 2px solid #05FEFF;
    background: #0D6578;
    border-radius: 20px;
    padding: 30px 40px;
    box-sizing: border-box;
    margin: 458px auto 0 auto;

    .el-dialog__header {
      padding: 0;
      display: none;
    }
  }

  :deep(.el-form-item) {
    margin-top: 40px;
  }

  :deep(.el-form-item__label) {
    font-size: 38px;
    font-family: MicrosoftYaHei;
    color: #FFFFFF;
    margin-right: 12px;
    line-height: 50px;
  }

  :deep(.el-input) {
    height: 75px;

    .el-input__wrapper {
      background-color: transparent;
      border: 1px solid #08B7B8;

      .el-input__inner {
        height: auto;
        color: #fff;
        font-size: 38px;
      }
    }
  }


  .pagination {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 90px;
    display: flex;
    align-items: center;
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
    :deep(.el-pagination.is-background ) {
      .btn-next,.btn-prev {
        background-color: transparent;
      }

      .el-pager {
        li {
          margin: 0 0 0 40px;
        }

        li.is-active {
          background-color: #60DDDE;
        }
      }
    }

    > span:first-child {
      cursor: pointer;
      margin-right: 60px;
    }

    > span:last-child {
      cursor: pointer;
      margin-left: 71px;
    }

    :deep(.btn-prev) {
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
      margin-right: 20px;
    }

    :deep(.btn-next) {
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
      margin-left: 30px;
    }

    :deep(.el-pager li.is-active ) {
      width: 70px;
      height: 70px;
      background: #60DDDE;
      border-radius: 50%;
      color: #071F40;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
    }

    :deep(.el-pager li) {
      margin-left: 40px;
    }

    :deep(.el-pager li:not(.is-active) ) {
      width: 70px;
      height: 70px;
      border: 1px solid #60DDDE;
      border-radius: 50%;
      background-color: transparent;
      font-size: 38px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #60DDDE;
    }
  }
}
</style>
