<template>
    <popup>
      <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>
        <input
          class="ui-input"
          type="text"
          maxlength="50"
          placeholder="请输入"
          v-model="key"
        />
        <div class="ui-message-footer">
          <div class="btn">
            <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
              取消
            </button>
            <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:['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{
  width: 400px;
  height: 230px;
  .ui-message-header{
    .icon_close{
      color: #969799;
    }
  }
  .ui-input {
    margin: 40px 0;
    height: 36px;
    color: #323233;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #EBEDF0;
    &:focus {
      border: 1px solid @color;
    }
  }
  .ui-message-footer{
    width: 100%;
    .btn{
      display: flex;
      justify-content: flex-end;
      .ui-button{
        max-width: 104px
      }
    }

  }
}
</style>

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