<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="项目名称" prop="procurement_contract_id">
                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入项目名称" />
                </el-form-item>



                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <el-button v-perms="['project.project/add']" type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                新增
            </el-button>
            <el-button v-perms="['project.project/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
                删除
            </el-button>

            <div class="mt-4">
                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="序号" type="index" width="55" />
                    <el-table-column label="项目类型" prop="name" show-overflow-tooltip />
                    <el-table-column label="标签" prop="custom_name" show-overflow-tooltip>

                        <template #default="{ row }">
                            <div v-if="row.web_tags_text.length > 0">
                                <text v-for="(item, i) in row.web_tags_text" :key="i"> <el-tag class="ml-2" type="success">{{ item }}</el-tag></text>
                            </div>
                            <div v-else>不限</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="App标签" show-overflow-tooltip>
                        <template #default="{ row }">
                            <div v-if="row.app_tags_text.length > 0">
                                <text v-for="(item, i) in row.app_tags_text" :key="i"> <el-tag class="ml-2" type="success">{{ item }}</el-tag></text>

                            </div>
                            <div v-else>不限</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="预算" prop="custom_name" show-overflow-tooltip>

                        <template #default="{ row }">
                            <div v-if="row.budget_tags_text.length > 0">
                                <text v-for="(item, i) in row.budget_tags_text" :key="i"> <el-tag class="ml-2" type="success">{{ item }}</el-tag></text>

                            </div>
                            <div v-else>不限</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="350" fixed="right">
                        <template #default="{ row }">
                            <el-button v-perms="['project.project/edit']" type="primary" link @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-button v-perms="['project.project/delete']" type="danger" link @click="handleDelete(row.id)">
                                删除
                            </el-button>
                            <!-- <el-button v-perms="['project.project/detail']" link @click="handledetail(row)">
                                详情
                            </el-button> -->
                            <el-button v-perms="['project.project/detail']" link @click="handledqa(row)">
                                App标签
                            </el-button>
                            <el-button v-perms="['project.project/detail']" link @click="handledqc(row)">
                                预算
                            </el-button>
                            <el-button v-perms="['project.project/detail']" link @click="handledqb(row)">
                                标签
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
        <detail-popup v-if="showDtail" ref="detailRef" :dict-data="dictData" @close="showDtail = false" />

        <el-dialog v-model="dialogVisiblea" title="app标签" width="600px" :before-close="handleClose">
            <div>

                <el-checkbox-group v-model="app_tags">
                    <el-checkbox v-for="(item, i) in dictData.project_app_tags" :label="item.value" :key="i">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>


            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisiblea = false">取消</el-button>
                    <el-button type="primary" @click="submita"> 确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisibleb" title="标签" width="600px" :before-close="handleClose">
            <div>
                <el-checkbox-group v-model="web_tags">
                    <el-checkbox v-for="(item, i) in dictData.project_web_tags" :label="item.value" :key="i">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>

            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisibleb = false">取消</el-button>
                    <el-button type="primary" @click="submitb"> 确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisiblec" title="预算" width="600px" :before-close="handleClose">
            <div>

                <div>
                    <el-checkbox-group v-model="budget_tags">
                        <el-checkbox v-for="(item, i) in dictData.project_budget_tags" :label="item.value" :key="i">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>



            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisiblec = false">取消</el-button>
                    <el-button type="primary" @click="submitc"> 确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="projectLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiProjecttypeLists, apiProjecttypeDelete, apiProjecttypDetail, apiProjecttypeAdd, apiProjecttypeEdit } from '@/api/projecttype'
import { timeFormat } from '@/utils/util'
import { getAllProjectTypes } from '@/api/projecttype'
const protype = reactive([])
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import DetailPopup from './detail.vue'
const detailRef = shallowRef<InstanceType<typeof DetailPopup>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
const showDtail = ref(false)

// 查询条件
const queryParams = reactive({
    name: ''


})
const budget_tags = ref([])
const app_tags = ref([])
const web_tags = ref([])
// 表单数据
const formData = reactive({
    id: '',
    name: '',
    web_tags: '',
    app_tags: '',
    budget_tags: '',
})

//打开弹窗
const handledqa = (data: any) => {
    app_tags.value = []
    dialogVisiblea.value = true
    if (data.app_tags && data.app_tags.length > 0) {
        if (data.app_tags.includes(',')) {
            app_tags.value = data.app_tags.split(',')
        } else {
            app_tags.value = [data.app_tags]
        }
    }

    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}
const handledqb = (data: any) => {
    web_tags.value = []
    dialogVisibleb.value = true
    if (data.web_tags && data.web_tags.length > 0) {
        if (data.web_tags.includes(',')) {
            web_tags.value = data.web_tags.split(',')
        } else {
            web_tags.value = [data.web_tags]
        }
    }

    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }

}

const handledqc = (data: any) => {
    budget_tags.value = []
    dialogVisiblec.value = true
    if (data.budget_tags && data.budget_tags.length > 0) {
        if (data.budget_tags.includes(',')) {
            budget_tags.value = data.budget_tags.split(',')
        } else {
            budget_tags.value = [data.budget_tags]
        }
    }
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }

}
//关闭弹窗
const dialogVisiblea = ref(false)
const dialogVisibleb = ref(false)
const dialogVisiblec = ref(false)

//提交
const submita = () => {

    if (app_tags.value.length > 0) {
        formData.app_tags = app_tags.value.toString()
        apiProjecttypeEdit(formData).then((res) => {
            console.log(res)
            dialogVisiblea.value = false
            getLists()
        })
    } else {
        feedback.msgError('请选择标签')
    }

    // apiProjecttypeAdd()


}
const submitb = () => {
    if (web_tags.value.length > 0) {
        formData.web_tags = web_tags.value.toString()
        apiProjecttypeEdit(formData).then((res) => {
            // console.log(res)
            dialogVisibleb.value = false
            getLists()
        })
    } else {
        feedback.msgError('请选择标签')
    }
}
const submitc = () => {
    if (budget_tags.value.length > 0) {
        formData.budget_tags = budget_tags.value.toString()
        apiProjecttypeEdit(formData).then((res) => {
            console.log(res)
            dialogVisiblec.value = false
            getLists()
        })
    } else {
        feedback.msgError('请选择预算')
    }
}
// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('project_web_tags,project_app_tags,project_budget_tags')
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiProjecttypeLists,
    params: queryParams
})

// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

// 编辑
const handleEdit = async (data: any) => {
    console.log(data.id)
    let res = await apiProjecttypDetail({ id: data.id })
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(res)
}

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiProjecttypeDelete({ id })
    getLists()
}
const handledetail = async (data: any) => {
    let res = await apiProjecttypeDetail({ id: data.id })
    showDtail.value = true
    await nextTick()
    detailRef.value?.open()
    detailRef.value?.setFormData(res)
}


getLists()
</script>

