
<template>
    <el-form-item :label="item.label+'：'" v-for="(item,index) in standbyWebsiteList" :prop="'standbyWebsiteList.' + index" :rules="[{ required:index==0?true:false, validator: index==0?validateWebsite:validateWebsite2, trigger: 'blur' }]">
        <el-input @input="removeSpace($event,index)" v-model="item.value" :placeholder="'请输入'+item.label" />
        <el-icon style='margin-left: 10px;color:#1874ff;cursor: pointer;' @click="addItem(index)" v-if="index<1"><Plus /></el-icon>
        <el-icon style='margin-left: 10px;color:#1874ff;cursor: pointer;' @click="delItem(index)" v-if="index!=0"><Minus /></el-icon>
    </el-form-item>
</template>

<script setup lang="ts">
const valueRequire = defineModel();
const valueOne = defineModel('valueOne');
const valueTwo = defineModel('valueTwo');
const valueThree = defineModel('valueThree');

const props = defineProps({
    text: { // 表单文字
        type: String,
        default: true
    },
})
const standbyWebsiteList = defineModel<any>('standbyWebsiteList')

const validateWebsite =  (rule: any, value: any, callback: any) => {
    if (!value.value) return callback(new Error('企业网址不能为空'))
    if (value.value.indexOf('http') != -1 || value.value.indexOf('https') != -1) {
        callback(new Error('请勿包含http或https'))
    }else{
        callback()
    }
}

const validateWebsite2 =  (rule: any, value: any, callback: any) => {
    // if (value.value.indexOf('http') != -1 || value.value.indexOf('https') != -1) {
    //     callback(new Error('请勿包含http或https'))
    // }else{
    //     callback()
    // }
    callback()
}

const removeSpace = (value: string,index?:number) => {
    let showValue = value.replace(/\s+/g, '')
    standbyWebsiteList.value[index].value= showValue
    setArray()
}
const setArray = ()=>{
    let arr = standbyWebsiteList.value.filter(function(element) {
        return element.value !== undefined && element.value !== null && element.value !== '';
    });
    valueRequire.value = arr.length>0?arr[0].value:''
    valueOne.value = arr.length>1?arr[1].value:''
    valueTwo.value = arr.length>2?arr[2].value:''
    valueThree.value = arr.length>3?arr[3].value:''
}
const addItem = (index:number)=>{
    if(standbyWebsiteList.value.length<4){ // 不超过三个
        standbyWebsiteList.value.push({label:'企业备用网址',value:''})
    }else{
        ElMessage.warning('企业备用网址最多可添加三个');
    }

}
const delItem = (index:number)=>{
    standbyWebsiteList.value.splice(index, 1);
    setArray()
}
</script>

<style lang="scss" scoped>

</style>
