<template>
    <BasicModal :maskClosable="false" :width="750" @register="registerModal" v-bind="$attrs" title="资源版本管理" centered
        @ok="handleSubmit">
        <div class="content">
            <div class="base">
                <div class="base-title">基本信息</div>
                <div class="base-info">
                    <div class="item">资源类型：<span>{{ type }}</span></div>
                    <div class="item">资源名称：<span>{{ SERVICENAME }}</span></div>
                </div>
            </div>
            <div class="version">
                <div class="base-title">版本管理</div>
                <div class="is-history">
                    <div class="radio-box">
                        <div class="label">是否已存在：</div>
                        <div class="radio">
                            <a-radio-group v-model:value="isHistory" @change="handleChangeHistoryMode">
                                <a-radio :value="0">否</a-radio>
                                <a-radio :value="1">是</a-radio>
                            </a-radio-group>
                        </div>
                    </div>
                    <div class="select-history" v-if="isHistory === 1">
                        <div class="history-label">选择历史资源：</div>
                        <a class="select-btn" @click="handleOpenHistoryModal">选择历史资源</a>
                    </div>
                </div>
                <div class="version-info" v-if="isHistory === 0">
                    <div class="label">版本名称：</div>
                    <div class="select">
                        <a-select v-model:value="versionInfo" style="width: 100%" :options="versionSelect"></a-select>
                    </div>
                </div>
                <div class="history-info" v-if="isHistory === 1">
                    <div class="label">历史资源信息：</div>
                    <div class="info-box">
                        <div class="info-item" v-for="(item, index) in historyResDetail" :key="index">
                            <div class="item-label">{{ item.label }}：</div>
                            <div class="item-value">{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </BasicModal>
    <ResHistoryVersionModal @register="registerHistoryModal" @select="selectHistoryRes"></ResHistoryVersionModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed, toRefs } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import ResHistoryVersionModal from './ResHistoryVersionModal.vue';
import { message } from 'ant-design-vue';
import { getVersionList, saveResVersion } from '/@/api/sys/version';

export default defineComponent({
    name: 'ResVersionModal',
    components: { BasicModal, ResHistoryVersionModal },
    setup(_, { emit }) {
        // 基础信息
        const baseInfo = reactive({
            RESOURCE_TYPE: "",
            type: "",
            SERVICENAME: "",
            SERVICEID: ""
        })
        // const versionInfo = reactive({
        //     version_ID:"",
        //     version_NO:""
        // })
        // 版本信息，用于提交
        const versionInfo = ref('')
        // 是否有历史版本
        const isHistory = ref(0);
        // 历史版本资源详情
        const historyResDetail = ref([
            {
                label: "资源类型",
                value: ""
            },
            {
                label: "资源名称",
                value: ""
            },
            {
                label: "版本名称",
                value: ""
            },
            {
                label: "版本号",
                value: ""
            },
            {
                label: "版本时间",
                value: ""
            }
        ]);
        const historyResId = ref('')
        const historyVersionId = 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([]);
        onMounted(async () => {
            versionSelect.value = await getVersionSelect();
        })
        // 初始化
        const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
            resetForm()
            console.log(data)
            const { RESOURCE_TYPE, type, SERVICENAME, SERVICEID } = data.base;
            baseInfo.RESOURCE_TYPE = RESOURCE_TYPE;
            baseInfo.type = type;
            baseInfo.SERVICENAME = SERVICENAME;
            baseInfo.SERVICEID = SERVICEID;
        });
        // 重置表格
        const resetForm = () => {
            isHistory.value = 0
            versionInfo.value = ''
        }

        // 注册历史版本资源弹窗
        const [registerHistoryModal, { openModal }] = useModal()

        // 打开选择历史版本资源的弹窗
        const handleOpenHistoryModal = () => {
            openModal(true, {
                type: baseInfo.RESOURCE_TYPE
            })
        }
        // 提交信息
        const handleSubmit = async () => {
            let paramsVersion = []
            if (isHistory.value === 0) {
                if (versionInfo.value === '') {
                    message.info('请选择版本')
                    return
                }
                const version = versionInfo.value.split('_')
                paramsVersion = [{
                    resource_ID: baseInfo.SERVICEID,
                    resource_TYPE: baseInfo.RESOURCE_TYPE,
                    version_ID: version[0],
                    version_NO: version[1]
                }]
            }
            else{
                if(!historyResId.value || !historyVersionId.value){
                    message.info('请选择历史资源')
                    return
                }
                paramsVersion = [{
                    pre_RESOUCE_ID: historyResId.value,
                    resource_ID: baseInfo.SERVICEID,
                    resource_TYPE: baseInfo.RESOURCE_TYPE,
                    version_ID: historyVersionId.value,
                    version_NO: historyResDetail.value[3].value[1]
                }]
            }
            const params = {
                version: paramsVersion
            }
            await saveResVersion(params).then(saveRes => {
                console.log(saveRes)
            })
            closeModal();
            emit('success')
        };
        // 选择历史版本资源
        const selectHistoryRes = (data) => {
            historyResDetail.value = data.info
            historyResId.value = data.resId
            historyVersionId.value = data.versionId
        }
        const handleChangeHistoryMode = (e) => {
            historyResDetail.value = [
                {
                    label: "资源类型",
                    value: ""
                },
                {
                    label: "资源名称",
                    value: ""
                },
                {
                    label: "版本名称",
                    value: ""
                },
                {
                    label: "版本号",
                    value: ""
                },
                {
                    label: "版本时间",
                    value: ""
                }
            ];
            versionInfo.value = ''
            historyResId.value = ''
            historyVersionId.value = ''
        }
        return {
            ...toRefs(baseInfo),
            versionInfo,
            isHistory,
            historyResDetail,
            versionSelect,
            registerModal,
            registerHistoryModal,
            handleOpenHistoryModal,
            handleSubmit,
            selectHistoryRes,
            handleChangeHistoryMode
        };
    },
});
</script>
<style lang="scss" scoped>
.content {
    padding: 10px;

    .base {

        .base-title {
            width: 100px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-left: 2px solid #0671DD;
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
        }

        .base-info {
            display: flex;
            align-items: center;

            .item {
                margin-right: 180px;
                font-size: 14px;
                color: #3D3D3D;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .version {
        .base-title {
            margin: 20px 0;
            width: 100px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-left: 2px solid #0671DD;
            font-size: 16px;
            color: #333333;
        }

        .is-history {
            display: flex;
            align-items: center;

            .radio-box {
                display: flex;
                align-items: center;
                margin-right: 180px;

                .label {
                    width: 90px;
                    margin-right: 10px;
                }
            }

            .select-history {
                display: flex;
                align-items: center;

                .history-label {
                    width: 100px;
                }
            }
        }

        .version-info {
            margin-top: 10px;
            display: flex;
            align-items: center;

            .label {
                width: 90px;
                margin-right: 10px;
                flex-shrink: 0;
            }

            .select {
                width: 250px;
            }
        }

        .history-info {
            margin-top: 10px;
            display: flex;

            .label {
                width: 100px;
                margin-right: 10px;
                flex-shrink: 0;
            }

            .info-box {
                width: 500px;
                border-radius: 2px;
                background: rgba(51, 51, 51, 0.1);
                box-sizing: border-box;
                border: 1px solid #D9D9D9;
                display: flex;
                flex-wrap: wrap;
                user-select: none;
                cursor: not-allowed;

                .info-item {
                    padding-left: 15px;
                    width: 50%;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    color: #888888;
                }
            }
        }
    }
}
</style>