<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .editorBox{
        background: #fff;
        border-radius: 8rpx;
    }
    .Title{
        font-size: 32rpx;
        color: #295EEB;
    }
    .textareaBox textarea{
        border: 1px solid #ddd;
        height: 200rpx;
    }
    .SureBox{
        font-size: 28rpx;
        border-top: 1px solid #F2F2F2;
    }
    .SureBox view:last-child{
        color: #295EEB;
    }
    .SureBox view:first-child{
        border-right: 1px solid #ddd;
        color: #8C8C8C;
    }
</style>
<template>
     <u-popup mode="center" border-radius="20" 
        :popup="false" 
        v-model="currencyVisible" :maskCloseAble="true" 
        length="80%" :safeAreaInsetBottom="true" 
        @close="close" :z-index="9999">
        <view class="editorBox">
            <view class="Title text-center PY30">变更{{ title }}</view>
            <view class="textareaBox row PX40">
                <textarea class="PA20 flex1" placeholder-style="color:#A1A1A1" v-model="textarea" :placeholder="`请输入变更${title}名`"/>
            </view>
            <view class="SureBox row MT40">
                <view class="flex1 PY20 text-center" @click="close">取消</view>
                <view class="flex1 PY20 text-center" @click="changeSure">确定</view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    props:['title'],
    data() {
        return {
            currencyVisible: true,
            textarea: '',
        }
    },
    watch: {
        title:{
            handler(newVal,oldVal){
                
            },
            deep: true,
            immediate:true,
        }
    },
    mounted() {
        this.currencyVisible = true
    },
    methods: {
        close(){
            this.currencyVisible = false
            this.$emit('close')
        },
        changeSure(){
            if(this.textarea) {
                this.$emit('change',this.textarea)
                this.currencyVisible = false
            }else uni.showToast({
                title: `请输入变更${this.title}名`,
                icon: 'none'
            })
            
        },
    }
}
</script>