<style scoped>
  .WebSite_slider .text-warning {
    color: #8a6d3b;
  }

  .WebSite_slider .webSliderDiv {
    width: 150px;
    line-height: 0;
    height: 100px;
    overflow: hidden;
    /* height: 234px; */
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
  }

  .WebSite_slider .webSliderDiv .web_imgUrl {
    width: 100%;
    height: 100%;
  }

  .WebSite_slider .webSliderDiv .addIconDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .WebSite_slider .webSliderDiv i {
    font-size: 50px;
    color: #d1d1d1;
    cursor: pointer;
  }

  .webSliderDiv .addIconDiv:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
  }

  /deep/.WebSite_slider .el-form-item__content {
    line-height: 20px;
  }

  .caidantext {
    font-size: 16px;
    font-weight: bold;
    color: #f45c43;
  }

  .caidantext.caidantext2 {
    color: dodgerblue;
  }

  .rowSbAc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .rowEnd {
    display: flex;
    flex-direction: row;
    justify-content: end;
  }

  .flex {
    flex: 1;
  }

</style>
<template>
  <div class="WebSite_slider">
    <el-form label-width="100px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('objFill.v101.zhubiaoti')">
            <el-input type="text" v-model="plugData.Title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('objFill.fubiaoti')">
            <el-input type="text" v-model="plugData.SubTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('objFill.v101.beijinse')">
            <el-color-picker style='vertical-align: middle;' v-model="plugData.BgColor"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="Web LOGO" style="margin-bottom: 0;">
            <div class="webSliderDiv" style="width:100px;height:100px;">
              <el-upload :http-request="UploadAttachmentLogo"
              :multiple="true"
                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                <img v-if="plugData.Logo" :src="plugData.Logo" class="web_imgUrl" alt="" />
                <div class="addIconDiv">
                  <i class="web_addImg iconfont icon-img_haha"></i>
                  <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
                    @click.stop="plugData.Logo=''"></i>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Mobile LOGO" style="margin-bottom: 0;">
            <div class="webSliderDiv" style="width: 100px;height:100px;">
              <el-upload :http-request="UploadAttachmentMLogo" :multiple="true"
                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                <img v-if="plugData.MLogo" :src="plugData.MLogo" class="web_imgUrl" alt="" />
                <div class="addIconDiv">
                  <i class="web_addImg iconfont icon-img_haha"></i>
                  <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
                    @click.stop="plugData.MLogo=''"></i>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <!--导航菜单-->
      <el-tabs v-model="activeName" type="border-card" :before-leave="beforeLeave" style="margin-top:10px;"
        @tab-remove="removeTab">
        <el-tab-pane :key="index" v-for="(item,index) in plugData.MenuList" :label="$t('objFill.caidan')+(index+1)"
          :name="index.toString()" :closable="true">
          <table>
            <tr>
              <td>
                <el-form-item :label="$t('objFill.v101.fengmian')+$t('system.query_type')+(index+1)"
                  style="margin-bottom: 0;">
                  <el-select v-model="item.FileType" style="width:150px;">
                    <el-option v-for="item in typeList" :key="item.Id" :label="item.Name" :value="item.Id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
              <td>
                <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)">
                  <el-input type="text" v-model="item.MenuName" style="width:227px;"></el-input>
                  <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(1,index)">
                  </el-button>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td rowspan="2">
                <el-form-item :label="$t('objFill.v101.fengmian')+(index+1)" style="margin-bottom: 0;">
                  <div class="webSliderDiv" @click="menuIndex=index">
                    <el-upload :http-request="(file)=>UploadAttachment(file,item.FileType)"
                    :before-upload="(file)=>beforeUploadVideo(file,item.FileType)"
                    :multiple="false" :accept="getAccept(item.FileType)"
                      :show-file-list="false" action="">
                      <img v-if="item.FileType==1&&item.FileUrl" :src="item.FileUrl" class="web_imgUrl" alt="" />
                      <video v-if="item.FileType==2&&item.FileUrl" :src="item.FileUrl" class="web_imgUrl"></video>
                      <div class="addIconDiv">
                        <i class="web_addImg iconfont icon-img_haha"></i>
                        <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
                          @click.stop="item.FileUrl=''"></i>
                      </div>
                    </el-upload>
                  </div>
                  <!-- <div v-if="plugData.Type==1">{{$t('objFill.v101.tupiqscsqin')}}</div>
                  <div v-else>{{$t('objFill.v101.tupiqscersw')}}</div> -->
                </el-form-item>
              </td>
              <td>
                <el-form-item :label="$t('objFill.fubiaoti')+(index+1)" style="margin-bottom: 0;">
                  <el-input type="text" v-model="item.MenuSubName"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)" style="margin-bottom: 0;">
                  <el-input type="text" v-model="item.LinkUrl">
                    <el-button slot="append" icon="el-icon-search" @click="ShowMenuDialog(item)"></el-button>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>{{$t('objFill.v101.zicaidan')}} &nbsp; <el-tooltip class="item" effect="dark"
                  :content="'+ '+$t('objFill.v101.zicaidan')" placement="top">
                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(2,index)">
                  </el-button>
                </el-tooltip>
              </td>
              <td>
              </td>
            </tr>
            <tbody v-for="(sub,subIndex) in item.SubMenuList" :key="`m1_i_`+index+`s_`+subIndex"
              style="border-radius:5px; border:1px solid #ccc;margin-bottom:5px;margin-top:5px;">
              <tr>
                <td>
                  <el-form-item :label="$t('objFill.v101.fengmian')+$t('system.query_type')+(index+1)+`-`+(subIndex+1)"
                    style="margin-bottom: 0;">
                    <el-select v-model="sub.FileType" style="width: 150px;">
                      <el-option v-for="item in typeList" :key="item.Id" :label="item.Name" :value="item.Id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)+`-`+(subIndex+1)"
                    style="margin-bottom: 0;">
                    <el-input type="text" v-model="sub.MenuName" style="width:227px;"></el-input>
                    <el-button v-show="subIndex!=0" type="danger" icon="el-icon-minus" size="mini" circle
                      @click="delMenu(2,index,i)">
                    </el-button>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td rowspan="2">
                  <el-form-item :label="$t('objFill.v101.fengmian')+(index+1)+`-`+(subIndex+1)" style="margin-bottom: 0;">
                    <div class="webSliderDiv" @click="menuIndex=index,subMenuIndex=subIndex">
                      <el-upload
                      :before-upload="(file)=>beforeUploadVideo(file,sub.FileType,1)"
                      :http-request="(file)=>UploadAttachment2(file,sub.FileType)" :multiple="true" :accept="getAccept(sub.FileType)"
                        :show-file-list="false" action="">
                        <img v-if="sub.FileType==1&&sub.FileUrl" :src="sub.FileUrl" class="web_imgUrl" alt="" />
                        <video v-if="sub.FileType==2&&sub.FileUrl" :src="sub.FileUrl" class="web_imgUrl" alt=""></video>
                        <div class="addIconDiv">
                          <i class="web_addImg iconfont icon-img_haha"></i>
                          <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
                            @click.stop="sub.FileUrl=''"></i>
                        </div>
                      </el-upload>
                    </div>
                    <!-- <div v-if="plugData.Type==1">{{$t('objFill.v101.tupiqscsqin')}}</div>
                    <div v-else>{{$t('objFill.v101.tupiqscersw')}}</div> -->
                  </el-form-item>
                </td>
                <td>
                  <el-form-item :label="$t('objFill.fubiaoti')+(index+1)+`-`+(subIndex+1)" style="margin-bottom: 0;">
                    <el-input type="text" v-model="sub.MenuSubName"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)+`-`+(subIndex+1)"
                    style="margin-bottom: 0;">
                    <el-input type="text" v-model="sub.LinkUrl">
                      <el-button slot="append" icon="el-icon-search" @click="ShowMenuDialog(sub)"></el-button>
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane key="add" name="add" @click="addMenu(1)">
          <span slot="label" style="padding:3px;font-size:20px;font-weight:bold;">
            +
          </span>
        </el-tab-pane>
      </el-tabs>
      <table style="margin-top:10px;">
        <tbody>
          <tr>
            <td class="caidantext">
              {{$t('objFill.dibudaohang')}}
            </td>
            <td></td>
            <td class="rowEnd">
              <div>
                <el-tooltip class="item" effect="dark" :content="'+ '+$t('objFill.v101.activity.lianjie')"
                  placement="top">
                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(3)"></el-button>
                </el-tooltip>
              </div>
            </td>
          </tr>
          <tr v-for="(item,index) in plugData.BottomList" :key="index">
            <td>
              <el-form-item :label="$t('objFill.v101.activity.lianjie')+$t('objFill.biaoti')+(index+1)"
                style="margin-bottom: 0;">
                <el-input type="text" v-model="item.LinkTitle"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('objFill.caidan')+$t('objFill.v101.activity.lianjie')+(index+1)"
                style="margin-bottom: 0;">
                <el-input type="text" v-model="item.LinkUrl">
                  <el-button slot="append" icon="el-icon-search" @click="ShowMenuDialog(item)"></el-button>
                </el-input>
              </el-form-item>
            </td>
            <td>
              &nbsp;
              <el-tooltip v-show="plugData.BottomList.length>1" class="item" effect="dark"
                :content="'- '+$t('objFill.v101.activity.lianjie')" placement="top">
                <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(3,index)"></el-button>
              </el-tooltip>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>
    <el-dialog :title="$t('objFill.qingxzcd')" :visible.sync="isShowMenuDialog" width="1000px" append-to-body>
      <!-- 行程选中 -->
      <chooseMenu ref="chooseMenu"></chooseMenu>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowMenuDialog = false" size="small">{{$t('pub.cancelBtn')}}</el-button>
        <el-button type="danger" size="small" @click="getMenuChoose()">{{$t('pub.sureBtn')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import chooseMenu from "../plug-in/choose_menu.vue"
  export default {
    components: {
      chooseMenu
    },
    props: ["plugData"],
    data() {
      return {
        menuIndex: 0, //点击图片索引
        subMenuIndex: 0,
        typeList: [{
            Name: this.$t('system.label_img'),
            Id: 1
          },
          {
            Name: this.$t('objFill.shipin'),
            Id: 2
          },
        ],
        clickType: 0, //1-一级菜单  2-二级菜单，3-底部导航
        //一级菜单JSON
        MenuList: {
          FileType: 1,
          FileUrl: '',
          LinkUrl: '',
          MenuName: '',
          MenuSubName: '',
          SubMenuList: [],
        },
        //耳机菜单JSON
        SubMenuList: {
          FileType: 1,
          FileUrl: '',
          LinkUrl: '',
          MenuName: '',
          MenuSubName: '',
          SubMenuList: null,
        },
        //底部导航JSON
        BottomList: {
          LinkTitle: '',
          LinkUrl: '',
        },
        clickItem: {},
        isShowMenuDialog: false, //是否显示菜单弹窗
        activeName: "0",
      };
    },
    created() {

    },
    methods: {
      getAccept(uploadType) {
        if (uploadType === 1) {
          return 'image/jpeg,image/gif,image/png,image/bmp';
        }
        if (uploadType === 2) {
          return 'video/mp4,video/webm';
        }
        return '*/*';
      },
      //删除选项卡
      removeTab(targetName) {
        var newIndex = targetName - 1;
        this.delMenu(1, newIndex);
      },
      /* 点击添加选项卡时 */
      beforeLeave(currentName, oldName) {
        var self = this;
        //重点，如果name是add，则什么都不触发
        if (currentName == "add") {
          self.addMenu(1);
          return false
        }
      },
      addMenu(type, index) {
        this.clickType = type
        if (type == 1) {
          //一级菜单
          this.plugData.MenuList.push(JSON.parse(JSON.stringify(this.MenuList)))
        } else if (type == 2) {
          //二级菜单
          this.plugData.MenuList[index].SubMenuList.push(JSON.parse(JSON.stringify(this.SubMenuList)))
        } else if (type == 3) {
          //底部导航
          this.plugData.BottomList.push(JSON.parse(JSON.stringify(this.BottomList)))
        }
      },
      //删除菜单
      delMenu(type, index, i) {
        this.clickType = type;
        var that = this;
        that.Confirm(this.$t('tips.shifoushanchu'), function () {
          //一级菜单
          if (type == 1) {
            that.plugData.MenuList.splice(index, 1)
          }
          //二级菜单
          else if (type == 2) {
            that.plugData.MenuList[index].SubMenuList.splice(i, 1)
          }
          //底部导航
          else if (type == 3) {
            that.plugData.BottomList.splice(i, 1)
          }
        });
      },
      beforeUploadVideo (file,FileType,index) { // 视频验证
        if(file.type.indexOf('video')!=-1&&FileType==1) {
          FileType=2
        }
        else if(file.type.indexOf('video')==-1&&FileType==2) {
          FileType=1
        }
        if(index){
          this.plugData.MenuList[this.menuIndex].SubMenuList[this.subMenuIndex].FileType = FileType
        }else{
          this.plugData.MenuList[this.menuIndex].FileType = FileType
        }
        if(FileType==1) return true
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -
          1) {
          this.$message.error(this.$t('objFill.qingsczqdspgs'));
          return false;
        }
        if (!isLt10M) {
          this.$message.error(this.$t('objFill.shngcspbncgs'));
          return false;
        }
      },
      //上传图片
      UploadAttachment(file,FileType) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/WebSite/";
        this.$message.info(this.$t('tips.shangchuanzhong'))
        // this.UploadSelfFileT(path, newArr, x => {
        //   var str = x.data.FilePath;
        //   var imgUrl = this.domainManager().ViittoFileUrl + str;
        //   this.plugData.MenuList[this.menuIndex].FileUrl = imgUrl;
        //   this.$message.success(this.$t('tips.scchenggong'));
        // },2);
        if(file.file.type.indexOf('video')!=-1&&FileType==1) {
          FileType=2
        }
        else if(file.file.type.indexOf('video')==-1&&FileType==2) {
          FileType=1
        }
        this.plugData.MenuList[this.menuIndex].FileType = FileType
        if(FileType==1){
          this.UploadSelfFileT(path, newArr, x => {
            var str = x.data.FilePath;
            var imgUrl = this.domainManager().ViittoFileUrl + str;
            this.plugData.MenuList[this.menuIndex].FileUrl = imgUrl;
            this.$message.success(this.$t('tips.scchenggong'));
          },2);
        }else{
          this.UploadFileToAli2024(path, newArr, x => {
            var str = x.data.FilePath;
            var imgUrl = this.domainManager().OSSUrl + str;
            this.plugData.MenuList[this.menuIndex].FileUrl = imgUrl;
            this.$message.success(this.$t('tips.scchenggong'));
          },2);
        }

      },
      UploadAttachment2(file,FileType) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/WebSite/";
        this.$message.info(this.$t('tips.shangchuanzhong'))
        if(file.file.type.indexOf('video')!=-1&&FileType==1) {
          FileType=2
        }
        else if(file.file.type.indexOf('video')==-1&&FileType==2) {
          FileType=1
        }
        this.plugData.MenuList[this.menuIndex].SubMenuList[this.subMenuIndex].FileType = FileType
        if(FileType==1){
          this.UploadSelfFileT(path, newArr, x => {
            var str = x.data.FilePath;
            var imgUrl = this.domainManager().ViittoFileUrl + str;
            this.plugData.MenuList[this.menuIndex].SubMenuList[this.subMenuIndex].FileUrl = imgUrl;
            this.$message.success(this.$t('tips.scchenggong'));
          },2);
        }else{
          this.UploadFileToAli2024(path, newArr, x => {
            var str = x.data.FilePath;
            var imgUrl = this.domainManager().OSSUrl + str;
            this.plugData.MenuList[this.menuIndex].SubMenuList[this.subMenuIndex].FileUrl = imgUrl
            this.$message.success(this.$t('tips.scchenggong'));
          },2);
        }
      },
      UploadAttachmentLogo(file) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/WebSite/";
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.plugData.Logo = imgUrl;
          this.$message.success(this.$t('tips.scchenggong'));
        },2);
      },
      UploadAttachmentMLogo(file) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/WebSite/";
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.plugData.MLogo = imgUrl;
          this.$message.success(this.$t('tips.scchenggong'));
        },2);
      },
      //显示菜单弹窗
      ShowMenuDialog(item) {
        this.clickItem = item;
        this.isShowMenuDialog = true;
      },
      //获取选中的菜单数据
      getMenuChoose() {
        var chooseMenuObj = this.$refs.chooseMenu.getChooseMenu();
        this.isShowMenuDialog = false;
        if (chooseMenuObj) {
          this.clickItem.LinkUrl = chooseMenuObj.MenuUrl;
          this.clickItem.MenuName = chooseMenuObj.MenuName;
          this.clickItem.LinkTitle = chooseMenuObj.MenuName;
        }
        this.$refs.chooseMenu.initMenuCheck();
      },
    },
    mounted() {}
  };

</script>