<style>
    .editOrderDrawerTop {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        background-color: #f0f5fb;
        padding: 5px 10px;
        align-items: center;
    }

    .disableStatus {
        opacity: 0.3 !important;
        cursor: auto;
    }

    .imgstyle {
        width: 100%;
        height: 126px;
        border-radius: 4px;
    }

    .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        width: 100%;
        height: 100%;
        color: #8c939d;
        position: relative;
        overflow: hidden;
    }

    .addDutyMain {
        display: inline-block;
        width: 118px;
        height: 118px;
        font-size: 40px;
        border: 1px dashed #d9d9d9;
        line-height: 118px;
    }

    .up-box {
        width: 90px;
        height: 90px;
        border: 1px dashed #ccc;
        text-align: center;
        line-height: 80px;
        font-size: 50px;
        cursor: pointer;
    }
</style>

<template>
    <div>
        <q-dialog v-model="IsShow" persistent>
            <q-card style="width: 800px; max-width: 80vw;">
                <q-card-section>
                    <div class="text-h6">图文</div>
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none">
                    <el-form ref="addMsg" :model="addMsg" label-width="120px">
                        <el-form-item label="添加方式：">
                            <q-radio v-model="addMsg.Addtype" val="1" label="新建" />
                            <q-radio v-model="addMsg.Addtype" val="2" label="导入" />
                        </el-form-item>
                        <div v-if="addMsg.Addtype ==1 ">
                            <el-form-item label="图片封面：" required>
                                <div class="up-box" @click="selectimg(2)">
                                    <span v-if="addMsg.CoverImage==''">+</span>
                                    <q-img v-else :src="addMsg.CoverImage" style="width: 100%;height: 100%;display: flex;">
                                    </q-img>
                                </div>
                            </el-form-item>
                            <el-form-item label="添加标题：" required>
                                <q-input clearable standout="bg-primary text-white"  v-model="addMsg.title" label="标题" style="width: 80%;" />
                            </el-form-item>
                            <el-form-item label="添加描述：">
                                <q-input v-model="addMsg.Content" filled clearable type="textarea"  label="文本内容" style="width: 80%;"/>
    
                            </el-form-item>
                            <el-form-item label="素材同步：">
                                <div class="q-gutter-sm" style="align-items: flex-start;display: flex;">
                                    <q-radio v-model="addMsg.issynchro" val="2" label="不同步" />
                                    <q-radio v-model="addMsg.issynchro" val="1" label="同步至【内容引擎】" />
                                    <div v-if="addMsg.issynchro==1" style="width: 200px;">
                                        <q-select filled stack-label   option-value="ID" option-label="Name"
                                          v-model="addMsg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="点击链接：" required>
                                <q-input clearable standout="bg-primary text-white"  v-model="addMsg.link" label="请输入跳转链接，且必须以http://或https://开头" style="width: 80%;" />
                            </el-form-item>
                        </div>
                        <div v-if="addMsg.Addtype ==2 ">
                            <el-form-item label="图片：" required>
                                <q-btn color="accent" class="q-mr-md" label="选择图文" @click="selectimg(3)" />
                            </el-form-item>
                        </div>
                        
                    </el-form>
                </q-card-section>

                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
                    <q-btn color="accent" class="q-mr-md" label="保存" @click="saveOrderInfo()" />
                </q-card-actions>
            </q-card>
        </q-dialog>
        <!-- 图片 -->
        <selectMaterial v-if="isshowselectMaterial" :materialType="materialType" :saveobj='Selectobj'
            @close="getclose()" @success='getsuccess'>
        </selectMaterial>
    </div>

</template>
<script>
    import {
        UploadSelfFile
    } from "../../api/common/common"; //上传图片
    import selectMaterial from "./selectMaterial"

    export default {
        props: {
            saveobj: {
                type: Object,
                default: null,
            },
        },
        components: {
            selectMaterial,
        },
        data() {
            return {
                IsShow: true,
                addMsg: {
                    Addtype: '1',//添加方式 1为新建
                    CoverImage: '',
                    title:'',
                    Content:'',
                    issynchro:'1',
                    classifyId:'',
                    link:'',
                },
                materialType: 2,
                Selectobj: {},
                isshowselectMaterial: false,
                classifyList:[
                {Name:'活动',ID:1,},
                {Name:'产品',ID:2,},
                {Name:'校园',ID:3,},
            ],
            }
        },
        created() {
            if (JSON.stringify(this.saveobj) !== '{}') {
                this.addMsg = JSON.parse(JSON.stringify(this.saveobj))
            }
        },
        mounted() {

        },
        watch: {

        },
        methods: {
            //关闭弹窗
            closeEditOrder() {
                this.$emit('close')
            },
            selectimg(type) {//素材选择 图片模式
                this.materialType = type;
                this.isshowselectMaterial = true;
            },
            getclose() {//素材关闭
                this.isshowselectMaterial = false
            },
            getsuccess(data) {//选择数据回来
                this.Selectobj = data
                this.addMsg.CoverImage = data.img
                this.isshowselectMaterial = false
            },
            saveOrderInfo(){
                this.$emit('success',this.addMsg)

            }




        }
    }

</script>