<template>
    <div class="contentBox">
      <div class="contentLeft">
        <el-card>
          <el-input v-model="deptName" :placeholder="proxy.$t('department.inputDepartmentName')" clearable>
            <template  #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <div style="margin-top:10px">
            <el-tree :data="deptOption" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
          </div>
        </el-card>
      </div>
      <div class="contentRight">
        <el-card>
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item :label="proxy.$t('position.positionName')" prop="positionName">
              <el-input
                  v-model="queryParams.positionName"
                  :placeholder="proxy.$t('position.inputPositionName')"
                  clearable
                  style="width: 200px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">{{proxy.$t('button.search')}}</el-button>
              <el-button icon="Refresh" @click="resetQuery">{{proxy.$t('button.reset')}}</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                  type="primary"
                  plain
                  icon="Plus"
                  @click="handleAdd"
              >{{proxy.$t('position.addPosition')}}</el-button>
            </el-col>
          </el-row>

          <el-table v-loading="loading" :data="positionList" border>
            <el-table-column :label="proxy.$t('common.sort')" type="index" width="60" align="center" />
            <el-table-column :label="proxy.$t('position.positionName')" align="center" prop="postName" />
            <el-table-column :label="proxy.$t('common.customerAffiliation')" align="center" prop="customerName" />
            <el-table-column :label="proxy.$t('position.department')" align="center" prop="deptName" />
            <el-table-column :label="proxy.$t('customer.createBy')" align="center" prop="createBy" />
            <el-table-column :label="proxy.$t('customer.createTime')" align="center" prop="createTime" width="160" />
            <el-table-column :label="proxy.$t('common.action')" align="center" width="150">
              <template #default="scope">
                <el-button
                    link
                    type="primary"
                    icon="Edit"
                    @click="handleUpdate(scope.row)"
                >{{proxy.$t('button.edit')}}</el-button>
                <el-button
                    link
                    type="primary"
                    icon="Delete"
                    @click="handleDelete(scope.row)"
                >{{proxy.$t('button.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
                v-if="total > 0"
                v-model:current-page="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                :total="total"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
      <PostDialog
          ref="dialogRef"
          :title="dialog.title"
          :parent-id="parentId"
          :select-id="queryParams.deptId"
          :select-name="selectedName"
          :formData="dialog.form"
          v-model="dialog.visible"
          @success="handleSuccess"
      />
    </div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {getDepartmentPostListApi, getDepartmentTreeApi, deleteDepartmentPostApi,getDepartmentPostDetailApi} from '@/api/customer'
import PostDialog from './common/PostDialog.vue';
const { proxy } = getCurrentInstance();
const loading = ref(false)
const total = ref(0)
const dialog = reactive({
  title: proxy.$t('position.addPosition'),
  visible: false,
  form: {
    customerId:'',
    customerName:'',
    deptId: '',
    deptName:'',
    postName:'',
    postId:'',
    id:''
  }
})
// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  postName: undefined,
  deptId: undefined,
})

const deptName = ref("");
const deptOption = ref(undefined);
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
const dialogRef = ref()
const selectedName = ref('')
const parentId = ref(null)
const  handleNodeClick = (data) => {
  console.log(data,'===data')
  queryParams.deptId = data.id;
  selectedName.value = data.label;
  parentId.value = data.parentId;
  getList();
};
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});

// 岗位列表数据
const positionList = ref([])

// 查询按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryParams.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  queryParams.postName = undefined
  handleQuery()
}

// 新增按钮操作
const handleAdd = () => {
  // 处理新增部门
  dialog.title = proxy.$t('position.addPosition')
  dialog.visible = true
}

// 修改按钮操作
const handleUpdate = async(row) => {
  // 处理编辑部门
  console.log(row,'===')
  const res = await getDepartmentPostDetailApi(row.id)
  if(res.code === 200) {
    dialog.title = proxy.$t('position.editPosition')
    dialog.visible = true
    dialog.form.postName = res.data.postName
    dialog.form.customerId = res.data.customerId
    dialog.form.deptId = res.data.deptId
    dialog.form.customerName = res.data.customerName
    dialog.form.deptName = res.data.deptName
    dialog.form.postId = res.data.postId
    dialog.form.id = res.data.id
  } else {
    ElMessage.error(res.msg)
  }
}

// 添加成功回调方法
const handleSuccess = () => {
  getList()
}
// 删除按钮操作
const handleDelete = (row) => {
  console.log(row)
  ElMessageBox.confirm(
      proxy.$t('common.deleteItem'),
      proxy.$t('common.warning'),
      {
        confirmButtonText: proxy.$t('button.save'),
        cancelButtonText: proxy.$t('button.cancel'),
        type: "warning"
      }
  ).then(async () => {
    // 这里调用删除API
    const res = await deleteDepartmentPostApi(row.id)
    if (res.code === 200) {
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
    getList()
  }).catch(() => {})
}
// 获取部门树形数据
const getDeptTree = async() => {
  // 这里调用获取部门树形数据的API
  const res = await getDepartmentTreeApi();
  if(res.code === 200) {
    deptOption.value = res.data
  } else {
    ElMessage.error(res.msg)
  }
}
// 获取岗位列表
const getList = async() => {
  loading.value = true
  // 这里调用后端API获取数据
  const res = await getDepartmentPostListApi(queryParams);
  console.log(res,'000')
  if(res.code === 200) {
    positionList.value = res.rows
    total.value = res.total
  } else {
    ElMessage.error(res.msg)
  }
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getList()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  getList()
}
onMounted(() => {
  getList()
      getDeptTree()
})
</script>
<style scoped lang="scss">
.contentBox {
  height:calc(100vh - 130px);
  margin:20px;
  display: flex;
  .contentLeft {
    width:24%;
    margin-right:14px;
  }
  .contentRight {
    flex:1;
  }
  .contentLeft,.contentRight {
    height:100%;
    overflow-y: scroll;
    padding-bottom:10px;
    box-sizing: border-box;
  }
  .card {
    width:100%;
    overflow-y: scroll;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>