<template>
    <view style="width:100%;position: relative;">
        <view style="min-height:10em;border:1px solid #dddddd;margin:0;background:#fafafa;">
            <view v-for="(item,index) in mdlines" :key="index" @tap="rightmenu(index)" :class="item.vms">
                <view v-if="item.cls == 'md-pic'">
                    <image :src="item.content" style="width:100%;display:block;" mode="widthFix"></image>
                </view>
                <view v-else :class="item.cls">{{item.content}}</view>
            </view>
        </view>
        <view class="_edittip" style="top:-0.5em;">编辑区</view>
        <input type="hidden" :name="name" :value="valuetxt" style="display:none;" />
        <view style="position:relative;margin:0;border:1px solid #dddddd;">
            <textarea :name="name + '_unup'" class="_textarea" v-model="etext" :fixed="true" auto-height maxlength="-1" />
            <view style="display:flex;align-items: center;background:#ffffff;border-top:1px solid #dddddd;">
                <view class="_icon _photo" @tap="upimg"></view>
                <view style="position: absolute;bottom:0;left:4em;font-size:0.6em;color:#cccccc;">{{imgtip}}</view>
                <view style="flex:1;text-align:right;padding:0 1em;">首行样式</view>
                <ciy-picker name="linecls" v-model="elinecls" :range="styles" style="width:8em;"></ciy-picker>
                <view class="_icon _uptxt" @tap="uptxt"></view>
            </view>
            <view class="_edittip" style="top:-1.5em;">录入区</view>
        </view>

    </view>
</template>

