<template>
    <div class="ChooseApplet">
        <q-card style="width: 520px; max-width: 80vw;">
            <q-card-section>
                <div class="text-h6">选择小程序</div>
            </q-card-section>
            <q-separator />
            <q-card-section class="q-pt-none" style="margin-top: 15px;">
                <q-select filled stack-label option-value="Id" option-label="Name" v-model="msg.AppletId"
                    @input="getroute" ref="ID" :options="AppletList" label="选择小程序" :dense="false" emit-value map-options />
                <q-input clearable standout="bg-primary text-white" v-model="msg.route" @input="$forceUpdate()"
                    label="小程序路径" style="margin-top: 20px;" />
                <div style="display: flex;align-items: center;margin: 10px 0 ;">
                    展示方式：
                    <q-radio  v-model="msg.type" val="1" label="文字" />
                    <q-radio v-if="type!=2" v-model="msg.type" val="2" label="图片" />
                    <q-radio v-if="type!=2" v-model="msg.type" val="3" label="小程序卡片" />
                </div>
                <q-input v-if="msg.type==1" clearable standout="bg-primary text-white" v-model="msg.title"
                    @input="$forceUpdate()" label="文字内容" style="margin-top: 20px;" />

                <div style="margin-top: 15px;display: flex;align-items: flex-start;" v-if="msg.type==2">
                    <q-btn color="accent" class="q-mr-md" label="从图库选择" @click="getChoice(0)" size="sm"
                        style="margin-left: 20px;" />
                    <el-image v-if="msg.imgUrl!=''" style="width: 200px;" :src="msg.imgUrl" fit="contain"></el-image>

                </div>
                <div v-if='msg.type==3'>
                    <q-input clearable standout="bg-primary text-white" v-model="msg.title" @input="$forceUpdate()"
                        maxlength="35" counter label="卡片标题" style="margin-top: 20px;" />
                    <div style="margin-top: 20px;display: flex;align-items: flex-start" v-if="msg.appletmsg">
                        <div style="margin-right: 15px;">卡片样式</div>
                        <div
                            style="margin-top: 10px;width: 270px;border: 1px solid #E3E4E5;background: #E6E7E8;padding-top: 10px;">
                            <div style="padding:0 15px;">
                                <div style="display: flex;align-items: center;">
                                    <el-image v-if="msg.appletmsg.Image"
                                        style="width: 20px;height: 20px;border-radius: 10px;margin-right: 10px;"
                                        :src="msg.appletmsg.Image" fit="cover"></el-image>
                                    <span
                                        style="width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;font-weight: 400;">{{msg.appletmsg.Name}}</span>
                                </div>
                                <span>{{msg.title}}</span>
                                <div style="width: 240px;height: 180px;border: 1px dashed #E3E4E5;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #FFF;margin-top: 10px;"
                                    v-if="msg.imgUrl==''">
                                    <p style="padding: 0 10px;text-align: center;">图片尺寸为5:4，大小不超过10M，暂不支持动图。</p>
                                    <q-btn class="q-mr-md" label="从图库选择" @click="getChoice()" />
                                </div>
                                <div style="width: 240px;height: 180px;margin-top: 10px;" v-if="msg.imgUrl!=''"
                                    @click="getChoice()">
                                    <el-image v-if="msg.imgUrl" style="width: 100%;height: 100%;" :src="msg.imgUrl"
                                        fit="cover"></el-image>
                                </div>
                            </div>
                            <div class="weapp_card_ft">
                                <span class="weapp_card_logo"><img
                                        src="../../../assets/images/applettb.png"
                                        alt="" class="icon_weapp_logo_mini"> 小程序</span>
                            </div>
                        </div>
                    </div>
                </div>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right" class="bg-white">
                <q-btn class="q-mr-md" label="取消" @click="closeDialog()" />
                <q-btn color="accent" class="q-mr-md" label="确定" @click="savewb()" />
            </q-card-actions>
        </q-card>

        <!-- 选择文件 -->
        <q-dialog title="选择文件" v-model="getImgChoice" width="1200px">
            <ChooseImg @SelectId="SelectId" :type="ChooseImgtype" @closeDia="getImgChoice=false"></ChooseImg>
        </q-dialog>

    </div>
