<style>
@import "../../assets/css/advert/advmanager";
</style>
<template>
  <div class="advmanager-box">
    <div class="content" style="top: 50px">
      <!-- <ul>
                <li v-for='item in addatas' :key="item.id">
                    <div class="img-box">
                        <img :src="item.advertisingPicUrlStr" />
                        <span class="free"><i class="el-icon-share"></i> 0</span> 
                        <div class="zezhao">
                            <a :href='`/#/advert?id=${item.id}`'><i class="el-icon-edit" title="修改"></i></a>
                            <a :href='item.advertisingPicUrlStr' download="广告图.png"><i class="el-icon-download" title="下载"></i></a>
                            <i class="el-icon-delete" title="删除" @click="deleteItem(item)"></i>
                        </div>
                    </div>
                </li>
            </ul> -->
      <vueWaterfallEasy
        v-if="addatas.length != 0"
        ref="waterfall"
        :imgsArr="addatas"
        @scrollReachBottom="handleCurrentChange"
        :maxCols="7"
        :imgWidth="208"
        :enablePullDownEvent="true"
      >
        <template slot-scope="props">
          <span class="free"><i class="el-icon-share"></i> 0</span>
          <div class="zezhao">
            <a :href="`/#/advert?id=${props.value.id}`"
              ><i class="el-icon-edit" title="修改"></i
            ></a>
            <a :href="props.value.advertisingPicUrlStr" download="广告图.png"
              ><i class="el-icon-download" title="下载"></i
            ></a>
            <i
              class="el-icon-delete"
              title="删除"
              @click="deleteItem(props.value)"
            ></i>
          </div>
        </template>
      </vueWaterfallEasy>

      <div
        v-if="addatas.length == 0"
        style="width: 100%; margin-top: 50px; text-align: center; color: #ccc"
      >
        <i class="iconfont icon-kong" style="font-size: 120px"></i><br />
        还没有广告哦，<a href="/#/advert" style="color: rgb(0, 129, 255)"
          >立即制作</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  data() {
    return {
      lines: [],
      teams: [],
      modelTeams: [],
      countrys: [],
      addatas: [],
      pageIndex: 0,
      pageSize: 15,
      total: 0,
      msg: {
        lineId: "0",
        teamId: "0",
        countryId: "0",
        type: "0",
      },
      user: {},
      model: {},
      isAdd: false,
      uploadType: 0,
    };
  },
  components: {
    vueWaterfallEasy,
  },
  mounted() {
    this.user = JSON.parse(window.localStorage.userInfo);
    this.getline();
    this.getcountry();
    this.getaddatas(0);
  },
  methods: {
    deleteItem(x) {
      this.apipost(
        "Advertising_post_Remove",
        { ID: x.id },
        (x) => {
          if (x.data.resultCode == 1) {
            this.$message.Success(this.$t('tips.shanchuchenggong'));
            this.getaddatas(0);
          } else {
            this.$message.error(x.data.message);
          }
        },
        (err) => {}
      );
    },

    handleCurrentChange(val) {
      this.pageIndex++;
      this.getaddatas(1);
    },
    getaddatas(type) {
      if (type == 0) {
        this.pageIndex = 0;
      }
      let msg = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      this.apipost(
        "Advertising_post_GetPageList",
        msg,
        (x) => {
          x.data.data.pageData.forEach((x) => {
            x.src = `${x.advertisingPicUrlStr}?x-oss-process=image/resize,w_200`;
          });
          if (x.data.data.pageData.length == 0) {
            this.$refs.waterfall.waterfallOver();
          }
          this.addatas = [];
          this.addatas = this.addatas.concat(x.data.data.pageData);
          this.total = x.data.data.pageCount;
        },
        (err) => {}
      );
    },
    getcountry() {
      this.apipost(
        "dict_post_Destination_GetCountry",
        {},
        (x) => {
          this.countrys = x.data.data;
        },
        (err) => {}
      );
    },
    getteam() {
      let msg = {
        RB_Branch_id: this.user.RB_Branch_id,
        isTOOP: 1,
        lineID: this.msg.lineId,
      };
      this.apipost(
        "team_post_GetList",
        msg,
        (x) => {
          this.teams = x.data.data;
          if (x.data.data.length > 0) this.msg.teamId = x.data.data[0].LtID;
        },
        (err) => {}
      );
    },
    changeLine() {
      this.teams.splice(0, this.teams.length - 1);
      if (this.msg.lineId !== 0) {
        this.getteam();
      }
    },
    changeLineForm() {
      this.modelTeams.splice(0, this.modelTeams.length - 1);
      if (this.model.LineID !== 0 && this.model.LineID != "") {
        let msg = {
          RB_Branch_id: this.user.RB_Branch_id,
          isTOOP: 1,
          lineID: this.model.LineID,
        };
        this.apipost(
          "team_post_GetList",
          msg,
          (x) => {
            this.modelTeams = x.data.data;
            if (x.data.data.length > 0)
              this.model.SeriesID = x.data.data[0].LtID;
          },
          (err) => {}
        );
      }
    },
    getline() {
      let msg = { pageIndex: 0, pageSize: 100 };
      this.apipost(
        "line_post_GetPageList",
        msg,
        (x) => {
          this.lines = x.data.data.pageData;
        },
        (err) => {}
      );
    },
  },
};
</script>