<template>
    <hc-card>
        <template #header>
            <div class="hac-card-title g">项目类型设置</div>
        </template>
        <template #extra>
            <HcIcon name="add-box" class="blueColor cursor-pointer text-2xl" @click="addClick" />
        </template>
        <div class="type-list">
            <div class="grid grid-cols-2 gap-4">
                <div v-for="(item, index) in typeList" :key="index" class="type-list-item">
                    <div class="flex items-center justify-between">
                        <span v-if="!item.isEditing" @click="typeClick(item)">{{ item.dictValue }}</span>
                        <el-input
                            v-else
                            v-model="item.dictValue"
                            size="small"
                            class="h-32px w-32"
                        />
                        <div>
                            <HcIcon
                                v-loading="saveEditLoading"
                                :name="item.isEditing ? 'save' : 'edit'"
                                class="ml-2 cursor-pointer text-xl text-blue-500"
                                @click.stop="item.isEditing ? saveEdit(item) : startEdit(item)" 
                            />
                            <HcIcon v-del-com:[deleteType]="item" name="close" class="cursor-pointer text-2xl text-red" @click.stop />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hc-new-dialog v-model="addModal" title="新增项目类型" widths="40rem" :loading="addsaveLoading" @save="modalSave">
            <el-form ref="formRef" :model="baseForm" :rules="baseFormRules" label-width="auto">
                <div class="hc-form-item">
                    <el-form-item label="类型名称:" prop="dictValue">
                        <el-input v-model="baseForm.dictValue" clearable placeholder="请输入" />
                    </el-form-item>
                </div>
            </el-form>
        </hc-new-dialog>
        <hc-new-dialog v-model="dealModal" :title="dealForm.dictValue" widths="38rem">
            <HcIcon name="add-box" class="blueColor cursor-pointer text-2xl" @click="addItemClick" />
            <el-form ref="dealFormRef" :model="dealForm" label-width="auto">
                <div v-for="(item, index) in dealForm.list" :key="index" class="hc-form-item mb-2 items-center justify-center">
                    <div class="w-full flex items-center">
                        <div class="mr-2 whitespace-nowrap">选项{{ index + 1 }}</div>
                        <el-input v-if="item.isEditing" v-model="item.dictValue" clearable placeholder="请输入" class="inSmallInput" />
                        <span v-else class="type-list-item-1">{{ item.dictValue }}</span>
                        <HcIcon
                                
                            :name="item.isEditing ? 'save' : 'edit'"
                            class="ml-2 cursor-pointer text-xl text-blue-500"
                            @click.stop="item.isEditing ? saveInEdit(item) : startInEdit(item)" 
                        />
                        <HcIcon v-del-com:[deleteOption]="item" name="close" class="ml-2 cursor-pointer text-2xl text-red" />
                    </div>
                </div>
            </el-form>
            <template #footer>
                <el-button hc-btn @click="dealModal = false">取消</el-button>
                <el-button hc-btn type="primary" :loading="dealModalLoading" @click="dealModalSubmit">保存</el-button>
            </template>
        </hc-new-dialog>
    </hc-card>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { deepClone, formValidate, getArrValue } from 'js-fast-way'
import { getDictionary, remove, submit, submitList } from '~api/dictbiz.js'

onMounted(() => {
    getTypeListData(1, 'ibaProjectType')
})
//获取字典数
const getTypeListData = async (parentId, code) => {
        const { data } = await getDictionary({ parentId, code, type:2 })

        if (code === 'ibaProjectType') {
            typeList.value = getArrValue(data)
            return
        } else {
            dealForm.value.list = getArrValue(data)
            return
        }
        
    
    
}
const typeList = ref([])

const deleteType = async ({ item }, resolve) => {
    const { error, code, msg } = await remove({ ids:item.id })
    if (!error && code === 200) {
        window.$message.success('删除成功')
        getTypeListData(1, 'ibaProjectType')
        resolve()
      
    } else {
     
        resolve()
    }
}


