<template>
  <div class="layout-no-cols" @keyup.enter="getList">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <el-row class="row-bg">
      <el-col :span="10" :offset="14" class="dropdown-search-box-r search-bar-algin-toolbar">
        <el-input v-model="name" placeholder="请输入粉丝名称" @keyup.enter.native="getList" size="medium">
          <el-select placeholder="性别" clearable slot="prepend" v-model="gender" @change="getList">
            <el-option v-for="item in genderList" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-input>
        <span class="search-icon"><i class="fa fa-search" @click="getList" title="查询"></i></span>
      </el-col>
    </el-row>
    <el-list-view ref="multipleTable" :data-read-url="getData" :page-size="20" :layout="listLayout">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row :gutter="20" align="middle" type="flex">
            <el-col :span="3" class="item-logo-ct">
              <div class="HeadImage" :style="{backgroundImage:'url('+row.headImage+'),url(assets/images/picture404-'+((row.ID||row.$index) % 4)+'.png)'}"></div>
            </el-col>
            <el-col :span="20" class="item-info-ct">
              <el-row>
                <el-col :span="8" class="item-logo-ct">
                  粉丝昵称：{{row.name}}
                </el-col>
                <el-col :span="6" class="item-logo-ct">
                  性别：{{row.gender|decodeGender}}
                </el-col>
                <el-col :span="10" class="item-logo-ct">
                  所在地：{{row.location}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="item-logo-ct">
                  粉丝数：{{row.followers}}
                </el-col>
                <el-col :span="6" class="item-logo-ct">
                  关注数：{{row.friends}}
                </el-col>
                <el-col :span="10" class="item-logo-ct">
                  微博数:{{row.statuses}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="item-logo-ct">
                  收藏数:{{row.favourites}}
                </el-col>
                <el-col :span="6" class="item-logo-ct">
                  是否加V：{{row.verified === 0 || row.verified === '' ? "否" : "是"}}
                </el-col>
                <el-col :span="10" class="item-logo-ct">
                  主页：
                  <a :href="row.profileURL" target="_blank">{{row.profileURL}}</a>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="item-logo-ct">
                  个人描述:{{row.description}}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  filters: {
    decodeGender: function(val) {
      switch (val) {
        case 'm':
          return '男'
        case 'f':
          return '女'
        case 'n':
          return '未知'
        default:
          return val
      }
    },
    fixDateTime: function(val) {
      return val ? util.formatDate(val, 'yyyy-MM-dd HH:mm') : '　'
    }
  },
  props: {
    aid: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      listLayout: 'list',
      name: '',
      gender: '',
      genderList: [{ label: '男', value: 'm' }, { label: '女', value: 'f' }, { label: '未知', value: 'n' }],
      select: []
    }
  },

  created() {
    this.$parent.activeMenu = '粉丝管理'
  },
  methods: {
    getData() {
      let params = { name: this.name, gender: this.gender }
      return [`/ui/weibo/mediaaccounts/${this.aid}/fans`, { params }]
    },
    getList() {
      this.$refs.multipleTable.getData()
    }
  }
}
</script>
<style>
.self-table .el-table__header .el-input {
  padding-left: 0;
}

.self-table th > .cell .el-select {
  float: right;
  padding: 0;
}
</style>
<style scoped>
.col-wrap {
  background: white;
  flex-basis: 350px;
  max-width: none;
  flex-shrink: 0;
  position: relative;
}

.content-input-wrap {
  color: #999;
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
}

.page {
  float: right;
}

.div-scroll {
  height: 350px;
  overflow: auto;
}

.search-input {
  display: inline-block;
  width: 260px;
}

.summary {
  line-height: 1.5;
  min-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.datetime {
  text-align: right;
  color: #bbb;
}

.el-list-view.grid .item-logo-ct,
.el-list-view.grid .item-info-ct {
  float: none;
  width: 100%;
}

.el-list-view.grid .item-info-ct {
  padding: 5px 15px !important;
}

.HeadImage {
  width: 80px;
  height: 0;
  padding-bottom: 80px;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  margin: auto;
}
</style>