<script>
    //下拉选择 
    //多行文本，每一行按照选择生成。
    //按钮 上箭头，上传
    //每段长按，删除、编辑、插入(在上)。


    // 所见即所得的结果
    // 添加文字段落
    // 添加一张或多张图片
    var app = getApp();
    export default {
        behaviors: ['uni://form-field-group']
        , props: {
            name: {
                type: String
            }
            , value: {
                type: String
                , default: ''
            }
            , imgact: {
                type: String
                , default: 'cp|1280|60'
            }
            , uploadurl: {
                type: String
                , default: ''
            }
        , }
        , data() {
            return {
                Gvalue: false
                , valuetxt: '' //最终结果
                , valuelines: [] //带格式的原始行
                , mdlines: [] //显示的行
                , eimgs: ''
                , etext: ''
                , imgtip: ''
                , elinecls: 'md-content'
                , styles: [{
                        id: 'md-content'
                        , pre: ''
                        , name: '正文'
                    }
                    , {
                        id: 'md-h1'
                        , pre: '#'
                        , name: '大标题'
                    }
                    , {
                        id: 'md-h1 _center'
                        , pre: '#c'
                        , name: '大标题居中'
                    }
                    , {
                        id: 'md-h1 _right'
                        , pre: '#r'
                        , name: '大标题靠右'
                    }
                    , {
                        id: 'md-h2'
                        , pre: '##'
                        , name: '二号标题 [n]'
                    }
                    , {
                        id: 'md-h3'
                        , pre: '###'
                        , name: '三号标题 [n.m]'
                    }
                    , {
                        id: 'md-h4'
                        , pre: '####'
                        , name: '四号标题 [n.m.k]'
                    }
                    , {
                        id: 'md-content _center'
                        , pre: '^c'
                        , name: '正文居中'
                    }
                    , {
                        id: 'md-content _right'
                        , pre: '^r'
                        , name: '正文靠右'
                    }
                ]
            };
        }
        , watch: {
            value(newD, oldD) {
                if (this.Gvalue)
                    this.Gvalue = false;
                else {
                    this.valuetxt = newD;
                    this.fillmdlines();
                }
            }
        }
        , mounted() {
            this.valuetxt = this.value || '';
            this.fillmdlines();
            this.$emit('change', {
                name: this.name
                , from: 'create'
                , value: this.valuetxt
            });
        }
        , methods: {
            fillmdlines() {
                var markdown = this.valuetxt;
                if (markdown.substr(0, 4) == '[MD]')
                    markdown = markdown.substr(4).trim();
                var mds = markdown.split('\n');
                var mdls = [];
                for (var m in mds) {
                    if (mds[m].trim().length == 0) {
                        continue;
                    }
                    var mdl = {};
                    if (mds[m][0] == '#') { //标题1/2/3
                        if (mds[m].substr(0, 4) == '####') {
                            mdl.cls = 'md-h4';
                            mdl.content = 'n.m.k、' + mds[m].substr(4);
                        } else if (mds[m].substr(0, 3) == '###') {
                            mdl.cls = 'md-h3';
                            mdl.content = 'n.m、' + mds[m].substr(3);
                        } else if (mds[m].substr(0, 2) == '##') {
                            mdl.cls = 'md-h2';
                            mdl.content = 'n、' + mds[m].substr(2);
                        } else if (mds[m].substr(1, 1) == 'c') {
                            mdl.cls = 'md-h1 _center';
                            mdl.content = mds[m].substr(2);
                        } else if (mds[m].substr(1, 1) == 'r') {
                            mdl.cls = 'md-h1 _right';
                            mdl.content = mds[m].substr(2);
                        } else {
                            mdl.cls = 'md-h1';
                            mdl.content = mds[m].substr(1);
                        }
                    } else if (mds[m][0] == '@') { //c居中，r靠右
                        if (mds[m][1] == 'c') {
                            mdl.cls = 'md-content _center';
                            mdl.content = mds[m].substr(2);
                        } else if (mds[m][1] == 'r') {
                            mdl.cls = 'md-content _right';
                            mdl.content = mds[m].substr(2);
                        } else {
                            mdl.cls = 'md-content';
                            mdl.content = mds[m].substr(1);
                        }
                    } else if (mds[m][0] == '!') { //图片
                        var mis = mds[m].split('|');
                        var url = mis[0];
                        url = url.substring(1);
                        var alt = '';
                        if (mis[1])
                            alt = ' alt="' + mis[1].replace('"', "") + '"';
                        if (url.substr(0, 4).toLowerCase() != 'http')
                            url = this.file_stor(url);//xx
                        mdl.cls = 'md-pic';
                        mdl.content = url;
                    } else if (mds[m][0] == '_') {} else {
                        mdl.cls = 'md-content';
                        mdl.content = mds[m];
                    }
                    if (mdl.cls) {
                        mdl.idx = m;
                        mdl.vms = '';
                        mdls.push(mdl);
                    }
                }
                this.mdlines = mdls;
                this.valuetxt = '[MD]' + markdown;
            }
            , rightmenu(idx) {
                for (var i in this.mdlines)
                    this.mdlines[i].vms = '';
                this.mdlines[idx].vms = '_sel';
                var menus = [];
                menus.push({
                    name: '插入'
                    , url: 'ins'
                });
                if (this.mdlines[idx].cls != 'md-pic') {
                    menus.push({
                        name: '编辑'
                        , url: 'edit'
                    });
                }
                menus.push({
                    name: '删除'
                    , url: 'del'
                });

                uni.showActionSheet({
                    itemList: menus.map(item => item.name)
                    , success: res => {
                        var menu = menus[res.tapIndex];
                        if (menu.url == 'del') {
                            app.askmsg('确认删除?', () => {
                                var ls = this.valuetxt.split('\n');
                                ls.splice(this.mdlines[idx].idx, 1);
                                this.valuetxt = ls.join('\n');
                                this.fillmdlines();
                                this.$emit('change', {
                                    name: this.name
                                    , from: 'delete'
                                    , value: this.valuetxt
                                });
                            });
                        } else if (menu.url == 'edit') {
                            this.etext = this.mdlines[idx].content;
                            this.elinecls = this.mdlines[idx].cls;
                            this.mdlines[idx].vms = '_edit';
                        } else if (menu.url == 'ins') {
                            this.mdlines[idx].vms = '_ins';
                        }
                    }
                    , complete: res => {
                        if (this.mdlines[idx].vms == '_sel')
                            this.mdlines[idx].vms = '';
                    }
                });
            }
            , doedit(pre, txt) {
                var lineidx = -1;
                var op = '_append';
                for (var i in this.mdlines) {
                    if (this.mdlines[i].vms) {
                        lineidx = this.mdlines[i].idx;
                        op = this.mdlines[i].vms;
                        break;
                    }
                }

                var ls = this.valuetxt.split('\n');
                if (op == '_append')
                    ls.push(pre + txt);
                else if (op == '_edit') {
                    ls.splice(lineidx, 1, pre + txt);
                } else {
                    ls.splice(lineidx, 0, pre + txt);
                }
                this.valuetxt = ls.join('\n');
                this.fillmdlines();
            }
            , uptxt() {
                var txt = this.etext;
                if (txt == '')
                    return app.toast('请填写内容');

                var pre = '';
                for (var i = 0; i < this.styles.length; i++) {
                    if (this.styles[i].id == this.elinecls)
                        pre = this.styles[i].pre;
                }
                this.etext = '';
                this.doedit(pre, txt);
                this.$emit('change', {
                    name: this.name
                    , from: 'uptxt'
                    , pre: pre
                    , content: txt
                    , value: this.valuetxt
                });
            }
            , upimg: function(b) {
                if (this.Grunning)
                    return app.toast('上传中...');
            }
        }
    }
