<template>
    <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      :canFullscreen="false"
      :defaultFullscreen="false"
      :showCancelBtn="true"
      :showOkBtn="true"
      :draggable="false"
      title="创建算法"
      @ok="submitClick"
    >
        <div class="flex titlesbox">
            <div class="li" v-for="(item,index) in tabList">
                <span :class="index==tabIndex?'active':''" @click="tabsClick(index)">{{item}}</span>
            </div>
        </div>
        <!-- 视频算法 -->
        <div class="formsbox" v-if="tabIndex == 0">
            <a-form
                :model="formState"
                ref="formRef"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                autocomplete="off"
            >
                <a-form-item
                    label="算法名称"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="概要描述"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-textarea v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="算力名称"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="推流地址"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="拉流地址"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="服务地址"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="秘钥"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
            </a-form>
        </div>
        <!-- 图片算法 -->
        <div class="formsbox" v-if="tabIndex == 1">
            <a-form
                :model="formState"
                ref="formRef"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                autocomplete="off"
            >
                <a-form-item
                    label="算法名称"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="概要描述"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-textarea v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="算力名称"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="服务地址"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
                <a-form-item
                    label="秘钥"
                    name="username"
                    :rules="[{ required: true, message: '请输入' }]"
                >
                    <a-input v-model:value="formState.username" />
                </a-form-item>
            </a-form>
        </div>
    </BasicModal>
</template>
<script lang="ts" setup>
    import { ref, defineEmits, reactive, toRaw } from 'vue';
    import { BasicModal, useModalInner } from '@/components/Modal';
    const tabIndex = ref(0);
    const tabList = ["视频算法","图片算法"];
    const tabsClick = (index) =>{
        tabIndex.value = index
    }
    const formRef = ref();
    interface FormState {
        username: string;
        password: string;
        remember: boolean;
    }

    const formState = reactive<FormState>({
        username: '',
        password: '',
        remember: true,
    });
    const submitClick = ()=>{
        console.log('submit')
        formRef.value.validate().then(() => {
            console.log('values', formState, toRaw(formState));
        })
        .catch(error => {
            console.log('error', error);
        });
    }
    const [registerModal, { closeModal }] = useModalInner((data: any) => {
        
    });
</script>
<style scoped>
.titlesbox{
    width: 92%;
    margin-left: 4%;
    line-height: 40px;
    border-bottom: 1px solid #F5F6FA;
    .li{
        width: 50%;
        text-align: center;
        span{
            color: #222738;
            cursor: pointer;
            line-height: 40px;
            display: inline-block;
        }
        .active{
            border-bottom: 3px solid #3A57E8;
        }
    }
}
.formsbox{
    width: 92%;
    margin-left: 4%;
    padding-top: 20px;
}
</style>