<template>
<!--  <Dialog :title="dialogTitle" v-model="dialogVisible">-->

      <el-card class="hl-card" style="position: relative">
        <template #header>
          <span>编辑页</span>
        </template>
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
          <!--  基础信息   -->
          <el-card class="hl-card-info">
            <template #header>
              <div class="hl-card-info-icona"></div><span class="hl-card-info-text">任务单类型</span>
            </template>
          </el-card>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="业务类型" prop="type">
                        <el-select v-model="formData.type" placeholder="请选择业务类型" :disabled="true">
                          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="岗位" prop="postId">
                        <el-select v-model="formData.postId" placeholder="请选择岗位">
                          <el-option v-for="item in postSelectList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" placeholder="请输入备注" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
                <el-card class="hl-card-info">
                  <template #header>
                    <div class="hl-card-info-icona"></div><span class="hl-card-info-text">人员信息</span>
                  </template>
                  <el-row>
                    <el-col>
                      <el-card class="hl-incard">
                        <el-col>
                          <el-button  type="primary" size="large" @click="userAddItem">新增</el-button>
                        </el-col>
                        <el-form ref="subFormRef" :model="formData.userList"   label-width="0">
                          <el-table :data="formData.userList" class="hl-table">
                            <el-table-column type="index" label="序号" align="center" min-width="60" fixed />
                            <el-table-column prop="description" min-width="200" label="业务人员" align="center">
                              <template #default="scope">
                                <el-select   v-model="scope.row.busyId"  element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
                                  <el-option v-for="item in userSelectList" :key="item.id" :label="item.username + ' ' + item.nickname" :value="item.id" />
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column prop="postId" min-width="150" label="岗位" align="center">
                              <template #default="scope">
                                <el-select   v-model="scope.row.postId"  element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
                                  <el-option v-for="item in postSelectList" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column prop="description" min-width="200" label="是否是负责人" align="center">
                              <template #default="scope">
                                <el-select   v-model="scope.row.isRes"  element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
                                  <el-option v-for="item in isResList" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="120" fixed="right">
                              <template #default="scope">
                                <el-button link type="danger" size="small" @click.prevent="handleDeleteUser(scope.$index)">
                                  删除
                                </el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-form>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-card>
              </el-row>
          <div class="hl-footer text-center">
            <el-button @click="submitForm" type="primary" size="large">保
              存</el-button>
            <el-button @click="closeForm" size="large">取 消</el-button>
          </div>
        </el-form>
     </el-card>
<!--  </Dialog>-->
</template>
<script setup lang="ts">
import * as FpUserDetailApi from '@/api/heli/fpuserdetail'
import {ref} from "vue";
import * as UserApi from "@/api/system/user";
import { useTagsViewStore } from '@/store/modules/tagsView'

import router from "@/router";
import {handleTree} from "@/utils/tree";

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userSelectList = ref<UserApi.UserVO[]>([])
const tagsViewStore = useTagsViewStore()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  type:1,
  fpId: undefined,
  busyId: undefined,
  seqNo: undefined,
  postId: 0,
  isRes: undefined,
  remark: undefined,
  userList: [],
})
const formRules = reactive({
})
const isResList = ref([
  { id: 'Y', name: '是' },
  { id: 'N', name: '否' }
]);
const postSelectList = ref([
  { id: 0, name: '0' },
  { id: 1, name: '1' },
  { id: 2, name: '2' }
]);
const typeList = ref([
  { id: 1, name: '任务单'},
  { id: 2, name: '其他' }
]);
const formRef = ref() // 表单 Ref
onMounted(async () => {
  const data = await UserApi.getSimpleUserList()
  userSelectList.value = data
  console.log(formData.value)
  formData.value.userList=await FpUserDetailApi.selectFpUserDetail(formData.value)
})
/** 打开弹窗 */
// const open = async (type: string, id?: number) => {
//   dialogVisible.value = true
//   dialogTitle.value = t('action.' + type)
//   formType.value = type
//   resetForm()
//   // 修改时，设置数据
//   if (id) {
//     formLoading.value = true
//     try {
//       formData.value = await FpUserDetailApi.getFpUserDetail(id)
//     } finally {
//       formLoading.value = false
//     }
//   }
// }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
//删除人员信息
const handleDeleteUser = (index: number) => {
  // formData.value.userList.push(formData.value.userList[index])
  formData.value.userList.splice(index, 1)
}
const userAddItem = () => {
  const newData = {
    // 新数据的属性
    busyId: '',
    postId: '',
    isRes: '',
  }
  formData.value.userList.push(newData)
}
const closeForm = async () => {
  router.push({ path: '/base/fpuserdetail' })
  tagsViewStore.delVisitedView(router.currentRoute.value)
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    // const data =  FpUserDetailApi.createFpUserDetail(formData.value)
    // if (formType.value === 'create') {
      await FpUserDetailApi.createFpUserDetail(formData.value)
      message.success(t('common.createSuccess'))
    // } else {
    //   await FpUserDetailApi.updateFpUserDetail(data)
    //   message.success(t('common.updateSuccess'))
    // }
    dialogVisible.value = false
    router.push({ path: '/base/fpuserdetail' })
    tagsViewStore.delVisitedView(router.currentRoute.value)
    // 发送操作成功的事件
    // emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    type:undefined,
    id: undefined,
    fpId: undefined,
    busyId: undefined,
    seqNo: undefined,
    postId: undefined,
    isRes: undefined,
    remark: undefined,
  }
  formRef.value?.resetFields()
}
const getUserList = async ( ) => {
  formData.value.userList=await FpUserDetailApi.selectFpUserDetail(formData.value)
}
watch(() => formData.value.postId, (newValue) => {
  getUserList()
});

</script>
