<template>
    <div class="first_dialog">
        <div class="dialog-min">
            <header class="dialog-top">
                <span>选择封面</span>
                <img src="~@/assets/img/ppt_m/close.png" alt="" class="close_ico" @click="closeDialog">
            </header>
            <div class="dialog-bg" :style="'backgroundImage:url('+bgList[bgListIndex]+');backgroundPosition:center;backgroundRepeat:no-repeat;backgroundSize:cover;'">
                <div style="width:62%; font-size:16px; text-align:center; line-height:1.6; color:#fff; position:absolute; right:20px; top:50%;">
                    <p style="height:5px; border-top:1px solid #fff;margin-bottom:21px;"></p>
                    <el-input
                      type="textarea"
                      autosize
                      placeholder="请输入标题"
                      :maxlength="48"
                      v-model="pageData.Title" />
                    <p style="display:flex; align-items:center; justify-content:center;margin:10px 0;">
                        <span style="display:inline-block; width:15px; margin-right:5px; border-top:1px solid #fff;"></span>
                        <span>弘则弥道（上海）投资咨询有限公司</span>
                        <span style="display:inline-block; width:14px; height:14px; background:#fff; border-radius:100%; margin:0 5px;"></span>
                        <input 
                        type="text" 
                        style="width:80px;background:transparent;color:#fff;border:none;text-align:center;display:inline-block" 
                        v-model="pageData.ReportType"
                        placeholder="请输入类型">
                        <span style="display:inline-block; width:15px; margin-left:5px; border-top:1px solid #fff;"></span>
                    </p>
                    <p>FICC研究部</p>
                    <el-date-picker
                        v-model="pageData.PptDate"
                        type="month"
                        ref="date_pic"
                        format="yyyy年M月"
                        value-format="yyyy年M月"
                        placeholder="请选择日期">
                    </el-date-picker>
                    <p style="width:80%; height:1px; border-bottom:1px solid #fff; margin:21px auto 0;"></p>
                </div>
            </div>
            <div class="dialog-bot">
                <span></span>
                <div>
                    <el-button  type="primary" style="width:120px" @click="saveFirstPage">保存</el-button>
                    <el-button style="width:120px" @click="changeBg">换一个模板</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {pptCover} from "@/views/ppt_manage/newVersion/utils/config"
export default {
    props:{
        firstPage:{
            type:Object
        },
        pptCoverList:{
            type:Array
        }
    },
    data() {
        return {
            bgListIndex:0,
            bgList:[],
            pageData:{},
            searchIndex:0
        };
    },
    mounted(){
        $('.el-date-editor .el-input__inner').css({backgroundColor: 'transparent',border:'none',color:'#fff',textAlign:'center',fontSize:'16px'});
		$('.el-date-editor .el-icon-date' ).css({display:'none'});
        this.bgList = this.pptCoverList
        this.searchIndex = this.bgList.findIndex(i=>i===this.firstPage.BackgroundImg)
        this.bgListIndex = this.searchIndex===-1?0:this.searchIndex
        this.pageData = _.cloneDeep(this.firstPage)
        //如果之前配置的图片不在pptCoverList里，则默认选中第一个，防止图片挂掉
        if(this.searchIndex===-1){
            this.pageData.BackgroundImg = this.bgList[0]
            this.pageData.ImgUrl = this.bgList[0]
            this.pageData.BackIndex = 0
        }
    },
    methods: {
        closeDialog(){
            //如果之前配置的图片不在pptCoverList里 用保存强制替换封面图
            if(this.searchIndex===-1){
                this.firstPage = Object.assign(this.firstPage,this.pageData)
                this.$emit('save',this.firstPage)
            }
            this.$emit('close')
        },
        saveFirstPage(){
            if(!this.pageData.Title){
                this.$message.warning('请输入PPT标题')
                return
            }else if(!this.pageData.ReportType){
                this.$message.warning('请输入PPT类型')
                return
            }else if(!this.pageData.PptDate){
                this.$message.warning('请选择日期')
                return
            }
            this.firstPage = Object.assign(this.firstPage,this.pageData)
            this.$emit('save',this.firstPage)
        },
        changeBg(){
            if(this.bgListIndex<this.bgList.length-1){
                this.bgListIndex++
            }else{
                this.bgListIndex=0
            }
            this.pageData.BackgroundImg = this.bgList[this.bgListIndex]
            this.pageData.ImgUrl = this.bgList[this.bgListIndex]
            this.pageData.BackIndex = this.bgListIndex
        }
    },
};
</script>
<style lang="scss">
.first_dialog{
  .dialog-min{
    .dialog-bg{
      .el-textarea{
        max-width: 95%;
        textarea{
          outline: none;
          border: none;
          background-color: transparent;
          font-size: 28px;
          line-height: 1.4;
          text-align: center;
          resize: none;
          font-weight:bolder; 
          color: #fff;
          scrollbar-width: none; 
          -ms-overflow-style: none;
          &::-webkit-scrollbar {
            width: 0px;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.first_dialog {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background:rgba($color: #000000, $alpha: 0.4);
    z-index: 999;
    .dialog-min {
        width: 50%;
        min-width: 960px;
        min-height: 90%;
        padding: 30px 54px 26px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
        overflow-y:hidden;
        display: flex;
        flex-direction: column;
        .dialog-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24px;
            color: #1F2E4D;
            margin-bottom: 22px;
            .close_ico {
                width: 28px;
                height: 28px;
            }
        }
        .dialog-bg {
            flex: 1;
            width: 100%;
            /* height: 645px; */
            position: relative;
            .select_ico {
                width: 48px;
                height: 48px;
                position: absolute;
                right: 15px;
                top: 15px;
            }
        }
        .dialog-bot {
            margin-top: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