const addClick = () => { 
    addModal.value = true
}
const addModal = ref(false)
const baseForm = ref({})
const baseFormRules = ref({
    dictValue: {
        required: true,
        trigger: 'blur',
        message: '请输入类型名称',
    },
})
const addsaveLoading = ref(false)
const modalSave = async () => {
 
    const isValidate = await formValidate(formRef.value)
    if (!isValidate) return false
    

    addsaveLoading.value = true
    const { error, code, msg } = await submit({
        dictValue:baseForm.value.dictValue,
        code:'ibaProjectType',
        systemType:2,
        parentId:1,
      
    })
    //判断状态
    addsaveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        addModal.value = false
        getTypeListData(1, 'ibaProjectType')
        getTypeListData(dealForm.value.id, 'ibaRouteType')
    } 
}
const formRef = ref(null)

const startEdit = (item) => {
    item.isEditing = true
    nextTick(() => {
        const input = document.querySelector('.h-32px.w-32 input')
        if (input) input.focus()
    })
}
const saveEditLoading = ref(false)
const saveEdit = async (item) => {
    saveEditLoading.value = true
    const { error, code, msg } = await submit({
        dictValue:item.dictValue,
        code:'ibaProjectType',
        systemType:2,
        parentId:1,
        id:item.id,
      
    })
    //判断状态
    saveEditLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
      
        getTypeListData(1, 'ibaProjectType')
       
    } 
}
const saveInEdit = async (item) => {
    saveEditLoading.value = true
    const { error, code, msg } = await submit({
        dictValue:item.dictValue,
        code:'ibaRouteType',
        systemType:2,
        parentId:dealForm.value.id,
        id:item.id,
      
    })
    //判断状态
    saveEditLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
      
        await getTypeListData(dealForm.value.id, 'ibaRouteType') // 重新加载路线类型列表
        await getTypeListData(1, 'ibaProjectType') // 重新加载项目类型列表
       
    } 
}
const startInEdit = async (item) => {
    item.isEditing = true
    nextTick(() => {
        const input = document.querySelector('.inSmallInput input')
        if (input) input.focus()
    })
}
const typeClick = async (item) => {

    dealForm.value = deepClone(item)
    dealForm.value.list = []
   await getTypeListData(dealForm.value.id, 'ibaRouteType')
    dealModal.value = true
}
const dealModal = ref(false)
const dealForm = ref({})
const dealFormRef = ref(null)
const addItemClick = () => {
    dealForm.value.list.push({ dictValue:'', parentId:dealForm.value.id, code:'ibaRouteType', systemType:2, isEditing:true })
}
const dealModalLoading = ref(false)
const dealModalSubmit = async () => {
    const isValidate = await formValidate(dealFormRef.value)
    if (!isValidate) return false
    
    dealModalLoading.value = true
    const { error, code, msg } = await submitList(
        dealForm.value.list,
    )
    //判断状态
    dealModalLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        dealModal.value = false // 关闭弹窗
        await getTypeListData(dealForm.value.id, 'ibaRouteType') // 重新加载路线类型列表
        await getTypeListData(1, 'ibaProjectType') // 重新加载项目类型列表
    } 
}
// ... existing code ...
const deleteOption = async ({ item }, resolve) => {
    console.log(item, 'item')
    
    const { error, code, msg } = await remove({ ids: item.id })
    if (!error && code === 200) {
        window.$message.success('删除成功')
        resolve()
        await getTypeListData(dealForm.value.id, 'ibaRouteType')
    } else {
        window.$message.error(msg ?? '删除失败')
        resolve()
    }
}
// ... existing code ...
</script>

<style scoped lang="scss">
.blueColor{
    color:var(--el-color-primary-dark-2);
}
.hac-card-title {
    color: #000;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 8px;
    &::before {
        content: '';
        position: relative;
        display: inline-block;
        width: 5px;
        height: 18px;
        border-radius: 10px;
        background-color: var(--el-color-primary-dark-2);
        right: 8px;
    }
}

.type-list {
    padding: 0 20px;
    
    .type-list-item {
        cursor: pointer;
        padding: 5px 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        // height: 32px;
        line-height: 32px;
        color: #606266;
        transition: border-color 0.2s;
        justify-items: center;
        
        &:hover {
            border-color: #c0c4cc;
        }
    }
        

}
.type-list-item-1 {
        width: 100%;
        cursor: pointer;
        padding: 5px 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        // height: 32px;
        line-height: 32px;
        color: #606266;
        transition: border-color 0.2s;
        justify-items: center;
        
        &:hover {
            border-color: #c0c4cc;
        }
    }
</style>