</script>

<style scoped>
    ._edittip {
        position: absolute;
        top: 0;
        right: 0.5em;
        background: #fffad7;
        border: 1px solid #dddddd;
        padding: 0.2em 0.5em;
        font-size: 0.6em;
        border-radius: 0.5em;
        line-height: 1.3em;
    }

    ._center {
        text-align: center;
    }

    ._right {
        text-align: right;
    }

    ._ins {
        border-top: 3px solid #cc0000;
    }

    ._sel {
        border: 1px solid #cc0000;
        border-radius: 0.3em;
    }

    ._edit {
        border: 2px solid #009000;
    }

    ._textarea {
        display: block;
        padding: 0.5em;
        min-height: 5em;
        background: #ffffff;
        line-height:1.2em;
        width: 100%;
        box-sizing: border-box;
    }

    ._photo {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQyOC41NzYgMzc4LjM2OGE1MC4xNzYgNTAuMTc2IDAgMSAwLTEwMC4zNTIgMCA1MC4xNzYgNTAuMTc2IDAgMCAwIDEwMC4zNTIgMG0wIDB6IG0xNjYuOTQ0IDI1Ni40NDhoNDEuNTA0di00MS41MDRjMC0zMC41NiAxOC4zMzYtNTYuOCA0NC41MTItNjguNzM2bC02Ljk0NC0yMy44MDh2LTEuNjY0aDAuMDY0bC00NS40MDgtMTM3LjE4NC0xNTguNDk2IDIwNC41MTItNDIuNDk2LTcxLjk2OC0xNjguNTc2IDE3MC4xMTJoMjc2LjA5NmE3NS4zNiA3NS4zNiAwIDAgMSA1OS43NDQtMjkuNzZtMjY3LjcxMi0zNjEuNjY0YTExMi43MDQgMTEyLjcwNCAwIDAgMC0xMTIuMzg0LTExMi4zODRIMjczLjE1MmExMTIuNzA0IDExMi43MDQgMCAwIDAtMTEyLjM4NCAxMTIuMzg0djQ3Ny42NjRhMTEyLjcwNCAxMTIuNzA0IDAgMCAwIDExMi4zODQgMTEyLjM4NGgzMzcuMTg0di0wLjAzMmwwLjEyOCAwLjAzMmEyMS4wODggMjEuMDg4IDAgMSAwIDAtNDIuMTc2bC0wLjEyOCAwLjAzMnYtMC4wMzJIMjczLjE1MmE3MC4zMDQgNzAuMzA0IDAgMCAxLTcwLjI0LTcwLjI0VjI3My4xNTJjMC0zOC43NTIgMzEuNDg4LTcwLjI0IDcwLjI0LTcwLjI0aDQ3Ny42NjRjMzguNzUyIDAgNzAuMjQgMzEuNDg4IDcwLjI0IDcwLjI0djMzNS4xMzZjMCAwLjI1Ni0wLjEyOCAwLjQ0OC0wLjEyOCAwLjY3MmEyMS4wODggMjEuMDg4IDAgMSAwIDQyLjE3NiAwbC0wLjA2NC0wLjI1NmgwLjE5MlYyNzMuMTUybS0yMS44ODggNDE2LjIyNGgtMTA3LjQyNHYtMTA3LjQyNGEyMS4wODggMjEuMDg4IDAgMSAwLTQyLjE3NiAwdjEwNy40MjRINTg0LjMyYTIxLjA4OCAyMS4wODggMCAxIDAgMCA0Mi4xNzZoMTA3LjQyNHYxMDcuNDI0YTIxLjA4OCAyMS4wODggMCAxIDAgNDIuMTc2IDBWNzMxLjUyaDEwNy40MjRhMjEuMDg4IDIxLjA4OCAwIDEgMCAwLTQyLjE0NCIgZmlsbD0iIzQ4OENDQiI+PC9wYXRoPjwvc3ZnPg==");
    }

    ._uptxt {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiAxMDIuNGM1NC42MTMzMzMgMCAxMDYuOTM5NzMzIDExLjM2NjQgMTU3LjAxMzMzMyAzMS44NDY0IDQ3Ljc4NjY2NyAyMC40OCA5My4yODY0IDUwLjA3MzYgMTMxLjk5MzYgODguNzQ2NjY3IDM4LjY3MzA2NyAzNi40MjAyNjcgNjguMjY2NjY3IDgxLjkyIDg4Ljc0NjY2NyAxMzEuOTkzNiAyMC40OCA1MC4wNzM2IDMxLjg0NjQgMTAyLjQgMzEuODQ2NCAxNTcuMDEzMzMzIDAgNTQuNjEzMzMzLTExLjM2NjQgMTA2LjkzOTczMy0zMS44NDY0IDE1Ny4wMTMzMzMtMjAuNDggNDcuNzg2NjY3LTUwLjA3MzYgOTMuMjg2NC04OC43NDY2NjcgMTMxLjk5MzYtMzYuNDIwMjY3IDM4LjY3MzA2Ny04MS45MiA2OC4yNjY2NjctMTMxLjk5MzYgODguNzQ2NjY3LTUwLjA3MzYgMjAuNDgtMTAyLjQgMzEuODQ2NC0xNTcuMDEzMzMzIDMxLjg0NjQtNTQuNjEzMzMzIDAtMTA2LjkzOTczMy0xMS4zNjY0LTE1Ny4wMTMzMzMtMzEuODQ2NC00Ny43ODY2NjctMjAuNDgtOTMuMjg2NC01MC4wNzM2LTEzMS45OTM2LTg4Ljc0NjY2Ny0zOC42NzMwNjctMzYuNDIwMjY3LTY4LjI2NjY2Ny04MS45Mi04OC43NDY2NjctMTMxLjk5MzYtMjAuNDgtNTAuMDczNi0zMS44NDY0LTEwMi40LTMxLjg0NjQtMTU3LjAxMzMzMyAwLTU0LjYxMzMzMyAxMS4zNjY0LTEwNi45Mzk3MzMgMzEuODQ2NC0xNTcuMDEzMzMzIDIwLjQ4LTQ3Ljc4NjY2NyA1MC4wNzM2LTkzLjI4NjQgODguNzQ2NjY3LTEzMS45OTM2IDM4LjcwNzItMzguNjczMDY3IDgxLjkyLTY4LjI2NjY2NyAxMzEuOTkzNi04OC43NDY2NjcgNTAuMDczNi0yMC40OCAxMDIuNC0zMS44NDY0IDE1Ny4wMTMzMzMtMzEuODQ2NHpNMjk1LjA4MjY2NyA1OTYuNjE2NTMzbC0yMS43MDg4IDk0LjkyNDggMzUuMjI1NiAzNS4yMjU2IDk0LjkyNDgtMjEuNzA4OC0xMDguNDQxNi0xMDguNDQxNnogbTIwOS4zNzM4NjYtMjg3LjA2MTMzM2wtMTc4Ljg1ODY2NiAxNzguODkyOGMtNC43NDQ1MzMgMzAuMTczODY3IDEuODQzMiA1MC4zMTI1MzMgMzIuOTcyOCA0Ny43ODY2NjdsMTIzLjkwNC0xMjAuMDgxMDY3IDEwLjk5MDkzMyAxMC45OTA5MzMtMTIwLjcyOTYgMTE2Ljk0MDhjNy41MDkzMzMgNDkuMDQ5NiAzOS41OTQ2NjcgNjguMjY2NjY3IDgyLjY3MDkzMyA3NC4yMDU4NjctNS42NjYxMzMgMzQuMjY5ODY3IDMuNDQ3NDY3IDU1LjAyMjkzMyA0NS45MDkzMzQgNDUuOTA5MzMzbDE3OC44NTg2NjYtMTc4Ljg5MjgtMTc1LjcxODQtMTc1Ljc1MjUzM3ogbTU1LjYzNzMzNC01NS4yOTZMNTIzLjk0NjY2NyAyOTAuMzcyMjY3bDE3NS43NTI1MzMgMTc1LjcxODQgMzYuMTQ3Mi0zNi4xNDcyYzE5Ljc5NzMzMy0xOS43OTczMzMgMTkuNzk3MzMzLTUyLjQ5NzA2NyAwLTcyLjI5NDRsLTEwMy40MjQtMTAzLjQyNGE1MS40Mzg5MzMgNTEuNDM4OTMzIDAgMCAwLTcyLjMyODUzMyAweiIgZmlsbD0iIzg1QzJGRiI+PC9wYXRoPjwvc3ZnPg==");
    }

    ._icon {
        width: 3em;
        height: 3em;
        background-size: cover;
    }
</style>