<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 class="row items-center q-pb-none">
                    <div class="text-h6">小程序</div>
                    <q-space />
                    <q-btn icon="close" flat round dense v-close-popup />
                </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="Addtype" val="1" label="新建" />
                            <q-radio v-model="Addtype" val="2" label="导入" />
                        </el-form-item>
                        <div v-if="Addtype ==1 ">
                            <el-form-item label="素材分组：">
                                <q-select filled stack-label   option-value="Id" option-label="Name" style="width: 80%;"
                                v-model="addMsg.MediaGroupId" ref="Id" :options="classifyList" label="分组" :dense="false" emit-value map-options />
                            </el-form-item>
                            <el-form-item label="图片封面：" required>
                                <div class="up-box" @click="selectimg(2)">
                                    <span v-if="addMsg.AppletModel.ImagePath==''">+</span>
                                    <q-img v-else :src="addMsg.AppletModel.ImagePath" 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" filled  v-model="addMsg.AppletModel.Title" label="标题" style="width: 80%;" :rules="[val => !!val || '请输入标题']"/>
                            </el-form-item>
                            <el-form-item label="AppID：" required>
                                <q-input clearable standout="bg-primary text-white" filled  v-model="addMsg.AppletModel.AppletId" label="请填写小程序AppID,必须是关联到企业的小程序应用" style="width: 80%;" :rules="[val => !!val || '请输入小程序ID']"/>
                            </el-form-item>
                            <el-form-item label="page路径：" required>
                                <q-input clearable standout="bg-primary text-white" filled  v-model="addMsg.AppletModel.Page" label="请填写小程序路径，例如：pages/index" style="width: 80%;" :rules="[val => !!val || '请输入路径']"/>
                            </el-form-item>
                          
                          
                            
                        </div>
                        <div v-if="Addtype ==2 ">
                            <el-form-item label="小程序：" required>
                                <q-btn color="accent" class="q-mr-md" label="选择小程序" @click="selectimg(6)" />
                            </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' :classifyList='classifyList'
            @close="getclose()" @success='getsuccess'>
        </selectMaterial>
    </div>

</template>
<script>
    import {
        UploadSelfFile
    } from "../../api/common/common"; //上传图片
    import {
        setWeChatMediumInfo,//新增素材
    } from '../../api/system/wechat';
    import selectMaterial from "./selectMaterial"

    export default {
        props: {
            saveobj: {
                type: Object,
                default: null,
            },
            classifyList: {
                type: Array,
                default: [],
            },
        },
        components: {
            selectMaterial,
        },
        data() {
            return {
                IsShow: true,
                Addtype: "1",//添加方式 1为新建
                addMsg: {
                    Id: 0,
                    Type: 6,
                    Is_Sync: 1,
                    MediaGroupId: '',
                    AppletModel:{
                        AppletId: '',
                        Page: '',
                        Title: '',
                        ImageName: '',
                        ImagePath: '',
                    }
                },
                materialType: 2,
                Selectobj: {},
                isshowselectMaterial: false,
             
            }
        },
        created() {
            
        },
        mounted() {

        },
        watch: {

        },
        methods: {
            //关闭弹窗
            closeEditOrder() {
                this.$emit('close')
            },
            selectimg(type) {//素材选择 图片模式
                this.materialType = type;
                this.isshowselectMaterial = true;
            },
            getclose() {//素材关闭
                this.isshowselectMaterial = false
            },
            getsuccess(data) {//选择数据回来
                if(this.materialType==2){
                    this.addMsg.AppletModel.ImageName = data.ImageModel.ImageName
                    this.addMsg.AppletModel.ImagePath = data.ImageModel.ImagePath
                }else{
                    this.$emit('success', data)
                }
                this.addMsg.CoverImage = data.img
                this.isshowselectMaterial = false
            },
            setWeChat(){
                setWeChatMediumInfo(this.addMsg).then(res => {
                    this.$q.notify({
                        icon: 'iconfont icon-chenggong',
                        color: 'accent',
                        timeout: 2000,
                        message: '操作成功',
                        position: 'top'
                    })
                    this.Selectobj = JSON.parse(JSON.stringify(this.addMsg))
                    this.Selectobj.Id = res.Data
                    this.$emit('success', this.Selectobj)
                })
                
            },
            saveOrderInfo() {//小程序
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.ImagePath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写上传图片`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.AppletId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写小程序ID`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.AppletModel.Page == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写路径`,
                        position: 'top'
                    })
                    return
                }

                if (this.addMsg.AppletModel.Title == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写小程序标题`,
                        position: 'top'
                    })
                    return
                }
             
                this.setWeChat()
            },




        }
    }

</script>