<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="90px" :inline="true">
      <el-form-item label="用戶姓名：">
        <el-input v-model="search.state.nickName" placeholder="請輸入"></el-input>
      </el-form-item>
      <el-form-item label="手機號：">
        <el-input v-model="search.state.phone" placeholder="請輸入"></el-input>
      </el-form-item>
      <el-form-item label="所屬架構：">
        <com-company v-model="search.state.deptId" />
      </el-form-item>
      <el-form-item class="searh-btns">
        <el-button @click="search.reset">重置</el-button>
        <el-button type="primary" @click="search.submit">查詢</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3>用戶列表</h3>
      <div class="table-ctrl-right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="oper.readyInsert"
          >創建用戶</el-button
        >
      </div>
    </div>

    <el-table
      class="user-table"
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="姓名" prop="nickName"></el-table-column>
      <el-table-column label="手機號" prop="phone"></el-table-column>
      <el-table-column label="所屬架構" prop="deptName"></el-table-column>
      <el-table-column label="角色" prop="roleName"></el-table-column>
      <el-table-column label="創建時間" prop="createTime"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }" >
        <span class="oper-span" @click="updateInfo(row)">編輯</span>
        <span class="oper-span tip-spw" @click="updatePwd(row)" @mouseenter="enterHandle" @mouseout="outHandle">重置密碼</span>
        <span class="oper-span" @click="delUser(row)" v-if="row.roleName !== '超級管理員'" style="color: var(--primaryColor)">刪除</span>
      </el-table-column>
    </el-table>
    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>
  
  <div class="tip" :style="{left: tip.left, top: tip.top}" v-if="tip.show"></div>

  <com-dialog
    :title="(oper.state.id ? '修改' : '創建') + '用戶'"
    :enterText="oper.state.id ? '保 存' : '創 建'"
    v-model:show="oper.state.show"
    @submit="operItem"
  >
    <el-form ref="form" :model="oper.state" label-width="100px" class="user-from">
      <el-form-item label="姓名：" class="mandatory">
        <el-input maxlength="50" show-word-limit v-model="oper.state.nickName" placeholder="請輸入"></el-input>
      </el-form-item>
      <el-form-item label="手機號：" class="mandatory">
        <el-input :disabled="oper.state.id" v-model="oper.state.phone" placeholder="請輸入"></el-input>
      </el-form-item>

      <template v-if="!oper.state.id">
        <div class="stop-psw">
          <input type="text">
          <input type="password" name="" id="">
        </div>

        <el-form-item label="密碼：" class="mandatory">
          <el-input v-model="oper.state.password" type="password" placeholder="必須包含數字、字母，長度8-16個"></el-input>
        </el-form-item>
        <el-form-item label="二次確認：" class="mandatory">
          <el-input v-model="oper.state.confirmPwd" type="password" placeholder="必須包含數字、字母，長度8-16個"></el-input>
        </el-form-item>
      </template>

      <el-form-item label="角色：" class="roleName" v-if="showRole">
        <com-role v-model="oper.state.roleId" style="width: 100%" :notShow="notShowRole" hideAll ref="roleCom" />
      </el-form-item>

      <el-form-item label="所屬架構：" class="mandatory">
        <com-dept :modelValue="String(oper.state.deptId)" @update:modelValue="(val) => (oper.state.deptId = val)" :filter="oper.state.roleId" ref="company" style="width: 100%" hideAll />
      </el-form-item>
      
     
    </el-form>
  </com-dialog>
</template>


<script>
import { ref } from "vue";
import getTableState from "@/state/tableRef";
import comDialog from "@/components/dialog";
import comHead from "@/components/head";
import comDept from "@/components/dept-select";
import comCompany from "@/components/company-select";
import comPagination from "@/components/pagination";
import roleCompany from "@/components/role-select";
import auth from "@/state/viewAuth";
import axios from 'axios'
import {encryption} from '@/util'
import {PSW, PHONE} from '@/constant/REG'

import {
  getUserList,
  insertUser,
  updateUser,
  resetUserPWD,
  deleteUser
} from '@/request/config'


