<script lang="ts" setup>
import { ref, onMounted,reactive} from 'vue'
import icon_permission_del_white from '@/assets/svg/permission_del_white.svg'
import icon_permission_edit_white from '@/assets/svg/permission_edit_white.svg'
import icon_permission_edit_blue from '@/assets/svg/permission_edit_blue.svg'
import icon_permission_del_blue from '@/assets/svg/permission_del_blue.svg'
import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
import icon_add from '@/assets/svg/add_white.svg'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'

const props = defineProps({
  applicationId:String
})
const treeData:any = ref([])
const defaultProps = {
  children: 'children',
  label: 'name'
}
const hoverNodeId = ref(null);
const currentNodeId = ref(null);
const dialogVisible = ref(false);
const title = ref('新增企业');
const ruleForm = ref({id:'',app_id:'',orgname: '',orgcode: '',orgtype: ''});
const ruleFormRef = ref<FormInstance>()
const rules = ref({
  orgname: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  orgcode: [
    { required: true, message: '请输入编号', trigger: 'blur' },
  ],
})
const queryorgname = ref('')
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const tableData = ref([{orgname:'23'}])
const handleMouseEnter = (node) => {
  hoverNodeId.value = node.key; 
};
const handleMouseLeave = () => {
  hoverNodeId.value = null;
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}
const deltree = (data:any) => {
  ElMessageBox.confirm(
    '确定删除该条信息吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      
    })
}
const handleSelectionChange = (val:any) => {
  multipleSelection.value = val
}
onMounted(() => {
  treeData.value = []
})
function nodeclick(data:any,node:any){
  currentNodeId.value = node.key

}
function addtree(data:any){
  ruleForm.value = {
    id:'',
    app_id:props.applicationId,
    orgname: '',
    orgcode: '',
    orgtype: '01'
  }
  title.value = '新增企业'
  dialogVisible.value = true
}
function edittree(data:any){
  title.value = '修改企业'
  ruleForm.value = JSON.parse(JSON.stringify(data))
  dialogVisible.value = true
}
function edittable(data:any){ 
}
function deltable(data:any){ 
}
function handleClose() {
  dialogVisible.value = false;
}
</script>
<template>
   <div class="organization-box">
      <div class="organization-leftbox">
        <div class="leftbox-title">企业列表</div>
        <div class="leftbox-btn" @click="addtree">
          <img src="@/assets/newimg/add.png" style="margin-right: 5px;" alt="">
          <span>新增企业</span>
        </div>
        <el-tree :data="treeData" node-key="id" :props="defaultProps"
         highlight-current default-expand-all :expand-on-click-node="false"
          @node-click="nodeclick">
          <template #default="{ node, data }">
            <div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
            @mouseleave="handleMouseLeave()">
            <div>{{ node.label }}</div>
            <div v-show="hoverNodeId === node.key || currentNodeId === node.key" style="display: flex;" >
              <div>
                <el-icon v-if="currentNodeId === node.key" @click.stop="edittree(data)">
                  <icon_permission_edit_white class="svg-icon"/>
                </el-icon>
                <el-icon v-else @click.stop="edittree(data)">
                  <icon_permission_edit_blue class="svg-icon"/>
                </el-icon>
              </div>
              <div style="margin-left: 8px;">
                <el-icon v-if="currentNodeId === node.key" @click.stop="deltree(data)">
                  <icon_permission_del_white class="svg-icon"/>
                </el-icon>
                <el-icon v-else @click.stop="deltree(data)">
                  <icon_permission_del_blue class="svg-icon" />
                </el-icon>
              </div>
            </div>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="organization-rightbox">
        <div class="querybox">
          <div>
            <el-input v-model="queryorgname" placeholder="请输入部门名称" style="width: 200px;margin-right: 10px;" />
            <el-button type="primary" style="min-width: 50px;">搜索</el-button>
          </div>
          <div>
            <el-button type="primary" style="min-width: 50px;">
              <el-icon style="margin-right: 3px;">
                <icon_add class="svg-icon" />
              </el-icon>新增
            </el-button>
            <el-button :type="tableData.length>0?'primary':''" :disabled="tableData.length>0?false:true" style="min-width: 50px;">
              <el-icon style="margin-right: 3px;"><Delete /></el-icon>删除
            </el-button>
          </div>
        </div>
        <el-table  ref="multipleTableRef" :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" /> 
          <el-table-column prop="orgcode" label="部门编号"/>
          <el-table-column prop="orgname" label="部门名称"/>
          <el-table-column prop="manager" label="负责人"/>
          <el-table-column prop="address" label="联系信息"/>
          <el-table-column prop="description" label="部门描述"/>
          <el-table-column prop="isvaild" label="是否有效" width="110">
            <template #default="scope">
              <el-switch v-model="scope.row.isvaild" style="margin-right: 10px;"/> 
              <span v-if="scope.row.isvaild == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
              <span v-else-if="scope.row.isvaild == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastmodifier" label="最近修改者"/>
          <el-table-column prop="lastmodifydate" label="最近修改日期"/>
          <el-table-column fixed="right" label="操作" width="80">
            <template  #default="scope">
              <el-icon style="font-size: 16px;margin-right: 18px;" @click="edittable(scope.row)">
                <permission_table_edit_blue class="svg-icon"/> 
              </el-icon>
              <el-icon style="font-size: 16px;" @click="deltable(scope.row)">
                <permission_table_del_blue class="svg-icon"/> 
              </el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="60px" class="demo-ruleForm">
          <el-form-item label="编号" prop="orgcode">
            <el-input v-model="ruleForm.orgcode" />
          </el-form-item>
          <el-form-item label="名称" prop="orgname">
            <el-input v-model="ruleForm.orgname" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
