<template>
  <div class="app-container">
    <el-card>
      <div class="cardbox">
        <div class="top">
          <div class="l">部门列表</div>
          <div class="r">
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="输入部门名称/ID"
              :suffix-icon="Search"
            />
           <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
             
            />
            <el-button
              type="primary"
              @click="dialogVisible = true"
              :icon="CirclePlus"
              >添加成员</el-button
            >
          </div>
        </div>
        <div class="container">
          <div class="l">
            <el-tree
              :data="data"
              :props="defaultProps"
              class="tree"
              :check-on-click-leaf="false"
              :default-expand-all="true"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <div class="treeitem">
                  <div
                    class="icon"
                    v-if="data.children && data.children.length"
                  >
                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
                  </div>
                  <div
                    class="title"
                    :class="{ on: name == node.label }"
                    @click.stop="screen(node.label)"
                  >
                    {{ node.label }}
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
          <div class="r">
            <el-table
              :data="tableData"
              class="table"
              border
              style="width: 100%"
            >
            
              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
              <el-table-column prop="name" label="部门ID" width="120" align="center" />
              <el-table-column prop="address" label="部门名称" />
               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
               <el-table-column fixed="right" label="操作" width="120" align="center" >
                    <template #default>
                        <el-button link type="primary" size="small" @click="handleClick">
                        编辑
                        </el-button>
                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              v-model:page="pageNum"
              v-model:limit="pageSize"
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    width="500"
    title="添加部门"
    header-class="dialogheader"
    :align-center="true"
    center
  >
    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
      <el-form-item label="成员姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="成员账号" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
     
      <el-form-item label="选择部门">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(formEl)">取消</el-button>
        <el-button type="primary" @click="submitForm(formEl)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
import { ref } from "vue";

import { ElMessageBox } from "element-plus";


const formEl=ref()
const total = ref(90);
const pageNum = ref(10);
const pageSize = ref(1);
const name = ref("");
const form = ref({});
const dialogVisible = ref(false);


const rules={
    name:{
        required: true,
         message: 'Please select Activity zone',
      trigger: 'change',
    }
}

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const defaultProps = {
  children: "children",
  label: "label",
  class: "custtree",
};
const data = [
  {
    label: "内蒙总队",
    children: [
      {
        label:
          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
        children: [
          {
            label: "Level two 1-1",
            children: [
              {
                label: "Level three 1-1-1",
              },
            ],
          },
        ],
      },
      {
        label: "Level one 2",
        children: [
          {
            label: "Level two 2-1",
            children: [
              {
                label: "Level three 2-1-1",
              },
            ],
          },
          {
            label: "Level two 2-2",
            children: [
              {
                label: "Level three 2-2-1",
              },
            ],
          },
        ],
      },
      {
        label: "Level one 3",
        children: [
          {
            label: "Level two 3-1",
            children: [
              {
                label: "Level three 3-1-1",
              },
            ],
          },
          {
            label: "Level two 3-2",
            children: [
              {
                label: "Level three 3-2-1",
              },
            ],
          },
        ],
      },
    ],
  },
];
function screen(item) {
  name.value = item;
}
function handleNodeClick(node) {
  console.log(node);
}

const resetForm = (formEl) => {
  if (!formEl) return
  dialogVisible.value=false;
  formEl.resetFields()
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
function remove() {
  ElMessageBox.confirm("确定删除该部门？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}

</script>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  .l {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }
  .r {
    display: flex;
    gap: 20px;
  }
}
.cardbox {
  height: calc(100vh - 84px - 30px - 30px - 30px);
}

.container {
  border-top: 1px solid #eee;
  height: calc(100% - 47px);
  display: flex;
  .l {
    width: 350px;
    padding: 15px;
    overflow: auto;
    flex-shrink: 0;
    height: 100%;
    :deep(.tree) {
      --el-tree-node-content-height: 35px;
      height: 100%;
      overflow: auto;
      .is-focusable .el-tree-node__content {
        background: transparent;
      }
      .el-tree-node > .el-tree-node__children {
        overflow: inherit;
      }
      .custtree {
        .custtree {
          padding-left: 25px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            height: calc(100% + 12px);
            width: 1px;
            top: 0px;
            left: 7px;
            border-right: 1px dashed #979797;
          }

          .el-tree-node__content {
            padding: 0px !important;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              height: 1px;
              width: 10px;
              top: 13px;
              left: -15px;
              border-top: 1px dashed #979797;
            }
            &::before {
              content: "";
              position: absolute;
              height: 14px;
              width: 1px;
              top: 0px;
              left: -18px;
              border-left: 1px dashed #979797;
            }
          }

          &:nth-last-of-type(1) {
            &::before {
              display: none;
            }
          }
        }

        & > .el-tree-node__content {
          .el-tree-node__expand-icon {
            display: none;
          }
          .icon .iocnPlus {
            display: block;
          }
          .icon .iocnMinus {
            display: none;
          }
        }
      }
      .is-expanded {
        & > .el-tree-node__content {
          .icon .iocnPlus {
            display: none !important;
          }
          .icon .iocnMinus {
            display: block !important;
          }
        }
      }
    }
    .tree {
      .treeitem {
        display: flex;
        align-items: center;

        max-width: fit-content;
        min-width: 100%;
      }
      .icon {
        color: #4d7bff;
        border: 1px solid;
        padding: 2px;
        border-radius: 2px;
        margin-right: 10px;
      }
      .title {
        white-space: nowrap;
        padding: 5px 3px;
        width: fit-content;

        display: block;
        &.on {
          background: #ecf1ff;
          color: #000;
        }
      }
    }
  }
  .r {
    flex: 1;
    .table {
      height: calc(100% - 60px);
    }
  }
}
</style>
