<style>
  .height_auto.el-select .el-input {
    height: auto
  }

  .Rotationchart .TFimgList:hover .TFIMGzhe {
    display: block;
  }

  .AdManageList .TFimgList {
    float: left;
    width: 220px;
    height: 120px;
    border-radius: 4px;
    position: relative;
    margin: 0 10px 10px 0;
    overflow: hidden;
  }

  .AdManageList .TFIMGzhe {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    text-align: center;
    line-height: 115px;
    border-radius: 4px;
    display: none;
  }

  .AdManageList .TFreupload {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    line-height: 32px;
    top: 50px;
    left: 53px;
    display: inline-block;
    text-align: center;
    background-color: gray;
    color: #fff;
  }

  .AdManageList .TFimgList:hover .TFIMGzhe {
    display: block;
  }

  .AdManageList .TFimgList img {
    width: 100%;
    height: 100%;
  }

  .AdManageList ._tit {
    padding-left: 10px;
    border-left: 3px solid #e95252;
    font-size: 16px;
    color: #000000;
  }

  .AdManageList .changeMsg li {
    float: left;
    margin-right: 30px;
    color: #666666;
  }

</style>
<template>
  <div class="flexOne AdManageList">
    <div class="query-box">
      <ul>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="IsShowBtm=true" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('hotel.hotel_SerialNumber')}}</th>
        <th>{{$t('salesModule.AdvPic')}}</th>
        <th>{{$t('ground.guanggaolianjie')}}</th>
        <th>{{$t('admin.admin_status')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in dataList">
        <td>{{item.Id}}</td>
        <td>
          <img v-if="!item.ShowImage" src="../../assets/img/bg_c3@3x.png" />
          <img v-else :src='item.ShowImage' style="width:100px;height:40px;" />
        </td>
        <td>{{item.AdLink}}</td>
        <td>{{item.StatusStr}}</td>
        <td>
          <el-button-group>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="getAdManage(item.Id)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top">
              <el-button type="danger" style="font-size: 14px;" size="mini" class="iconfont icon-quxiao1" @click="removeAdManage(item.Id)">
              </el-button>
            </el-tooltip>
          </el-button-group>
        </td>
      </tr>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>

    <div class="combottomDiv" v-if="IsShowBtm" style="left:0;">
      <el-row>
        <el-col :span="20">
          <p class="combottomTitle">{{$t('salesModule.AdvPic')}}</p>
        </el-col>
        <el-col :span="4">
          <input type="button" class="normalBtn" @click="SetAdmanage()" :value="$t('pub.saveBtn')" />
          <input type="button" class="hollowFixedBtn" @click="clearAdManage(),IsShowBtm=false" :value="$t('pub.cancelBtn')"/>
        </el-col>
      </el-row>
      <el-form label-width="80px">
        <ul class="changeMsg">
          <li>
            <el-form-item :label="$t('system.label_img')">
              <div class="TFimgList">
                <img v-if="!ShowImgUrl" src="../../assets/img/bg_c3@3x.png">
                <img v-else :src='ShowImgUrl'>
                <div class="TFIMGzhe">
                  <div class="TFreupload">
                    <el-upload :file-list="fileList" :http-request="UploadImage" :multiple="false" :limit="1"
                      accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
                      <i class="iconfont icon-Edit"></i>
                    </el-upload>
                  </div>
                </div>
              </div>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('ground.guanggaolianjie')">
              <el-input v-model="addMsg.AdLink" class="w210"></el-input>
            </el-form-item>
          </li>
        </ul>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //查询参数
        msg: {},
        addMsg: {
          Id: 0, //编号
          AdImage: "", //广告图片
          AdLink: "", //广告链接
        },
        loading: false,
        dataList: [],
        //显示底部
        IsShowBtm: false,
        fileList: [],
        //图片全路劲
        ShowImgUrl: "",
      };
    },
    mounted() {
      this.getList();
    },
    filters: {},
    methods: {
      //获取数据
      getList() {
        this.loading = true;
        this.apipost("ShopAd_get_GetAdManageListService", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data;
          } else {
            this.Error(res.data.message)
          }
        }, null);
      },
      //添加修改广告
      SetAdmanage() {
        this.apipost("ShopAd_post_SetAdManageService", this.addMsg, res => {
          if (res.data.resultCode === 1) {
            this.IsShowBtm = false;
            this.clearAdManage();
            this.getList();
          } else {
            this.Error(res.data.message)
          }
        }, null);
      },
      //情况默认值
      clearAdManage() {
        this.addMsg.Id = 0;
        this.addMsg.AdImage = "";
        this.addMsg.AdLink = "";
        this.ShowImgUrl = "";
      },
      //根据编号获取广告详情
      getAdManage(Id) {
        this.IsShowBtm = true;
        this.apipost("ShopAd_get_GetAdManageService", {
          Id: Id
        }, res => {
          if (res.data.resultCode === 1) {
            this.addMsg = res.data.data;
            if (this.addMsg.AdImage) {
              this.ShowImgUrl = this.domainManager().ViittoFileUrl + this.addMsg.AdImage;
            }
          } else {
            this.Error(res.data.message)
          }
        }, null);
      },
      //根据编号删除广告详情
      removeAdManage(Id) {
        var that = this;
        this.Confirm(this.$t('ground.shifoushancgg'), function () {
          that.apipost("ShopAd_post_RemoveAdManageService", {
            Id: Id
          }, res => {
            if (res.data.resultCode === 1) {
              that.getList();
            } else {
              that.Error(res.data.message)
            }
          }, null);
        });
      },
      //上传图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/Temporary/";
        this.UploadSelfFileT(path, newArr, x => {
          this.addMsg.AdImage = x.data.FilePath;
          this.ShowImgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
        });
      },
    }
  };

</script>