<style>
  .otherDialog .table-striped {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
  }

  .otherDialog .table-striped th,
  .otherDialog .table-striped td {
    padding: 8px;
    text-align: center;
  }

  .otherDialog .table-striped>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
  }
  .otherDialog .webSliderDiv {
    line-height: 0;
    height: 115px;
    width:400px;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
  }

  .otherDialog .webSliderDiv .el-upload {
    width: 100%;
    height: 100%;
  }

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

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

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

  .otherDialog .webSliderDiv>div {
    height: 100%;
  }
  .otherDialog .sectionImg{
    position:absolute;
    width:100%;
    height:100%;
    background-position: center;
    background-size: cover;
  }

</style>
<template>
  <div class="otherDialog">
    <el-form label-width="80px">
      <template v-if="plugData.Type==1">
        <el-row>
          <el-col :span="24">
            <el-form-item>
              {{$t('objFill.v101.chibbzhzqtzjss')}}
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="plugData.Type==2">
        <el-form-item :label="$t('objFill.v101.zhubiaoti')">
          <el-input type="text" v-model="plugData.Title"></el-input>
        </el-form-item>
        <el-form-item>
          <span style="color:#8a6d3b">{{$t('objFill.v101.weitbthwcbhzs')}}</span>
        </el-form-item>
        <table class="table-striped">
          <tr>
            <th style="width:7%">{{$t('objFill.v101.xiangci')}}</th>
            <th style="width:47%">{{$t('objFill.biaoti')}}</th>
            <th style="width:28%">{{$t('objFill.v101.shangcdan')}}</th>
            <th style="width:18%">{{$t('objFill.v101.jianshidanan')}}</th>
          </tr>
          <tr v-for="(item,index) in plugData.DownLoadList" :key="index">
            <td>{{index+1}}</td>
            <td>
              <el-input type="text" v-model="item.LinkTitle"></el-input>
            </td>
            <td>
              <el-upload :http-request="UploadAttachment" :show-file-list="false" :multiple="true" accept="" action=''>
                <el-button size="small" type="primary" @click="checkIndex=index">{{$t('tips.dianjishanhcuan')}}</el-button>
              </el-upload>
            </td>
            <td>
              <a v-if="item.LinkUrl!=''" style="color:blue" target="_blank" :href="item.LinkUrl">{{$t('sm.yulan')}}</a>
            </td>
          </tr>
        </table>
      </template>
      <template v-if="plugData.Type==3">
        <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 :label="$t('objFill.fubiaoti')">
              <el-input type="text" v-model="plugData.SubTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="plugData.Type==4">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('objFill.v101.duanluoneir')">
              <!-- <el-input type="textarea" :rows="4" v-model="plugData.ParagraphContent"></el-input> -->
              <my-edit  style="height:60vh"  v-on:edit-value="plugData.ParagraphContent  = arguments[0]" v-bind:editValue="plugData.ParagraphContent"
                    v-bind:toolbarShow="toolbar"  v-bind:referenceList="DefaultList"></my-edit>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if="plugData.Type==5">
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <div class="webSliderDiv">
                <el-upload :http-request="UploadAttachment2" :multiple="true"
                  accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                  <div class="sectionImg" :style="{backgroundImage:'url(' + plugData.ImageUrl + ')'}"></div>
                  <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.ImageUrl=''"></i>
                  </div>
                </el-upload>
              </div>
              <div>{{$t('objFill.v101.tupqscsln')}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.biaoti')">
              <el-input type="text" v-model="plugData.Title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

    </el-form>
  </div>
</template>
<script>
import MyEdit from "@/components/EditTemplate.vue";
  export default {
    props: ["plugData"],
    components:{MyEdit},
    data() {
      return {
        checkIndex: 0,
        toolbar: {
          clean: true,
          font: false, //字体
          narrative: false, //叙述,
          image:false,
          bold: true, //加粗
          underline: true, //下划线
          header1: true, //H1
          header2: true, //H2
          fontColor: false, //字体颜色
          fontBackgroundColor: false, //背景颜色
          innerHeight: '60vh'
        },
        DefaultList: [],
      };
    },
    created() {},
    methods: {
      //上传文件
      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.DownLoadList[this.checkIndex].LinkUrl = imgUrl;
          this.plugData.DownLoadList[this.checkIndex].LinkTitle=fileName;
        });
      },
      //上传图片
      UploadAttachment2(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.ImageUrl = imgUrl;
        });

      }
    },
    mounted() {

    },
  };

</script>