<script setup>
import { ref, reactive, watch } from 'vue'
import moment from 'moment'
const props = defineProps({
    isShow:Boolean,
    logInfo:Object
})
const emit = defineEmits(["closeDia","saveLog"])

let formData = reactive({
    Version:'',
    Content:'',
    UpdateDate:''
})
watch(()=>props.logInfo,(newVal)=>{
    if(newVal){
        formData.Version = props.logInfo.Version||''
        formData.Content = props.logInfo.Content||''
        formData.UpdateDate = props.logInfo.UpdateDate||moment(new Date()).format('yyyy-MM-DD')
    }else{
        logFormRef.value?.resetFields()
    }
})
const richEditorConfig = {
    toolbarButtons:[
        'textColor',
        'bold',
        'italic',
        'underline',
        'fontFamily',
        'fontSize',
        'align',
        'outdent',
        'indent',
        'specialCharacters',
        'insertHR',
        'selectAll',
        'clearFormatting',
        'undo',
        'redo',
    ],
    heightMax:220,
    heightMin:219,
    fontSizeDefaultSelection: "16",
    quickInsertEnabled: false,
    pasteAllowedStyleProps: ['font-family', 'font-size', 'color'],
    language: "zh_cn",
    placeholderText:'请输入更新内容',
    wordPasteKeepFormatting:false,
    pastePlain:true,
    wordPasteModal:false,
    pluginsEnabled:['colors'],//定义可用插件
}
const rules = reactive({
    Version:[{ required: true, message: '请输入版本号', trigger: 'blur' }],
    Content:[{ required: true, message: '请输入更新内容', trigger: 'blur' }],
    UpdateDate:[{ required: true, message: '请选择更新日期', trigger: 'blur' }]
})
let logFormRef = ref(null)
async function saveLog(){
    formData.Content = formData.Content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "")
    try{
        await logFormRef.value?.validate()
    }catch(e){
        console.log(e)
        return
    }
    emit('saveLog',{...props.logInfo,...formData})
}
</script>

<template>
    <el-dialog
        :model-value="props.isShow"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        title="添加日志"
        width="820px"
        center
        @close="emit('closeDia')"
    >
        <div class="log-set-wrap">
            <el-form :model="formData" :rules="rules" inline label-width="100px" ref="logFormRef">
                <el-form-item label="版本号" prop="Version">
                    <el-input v-model="formData.Version" placeholder="请输入版本号" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="更新内容" prop="Content" class="update-text">
                    <div class="rich-editor-wrap">
                        <froala :id="`log-editor`"
                            :ref="`logEditor`" 
                            :tag="'textarea'" 
                            :config="richEditorConfig" 
                            v-model:value="formData.Content">
                        </froala>
                    </div>
                </el-form-item>
                <el-form-item label="更新日期" prop="UpdateDate">
                    <el-date-picker
                        v-model="formData.UpdateDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
                <el-button type="primary" plain style="width:200px;" @click="emit('closeDia')">取消</el-button>
                <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveLog">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.log-set-wrap{
    .el-form{
        .el-form-item.update-text{
            display: flex;
            .el-form-item__content{
                flex:1;
                .rich-editor-wrap{
                    width:100%;
                }
            }
        }
    }
}
</style>
