<template>
  <div class="HomePage">
    <template>
      <div class="head-title">
        首页布局设置
      </div>
      <div class="content">
        <div style="display:flex;">
          <div class="mobile-box">
            <div class="top-bar" flex="main:center cross:center">
              <div>首页</div>
            </div>
            <div class="show-box">
                <div id='box'>
                    <draggable v-model="dataList">
                        <template v-for="(item,index) in dataList">
                            <div style="position:relative;" :key="index">
                                <img :src="item.imgBg" style="width: 100%;">
                                <div class="module-name">
                                    <template v-if="item.video_url!=''">
                                        <div class="video_msg">{{item.video_url}}</div>    
                                    </template>
                                    <template v-else>{{item.name}}</template>
                                </div>
                                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                    <img @click="delPlugn(index)" :src="domainManager().ImageUrl+'/Static/icon-destroy.png'" class="module-icon">
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                                    <img v-if="item.is_edit==1&&item.key=='video'" @click="comCkVideo=index,isShowVideo=true" style="left:20px;" :src="domainManager().ImageUrl+'/Static/icon-edit.png'" class="module-icon">
                                </el-tooltip>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
          </div>
          <div class="el-card home_Content">
            <div class="el-card__body" style="padding:10px">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="常用" name="first">
                        <div flex="wrap:wrap" class="module-box">
                            <template v-for="item in ListData">
                                <div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='normal'">
                                    <div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
                                    <div flex="main:center cross:center" class="edit-box">
                                        <div class="home_Add" @click="addPlugn(childItem)">
                                            <img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
                                        </div>
                                        <div class="home_Add" style="margin-left:10px;" @click="isShowDialog(childItem)" v-if="childItem.is_edit==1&&childItem.key!='video'">
                                            <img src="../../assets/img/userman/edit.png" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="商品分类" name="second">
                        <div flex="wrap:wrap" class="module-box">
                            <template v-for="item in ListData">
                                <div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='cat'">
                                    <div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
                                    <div flex="main:center cross:center" class="edit-box" @click="addPlugn(childItem)">
                                        <div class="home_Add">
                                            <img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
                                        </div>
                                        <div class="home_Add" style="margin-left:10px;" v-if="childItem.is_edit==1">
                                            <img src="../../assets/img/userman/edit.png" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="图片魔方" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="插件" name="fourth">
                        <div flex="wrap:wrap" class="module-box">
                            <template v-for="item in ListData">
                                <div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='plugin'">
                                    <div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
                                    <div flex="main:center cross:center" class="edit-box" @click="addPlugn(childItem)">
                                        <div class="home_Add">
                                            <img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
                                        </div>
                                        <div class="home_Add" style="margin-left:10px;" v-if="childItem.is_edit==1">
                                            <img src="../../assets/img/userman/edit.png" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <el-button class="button-item" size="small" type="primary">保存</el-button>
          </div>

        </div>

      </div>
    </template>
    <!-- 导航图标编辑 -->
    <el-dialog title="编辑" :visible.sync="isShowNav" width="600px">
      <el-form label-width="150px">
          <el-form-item label="图标一行显示个数">
            <el-radio v-model="navMsg.row_num" :label="4">4个</el-radio>
            <el-radio v-model="navMsg.row_num" :label="5">5个</el-radio>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowNav=false">取 消</el-button>
        <el-button size="small" type="danger" @click="sureNav()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 公告 -->
    <el-dialog title="编辑" :visible.sync="isShowNotice" width="600px">
      <el-form :model="noticeMsg" :rules="rules2" ref="noticeMsg" label-width="150px">
        <el-form-item label="公告名称" prop="NoticeName" size="small">
            <el-input type="text" v-model="noticeMsg.NoticeName"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="NoticeContent" size="small">
            <el-input type="textarea" v-model="noticeMsg.NoticeContent" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="公告背景色">
            <el-color-picker v-model="noticeMsg.notice_bg_color"></el-color-picker>
        </el-form-item>
        <el-form-item label="公告文字颜色">
            <el-color-picker v-model="noticeMsg.notice_text_color"></el-color-picker>
        </el-form-item>
        <el-form-item label="图标" prop="notice_url">
            <el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
                <el-button size="mini">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(noticeMsg.notice_url) + ')'}">
                    <i v-if="noticeMsg.notice_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowNotice=false">取 消</el-button>
        <el-button size="small" type="danger" @click="saveNotice('noticeMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 专题 -->
    <el-dialog title="编辑" :visible.sync="isShowTotic" width="600px">
      <el-form :model="topicMsg" :rules="rules3" ref="topicMsg" label-width="150px">
        <el-form-item label="专题显示数量" size="small">
            <el-select v-model="topicMsg.topic_num" placeholder="请选择" size="small">
                <el-option label="1个" value="1"></el-option>
                <el-option label="2个" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="topicMsg.topic_num==1?'图标(1个专题)':'图标(2个专题)'" prop="topic_url">
            <el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top">
                <el-button size="mini" @click="choicImg=true,chooseImg='topicOne'">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url) + ')'}">
                    <i v-if="topicMsg.topic_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="专题标签" prop="topic_url_2">
            <el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
                <el-button size="mini" @click="choicImg=true,chooseImg='topicTwo'">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url_2) + ')'}">
                    <i v-if="topicMsg.topic_url_2==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowTotic=false">取 消</el-button>
        <el-button size="small" type="danger" @click="saveTopic('topicMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 领券中心 -->
    <el-dialog title="编辑" :visible.sync="isShowCoupon" width="900px">
      <el-form :model="couopnMsg" :rules="rules4" ref="couopnMsg" label-width="150px">
        <el-form-item label="未领取图（满减券）" prop="coupon_not_url">
            <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
                <el-button size="mini">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_not_url) + ')'}">
                    <i v-if="couopnMsg.coupon_not_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="已领取图" prop="coupon_url">
            <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
                <el-button size="mini">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_url) + ')'}">
                    <i v-if="couopnMsg.coupon_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowCoupon=false">取 消</el-button>
        <el-button size="small" type="danger" @click="setCoupon('couopnMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
        <!-- 选择视频 -->
    <el-dialog title="选择文件" :visible.sync="isChoiceVideo" width="1240px">
      <Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="isShowVideo" width="600px">
      <el-form :model="videoMsg" :rules="rulesVideo" ref="videoMsg" label-width="150px">
        <el-form-item label="视频文件" size="small" prop="video_url">
            <el-input type="text" v-model="videoMsg.video_url">
                <el-button slot="append" @click="isChoiceVideo=true">选择文件</el-button>
            </el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="video_pic_url">
            <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
                <el-button size="mini" @click="choicImg=true,chooseImg='video'">选择文件</el-button>
            </el-tooltip>
            <div class="customize-share-title">
                <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
                    :style="{backgroundImage:'url(' + getIconLink(videoMsg.video_pic_url) + ')'}">
                    <i v-if="videoMsg.video_pic_url==''" class="el-icon-picture-outline"></i>
                </div>
            </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowVideo=false">取 消</el-button>
        <el-button size="small" type="danger" @click="saveVideo('videoMsg')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import Choosevideo from "@/components/global/Choosevideo.vue";
  import chooseMeun from "../common/chooseMeun.vue";
  import draggable from "vuedraggable"
  export default {
    data() {
      return {
        comCkVideo:-1,
        //选择图片
        chooseImg:'',  
        //导航图标
        isShowNav:false,
        //公告
        isShowNotice:false,
        //专题
        isShowTotic:false,
        //领券中心
        isShowCoupon:false,
        //选图片
        choicImg:false,
        //视频
        isShowVideo:false,
        isChoiceVideo:false,
        radio:'4',
        activeName:'first',
        dataList: [],
        addMsg: {
          RoleName: '', //角色名称
          RoleIntro: '', //备注/描述
          RoleAuth: '', //角色权限
        },
        //导航图标msg
        navMsg:{
          row_num:4
        },
        //视频
        videoMsg:{
          video_url:'', //视频文件
          video_pic_url:'' //封面图
        },
        //公告msg
        noticeMsg:{
            NoticeName:'', //公告名称
            NoticeContent:'', //公告内容   
            notice_bg_color:'', //公告背景色
            notice_text_color:'', //公告文字颜色
            notice_url:'',//图标
        },
        //专题
        topicMsg:{
            topic_num:'1', //专题显示数量
            topic_url:'',
            topic_url_2:''
        },
        //领券中心
        couopnMsg:{
            coupon_not_url:'', //未领取
            coupon_url:'' //已领取图
        },
        //插件
        ListData:[],
        //公告验证
        rules2: {
          NoticeName: [{
            required: true,
            message: "请填写公告名称",
            trigger: "blur"
          }],
          NoticeContent: [{
            required: true,
            message: "请填写公告内容",
            trigger: "blur"
          }],
          notice_url: [{
            required: true,
            message: "请选择图标",
            trigger: "change"
          }]
        },
        rules3: {
          topic_url: [{
            required: true,
            message: "请选择专题图标",
            trigger: "change"
          }],
          topic_url_2: [{
            required: true,
            message: "请选择专题标签",
            trigger: "change"
          }]
        },
        //领券验证
        rules4: {
          coupon_not_url: [{
            required: true,
            message: "请选择未领取图",
            trigger: "change"
          }],
          coupon_url: [{
            required: true,
            message: "请选择已领取图标",
            trigger: "change"
          }]
        },
        //视频验证
        rulesVideo:{
          video_url: [{
            required: true,
            message: "请选择视频地址",
            trigger: "change"
          }],
          video_pic_url: [{
            required: true,
            message: "请选择封面图",
            trigger: "change"
          }]
        }

      };
    },
    components: {
      draggable,
      ChooseImg,
      chooseMeun,
      Choosevideo
    },

    created() {

    },
    methods: {
      //点击添加组件
      addPlugn(item){
        this.dataList.push(JSON.parse(JSON.stringify(item)));
      },
      //删除插件
      delPlugn(index){
        this.dataList.splice(index,1);
      },
      //编辑
      isShowDialog(item){
          switch(item.key){
              case 'home_nav':
              this.isShowNav=true;
              this.navMsg.row_num=item.row_num;
              break;
              case 'notice':
                this.isShowNotice=true;
                this.noticeMsg=item;
              break;
              case 'topic':
                this.isShowTotic=true;
                this.topicMsg=item;
              break;
              case 'coupon':
                this.isShowCoupon=true;
                this.
              break;
          }
      },
      //确定编辑
      sureNav(){
          this.dataList.forEach(x=>{
              if(x.key=='home_nav'){
                  x.row_num=this.navMsg.row_num;
              }
          })
          this.isShowNav=false;
      },
      saveTopic(addMsg){
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.setTopic();
          } else {
            return false;
          }
        });
      },
      //保存领券
      setCoupon(addMsg){
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveCoupon();
          } else {
            return false;
          }
        });
      },
      //保存领券
      saveCoupon(){
        this.dataList.forEach(x=>{
            if(x.key=='coupon'){
                x.coupon_not_url=this.couopnMsg.coupon_not_url;
                x.coupon_url=this.couopnMsg.coupon_url;
            }
        })
      },
      //保存公告
      saveNotice(addMsg){
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.baocunNotice();
          } else {
            return false;
          }
        });
      },
      baocunNotice(){
        this.dataList.forEach(x=>{
            if(x.key=='notice'){
                x.NoticeName=this.noticeMsg.NoticeName;
                x.NoticeContent=this.noticeMsg.NoticeContent;
                x.notice_bg_color=this.noticeMsg.notice_bg_color;
                x.notice_text_color=this.noticeMsg.notice_text_color;
                x.notice_url=this.noticeMsg.notice_url;
            }
        })
      },
      //确定保存专题
      setTopic(){
          this.dataList.forEach(x=>{
              if(x.key=='topic'){
                x.topic_num=this.topicMsg.topic_num;
                x.topic_url=this.topicMsg.topic_url;
                x.topic_url_2=this.topicMsg.topic_url_2;
              }
          })
      },
      GetMiniProgramMallIndex() {
        this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
          if (res.data.resultCode == 1) {
              this.ListData=res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存视频
      saveVideo(addMsg){
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.baocunVideo();
          } else {
            return false;
          }
        });
      },
      baocunVideo(){
        this.dataList[this.comCkVideo].video_url=this.videoMsg.video_url;
        this.dataList[this.comCkVideo].video_pic_url=this.videoMsg.video_pic_url;
        this.isShowVideo=false;
        this.videoMsg.video_pic_url='';
        this.videoMsg.video_url='';
      },
      //选择图片
      SelectId(msg) {
        if (this.chooseImg =='topicOne') {
          this.topicMsg.topic_url = msg.url;
        }
        if(this.chooseImg =='topicTwo'){
          this.topicMsg.topic_url_2 = msg.url;
        }
        if(this.chooseImg=='video'){
            this.videoMsg.video_pic_url = msg.url;
        }
        this.choicImg = false;
      },
      Selectvideo(val) {
        this.videoMsg.video_url = val.Path;
        this.isChoiceVideo = false;
      },


    },
    mounted() {
      this.GetMiniProgramMallIndex();
    }
  };

