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

  .WebSite_slider .webSliderDiv {
    width: 435px;
    line-height: 0;
    height: 129px;
    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;
  }

</style>
<template>
  <div class="WebSite_slider">
    <el-form label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('objFill.biaoti')">
            <el-input type="text" v-model="plugData.Title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <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>
      <table>
        <tbody v-for="(item,index) in plugData.Details" :key="index">
          <tr>
            <td>
              <el-form-item>
                <div class="webSliderDiv" @click="clickIndex=index">
                  <el-upload :http-request="UploadAttachment" :multiple="true"
                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                    <img v-if="item.LinkImg" :src="item.LinkImg" 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.LinkImg=''"></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.v101.lianjie')+(index+1)">
                <el-input type="text" v-model="item.LinkUrl" class="w300">
                  <el-button slot="append" icon="el-icon-search" @click="ShowMenuDialog(item)"></el-button>
                </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 {
    props: ["plugData"],
    components: {
      chooseMenu
    },
    data() {
      return {
        clickIndex: 0, //点击图片索引
        isShowMenuDialog: false, //是否显示菜单弹窗
        clickItem: {},
      };
    },
    created() {

    },
    methods: {
      //上传图片
      UploadAttachment(file) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/WebSite/";
        this.UploadSelfFileT(path, newArr, x => {
          var str = x.data.FilePath;
          var imgUrl = this.domainManager().ViittoFileUrl + str;
          this.plugData.Details[this.clickIndex].LinkImg = imgUrl;
        });
      },
      //显示菜单弹窗
      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;
          if (chooseMenuObj.ImgUrl && chooseMenuObj.ImgUrl != '') {
            this.clickItem.LinkImg = chooseMenuObj.ImgUrl;
          }
        }
        this.$refs.chooseMenu.initMenuCheck();
      },
    },
    mounted() {}
  };

</script>
