<template>
   <view class="fl-functional-popup">
       <u-popup
               v-model="visible"
               :mode="mode"
               :mask="mask"
               :length="length"
               :zoom="zoom"
               :safeAreaInsetBottom="safeAreaInsetBottom"
               :maskCloseAble="header !== 'check' ? maskCloseAble : false"
               :customStyle="customStyle"
               :value="value"
               :popup="popup"
               :borderRadius="borderRadius"
               :zIndex="zIndex"
               :closeable="closeable && type === 'article'"
               :closeIcon="closeIcon"
               :closeIconPos="closeIconPos"
               :closeIconColor="closeIconColor"
               :closeIconSize="closeIconSize"
               :width="width"
               :height="height"
               :negativeTop="negativeTop"
               :maskCustomStyle="maskCustomStyle"
               :duration="duration"
               v-on:close="closePopup"
               v-on:click="clickPopup"
               v-on:open="openPopup"
       >
           <view class="head" v-if="type === 'article'">
               <img v-if="coverSrc" class="coverImg" :src="coverSrc" alt="">
               <view>
                   <text class="headTitle">{{title}}</text>
                   <text class="headDec">{{description}}</text>
               </view>
           </view>

           <view class="head2" v-if="type === 'normal'">
              <text @click="clickCancel" :style="{color: leftTextColor }" class="blue-btn left-btn">{{ leftText }}</text>
               <text class="headTitle2">{{title}}</text>
               <text @click="clickFinished" :style="{color: rightTextColor }" class="blue-btn right-btn">{{ rightText }}</text>
           </view>

           <view class="head2" v-if="type === 'onlyCancel'">

               <text class="headTitle2">{{title}}</text>
               <text  @click="clickCancel" :style="{color: rightTextColor }"  class="blue-btn right-btn">{{ rightText }}</text>
           </view>
	<view :class="(type === 'normal' || type === 'onlyCancel'  ? 'sroll-back':'') " >
	   <slot />
	 </view>
       </u-popup>
   </view>
</template>
<script>
    export default {
        name: 'fl-functional-popup',
        model:{
          prop:"show",
          event:"close"
        },
        props: {
            type:{
                type:String,
                default:"article" //article or normal or  onlyCancel
            },
            close:{
                type:Function,
                default:null
            },
			/**
			 * 'defalut',
			 * 'avatar',
			 * 'check'
			 */
			header:{
				type:String,
				defalut:'defalut'
			},
            title:{
                type:String,
                default:""
            },
            description:{
                type:String,
                default:""
            },
            coverSrc:{
                type:String,
                default:""
            },
            /**
             * 显示状态
             */
            show: {
                type: Boolean,
                default: false
            },
            /**
             * 弹出方向，left|right|top|bottom|center
             */
            mode: {
                type: String,
                default: 'left'
            },
            /**
             * 是否显示遮罩
             */
            mask: {
                type: Boolean,
                default: true
            },
            // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
            // 或者百分比"50%"，表示由内容撑开高度或者宽度
            length: {
                type: [Number, String],
                default: 'auto'
            },
            // 是否开启缩放动画，只在mode=center时有效
            zoom: {
                type: Boolean,
                default: true
            },
            // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
            safeAreaInsetBottom: {
                type: Boolean,
                default: false
            },
            // 是否可以通过点击遮罩进行关闭
            maskCloseAble: {
                type: Boolean,
                default: true
            },
            // 用户自定义样式
            customStyle: {
                type: Object,
                default() {
                    return {};
                }
            },
            value: {
                type: Boolean,
                default: false
            },
            // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
            // 对v-model双向绑定多层调用造成报错不能修改props值的问题
            popup: {
                type: Boolean,
                default: true
            },
            // 显示显示弹窗的圆角，单位rpx
            borderRadius: {
                type: [Number, String],
                default: 0
            },
            zIndex: {
                type: [Number, String],
                default: ''
            },
            // 是否显示关闭图标
            closeable: {
                type: Boolean,
                default: false
            },
            // 关闭图标的名称，只能uView的内置图标
            closeIcon: {
                type: String,
                default: 'close'
            },
            // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
            closeIconPos: {
                type: String,
                default: 'top-right'
            },
            // 关闭图标的颜色
            closeIconColor: {
                type: String,
                default: '#909399'
            },
            // 关闭图标的大小，单位rpx
            closeIconSize: {
                type: [String, Number],
                default: '30'
            },
            // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
            // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
            width: {
                type: String,
                default: ''
            },
            // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
            // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
            height: {
                type: String,
                default: ''
            },
            // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
            negativeTop: {
                type: [String, Number],
                default: 0
            },
            // 遮罩的样式，一般用于修改遮罩的透明度
            maskCustomStyle: {
                type: Object,
                default() {
                    return {}
                }
            },
            // 遮罩打开或收起的动画过渡时间，单位ms
            duration: {
                type: [String, Number],
                default: 250
            },
			//头部按钮
			leftText:{
				type:[String, Number],
				default: '取消'
			},
			rightText:{
				type:[String, Number],
				default: '确定'
			},
			leftTextColor:{
				type:[String, Number],
				default: '#007AFF'
			},
			rightTextColor:{
				type:[String, Number],
				default: '#007AFF'
			}
        },
        data() {
            return {
                visible:false,
            }
        },
        watch:{
            show(val){
                this.visible = val;
            }
        },
        computed: {

        },
        methods: {
            clickCancel(){
                this.$emit('cancel');
            },
            clickFinished(){
                this.$emit('finished');
            },
            closePopup(){
                this.$emit('close');
            },
            clickPopup(){
                this.$emit('click');
            },
            openPopup(){
                this.$emit('open');
            }
        }
    }
</script>
<style scoped>

    .head2{
        height: 104rpx;
        background-color: white;
        position: fixed;
		width:100%;
		z-index: 10;
		overflow: hidden;
		border-radius: 30rpx 30rpx 0 0;
    }
    .headTitle2{
        display: block;
        text-align: center;
        font-size: 32rpx;
        color:black;
        line-height: 104rpx;
    }
    .blue-btn{
        cursor: pointer;
        color:#007AFF;
        font-size: 32rpx;
    }
    .right-btn{
        position: absolute;
        right: 40rpx;
        top:30rpx
    }
    .left-btn{
        position: absolute;
        left: 40rpx;
        top:30rpx
    }

    .head{

        height: 144rpx;
        box-sizing: border-box;
        display: flex;
        padding: 32rpx;
        border-bottom: 1px solid #EBEBEB;
    }
	.head__check{
		  height: 104rpx;
		  width: 100%;
		  background-color: #FFFFFF;
		  border-bottom: 1px solid #EBEBEB;
		  padding: 32rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
	}
    .coverImg{
        display: block;
        width: 80rpx;
        height: 80rpx;
        border-radius: 9px;
        margin-right: 20rpx;
        background: white;
    }
    .headTitle{
        margin-bottom: 8rpx;
        font-size: 32rpx;
        display: block;
        font-weight: 500;
    }
	.headText{
		
		font-size: 32rpx;
	}
	.sroll-back{
		position: absolute;
		top: 104rpx;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		/* overflow: hidden; */
	}
    .headDec{
        color:#8E8E8E;
        display: block;
        font-size: 24rpx;
    }

</style>