<template>
    <BasicModal :maskClosable="false" :width="440" @register="registerModal" v-bind="$attrs" title="资源版本管理" centered
        @ok="handleSubmit">
        <div class="content">
            <div class="form-item">
                <div class="label">版本名称：</div>
                <div class="select">
                    <a-select v-model:value="versionName" style="width: 100%" :options="versionSelect"
                        @change="handleSelectVersion"></a-select>
                </div>
            </div>
            <div class="form-item">
                <div class="label">版本号：</div>
                <div class="input">
                    <a-input v-model:value="versionNo" placeholder="自动填写" style="width: 100%" disabled></a-input>
                </div>
            </div>
        </div>
    </BasicModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed, toRefs } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { message } from 'ant-design-vue';
import { getVersionList, saveResVersion } from '/@/api/sys/version';
export default defineComponent({
    components: { BasicModal },
    setup(_, { emit }) {
        const resInfo = reactive({
            ids: [],
            type: ""
        })
        const versionInfo = reactive({
            id: "",
            no: ""
        })
        const versionName = ref("");
        const versionNo = ref("");
        //获取大版本选项列表
        const getVersionSelect = () => {
            return new Promise((resolve) => {
                let params = {
                    keyStr: ""
                }
                getVersionList(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        let resData = []
                        res.datas.pageData.forEach(element => {
                            resData.push(
                                {
                                    label: element.VERSION_NAME,
                                    value: element.FID + '_' + element.VERSION_NO
                                }
                            )
                        });
                        resolve(resData)
                    }
                    else {
                        resolve([])
                    }
                })

            })
        }
        const versionSelect = ref([]);
        const [registerModal, { closeModal }] = useModalInner(async (data) => {
            resetForm()
            versionSelect.value = await getVersionSelect();
            console.log(data)
            resInfo.ids = data.ids
            resInfo.type = data.type
        });
        // 重置表格
        const resetForm = () => {
            versionName.value = ''
            versionNo.value = ''
        }
        //选择版本
        const handleSelectVersion = (e) => {
            let str = e.split('_')
            versionInfo.id = str[0]
            versionInfo.no = str[1]
            versionNo.value = `V${str[1]}`
        }
        // 提交信息
        const handleSubmit = async () => {
            if(!versionInfo.id || !versionInfo.no){
                message.info('请选择版本')
                return
            }
            let params = {
                version: []
            }
            resInfo.ids.forEach(resId=>{
                params.version.push({
                    resource_ID: resId,
                    resource_TYPE: resInfo.type,
                    version_ID: versionInfo.id,
                    version_NO: versionInfo.no
                })
            })
            // 循环配置参数
            await saveResVersion(params).then(saveRes => {
                console.log(saveRes)
            })
            closeModal();
            emit('success')
        };
        return {
            versionName,
            versionNo,
            versionSelect,
            registerModal,
            handleSelectVersion,
            handleSubmit
        }
    }
})
</script>
<style lang="less" scoped>
.content{
    padding: 10px;
    .form-item{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        
        &:last-child{
            margin-bottom: 0;
        }

        .label{
            width: 20%;
        }
        .select{
            width: 80%;
        }
        .input{
            width: 80%;
        }
    }
}
</style>