<script lang="ts" setup name="RelateDept">
import { defineExpose, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { relatedDept } from '@/api/system/tenant'
import DeptSelect from '@/components/DeptSelect/index.vue'

const emits = defineEmits(['watchChild'])
const dataFormRef = ref(null) as any
const dialogFormVisible = ref(false) // 对话框显示隐藏
const deptShowTop = ref(false)
// 表单内容
const dataForm = ref({
  tenantId: '',
  deptId: '',
})
// 表单校验规则
const rules = {
  deptId: [{ required: true, message: '	组织机构必选', trigger: ['blur', 'change'] }],
}

// 重置表单
const resetForm = () => {
  dataForm.value = {
    tenantId: '',
    deptId: '',
  }
}

// 父子组件通信
const initDialog = (row: any) => {
  dialogFormVisible.value = true
  if (row) {
    dataForm.value = {
      tenantId: row.id,
      deptId: row.deptId,
    }
  }
}
defineExpose({
  initDialog,
})
// 保存数据
const saveData = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      relatedDept(dataForm).then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: '绑定成功',
            type: 'success',
          })
          emits('watchChild')
          dialogFormVisible.value = false
        }
      })
    }
  })
}
</script>

<template>
  <el-dialog v-model:visible="dialogFormVisible" append-to-body title="绑定组织">
    <el-form
      ref="dataFormRef"
      :rules="rules"
      :model="dataForm"
      label-width="100px"
      label-well-code="right"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="绑定组织" prop="deptId">
            <DeptSelect
              v-model="dataForm.deptId"
              :need-top="deptShowTop"
              dept-type="03"
              placeholder="选择组织机构"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
  .el-select__tags {
    flex-wrap: inherit !important;
    overflow-x: auto !important;
  }

  ::-webkit-scrollbar {
    height: 4px;
  }

  /* //滚动条的滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #eaecf1;
    border-radius: 3px;
  }
</style>