</template>

<style lang="less" scoped>
.organization-box{
  width: 100%;
  height: 100%;
  display: flex;
  .organization-leftbox{
    width: 240px;
    height: 100%;
    background: rgb(33,33,33);
    border-radius: 5px;
    margin-right: 15px;
    .leftbox-title{
      width: 100%;
      height: 44px;
      line-height: 44px;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 15px;
      color: #FFFFFF;
      border-bottom: 1px solid #282828;
      padding-left: 20px;
    }
    .leftbox-btn{
      width: 200px;
      height: 40px;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(0, 137, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      color: #0089FF;
      margin: 0 auto;
      margin-top: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    :deep(.ed-tree){
      background:#212121;
      height: calc(100vh - 210px);
      margin-top: 20px;
      color: #ffffff;
      font-size: 14px;
    }
    :deep(.ed-tree-node__content){
      height: 40px;
      line-height: 40px;
    }
    :deep(.ed-tree-node__content:hover){
      background: rgba(61,158, 255, 0.1);
      color: #0089FF;
    }
    :deep(.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content){
      background: #409eff;
      color: #ffffff;
    }
    :deep(.custom-tree-node){
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    :deep(.ed-tree-node__content>.ed-tree-node__expand-icon){
        padding: 2px;
    }
  }
  .organization-rightbox{
    width: calc(100% - 240px);
    height: 100%;
    background: rgb(33,33,33);
    border-radius: 5px;
    padding: 20px;
  }
  .querybox{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
<style>
  .ed-form-item__label{
    color: #D2D2D2;
  }
  .ed-input__wrapper {
    background-color: #252626;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(67, 67, 67, 0);
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #434343;
  }
  .ed-form-item.is-error .ed-input__wrapper{
    box-shadow: none;
    border: 1px solid #f54a45;
  }
  .ed-input__wrapper.is-focus{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-input__wrapper:hover{
    box-shadow: none;
    border: 1px solid #0089ff;
  }
  .ed-input__inner{
    color: #fff;
  }
  .ed-button {
    color: #ffffff;
    background-color: rgb(54,55,56);
    border: 1px solid #363636;
  }
  .ed-button:focus, .ed-button:hover{
    color: #ffffff;
    background-color: rgb(54,55,56);
    border: 1px solid #363636;
  }
  .ed-button--primary{
    background-color: #0089ff;
    border-color:#0089ff ;
  }
  .ed-button--primary:focus, .ed-button--primary:hover{
    background-color: #0089ff;
    border-color:#0089ff ;
  }
  .ed-button.is-disabled{
    color: #949494;
    background-color: rgb(54,55,56);
    border: 1px solid rgb(54,55,56);
  }
  .ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
    color: #949494;
    background-color: rgb(54,55,56);
    border: 1px solid rgb(54,55,56);
  }
  .el-table{
    background-color: rgb(33,33,33);
  }
  .el-table tr{
    background: rgb(40,40,40);
    border-color: #434343;
  }
  .el-table th.el-table__cell {
    background-color: rgb(40,40,40);
    border-color: #434343;
  }
  .el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
    background-color: rgb(40,40,40);
  }
  .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
    background-color: #434343;
  }
  .el-table__border-bottom-patch, .el-table__border-left-patch{
    background-color: #434343;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-color: #434343;
  }
  .ed-checkbox__inner{
    background: transparent;
    border-color: #787878;
  }
  .ed-checkbox__input.is-disabled .ed-checkbox__inner{
    background: #434343;
    border-color: #787878;
  }
  .el-table thead{
    color: #E4E4E4;
  }
  .el-table .el-table__cell{
    background: #212121;
    color: #F2F4F5;
  }
  .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right{
    background: #212121;
  }
  .hover-row > td {
    background-color: rgb(48,48,48) !important;
  }
  .ed-checkbox__input.is-checked .ed-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
  }
  .ed-switch.is-checked .ed-switch__core{
    border-color: #0089ff;
    background-color: #0089ff;
  }
</style>