<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.key=='video'&& 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" @click="ShowDialog(item)" 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 PlusInData">
                      <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>
                      </div>
                    </template>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="商品分类" name="second">
                  <div flex="wrap:wrap" class="module-box">
                    <template v-for="item in PlusInData">
                      <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">
                  <div flex="wrap:wrap" class="module-box">
                    <template v-for="item in PlusInData">
                      <div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index"
                        v-if="item.key=='block'">
                        <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="fourth">
                  <div flex="wrap:wrap" class="module-box">
                    <template v-for="item in PlusInData">
                      <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" @click="SaveHomeData()">保存</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" @click="choicImg=true,chooseImg='notice'">选择文件</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="专题1图标" 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 v-if="topicMsg.topic_num==2" label="专题2图标" prop="topic_url_2">
          <el-tooltip class="item" effect="dark" content="建议尺寸104*32" 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-item label="专题标签" prop="label_url">
          <el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
            <el-button size="mini" @click="choicImg=true,chooseImg='topicLabel'">选择文件</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.label_url) + ')'}">
              <i v-if="topicMsg.label_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="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" @click="choicImg=true,chooseImg='couponOne'">选择文件</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" @click="choicImg=true,chooseImg='couponTwo'">选择文件</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 chooseMenu from "../common/chooseMenu.vue";
  import draggable from "vuedraggable"
  export default {
    data() {
      return {
        //选择图片
        chooseImg: '',
        //导航图标
        isShowNav: false,
        //公告
        isShowNotice: false,
        //专题
        isShowTotic: false,
        //领券中心
        isShowCoupon: false,
        //选图片
        choicImg: false,
        //视频
        isShowVideo: false,
        isChoiceVideo: false,
        radio: '4',
        activeName: 'first',
        dataList: [],
        //导航图标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: '' //已领取图
        },
        //插件
        PlusInData: [],
        //公告验证
        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,
      chooseMenu,
      Choosevideo
    },
    created() {

    },
    methods: {
      //点击添加组件
      addPlugn(item) {
        this.dataList.push(JSON.parse(JSON.stringify(item)));
      },
      //删除插件
      delPlugn(index) {
        this.dataList.splice(index, 1);
      },
      //编辑
      ShowDialog(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.couopnMsg = item;
            break;
          case "video":
            this.isShowVideo = true;
            this.videoMsg = item;
            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;
          }
        })
        this.isShowCoupon = false;
      },
      //保存公告
      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;
          }
        })
        this.isShowNotice = false;
      },
      //确定保存专题
      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;
          }
        })
        this.isShowTotic = false;
      },
      GetMiniProgramMallIndex() {
        this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
          if (res.data.resultCode == 1) {
            this.PlusInData = res.data.data.PlusInData;
            if (res.data.data.HomeDataList && res.data.data.HomeDataList.length > 0) {
              this.dataList = res.data.data.HomeDataList;;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //保存视频
      saveVideo(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.baocunVideo();
          } else {
            return false;
          }
        });
      },
      baocunVideo() {
        this.isShowVideo = false;
      },
      //选择图片
      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 == 'topicLabel') {
          this.topicMsg.label_url = msg.url;
        }
        if (this.chooseImg == 'video') {
        
          this.videoMsg.video_pic_url = msg.url;
        }
        if (this.chooseImg == 'notice') {
          this.noticeMsg.notice_url = msg.url;
        }
        if (this.chooseImg == 'couponOne') {
          this.couopnMsg.coupon_not_url = msg.url;
        }
        if (this.chooseImg == 'couponTwo') {
          this.couopnMsg.coupon_url = msg.url;
        }
        this.choicImg = false;
      },

      //选择视频文件
      Selectvideo(val) {
 
        this.videoMsg.video_url = val.Path;
        this.isChoiceVideo = false;
      },
      //保存数据
      SaveHomeData() {
        var msg = {
          MallBaseId: this.getLocalStorage().MallBaseId,
          HomeDataList: this.dataList
        };
        this.apipost("/api/Tenant/SetMiniProgramMallHome", msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.GetMiniProgramMallIndex();
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    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>
