<template>
    <div class="options py-3">
        <div class="flex justify-between">
            <div class="inpu-title">选项管理</div>
            <div class=" text-xs text-app-red"></div>
        </div>
        <div class="option-items">
        <div class="option-item flex" v-for="(i,index) in value" :key="index">
            <div @click="deleteClicked(i,index)">
            <app-icon customize type='icon-delete-s' size='24px' color='#BF463D' ></app-icon>
            </div>
            <div class="pl-3 flex-grow">
            <textarea
                v-model="value[index]"
                type="text"
                placeholder="请输入"
                maxlength="100"
                rows="2"
                cols="50"
                class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
                @blur="setVal"/>
            </div>
            </div>
        </div>
        <div class="flex mt-5 justify-center gap-x-1">
        <div class='self-start'>
            <app-icon customize type='icon-zengjia' size='20px' color='#6870f1' ></app-icon>
        </div>
        <div class='leading-6' @click="addOption">添加选项</div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
// import {remove as _remove} from 'lodash'
export default Vue.extend({
    components:{
          'app-icon':()=>import('@/components/common/Icon.vue'),
    },
    props: {
        options: {
            type: Array
        }
    },
    data(){
        return{
            value:['',''] as string[]
        } 
    },
    methods:{
        deleteClicked(item:any,Click_index:any){
            if(this.value.length>2){
                this.value.splice(Click_index,1)
            }else{
                this.$toast.fail('选项不能少于两个')
            }
            this.$emit('getVal', this.value)
        },
        addOption(){
            if (this.value.length >= 10) return
            this.value.push('')
            this.$emit('getVal', this.value)
        },
        setVal() {
            const set = new Set(this.value)
            if (set.size !== this.value.length) {
                this.$toast('已存在重复项')
            }
            this.$emit('getVal', this.value)
        }
    },
    watch: {
        options(n) {
            if (n.length > 0) {
                this.value = []
                for (let item of n) {
                    this.value.push(item.name)
                }
            }
        }
    }


});
</script>
