<template lang="">
  <div>
    <div class="header">
      <div class="header-left">
        <el-input
          v-model="searchName"
          style="width: 240px"
          placeholder="搜索成员姓名"
          :prefix-icon="Search"
        />
        <el-button type="primary" class="search">搜索</el-button>
      </div>

      <div class="header-right">
        <el-button @click="clearHandle">清空</el-button>
        <el-button @click="deleteBatchHandle">删除</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" label="姓名" width="120" />
      <el-table-column property="departmentName" label="离职前所属部" />
      <el-table-column property="leaveDays" label="离职天数" />
      <el-table-column property="leaveDate" label="离职日期" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button
            text
            size="small"
            type="primary"
            @click="detailHandle(scope.row)"
          >
            详情
          </el-button>
          <el-popover placement="top-start" :width="200" trigger="hover">
            <div style="margin: 0">
              <el-button
                size="small"
                type="primary"
                @click="revertHandle(scope.row)"
              >
                恢复
              </el-button>

              <el-button
                size="small"
                type="warning"
                @click="deleteHandle(scope.row)"
              >
                删除
              </el-button>
            </div>
            <template #reference>
              <el-button text type="primary" size="small">
                <el-icon><MoreFilled /></el-icon
              ></el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex; justify-content: flex-end">
  <myPagination v-model:currentPage ="currentPage" v-model:total="total" v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 50]" @change="getList" />
  <el-drawer v-model="detailVisible" :show-close="false" size="40%">
      <template #header>
        <div class="header-title">
          <div>成员详情</div>
          <el-icon @click="closeDetailDrawer"><Close /></el-icon>
        </div>
      </template>
      <template #default>


        <div >
          <div class="depart">
            <img
              :src="detailInfo.headImg"
              alt=""
              class="depart-img"
            />
            <div class="detail_item" >
              <div class="depart_name">{{ detailInfo.name }}</div>
              <div class="username2">{{ '用户id：'+ detailInfo.userId }}</div>
            </div>
<!--            <span class="depart_name">{{ detailInfo.name }}</span><br/>
            <span>{{ '用户id：'+ detailInfo.userId }}</span>-->
          </div>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="资源转移记录" name="first"></el-tab-pane>
            <el-tab-pane label="成员信息" name="second"></el-tab-pane>
          </el-tabs>
          <div v-if="activeName==='first'">转移记录</div>
          <div v-if="activeName==='second'">
            <el-row>
              <el-col :span="12">
                <div class="detail_item" >
                  <div class="name">姓名</div>
                  <div class="username">{{ detailInfo.name }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail_item">
                  <div class="name">别名</div>
                  <div class="username">{{ detailInfo.nickName !=undefined? detailInfo.nickName : '-'}}</div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="detail_item">
                  <div class="name">用户id</div>
                  <div class="username">{{ detailInfo.userId }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail_item">
                  <div class="name">手机号码</div>
                  <div class="username">{{ detailInfo.userTel }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="detail_item">
                  <div class="name">联系邮箱</div>
                  <div class="username">{{ detailInfo.email }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail_item">
                  <div class="name">部门</div>
                  <div class="username">{{ detailInfo.departmentName }}</div>
                </div>
              </el-col>
            </el-row>
            <div class="detail_item">
              <div class="name">性别</div>
              <div class="username">{{ detailInfo.sex==1 ? '男':'女'}}</div>
            </div>
          </div>
        </div>
      </template>

    </el-drawer>


  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getMemberList,recoveryMember } from '@/api/member'
import myPagination from '@/components/Paginations.vue';
onMounted(() => {
  getList()
})
//分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(10)

const searchName = ref('')
const responseData = ref(null)
const tableData = ref([])
const activeName = ref("second")
const getList = () => {
  getMemberList({ state: 2,pageNum:currentPage.value,pageSize:pageSize.value }).then(res => {
    console.log(1111)
    console.log(res.data)
    if (res.data.code == 200) {
      responseData.value = res.data.data.user
      // tableData.splice(0, tableData.length, res.data.data.user)
      tableData.value=res.data.data.user.records
      total.value=res.data.data.user.total;
      console.log(tableData)
    }
  })
}

const multipleTableRef = ref(null)
const selectedRowKeys = ref([])
const handleSelectionChange = val => {
  console.log(val)
  selectedRowKeys.value = val.map(item => item.userId)
}
//批量删除
const deleteBatchHandle = () => {
  deleteMember(selectedRowKeys.value).then(res => {
    if (res.data.code == 200) {
      getList()
      // multipleTableRef.value.clearSelection()
    }
  })
}
//清空
const clearHandle = () => {
  multipleTableRef.value.clearSelection()
}
//删除
const deleteHandle = (row) => {
console.log(row)
  deleteMember([row.userId]).then(res => {
    if (res.data.code == 200) {
      getList()
    }
  })
}
//详情
const detailVisible = ref(false)
const detailInfo = ref({})
const detailHandle = row => {
  detailVisible.value = true
  console.log(333)
  console.log(row)
  detailInfo.value = row
}
const closeDetailDrawer = () => {
  detailVisible.value = false
}
//恢复离职人员信息
const revertHandle = row => {
  recoveryMember([row.userId]  ).then(res => {
    if (res.data.code == 200) {
      getList()
    }
  })
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  .header-left {
    display: flex;
    align-items: center;
    .search {
      margin-left: 16px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
  }
}
.header-title {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #1f2329;
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
  height: 40px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0 !important;
}
.depart {
  display: flex;
  align-items: center;
}
.depart-img {
  width: 54px;
  height: 54px;
  margin-right: 10px;
  border-radius: 50%;
}
.depart_name {
  font-size: 18px;
  color: #202328;
  font-weight: bold;
}
.detail_item {
  height: 48px;
  margin: 30px 0 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .name {
    font-size: 14px;
    color: #656b73;
  }
  .username {
    font-size: 14px;
    color: #1f2329;
    font-weight: 500;
  }
}
.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1f2329;
  .red {
    color: #ff3535;
  }
}
.username2{
  font-size: 14px;
  color: #90959D;
  font-weight: 500;
}
</style>
