<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;
    }

 

    .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.ImgTextModel.ImgPath==''">+</span>
                                    <q-img v-else :src="addMsg.ImgTextModel.ImgPath"
                                        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.ImgTextModel.Title" label="标题" style="width: 80%;"
                                    :rules="[val => !!val || '请输入标题']" />
                            </el-form-item>
                            <el-form-item label="点击链接：" required>
                                <q-input clearable standout="bg-primary text-white" filled
                                    v-model="addMsg.ImgTextModel.ImgLink" label="请输入跳转链接，且必须以http://或https://开头"
                                    style="width: 80%;" :rules="[ val => !!val  || '请输入跳转链接']" />
                            </el-form-item>
                            <el-form-item label="添加描述：">
                                <q-input v-model="addMsg.ImgTextModel.Description" filled clearable type="textarea"
                                    label="文本内容" style="width: 80%;"  />
                            </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(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" :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: 3,
                    Is_Sync: 1,
                    MediaGroupId: '',
                    ImgTextModel: {
                        ImgName: '',
                        ImgPath: '',
                        Title: '',
                        Description: '',
                        ImgLink: '',
                    }
                },
                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.ImgTextModel.ImgName = data.ImageModel.ImageName
                    this.addMsg.ImgTextModel.ImgPath = data.ImageModel.ImagePath
                }else{
                    this.$emit('success', data)
                }
                this.isshowselectMaterial = false
            },

            saveOrderInfo() {//图文提交
                if (this.addMsg.MediaGroupId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请选择分组选择`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.ImgPath == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请上传图片`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.Title == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写标题`,
                        position: 'top'
                    })
                    return
                }
                if (this.addMsg.ImgTextModel.ImgLink == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请填写跳转链接`,
                        position: 'top'
                    })
                    return
                }
                var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                var objExp = new RegExp(Expression);
                if (objExp.test(this.addMsg.ImgTextModel.ImgLink)) {
                    // plus.runtime.openWeb(this.link)
                } else {
                    this.$q.notify({
                        type: 'negative',
                        message: `上传的链接开头非http或https`,
                        position: 'top'
                    })
                    return
                }

                this.setWeChat()
            },
            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)
                })
            }




        }
    }

</script>