<template>
  <div>
    <el-dialog title="选择图文素材" :visible.sync="isShow" @open="dialogOpen" class="media-select-dialog">
      <el-radio-group v-model="mediaRadio" class="table-group">
          <div  v-for="item in mediaList" :key="item.ID" @click="seletMedia(item.ID)" class="table-group-item">
          <el-card class="table-card">
            <div v-for="val in item.data" :key="val.ID">
              <div v-if="val.rowNo === 0" class="appmsg-title">
                <a href="javascript:void(0);" onclick="return false;" target="_blank">
                  <h4 class="appmsg_title">{{val.title}}</h4>
                </a>
                <img :src="val.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture.png'" width="208" height="165px" />
              </div>
              <div v-else class="appmsg-div">
                <el-row>
                  <el-col :span="16">
                    <a onclick="return false;" href="javascript:void(0);" target="_blank">{{val.title}}</a>
                  </el-col>
                  <el-col :span="8">
                    <img :src="val.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture'+((row.ID||row.$index) % 4)+'.png'" width="78" height="78" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="bottom-div">
              <el-radio :key="item.ID" :label="item.ID"></el-radio>
              <span style="font-size:12px;margin:0 5px 0 10px">添加时间: &nbsp; {{item.addTime}}</span>&nbsp;
            </div>
          </el-card>
          </div>
        </el-radio-group>
        <div class="page">
          <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="pageIndex" :page-sizes="[10, 15, 20, 30, 50]"
            :page-size="pageSize" layout="total, sizes , prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      mediaList: [],
      mediaRadio: null
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.pageIndex = 1
      this.pageSize = 10
      this.total = 0
      this.mediaList = []
      this.mediaRadio = null
      this.getMediaListData()
    },
    seletMedia(ID) {
      this.mediaRadio = ID
    },
    sizeChange(val) {
      this.pageSize = val
      this.getMediaListData()
    },
    currentChange(val) {
      this.pageIndex = val
      this.getMediaListData()
    },
    async getMediaListData() {
      let weiXinID = this.$route.params.weiXinID
      let res = await axios.get('/ui/wechat/medias', {
        params: {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          title: this.searchTitle,
          weiXinID
        }
      })
      this.mediaList = res.data.data
      this.total = res.data.total
      this.mediaList.forEach(async o => {
        let res = await axios.get('/ui/wechat/medias/getarticles', {
          params: { ID: o.ID }
        })
        Vue.set(o, 'data', res.data.data)
      })
    },
    confirm() {
      if (!this.mediaRadio) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      this.$emit('callback', this.mediaRadio)
      this.isShow = false
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style>
/* 在一般情况下dialog宽为800像素，在逻辑分辨率480像素以下dialog宽为96% */

.media-select-dialog .el-dialog {
  width: 800px;
}

@media (max-width: 480px) {
  .media-select-dialog .el-dialog {
    width: 96%;
  }
}
.bottom-div .el-radio__label {
  display: none;
}
</style>
<style scoped>
.table-group {
  width: 100%;
  height: 500px;
  overflow: auto;
}

.table-group-item {
  max-width: 278px;
  margin: 0 0 20px 20px;
  float: left;
}

.appmsg-title {
  position: relative;
  margin: 0 15px 15px 15px;
}

.appmsg-title a {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  width: 100%;
}

.appmsg_title {
  background: rgba(0, 0, 0, 0.6) !important;
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 15px 8px 10px 8px;
}

.appmsg-div {
  padding: 15px;
  border-top: 1px solid #ccc;
}

.appmsg-div a {
  font-size: 16px;
  padding: 0px 10px 0 0;
  display: block;
  color: #8d8d8d;
  line-height: 24px;
}

.appmsg-div a:hover {
  color: black;
  text-decoration: none;
}

.appmsg-div img {
  float: right;
}

.bottom-div {
  overflow: hidden;
  margin: 13px 0 0 5px;
  line-height: 12px;
}

.page {
  text-align:right;
  padding:5px 10px 0 0;
}
</style>
