<template>
  <div class="modelcon" >
    <div class="modelitem" v-for="(item, index) in modellink" :key="index">
      <input :ref="`ip${index}`" type="text" class="ui-input" placeholder="https://" v-model.trim="modellink[index]" @change="onChange()" />
      <i @click="del(index)" class="iconfont iconedit_case_delete"></i>
    </div>
    <button class="ui-button submit" @click="pushLink">添加模型链接</button>
  </div>
</template>

<script>
export default {
  props: ["model"],
  data() {
    console.log(this.model);
    return {
      modellink: [...this.model],
    };
  },
  methods: {
    pushLink(){
      this.modellink.push('')
    },
    del(idx){
      this.modellink.splice(idx,1)
    },
    onChange() {
      console.log('执行了');
      if (this.modellink.length > 0) {
        this.modellink =  this.modellink.filter(item=>{
          if (item) {
            if (!/^http(s)?:\/\//.test(item)) {
              item = window.location.protocol + "//" + item;
            }
            return item
          }
        })
      }
    },
  },
  watch: {
    modellink(newVal) {
      this.$emit("modelChange", newVal);
    },
  },
};
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.modelcon {
  .modelitem{
    position: relative;
    margin-bottom: 10px;
    .ui-input{
      padding-right: 30px;
    }
    .iconedit_case_delete{
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      &:hover{
        color: @color;
      }
    }
  }
  .ui-button {
    width: 100%;
    margin-top: 0;
  }
  .martom {
  }

}
</style>