export default {
  name: 'user',
  setup() {
    const state = getTableState({
      updateUrl: updateUser,
      insertUrl: insertUser,
      getUrl: getUserList,
      operAttr: {
        nickName: "",
        phone: "",
        deptId: "",
        password: '',
        confirmPwd: '',
        roleId: ""
      },
      searchAttr: { nickName: "", phone: '', deptId: '' },
      pagAttr: {totalNum: 'total'}
    });
    const headList = ref([{ name: "用戶管理", value: '0' }]);

    const updateInfo = (row) => {
      state.oper.value.readyUpdate(row)
    }
    
    return { ...state, headList, updateInfo, auth, company: null };
  },
  data() {
    return {
      notShowRole: [],
      showRole: true,
      tip: {
        show: false,
        left: 0,
        top: 0
      }
    }
  },
  watch: {
    'oper.state.roleId'(val) {
      console.log(val);
      this.oper.state.deptId = ''
    }
  },
  methods: {
    getNotShowRole() {
      if (!this.$refs.company || !this.$refs.roleCom || !this.$refs.roleCom.allData) return []
      let coms = this.$refs.company.options
      let cCom 

      if (this.oper.state.deptId) {
        cCom = coms.find(({id}) => id == this.oper.state.deptId)
      } 
      if (!cCom) {
        cCom = coms.find(({parentId}) => !parentId)
      }

      if (cCom) {
        let roles = cCom.parentId ?
          this.$refs.roleCom.allData.filter(({roleKey}) => roleKey === 'group') :
          this.$refs.roleCom.allData.filter(({roleKey}) => roleKey !== 'group')

        return roles.map(({id}) => id)
      } else {
        return []
      }
    },
    enterHandle(ev) {
      this.tip.show = true
      this.tip.left = ev.pageX + 'px'
      this.tip.top = ev.pageY + 'px'
    },
    outHandle() {
      this.tip.show = false
    },
    async operItem() {
      const updatePhone = this.oper.state.__oldData ? this.oper.state.__oldData.phone !== this.oper.state.phone : true

      console.log(this.oper.state);
      
      if (updatePhone && !PHONE.REG.test(this.oper.state.phone)) {
        return this.$alert(PHONE.tip, '提示')
      }
      if (this.oper.state.password !== this.oper.state.confirmPwd) {
        return this.$alert('兩次密碼不一致！', '提示')
      }

      if (this.oper.state.id) {
        let updateState = {...this.oper.state, password: void 0, confirmPwd: void 0, updatePwd: void 0}
        if (!updatePhone) {
          delete updateState.phone
        }
        this.oper.update(updateState)
      } else if (this.oper.state.password === this.oper.state.confirmPwd) {
        if (PSW.REG.test(this.oper.state.password)) {
          let cryPsw = encryption(this.oper.state.password)
          this.oper.insert({
            ...this.oper.state,
            password: cryPsw,  
            confirmPwd: cryPsw,  
            updatePwd: void 0
          })
        } else {
          this.$alert(PSW.tip, '提示')
        }
      }
    },
    async updatePwd(row) {
      if (await this.$confirm(`確定要重置${row.nickName}的密碼嗎？`, '提示')) {
        await axios.post(resetUserPWD,{
          id: row.id
        })
        this.$alert('重置成功', '提示')
      }
    },
    async delUser(row) {
      if (await this.$confirm(`確定要刪除${row.nickName}？`, '提示')) {
        await axios.post(deleteUser,{
          id: row.id
        })
        this.dataList.refer()
        this.$alert('刪除成功', '提示')
      }
    }
  },
  components: {
    "com-dialog": comDialog,
    "com-head": comHead,
    "com-company": comCompany,
    "com-dept": comDept,
    "com-role": roleCompany,
    "com-pagination": comPagination
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.user-from {
  width: 380px;
  margin: 0 auto;
}

.tip {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;

  &::before {
    content: '密碼重置為88888888，可登錄修改';
    position: absolute;
    width: 205px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    border-radius: 4px;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word;
    background: #303133;
    color: #fff;
    margin-bottom: 6px;
    
  }

  &::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    border-top-color: #303133;
    border-bottom-width: 0;
  }
}
</style>

<style>
.user-table.el-table .cell {
  overflow: inherit;
}
</style>