</script>
<style>
.module-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.HomePage .module-name {
    font-size: 12px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, .2);
    color: #ffffff;
    text-align: center;
}
.HomePage .el-tabs__nav-scroll{
    padding-left:20px;
}
.button-item {
    padding: 9px 25px;
    position: absolute;
    bottom: -52px;
    left: 0;
}
.HomePage .home_Add{
    height: 33px; 
    width: 33px; 
    border-radius: 50%; 
    background-color: rgb(238, 249, 241); 
    color: rgb(128, 194, 105); 
    text-align: center; 
    line-height: 33px;
}
.module-box .edit-box {
    height: 55px;
    border-top: 1px dotted #eeeeee;
    color: blue;
    cursor: pointer;
    padding: 0 20%;
}
.module-box .name-box {
    height: 70px;
}
.module-item-box {
    width: 44%;
    max-width: 160px;
    height: 125px;
    font-size: 16px;
    margin: 5px 10px;
    border: 1px solid #eeeeee;
}
  .HomePage .module-box {
    height: auto;
    overflow: auto;
    padding: 5px 10px 20px;
  }
  .home_Content {
    height: 100%;
    position: relative;
    width: 100%;
    overflow: visible;
    margin-bottom: 70px;
  }

  .HomePage .mobile-box .show-box {
    height: 606px;
    width: 378px;
    overflow: auto;
  }

  .HomePage .content {
    margin-top: 12px;
    box-sizing: border-box;
  }

  .HomePage .mobile-box {
    width: 400px;
    height: 740px;
    padding: 35px 11px;
    background-color: #fff;
    border-radius: 30px;
    background-size: cover;
    position: relative;
    font-size: .85rem;
    margin-right: 20px;
    z-index: 3;
  }

  .HomePage .top-bar {
    width: 375px;
    height: 64px;
    position: relative;
    background: url(../../assets/img/head.png) center no-repeat;
  }

  .HomePage .top-bar div {
    position: absolute;
    text-align: center;
    width: 378px;
    font-size: 16px;
    font-weight: 600;
    height: 64px;
    line-height: 88px;
  }
  .HomePage .video_msg{
    display: inline-block;
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow:ellipsis;
  }
</style>
