<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;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

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

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

  .colAs {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
  }

  .flex {
    flex: 1;
  }

  .flex-shrink {
    flex: 1;
    flex-shrink: 0;
  }

</style>
<template>
  <div class="WebSite_slider">
    <el-form label-width="100px">
      <el-row class="row" :gutter="24">
        <el-col :span="10">
          <el-form-item :label="$t('objFill.v101.zhubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
            <el-input type="text" v-model="plugData.Title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('objFill.fubiaoti')" class="flex-shrink" style="margin-bottom: 0;">
            <el-input type="text" v-model="plugData.SubTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="Mobile LOGO" style="margin-bottom: 0;">
            <div class="webSliderDiv" style="width:40px;height:40px;">
              <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" style="font-size:15px;"></i>
                  <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:8px;font-size:15px;"
                    @click.stop="plugData.MLogo=''"></i>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;"
        :gutter="24">
        <el-col :span="20">
          <el-form-item :label="$t('objFill.v101.jianjie')" class="flex" style="margin-bottom: 0;">
            <el-input type="textarea" :rows="2" v-model="plugData.Describe"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item :label="$t('objFill.v101.beijinse')" style="margin-bottom: 0;flex-shrink: 0;">
            <el-color-picker style='vertical-align: middle;' v-model="plugData.BgColor"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <table>
        <tbody v-for="(item,index) in plugData.NavList" :key="index">
          <tr>
            <td class="caidantext">
              {{$t('objFill.daohangshezhi')}}{{index+1}}:
            </td>
            <td></td>
            <td class="rowEnd">
              <div>
                <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu()"></el-button>
                <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(index)">
                </el-button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="w350" rowspan="3">
              <el-form-item :label="$t('objFill.v101.fengmian')+(index+1)" style="margin-bottom: 0;">
                <div class="webSliderDiv" @click="clickIndex=index">
                  <el-upload
                  :before-upload="(file)=>beforeUploadVideo(file,item.FileType)"
                  :http-request="(file)=>UploadAttachment(file,item.FileType)" :multiple="true"
                    accept="image/jpeg,image/gif,image/png,image/bmp" :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" 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="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 class="flex">
              <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: 100%;">
                  <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 class="colAs">
              <el-form-item :label="$t('objFill.v101.zhubiaoti')+(index+1)" style="margin-bottom: 0;">
                <el-input type="text" v-model="item.SubName"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item :label="$t('objFill.fubiaoti')+(index+1)" style="margin-bottom: 0;">
                <el-input type="text" v-model="item.SubEnName"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$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>
          </tr>
          <tr>
            <td colspan="2">
              <el-form-item :label="$t('hotel.hotel_describle')+(index+1)">
                <el-input type="textarea" :rows="2" v-model="item.SubDescribe"></el-input>
              </el-form-item>
            </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 {
        clickIndex: 0, //点击图片索引
        typeList: [{
            Name: this.$t('system.label_img'),
            Id: 1
          },
          {
            Name: this.$t('objFill.shipin'),
            Id: 2
          },
        ],
        MenuList: {
          FileType: 1,
          FileUrl: '',
          LinkUrl: '',
          MenuName: '',
          MenuSubName: '',
        },
        clickItem: {},
        isShowMenuDialog: false, //是否显示菜单弹窗
      };
    },
    created() {

    },
    methods: {
      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);
      },
      addMenu() {
        this.plugData.NavList.push(JSON.parse(JSON.stringify(this.MenuList)))
      },
      delMenu(index) {
        var that = this;
        that.Confirm(this.$t('tips.shifoushanchu'), function () {
          that.plugData.NavList.splice(index, 1)
        });
      },
      beforeUploadVideo (file,FileType) { // 视频验证
        if(file.type.indexOf('video')!=-1&&FileType==1) {
          FileType=2
        }
        else if(file.type.indexOf('video')==-1&&FileType==2) {
          FileType=1
        }
        this.plugData.NavList[this.clickIndex].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'))
        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.NavList[this.clickIndex].FileType = FileType
        if(FileType==1){
          this.UploadSelfFileT(path, newArr, x => {
            var str = x.data.FilePath;
            var imgUrl = this.domainManager().ViittoFileUrl + str;
            this.plugData.NavList[this.clickIndex].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.NavList[this.clickIndex].FileUrl = 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.SubName = chooseMenuObj.MenuName;
          this.clickItem.LinkUrl = chooseMenuObj.MenuUrl;
          if (chooseMenuObj.ImgUrl && chooseMenuObj.ImgUrl != '') {
            this.clickItem.FileUrl = chooseMenuObj.ImgUrl;
          }
        }
        this.$refs.chooseMenu.initMenuCheck();
      },
    },
    mounted() {}
  };

</script>