</template>

<script>
    import {
        getContributeAppletList
    } from '../../../api/teacher/contribution';
    import BenzAMRRecorder from 'benz-amr-recorder'
    import ChooseImg from './ChooseImg'

    export default {
        props: {
            type: {
                type: String,
                default: null
            },
        },
        components: {
            ChooseImg,

        },
        data() {
            return {
                msg: {
                    type: '1',//1文字 2图片 3小程序卡片
                    AppletId: '',
                    route: '',
                    title: '',
                    imgUrl: '',
                    appletmsg: null
                },
                AppletList: [],
                getImgChoice: false,
                ChooseImgtype: 0
            }
        },
        created() {
            this.getAppletList()
        },
        computed: {

        },
        mounted() {

        },
        methods: {
            closeDialog() {
                this.$emit('closeDia');
            },
            savewb() {
                if (this.msg.AppletId == '') {
                    this.$q.notify({
                        type: 'negative',
                        message: `请先选择小程序`,
                        position: 'top'
                    })
                    return
                }
                if (this.msg.route == '' || this.msg.route==null) {
                    this.$q.notify({
                        type: 'negative',
                        message: `小程序路径不能为空`,
                        position: 'top'
                    })
                    return
                }
                if (this.msg.type == 1 || this.msg.type == 3) {
                    if (this.msg.title == '') {
                        this.$q.notify({
                            type: 'negative',
                            message: `文字内容不能为空`,
                            position: 'top'
                        })
                        return
                    }

                }
                if (this.msg.type == 2 || this.msg.type==3) {
                    if (this.msg.imgUrl == '') {
                        this.$q.notify({
                            type: 'negative',
                            message: `请选择图片`,
                            position: 'top'
                        })
                        return
                    }

                }
                if (this.msg.type==3) {
                    if (this.msg.imgUrl == '') {
                        this.$q.notify({
                            type: 'negative',
                            message: `请选择图片`,
                            position: 'top'
                        })
                        return
                    }

                }
                this.$emit('getresult', this.msg);

            },
            getChoice(type) {
                this.getImgChoice = true;
            },
            SelectId(obj) {
                if(this.msg.type==2){
                    this.msg.imgUrl = obj[0].ImageUrl;
                    this.getImgChoice = false;
                }else{
                    this.getNaturalImgSize(obj[0].ImageUrl, k => {//获取图片比例
                        let qualified = k.qualified
                        if (qualified == true) {
                            this.msg.imgUrl = obj[0].ImageUrl;
                            this.getImgChoice = false;
                        } else {
                            this.$q.notify({
                                type: 'negative',
                                message: `请上传图片尺寸为5:4,`,
                                position: 'top'
                            })
                        }
                    })
                }
                

            },
            getNaturalImgSize(img_url, callback) {
                img_url = img_url + Date.parse(new Date())
                var img = new Image();
                img.src = img_url;
                img.onload = function () {
                    // 打印
                    let qualified = false
                    if (Number(img.height) / img.width == 0.8) {
                        qualified = true
                    }
                    // if (img.width == 1080 && img.height==864) {
                    //     qualified = true
                    // }
                    callback({ qualified: qualified })
                };

            },
            getroute(e) {//选择了小程序 路径赋值
                this.AppletList.forEach(x => {
                    if (x.Id == e) {
                        this.msg.route = x.Page
                        this.msg.appletmsg = x
                    }
                })

            },
            getAppletList() {

                getContributeAppletList({}).then(res => {
                    this.AppletList = res.Data
                }).catch(() => {
                    this.loading = false

                })
            },

        },
    }

</script>

<style>
    .ChooseApplet {
        background: #fff;
        width: 520px;
    }

    .ChooseApplet .weapp_card_ft {
        padding: 0 15px;
        border-top: 1px solid #E3E4E5;
        line-height: 24px;
        margin-top: 10px;
    }

    .ChooseApplet .weapp_card_logo {
        color: #7E8081;
        font-size: 14px;
    }

    .ChooseApplet .icon_weapp_logo_mini {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: .2em;
        margin-top: -0.2em;
    }
</style>