<template>
    <popup v-if="show">
      <div class="ui-message ui-message-confirm" style="width: 400px">
        <div class="ui-message-header">
          <span>重命名素材</span>
          <span @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <input
              class="ui-input"
              type="text"
              maxlength="50"
              placeholder="输入素材名字，限50字"
              v-model="key"
            />
          </div>
        </div>
        <div class="ma-line"></div>
        <div class="ui-message-footer">
          <div class="btn">
            <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}" >
              确定
            </button>
          </div>
        </div>
      </div>
    </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props:['show','item'],
  components:{
    Popup
  },
  watch:{
    show(){
      this.key = this.item.name
    }
  },
  data(){
    return {
      key: this.item.name
    }
  },
  methods:{
    emitname(){
      if (!this.key.trim()) {
        return this.$alert({ content: "请输入名字" });
      }
      this.$emit('rename',this.key)
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  border-radius: 0;
  .icon_close{
    color: #909090;
  }
  .ui-message-header{
    border-bottom: 1px solid #EBEBEB;
  }
  .ui-message-main{
    width: 330px;
    margin: 20px auto;
    background: #fff;
  }
  .ui-message-footer{
    width: 100%;
    .btn{
      width: 80%;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      .ui-button{
        max-width: 104px
      }
    }

  }
}
</style>

<style lang="less" scoped>
@import '../style.less';
</style>