<template>
    <div class="diy-page">
        <div class="product_tabs">
            <div slot="title"> 
                <div style="float: left;">
                  <el-button icon="el-icon-arrow-left" type="text" size="small" @click="goBack">返回</el-button>
                </div>
                <div>
                    <el-button type="primary" size="small" @click="saveConfig" :loading="loading">保存</el-button>
                    <el-button class="ml20" size="small" @click="reast">重置</el-button>
                </div>
            </div>
        </div>
        <el-card>
            <div class="diy-wrapper" :style="'height:'+ clientHeight + 'px;'">
                <div class="left">
                    <div class="title-bar">
                        <div
                            class="title-item"
                            :class="{ on: tabCur == index }"
                            v-for="(item, index) in tabList"
                            :key="index"
                            @click="bindTab(index)"
                        >
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="wrapper" :style="'height:'+ (clientHeight-46) + 'px;'" v-if="tabCur == 0">
                        <div v-for="(item, index) in leftMenu" :key="index">
                            <div class="tips" @click="item.isOpen = !item.isOpen">
                                {{ item.title }}

                                <i class="el-icon-arrow-right" size="16" v-if="!item.isOpen"></i>
                                <i class="el-icon-arrow-down" size="16" v-else></i>
                            </div>
                            <draggable
                                class="dragArea list-group"
                                :list="item.list"
                                :group="{ name: 'people', pull: 'clone', put: false }"
                                :clone="cloneDog"
                                dragClass="dragClass"
                                filter=".search , .navbar">
                                <div
                                    class="list-group-item"
                                    :class="{ search: element.cname == '搜索框' , navbar: element.cname == '商品分类' }"
                                    v-for="(element, index) in item.list"
                                    :key="element.id"
                                    @click="addDom(element, 1)"
                                    v-show="item.isOpen"
                                >
                                    <div>
                                        <div class="position" style="display: none">释放鼠标将组建添加到此处</div>
                                        <span class="conter iconfont-diy" :class="element.icon"></span>
                                        <p class="conter">{{ element.cname }}</p>
                                    </div>
                                </div>
                            </draggable>
                        </div>
                    </div>
                    <div class="wrapper" v-else  :style="'height:'+ (clientHeight-46) + 'px;'">
                        <div
                            class="link-item"
                            v-for="(item, index) in urlList"
                            :key="index"
                        >
                            <div class="name">{{ item.name }}</div>
                            <div class="link-txt">地址：{{ item.url }}</div>
                            <div v-if="item.parameter" class="params">
                                <span class="txt">参数：</span>
                                <span>{{ item.parameter }}</span>
                            </div>
                            <div v-if="item.example" class="lable">
                                <p class="txt">例如：{{ item.example }}</p>
                                <el-button
                                    size="small"
                                    class="copy copy-data"
                                    :data-clipboard-text="item.example"
                                >复制
                                </el-button
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中间 -->
                <div class="wrapper-con" 
                style="flex:1;background:#f0f2f5;display:flex;justify-content:center;padding-top:20px;height:100%;">
                    <div class="content">
                        <div class="contxt"
                            :style="'height:'+ (clientHeight) + 'px;overflow: scroll;'">
                            <div class="overflowy">
                                <div class="picture"><img src="@/assets/images/electric.png"></div>
                                <div
                                    class="page-title"
                                    :class="{ on: activeIndex == -100 }"
                                    @click="showTitle"
                                >
                                    {{ titleTxt }}
                                    <div class="delete-box"></div>
                                    <div class="handle"></div>
                                </div>
                            </div>
                            <div class="scrollCon">
                                <div style="width: 400px;margin: 0 auto;">
                                    <div class="scroll-box" :class="picTxt&&tabValTxt==2?'fullsize noRepeat':picTxt&&tabValTxt==1?'repeat ysize':'noRepeat ysize'" :style="'background-color:'+(colorTxt?colorPickerTxt:'')+';background-image: url('+(picTxt?picUrlTxt:'')+');height:'+ rollHeight + 'px;'" ref="imgContainer">
                                        <draggable
                                            class="dragArea list-group"
                                            :list="mConfig"
                                            group="people"
                                            @change="log"
                                            filter=".top, .search, .navbar, .comb"
                                            :move="onMove"
                                            animation="300"
                                        >
                                            <div
                                                class="mConfig-item"
                                                :class="{
                                                    on: activeIndex == key,
                                                    top: item.name == 'search_box' || item.name == 'nav_bar' || item.name == 'home_comb'
                                                }"
                                                    v-for="(item, key) in mConfig"
                                                    :key="key"
                                                    @click.stop="bindconfig(item, key)"
                                                    :style="colorTxt?'background-color:'+colorPickerTxt+';':'background-color:transparent;'"
                                            >
                                                <component
                                                    :is="item.name"
                                                    ref="getComponentData"
                                                    :configData="propsObj"
                                                    :index="key"
                                                    :num="item.num"
                                                ></component>
                                                
                                                <div class="delete-box">
                                                    <div class="handleType">
                                                        <div class="iconfont iconshanchu2" @click.stop="bindDelete(item, key)"></div>
                                                        <div class="iconfont iconfuzhi" @click.stop="bindAddDom(item, 0, key)"></div>
                                                        <div class="iconfont iconshangyi" :class="key===0?'on':''" @click.stop="movePage(item, key, 1)"></div>
                                                        <div class="iconfont iconxiayi" :class="key===mConfig.length-1?'on':''" @click.stop="movePage(item, key, 0)"></div>
                                                    </div>
                                                </div>
                                                <div class="handle"></div>
                                            </div>
                                        </draggable>
                                    </div>   
                                </div>
                            </div>
                            <div style="height: 50px;"></div>
                            <div v-if="is_diy" class="overflowy" style="position:absolute;bottom:0;left:50%;margin-left:-193px;overflow:hidden;z-index:100;">
                                <div class="page-foot" @click="showFoot" :class="{ on: activeIndex == -101 }">
                                <footPage></footPage>
                                <div class="delete-box"></div>
                                <div class="handle"></div>
                                </div>
                            </div>
                            <div v-else-if="is_store" class="footer">
                                <div v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === item.value }" class="item">
                                    <div :class="['iconfont-h5', item.icon]"></div>
                                    <div>{{ item.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="right-box">
                    <div class="mConfig-item" style="background-color:#fff;" v-for="(item, key) in rConfig" :key="key">
                        <div class="title-bar">{{ item.cname }}</div>
                        <component
                            :is="item.configName"
                            @config="config"
                            :activeIndex="activeIndex"
                            :num="item.num"
                            :index="key"
                        ></component>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script crossorigin='anonymous'>

import {categoryList, diyGetInfo, diySave, getLinkList, microGetInfo, microSave, merchantDiySave, merchantDiyInfo} from "@/api/diy";
import vuedraggable from "vuedraggable";
import mPage from "@/components/mobilePage/index.js";
import mConfig from "@/components/mobileConfig/index.js";
import footPage from "@/components/pagesFoot";
import {mapState} from "vuex";
import html2canvas from 'html2canvas';
import ClipboardJS from "clipboard";
import { roterPre } from "@/settings";
let idGlobal = 0;
export default {
    inject: ['reload'],
    name: "index.vue",
    components: {
        footPage,
        html2canvas,
        draggable: vuedraggable,
        ...mPage,
        ...mConfig,
    },
    filters: {
        filterTxt(val) {
            if (val) {
                return (val = val.substr(0, val.length - 1));
            }
        },
    },
    computed: {
        ...mapState({
            titleTxt: (state) => state.mobildConfig.pageTitle || "首页",
            nameTxt: (state) => state.mobildConfig.pageName || "模板",
            showTxt: (state) => state.mobildConfig.pageShow,
            colorTxt: (state) => state.mobildConfig.pageColor,
            picTxt: (state) => state.mobildConfig.pagePic,
            colorPickerTxt: (state) => state.mobildConfig.pageColorPicker,
            tabValTxt: (state) => state.mobildConfig.pageTabVal,
            picUrlTxt: (state) => state.mobildConfig.pagePicUrl,
        }),
    },
    data() {
        return {
            roterPre: roterPre,
            clientHeight:'',//页面动态高度
            rollHeight:'',
            leftMenu: [], // 左侧菜单
            lConfig: [], // 左侧组件
            mConfig: [], // 中间组件渲染
            rConfig: [], // 右侧组件配置
            activeConfigName: "",
            propsObj: {}, // 组件传递的数据,
            activeIndex: -100, // 选中的下标
            number: 0,
            pageId: "",
            pageName: "",
            category: [],
            tabList: [
                {
                    title: "组件库",
                    key: 0,
                },
                {
                    title: "页面链接",
                    key: 1,
                },
            ],
            tabs: [{
                    icon: 'icon-yizhan_o',
                    name: '首页',
                    value: 1,
                },
                {
                    icon: 'icon-gouwu_o',
                    name: '商品',
                    value: 3,
                },
                {
                    icon: 'icon-yingyongAPP_o',
                    name: '分类',
                    value: 2,
                },
                {
                    icon: 'icon-zhuanti',
                    name: '专场',
                    value: 4,
                }
            ],
            tabActive: 1,
            tabCur: 0,
            urlList: [],
            footActive: false,
            loading: false,
            isSearch: false,
            isTab: false,
            isFllow: false,
            isComb: false,
            is_diy: false,
            is_store: true,
            type: 0,
            pageFooter: {
                "name": "pageFoot",
                "setUp": {
                    "tabVal": '0'
                },
                "status": {
                    "title": "是否自定义",
                    "name": "status",
                    "status": false,
                },
                "txtColor": {
                    "title": "文字颜色",
                    "name": "txtColor",
                    "default": [{ "item": "#282828" }],
                    "color": [{ "item": "#282828" }]
                },
                "activeTxtColor": {
                    "title": "选中文字颜色",
                    "name": "txtColor",
                    "default": [{ "item": "#F62C2C" }],
                    "color": [{ "item": "#F62C2C" }]
                },
                "bgColor": {
                    "title": "背景颜色",
                    "name": "bgColor",
                    "default": [{ "item": "#fff" }],
                    "isFoot": true,
                    "color": [{ "item": "#fff" }]
                },
                // "bgOpacity": {
                //     "title": "背景模糊",
                //     "name": "status",
                //     "status": false,
                // },
                "menuList": [
                    {
                        imgList: [require('@/assets/images/foot-001.png'), require('@/assets/images/foot-002.png')],
                        name: '首页',
                        link: '/pages/index/index'
                    },
                    {
                        imgList: [require('@/assets/images/foot-004.png'), require('@/assets/images/foot-003.png')],
                        name: '分类',
                        link: '/pages/goods_cate/goods_cate'
                    },
                    {
                        imgList: [require('@/assets/images/foot-006.png'), require('@/assets/images/foot-005.png')],
                        name: '逛逛',
                        link: '/pages/plant_grass/index'
                    },
                    {
                        imgList: [require('@/assets/images/foot-008.png'), require('@/assets/images/foot-007.png')],
                        name: '购物车',
                        link: '/pages/order_addcart/order_addcart'
                    },
                    {
                        imgList: [require('@/assets/images/foot-0010.png'), require('@/assets/images/foot-009.png')],
                        name: '我的',
                        link: '/pages/user/index'
                    }
                ]
            }
        };
    },
    created() {
        this.pageId = this.$route.query.id;
        this.pageName = this.$route.query.name;
        this.is_diy = this.$route.query.types == 1&&!this.$route.query.store ? true : false;
        this.is_store = this.$route.query.types == 2&&this.$route.query.store ? true : false
        let tempPage = {...mPage}
        if(this.$route.query.store){
            delete tempPage.home_comb
            delete tempPage.home_goods_list
            delete tempPage.home_shop
            delete tempPage.home_hotranking
            delete tempPage.home_news_roll
            delete tempPage.home_plant
            delete tempPage.home_news_roll
            delete tempPage.home_service
            delete tempPage.nav_bar
            delete tempPage.search_box
            delete tempPage.z_wechat_attention 
            this.type = 1; 
            this.$store.commit("settings/STOREDIY", 1);
        }else{
            this.type = 0; 
            this.$store.commit("settings/STOREDIY", 0);
        }  
        this.$nextTick(()=>{
            this.lConfig = this.is_store ? this.objToArr(tempPage) : this.objToArr(mPage);
            console.log(this.lConfig)
            this.getUrlList();
        })
    },
    mounted() {
        let imgList =  {
            imgList: [require('@/assets/images/foot-006.png'), require('@/assets/images/foot-005.png')],
            name: '逛逛',
            link: '/pages/plant_grass/index'
        }
        this.$nextTick(() => {
            this.$store.commit("mobildConfig/FOOTER",{'title':'是否自定义','name':imgList});
            this.arraySort();
            if (this.pageId != 0) {
                this.getDefaultConfig();
            }else {
                this.showTitle();
                this.$store.commit('mobildConfig/footPageUpdata', this.pageFooter);
            }
            this.clientHeight = `${document.documentElement.clientHeight}`-120;//获取浏览器可视区域高度
            let H = `${document.documentElement.clientHeight}`-180;
            this.rollHeight = H>650?650:H;
            let that = this;
            window.onresize = function(){
                that.clientHeight =  `${document.documentElement.clientHeight}`-120;
                let H = `${document.documentElement.clientHeight}`-180;
                that.rollHeight = H>650?650:H;
            }
        });
            this.$nextTick(function() {
            const clipboard = new ClipboardJS('.copy-data');
            clipboard.on("success", () => {
                this.$message.success('复制成功');
            });
        });
    },
    methods: {
        leftRemove({to, from, item, clone, oldIndex, newIndex}) {
            if (this.isSearch && newIndex == 0) {
                if (item._underlying_vm_.name == "z_wechat_attention") {
                    this.isFllow = true;
                } else {
                    this.$store.commit(
                        "mobildConfig/ARRAYREAST",
                        this.mConfig[0].num
                    );
                    this.mConfig.splice(0, 1);
                }
            }
            if (this.isFllow = true && newIndex >= 1) {
                this.$store.commit(
                    "mobildConfig/ARRAYREAST",
                    this.mConfig[0].num
                );
            }
        },
        onMove(e) {
            if (e.relatedContext.element.name == "search_box") return false;
            if (e.relatedContext.element.name == "nav_bar") return false;
            if (e.relatedContext.element.name == "home_comb") return false;
            return true;
        },
        // 返回
        goBack(){
            if(this.is_store){
                this.$router.push({ path: `${roterPre}/setting/merchant/diyList` });
            }else{
                if (this.is_diy) {
                    this.$router.push({ path: `${roterPre}/setting/diy/list` });
                } else {
                    this.$router.push({ path: `${roterPre}/setting/micro/list` });
                }
            }   
        },
        // 获取url
        getUrlList() {
            getLinkList({type: this.type}).then((res) => {
                this.urlList = res.data.list;
            });
        },
        // 左侧tab
        bindTab(index) {
            this.tabCur = index;
        },
        // 页面标题点击
        showTitle() {
            this.activeIndex = -100;
            let obj = {};
            for (var i in mConfig) {
                if (i == "pageTitle") {      
                    obj = mConfig[i];
                    obj.configName = mConfig[i].name;
                    obj.cname = "页面设置";
                    console.log(obj)
                }
            }
            this.rConfig = [];
            this.rConfig[0] = JSON.parse(JSON.stringify(obj));
        },
        // 页面底部点击
        showFoot() {
            this.activeIndex = -101;
            let obj = {};
            for (var i in mConfig) {
                if (i == "pageFoot") {
                    obj = mConfig[i];
                    obj.configName = mConfig[i].name;
                    obj.cname = "底部菜单";
                }
            }
            this.rConfig = [];
            this.rConfig[0] = JSON.parse(JSON.stringify(obj));
        },
        // 对象转数组
        objToArr(data) {
            let obj = Object.keys(data);
            let m = obj.map((key) => data[key]);
            return m;
        },
        log(evt) {
            console.log(evt);
            // 中间拖拽排序
            if (evt.moved) {
                if (evt.moved.element.name == "search_box") {
                    return this.$message.warning("该组件禁止拖拽");
                }
                evt.moved.oldNum = this.mConfig[evt.moved.oldIndex].num;
                evt.moved.newNum = this.mConfig[evt.moved.newIndex].num;
                evt.moved.status = evt.moved.oldIndex > evt.moved.newIndex;
                this.mConfig.forEach((el, index) => {
                    el.num = new Date().getTime() * 1000 + index;
                });
                evt.moved.list = this.mConfig;
                this.rConfig = [];
                let item = evt.moved.element;
                let tempItem = JSON.parse(JSON.stringify(item));
                this.rConfig.push(tempItem);
                this.activeIndex = evt.moved.newIndex;
                this.$store.commit("mobildConfig/SETCONFIGNAME", item.name);
                this.$store.commit("mobildConfig/defaultArraySort", evt.moved);
            }
            // 从左向右拖拽排序
            if (evt.added) {
                let data = evt.added.element;
                let obj = {};
                let timestamp = new Date().getTime() * 1000;
                data.num = timestamp;
                this.activeConfigName = data.name;
                let tempItem = JSON.parse(JSON.stringify(data));
                tempItem.id = "id" + tempItem.num;
                this.mConfig[evt.added.newIndex] = tempItem;
                this.rConfig = [];
                this.rConfig.push(tempItem);
                this.mConfig.forEach((el, index) => {
                    el.num = new Date().getTime() * 1000 + index;
                });
                evt.added.list = this.mConfig;
                this.activeIndex = evt.added.newIndex;
                // 保存组件名称
                this.$store.commit("mobildConfig/SETCONFIGNAME", data.name);
                this.$store.commit("mobildConfig/defaultArraySort", evt.added);
            }
        },
        cloneDog(data) {
            return {
                ...data,
            };
        },
        //数组元素互换位置
        swapArray(arr, index1, index2) {
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },
        //点击上下移动；
        movePage(item,index,type){
            if(type){
                if(index == 0){
                    return
                }
            }else {
                if(index == this.mConfig.length-1){
                    return
                }
            }
            if (item.name == "search_box" || item.name == "nav_bar" || item.name == 'home_comb') {
                return this.$message.warning("该组件禁止移动");
            }
            if(type){
                if(
                    this.mConfig[index-1].name  == "search_box" || 
                    this.mConfig[index-1].name  == "nav_bar" || 
                    this.mConfig[index - 1].name == 'home_comb'){
                    return this.$message.warning("搜索框或分类必须为顶部");
                }
                this.swapArray(this.mConfig, index-1, index);
            }else {
                this.swapArray(this.mConfig, index, index+1);
            }
            let obj = {};
            this.rConfig = [];
            obj.oldIndex = index;
            if(type){
                obj.newIndex = index-1;
            }else {
                obj.newIndex = index+1;
            }
            this.mConfig.forEach((el, index) => {
                el.num = new Date().getTime() * 1000 + index;
            });
            let tempItem = JSON.parse(JSON.stringify(item));
            this.rConfig.push(tempItem);
            obj.element = item;
            obj.list = this.mConfig;
            if(type){
                this.activeIndex = index-1;
            }else {
                this.activeIndex = index+1;
            }
            this.$store.commit("mobildConfig/SETCONFIGNAME", item.name);
            this.$store.commit("mobildConfig/defaultArraySort", obj);
        },
        // 组件添加
        addDomCon(item,type,index){
            if (item.name == "search_box") {
                if (this.isSearch) return this.$message.error("该组件只能添加一次");
                if (this.isComb) return this.$message.error('该组件不能和组合组件同时存在');
                this.isSearch = true;
            }
            if (item.name == "nav_bar") {
                if (this.isTab) return this.$message.error("该组件只能添加一次");
                if (this.isComb) return this.$message.error('该组件不能和组合组件同时存在');
                this.isTab = true;
            }
            if (item.name == 'home_comb') {
                if (this.isComb) return this.$message.error('该组件只能添加一次');
                if (this.isSearch || this.isTab) return this.$message.error('组合组件不能和搜索或者选项卡同时存在');
                this.isComb = true;
            }
            idGlobal += 1;
            let obj = {};
            let timestamp = new Date().getTime() * 1000;
            item.num = `${timestamp}`;
            item.id = `id${timestamp}`;
            this.activeConfigName = item.name;
            let tempItem = JSON.parse(JSON.stringify(item));
            if (item.name == "search_box" || item.name == 'home_comb') {
                this.rConfig = [];
                this.mConfig.unshift(tempItem);
                this.activeIndex = 0;
                this.rConfig.push(tempItem);
            }else if (item.name == "nav_bar") {
                this.rConfig = [];
                if (this.mConfig[0]&&this.mConfig[0].name === "search_box") {
                    this.mConfig.splice(1, 0, tempItem);
                    this.activeIndex = 1;
                } else {
                    this.mConfig.splice(0, 0, tempItem);
                    this.activeIndex = 0;
                }
                this.rConfig.push(tempItem);
            }
            else {
                if(type){
                    this.rConfig = [];
                    this.mConfig.push(tempItem);
                    this.activeIndex = this.mConfig.length - 1;
                    this.rConfig.push(tempItem);
                    console.log(this.rConfig)
                }else {
                    this.mConfig.splice(index+1, 0, tempItem);
                    this.activeIndex = index;
                }
            }
            this.mConfig.forEach((el, index) => {
                el.num = new Date().getTime() * 1000 + index;
            });
            // 保存组件名称
            obj.element = item;
            obj.list = this.mConfig;
            this.$store.commit("mobildConfig/SETCONFIGNAME", item.name);
            this.$store.commit("mobildConfig/defaultArraySort", obj);
        },
        //中间页点击添加模块；
        bindAddDom(item, type, index) {
            let i = item;
            this.lConfig.forEach(j=>{
                if(item.name==j.name){
                    i = j
                }
            });
            this.addDomCon(i,type,index);
        },
        //左边配置模块点击添加；
        addDom(item, type) {
            this.addDomCon(item,type);
        },
        // 点击显示相应的配置
        bindconfig(item, index) {
            this.rConfig = [];
            let tempItem = JSON.parse(JSON.stringify(item));
            this.rConfig.push(tempItem);
            this.activeIndex = index;
            this.$store.commit("mobildConfig/SETCONFIGNAME", item.name);
        },
        // 组件删除
        bindDelete(item, key) {
            if (item.name == "search_box") {
                this.isSearch = false;
            }
            if (item.name == "nav_bar") {
                this.isTab = false;
            }
            if (item.name == 'home_comb') {
                this.isComb = false;
            }
            this.mConfig.splice(key, 1);
            this.rConfig.splice(0, 1);
            if(this.mConfig.length != key){
                this.rConfig.push(this.mConfig[key]);
            }else {
                if(this.mConfig.length){
                    this.activeIndex = key-1;
                    this.rConfig.push(this.mConfig[key-1]);
                }else {
                    this.showTitle()
                }
            }
            // 删除第几个配置
            this.$store.commit("mobildConfig/DELETEARRAY", item);
        },
        // 组件返回
        config(data) {
            let propsObj = this.propsObj;
            propsObj.data = data;
            propsObj.name = this.activeConfigName;
        },
        addSort(arr, index1, index2) {
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },
        // 数组排序
        arraySort() {
            let tempArr = [];
            let basis = {
                title: "基础组件",
                list: [],
                isOpen: true,
            };
            let marketing = {
                title: "营销组件",
                list: [],
                isOpen: true,
            };
            let tool = {
                title: "工具组件",
                list: [],
                isOpen: true,
            };
            this.lConfig.map((el, index) => {
                if (el.type == 0) {
                    basis.list.push(el);
                }
                if (el.type == 1) {
                    marketing.list.push(el);
                }
                if (el.type == 2) {
                    tool.list.push(el);
                }
            });
            tempArr.push(basis, marketing, tool);
            console.log(tempArr)
            this.leftMenu = tempArr;
        },
        diySaveDate(val){
            this.is_diy
            ?
            diySave(this.pageId, {
                value: val,
                title: this.titleTxt,
                name: this.nameTxt,
                is_show: this.showTxt?1:0,
                is_bg_color: this.colorTxt?1:0,
                color_picker: this.colorPickerTxt,
                bg_pic: this.picUrlTxt,
                bg_tab_val: this.tabValTxt,
                is_bg_pic: this.picTxt?1:0
            }).then((res) => {
                this.loading = false;
                this.pageId = res.data.id;
                this.$message.success(res.message);
            }).catch((res) => {
                this.loading = false;
                this.$message.error(res.message);
            }) : this.is_store ?
            merchantDiySave(this.pageId, {
                value: val,
                title: this.titleTxt,
                name: this.nameTxt,
                is_show: this.showTxt ? 1 : 0,
                is_bg_color: this.colorTxt ? 1 : 0,
                color_picker: this.colorPickerTxt,
                bg_pic: this.picUrlTxt,
                bg_tab_val: this.tabValTxt,
                is_bg_pic: this.picTxt ? 1 : 0,
            })
            .then((res) => {
                this.loading = false;
                this.pageId = res.data.id;
                this.$message.success(res.message);
            })
            .catch((res) => {
                this.loading = false;
                this.$message.error(res.message);
            }) :
            microSave(this.pageId, {
                value: val,
                title: this.titleTxt,
                name: this.nameTxt,
                is_show: this.showTxt ? 1 : 0,
                is_bg_color: this.colorTxt ? 1 : 0,
                color_picker: this.colorPickerTxt,
                bg_pic: this.picUrlTxt,
                bg_tab_val: this.tabValTxt,
                is_bg_pic: this.picTxt ? 1 : 0,
            })
            .then((res) => {
                this.loading = false;
                this.pageId = res.data.id;
                this.$message.success(res.message);
            })
            .catch((res) => {
                this.loading = false;
                this.$message.error(res.message);
            });
        },
        // 保存配置
        saveConfig() {
            if (this.mConfig.length == 0) {
                return this.$message.error("暂未添加任何组件，保存失败！");
            }
            this.loading = true;
            let val = this.$store.state.mobildConfig.defaultArray;
            console.log(val);
            if (!this.footActive) {
                let timestamp = new Date().getTime() * 1000;
                val[timestamp] = this.$store.state.mobildConfig.pageFooter;
                this.footActive = true;
            }
            this.$nextTick(function () {
                this.diySaveDate(val);
            })
        },
        // 获取默认配置
        getDefaultConfig() {
            this.is_diy
            ? diyGetInfo(this.pageId).then(({ data }) => {
                this.$store.commit('mobildConfig/titleUpdata', data.info.title);
                this.$store.commit('mobildConfig/nameUpdata', data.info.name);
                this.$store.commit('mobildConfig/showUpdata', data.info.is_show);
                this.$store.commit('mobildConfig/colorUpdata', data.info.is_bg_color || 0);
                this.$store.commit('mobildConfig/picUpdata', data.info.is_bg_pic || 0);
                this.$store.commit('mobildConfig/pickerUpdata', data.info.color_picker || '#f5f5f5');
                this.$store.commit('mobildConfig/radioUpdata', data.info.bg_tab_val || 0);
                this.$store.commit('mobildConfig/picurlUpdata', data.info.bg_pic || '');
                this.defaultData(data.info.value);
            })
            : this.is_store ? 
            merchantDiyInfo(this.pageId).then(({ data }) => {
                this.$store.commit('mobildConfig/titleUpdata', data.info.title);
                this.$store.commit('mobildConfig/nameUpdata', data.info.name);
                this.$store.commit('mobildConfig/showUpdata', data.info.is_show);
                this.$store.commit('mobildConfig/colorUpdata', data.info.is_bg_color || 0);
                this.$store.commit('mobildConfig/picUpdata', data.info.is_bg_pic || 0);
                this.$store.commit('mobildConfig/pickerUpdata', data.info.color_picker || '#f5f5f5');
                this.$store.commit('mobildConfig/radioUpdata', data.info.bg_tab_val || 0);
                this.$store.commit('mobildConfig/picurlUpdata', data.info.bg_pic || '');
                this.defaultData(data.info.value);
            })
            :
            microGetInfo(this.pageId).then(({ data }) => {
                this.$store.commit('mobildConfig/titleUpdata', data.info.title);
                this.$store.commit('mobildConfig/nameUpdata', data.info.name);
                this.$store.commit('mobildConfig/showUpdata', data.info.is_show);
                this.$store.commit('mobildConfig/colorUpdata', data.info.is_bg_color || 0);
                this.$store.commit('mobildConfig/picUpdata', data.info.is_bg_pic || 0);
                this.$store.commit('mobildConfig/pickerUpdata', data.info.color_picker || '#f5f5f5');
                this.$store.commit('mobildConfig/radioUpdata', data.info.bg_tab_val || 0);
                this.$store.commit('mobildConfig/picurlUpdata', data.info.bg_pic || '');
                this.defaultData(data.info.value);
            });
        },
        defaultData(data) {
            let obj = {};
            let tempARR = [];
            let newArr = this.objToArr(data);
            function sortNumber(a, b) {
                return a.timestamp - b.timestamp;
            }
            newArr.sort(sortNumber);
            newArr.map((el, index) => {
                if (el.name == 'headerSerch') {
                this.isSearch = true;
                }
                if (el.name == 'tabNav') {
                this.isTab = true;
                }
                if (el.name == 'homeComb') {
                this.isComb = true;
                }
                if (el.name == 'goodList') {
                let storage = window.localStorage;
                storage.setItem(el.timestamp, el.selectConfig.activeValue);
                }
                el.id = 'id' + el.timestamp;
                this.lConfig.map((item, j) => {
                if (el.name == item.defaultName) {
                    item.num = el.timestamp;
                    item.id = 'id' + el.timestamp;
                    let tempItem = JSON.parse(JSON.stringify(item));
                    tempARR.push(tempItem);
                    obj[el.timestamp] = el;
                    this.mConfig.push(tempItem);
                    // 保存默认组件配置
                    this.$store.commit('mobildConfig/ADDARRAY', {
                    num: el.timestamp,
                    val: el,
                    });
                }
                });
            });
            let objs = newArr[newArr.length - 1];
            if (objs.name == 'pageFoot') {
                objs.bgColor.isFoot = true;
                // objs.bgOpacity = {name: "bgOpacity",status: false,title: "背景模糊"}
                this.$store.commit('mobildConfig/footPageUpdata', objs);
            }
            console.log(newArr)
            console.log(this.lConfig)
            this.showTitle();
        },
        categoryList() {
            categoryList((res) => {
                this.category = res.data;
            });
        },
        // 重置
        reast() {
            if (this.pageId == 0) {
                this.$message.error("新增页面，无法重置");
            } else {
                this.$modalSure("是否重置当前页面数据?").then(() => {
                    this.mConfig = [];
                    this.rConfig = [];
                    this.activeIndex = -99;
                    this.getDefaultConfig();
                })
            }
        },
    },
    beforeDestroy() {
        this.$store.commit("mobildConfig/titleUpdata", "");
        this.$store.commit("mobildConfig/nameUpdata", "");
        this.$store.commit("mobildConfig/showUpdata", 1);
        this.$store.commit("mobildConfig/colorUpdata", 0);
        this.$store.commit("mobildConfig/picUpdata", 0);
        this.$store.commit("mobildConfig/pickerUpdata", "#f5f5f5");
        this.$store.commit("mobildConfig/radioUpdata", 0);
        this.$store.commit("mobildConfig/picurlUpdata", "");
        this.$store.commit("mobildConfig/SETEMPTY");
    },
    destroyed() {
        this.$store.commit("mobildConfig/titleUpdata", "");
        this.$store.commit("mobildConfig/nameUpdata", "");
        this.$store.commit("mobildConfig/showUpdata", 1);
        this.$store.commit("mobildConfig/colorUpdata", 0);
        this.$store.commit("mobildConfig/picUpdata", 0);
        this.$store.commit("mobildConfig/pickerUpdata", "#f5f5f5");
        this.$store.commit("mobildConfig/radioUpdata", 0);
        this.$store.commit("mobildConfig/picurlUpdata", "");
        this.$store.commit("mobildConfig/SETEMPTY");
    },  
};
</script>

<style scoped lang="scss">
    .product_tabs{
        padding: 16px 32px;
        background: #fff;
        border-bottom: 1px solid #e8eaec;
        text-align: right;
    }
    .ysize {
        background-size: 100%;
    }
    .fullsize {
        background-size: 100% 100%;
    }
    .repeat {
        background-repeat: repeat;
    }
    .noRepeat {
        background-repeat: no-repeat;
    }
    ::v-deep .el-input__inner{
       font-size: 13px;
    }
    .defaultData{
        cursor: pointer;
        position: absolute;
        left:50%;
        margin-left:245px;
        .data{
            margin-top: 20px;
            color: #282828;
            background-color: #fff;
            width: 94px;
            text-align: center;
            height: 32px;
            line-height: 32px;
            border-radius: 3px;
            font-size: 12px;
        }
        .data:hover{
            background-color: var(--prev-color-primary);
            color: #fff;
            border: 0;
        }
    }
    .overflowy{
        overflow-y: scroll;
        .picture{
            width: 379px;
            height: 20px;
            margin: 0 auto;
            background-color: #fff;
        }
    }
    .bnt{
        width: 80px!important;
    }
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
        -webkit-box-shadow: inset 0 0 6px #fff;
        display: none;
    }
    .left:hover::-webkit-scrollbar-thumb,.right-box:hover::-webkit-scrollbar-thumb{
        display: block;
    }
    .contxt:hover ::-webkit-scrollbar-thumb{
        display: block;
    }
    ::-webkit-scrollbar {
        width: 4px!important; /*对垂直流动条有效*/
    }
    .scrollCon{
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
        // margin-bottom: 50px;
    }
    .scroll-box .position{
        display: block!important;
        text-align: center;
        border: 1px dashed var(--prev-color-primary);
        color: var(--prev-color-primary);
        background-color: #edf4fb;
    }
    .scroll-box .conter{
        display: none!important;
    }
    .dragClass {
        background-color: #fff;
    }
    .ivu-mt {
        display: flex;
        justify-content: space-between;
    }
    .iconfont-diy {
        font-size: 24px;
        color: var(--prev-color-primary);
    }
    .diy-wrapper {
        max-width: 100%;
        min-width: 1100px;
        display: flex;
        justify-content: space-between;
        .left {
            min-width: 300px;
            max-width: 300px;
            border-radius: 4px;
            height: 100%;
            .title-bar {
                display: flex;
                color: #333;
                border-bottom: 1px solid #eee;
                border-radius: 4px;
                cursor: pointer;
                .title-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    height: 45px;

                    &.on {
                        color: var(--prev-color-primary);
                        font-size: 14px;
                        border-bottom: 1px solid var(--prev-color-primary);
                    }
                }
            }
            .wrapper {
                padding: 15px;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                .tips {
                    display: flex;
                    justify-content: space-between;
                    padding-bottom: 15px;
                    font-size: 13px;
                    color: #000;
                    cursor: pointer;
                    .ivu-icon {
                        color: #000;
                    }
                }
            }
            .link-item {
                padding: 10px;
                border-bottom: 1px solid #F5F5F5;
                font-size: 12px;
                color: #323232;
                .name {
                    font-size: 14px;
                    color: var(--prev-color-primary);
                }
                .link-txt {
                    margin-top: 2px;
                    word-break: break-all;
                }
                .params {
                    margin-top: 5px;
                    color: #1CBE6B;
                    word-break: break-all;
                    .txt {
                        color: #323232;
                    }
                    span {
                        &:last-child i {
                            display: none;
                            color: red;
                        }
                    }
                }
                .lable {
                    display: flex;
                    margin-top: 5px;
                    color: #999;
                    align-items: center;
                    p {
                        flex: 1;
                        word-break: break-all;
                    }
                    button {
                        margin-left: 30px;
                    }
                }
            }
            .dragArea.list-group {
                display: flex;
                flex-wrap: wrap;
                .list-group-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 74px;
                    height: 66px;
                    margin-right: 17px;
                    margin-bottom: 10px;
                    font-size: 12px;
                    color: #666;
                    cursor: pointer;
                    border-radius: 5px;
                    text-align: center;
                    &:hover {
                        box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
                        border-right: 5px;
                    }
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
            }
        }
        .content {
            position: relative;
            height: 100%;
            width: 100%;
            .page-foot {
                position: relative;
                width: 379px;
                margin: 0 auto;
                .delete-box {
                    display: none;
                    position: absolute;
                    left: -2px;
                    top: 0;
                    width: 383px;
                    height: 100%;
                    border: 2px dashed var(--prev-color-primary);
                    padding: 10px 0;
                }
                &:hover, &.on {
                    /*cursor: move;*/
                    .delete-box {
                        /*display: block;*/
                    }
                }
                &.on {
                    cursor: move;
                    .delete-box {
                        display: block;
                        border: 2px solid var(--prev-color-primary);
                        box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
                    }
                }
            }
            .page-title {
                position: relative;
                height: 35px;
                line-height: 35px;
                background: #fff;
                font-size: 15px;
                color: #333333;
                text-align: center;
                width: 379px;
                margin: 0 auto;
                overflow: hidden;
                .delete-box {
                    display: none;
                    position: absolute;
                    left: -2px;
                    top: 0;
                    width: 383px;
                    height: 100%;
                    border: 2px dashed var(--prev-color-primary);
                    padding: 10px 0;
                    span {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 32px;
                        height: 16px;
                        line-height: 16px;
                        display: inline-block;
                        text-align: center;
                        font-size: 10px;
                        color: #fff;
                        background: rgba(0, 0, 0, 0.4);
                        margin-left: 2px;
                        cursor: pointer;
                        z-index: 11;
                    }
                }
                &:hover, &.on {
                    /*cursor: move;*/
                    .delete-box {
                        /*display: block;*/
                    }
                }
                &.on {
                    cursor: move;
                    .delete-box {
                        display: block;
                        border: 2px solid var(--prev-color-primary);
                        box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
                    }
                }
            }
            .scroll-box {
                flex: 1;
                background-color: #fff;
                width: 379px;
                margin: 0 auto;
                padding-top: 1px;
            }
            .dragArea.list-group {
                width: 100%;
                height: 100%;
                .mConfig-item {
                    position: relative;
                    cursor: move;
                    .delete-box {
                        display: none;
                        position: absolute;
                        left: -2px;
                        top: 0;
                        width: 383px;
                        height: 100%;
                        border: 2px dashed var(--prev-color-primary);
                        /*padding: 10px 0;*/
                        .handleType{
                            position: absolute;
                            right: -43px;
                            top: 0;
                            width: 36px;
                            height: 143px;
                            border-radius: 4px;
                            background-color: var(--prev-color-primary);
                            cursor: pointer;
                            color: #fff;
                            font-weight: bold;
                            text-align: center;
                            padding: 4px 0;
                            .iconfont {
                                padding: 5px 0;
                                &.on{
                                    opacity: 0.4;
                                }
                            }
                        }
                    }
                    &.on {
                        cursor: move;
                        .delete-box {
                            display: block;
                            border: 2px solid var(--prev-color-primary);
                            box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
                        }
                    }
                }
            }
        }
        .right-box {
            max-width: 400px;
            min-width: 400px;
            height: 100%;
            border-radius: 4px;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            .title-bar {
                width: 100%;
                height: 45px;
                line-height: 45px;
                padding-left: 24px;
                color: #000;
                border-radius: 4px;
                border-bottom: 1px solid #eee;
                font-size: 14px;
            }
        }
        ::-webkit-scrollbar {
            width: 6px;
            background-color: transparent;
        }
        ::-webkit-scrollbar-track {
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #bfc1c4;
        }
    }
    .foot-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        background: #fff;
        box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.03);
        button {
            width: 100px;
            height: 32px;
            font-size: 13px;

            &:first-child {
                margin-right: 20px;
            }
        }
    }
    .footer {
		display: flex;
        width: 379px;
        margin: 0 auto;
		height: 50px;
		background-color: #FFFFFF;
		opacity: 0.96;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 10px;
			color: #282828;
			.iconfont-h5 {
				font-size: 22px;
			}
			.icon-zhuanti{
				font-size: 18px;
			}
		}
		.active {
			color: #E93323;
		}
	}
    ::v-deep .ivu-scroll-loader {
        display: none;
    }
    ::v-deep .el-card {
       border: none;
       box-shadow: none;
    }
    ::v-deep .el-card__body{
        padding: 0;
    }
</style>
