<template>
    <div class="index-item" draggable="true"
    :class="{'active':pageItem.id===currentItem.id,
             'choosed':copyPagesMap[pageItem.id],}" >
        <div class="wrap">
            <div class="item-flex">
                <div class="item-icon-left"></div>
                <div class="item-name">{{pageItem.title}}</div> 
                <div class="item-icon-right none">
                  <el-dropdown @command="handleOperateCommand" trigger="click" v-if="showCloseBtn" v-show="!ctrlKeyActive">
                    <span class="el-dropdown-link"> 
                      <i class="el-icon-more" 
                         style="font-size: 16px;transform: rotate(90deg);cursor: pointer"
                         />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{key:'insertPpt'}">插入PPT</el-dropdown-item>
                      <el-dropdown-item :command="{key:'changeFormat'}">切换模板</el-dropdown-item>
                      <el-dropdown-item :disabled="savePagesArrLength===0" :command="{key:'pasteBefore'}">粘贴到此页前</el-dropdown-item>
                      <el-dropdown-item :disabled="savePagesArrLength===0" :command="{key:'pasteAfter'}">粘贴到此页后</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
            </div>
            <div class="page-input" v-if="isEdit">
              第&nbsp;
              <input type="number" style="width:40px;height:20px;" ref="editVal"
                     :min="1" :max="pageLength"
                     v-model="newPage" @blur="changePage"
              />
              &nbsp;页
            </div>
            
            <p class="page-index" v-else @dblclick.stop="editPage">第{{pageIndex+1}}页</p>  
        </div>
        <el-popconfirm
            @onConfirm="deletePage"
            confirmButtonText='删除'
            cancelButtonText='取消'
            confirmButtonType="text"
            icon="el-icon-info"
            iconColor="red"
            title="确定删除该页ppt吗">
        <!-- <span class="close-btn el-icon-close" @click.stop="deletePage" ></span>  -->
            <span class="close-btn el-icon-close" slot="reference"  v-if="showCloseBtn" v-show="!ctrlKeyActive"></span>
        </el-popconfirm>
    </div>
</template>

<script>
export default {
  props:{
    pageItem:{//ppt页
        type:Object
    },
    currentItem:{//当前ppt页
        type:Object
    },
    pageIndex:{
        type:Number
    },
    showCloseBtn:{//是否展示删除按钮
        type:Boolean,
        default:true
    },
    pageLength:{
      type:Number,
      default:1
    },
    ctrlKeyActive:{//ctrl键是否按下
      type:Boolean,
      default:false
    },
    copyPagesMap:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    savePagesArrLength:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
        isEdit:false,//是否是编辑状态
        newPage:0
    };
  },
  methods: {
      deletePage(){
          this.$emit('deletePage',this.pageItem)
      },
      editPage(){
        if(this.ctrlKeyActive||!this.showCloseBtn) return
        this.isEdit = true
        this.newPage = this.pageIndex+1
        this.$nextTick(() => {
          this.$refs.editVal.focus();
        });
      },
      changePage(){
        this.isEdit = false
        if(typeof this.newPage === 'string'){
          this.newPage = this.newPage.replace(/[^\d]+/g,0)
        }
        if(this.newPage<=0){
          this.newPage = this.pageIndex+1
        }
        if(this.newPage>this.pageLength){
          this.newPage = this.pageIndex+1
        }
        this.$emit('changePage',{oldPos:this.pageIndex+1,newPos:Number(this.newPage)})
      },
      changeFormat(){
        this.$emit('changeFormat',this.pageItem)
      },
      handleOperateCommand(command){
        this.$emit('operatePpt',{type:command.key,pageItem:this.pageItem})
      }
  },
};
</script>

<style lang="scss">
.index-item{
  .wrap{
    .page-input{
     /*  width:80px;
      height:20px; */
      display: flex;
      justify-content: flex-end;
      .el-input,.el-input__inner{
        height:20px;
        line-height: 20px;
      }
      .el-input-number__increase,.el-input-number__decrease{
        height: 10px;
        line-height: 10px;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.index-item{
    margin:10px 0;
    position: relative;
    color:#666666;
    cursor: pointer;
    .wrap{  
        padding:10px;
        background-color: transparent;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }
    &::after{
        content: '';
        display: block;
        margin-top: 10px;
        width:100%;
        height:1px;
        background-color:#EBEBEB ;
    }
    &:last-child{
        &::after{
            display: none;
        }
    }
    &.active{
        color:#409EFF;
        .wrap{
            background-color: #F0F7FF;
        }
        .item-icon-left{
            background: no-repeat center/cover url(~@/assets/img/ppt_m/index-left-icon-active.png) !important;
        }
        .item-icon-right{
            background: no-repeat center/cover url(~@/assets/img/ppt_m/index-change-icon-active.png) !important;  
        }
        .el-dropdown{
          color:#409EFF;
        }  
    }
    &.choosed{
      .wrap{
        border: 2px solid #409EFF;
        &::before{
          position: absolute;
          content: '';
          top: -18px;
          left: -8px;
          width: 28px;
          height: 48px;
          background-color: #409EFF;
          transform: rotate(45deg);
        }
        &::after{
          position:absolute;
          content: '√';
          top:-1px;
          left:3px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .item-flex{
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-icon-left{
            width: 38px;
            height:38px;
            background: no-repeat center/cover url(~@/assets/img/ppt_m/index-left-icon.png);
        }
        .item-icon-right{
            width:13px;
            height:13px;
            background: no-repeat center/cover url(~@/assets/img/ppt_m/index-change-icon.png);
            &.none{
                background: none !important;
            }
        }
        .item-name{
            max-width:154px;
            white-space: normal;
            overflow-wrap: break-word;
        }
    }
    p{
        font-size: 12px;
        text-align: end;
    }
    .close-btn{
        position:absolute;
        top:5px;
        right:7px;
    }
}
</style>
