<template>
  <div style="padding:0 20px">
    <el-row :gutter="20">
      <el-col :span="8" v-for="card in list" :key="card.index" style="margin:20px 0">
        <el-card shadow="none" >
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in card.ads" :key="item.index">
              <img style="width:100%" :src="item.attinfos[0]?item.attinfos[0].url:''" alt="">
              <!-- <previewImage style="width:100%" :image="item.attinfos[0]?item.attinfos[0]:''"></previewImage> -->
            </el-carousel-item>
          </el-carousel>
          <div style="margin-top:10px">
            <p>{{card.notes}} <small style="float:right;color:#999">{{card.dimensional}}</small></p>
            <div class="flex">
              <div>
                <el-tag style="margin:10px 10px 0 0">{{card.systemclient}}</el-tag>
                <el-tag>{{card.location}}</el-tag>
              </div>
              <setting :banner="card.ads" :sys_adspaceid="card.sys_adspaceid " @onSuccess="listData"></setting>
              <!-- <i style="font-size:16px;color:#666" class="el-icon-setting"></i> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import previewImage from '@/components/previewImage/index.vue'
import setting from './modules/setting.vue'
export default {
  components:{
    setting,
    previewImage
  },
  data () {
    return {
      list:[]
    }
  },
  methods:{
    listData () {
      this.$api.requested({
        "classname": "webmanage.adspace.adspace",
        "method": "query_adspacelist",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
        }
      }).then(res=>{
        this.list = res.data
      })
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style>

</style>
<style scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* cursor: pointer; */
}
</style>