<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>
        <el-col :span="24">
          <el-form-item>
            <p class="text-warning">※ {{$t('objFill.v101.wutuzbxians')}}</p>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row class="row">
        <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-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-row>
      <el-row style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
        <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
          <div class="webSliderDiv" style="width: 100px;height: 100px;">
            <el-upload :http-request="UploadAttachmentCover" :multiple="true"
              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
              <img v-if="plugData.CoverImg" :src="plugData.CoverImg" 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.CoverImg=''"></i>
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <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-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-row>
      <table>
        <tbody v-for="(item,index) in plugData.NavList" :key="index">
          <tr>
            <td class="caidantext">
              {{$t('objFill.caidan')}}{{index+1}}:
            </td>
            <td></td>
            <td class="rowEnd">
              <div>
                <el-tooltip class="item" effect="dark" :content="'+ '+$t('objFill.caidan')" placement="top">
                  <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addMenu(1)"></el-button>
                </el-tooltip>
                <el-tooltip v-show="plugData.NavList.length>1" class="item" effect="dark" :content="'- '+$t('objFill.caidan')" placement="top">
                  <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="delMenu(1,index)"></el-button>
                </el-tooltip>
              </div>
            </td>
          </tr>
          <tr>
            <td class="w350">
              <el-form-item :label="$t('objFill.v101.fengmian')" style="margin-bottom: 0;">
                <div class="webSliderDiv" @click="clickIndex=index">
                  <el-upload v-if="item.FileType==1" :http-request="UploadAttachment" :multiple="true"
                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                    <img v-if="item.FileUrl" :src="item.FileUrl" 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="item.FileUrl=''"></i>
                    </div>
                  </el-upload>
                  <el-upload v-if="item.FileType==2" :http-request="UploadAttachment" :multiple="true"
                    accept="video/mp4,video/webm" :show-file-list="false" action="">
                    <video v-if="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>
              <el-form-item :label="$t('objFill.v101.lianjie')+(index+1)" style="margin-bottom: 0;">
                <el-input type="text" v-model="item.LinkUrl"></el-input>
              </el-form-item>
              <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>
            <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>
              <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>
          </tr>
        </tbody>
      </table>
    </el-form>
  </div>
</template>
<script>
  export default {
    props: ["plugData"],
    data() {
      return {
        clickIndex: 0, //点击图片索引
        typeList: [
          {Name: this.$t('system.label_img'),Id: 1},
          {Name: this.$t('objFill.shipin'),Id: 2},
        ],
        clickType: 0,//1主菜单  2二级菜单
        MenuList:{
          FileType: 1,
          FileUrl: '',
          LinkUrl: '',
          MenuName: '',
          MenuSubName: '',
        },
        SubMenuList: {
          FileType: 1,
          FileUrl: '',
          LinkUrl: '',
          MenuName: '',
          MenuSubName: '',
          SubMenuList: null,
        }
      };
    },
    created() {

    },
    methods: {
      addMenu(type,index){
        this.clickType = type
        this.plugData.NavList.push(JSON.parse(JSON.stringify(this.MenuList)))
      },
      delMenu(type,index,i){
        this.clickType = type
        if(type==1){
          this.plugData.NavList.splice(index,1)
        }
      },
      //上传图片
      UploadAttachment(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/WebSite/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.plugData.NavList[this.clickIndex].FileUrl = imgUrl;
        });
      },
      UploadAttachmentCover(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/WebSite/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.plugData.CoverImg = imgUrl;
        });
      },
    },
    mounted() {}
  };

</script>
