<template>
  <div class="AppGroupGrouping">
    <AiTopFixed>
      <u-search v-model="keyword" :clearabled="true" placeholder="请输入群名称、群主" :show-action="false" bg-color="#F5F5F5"
        search-icon-color="#999" color="#333" height="58" @search="getListInit" @clear="getListInit">
      </u-search>
    </AiTopFixed>
    <div class="list-content">
      <div class="item">
        <img src="./imgs/del-icon.png" alt="" class="group-img">
        <div class="item-right">
          <div class="group-info">
            <p>兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群</p>
            <div>3人 | 群主:谢晋</div>
          </div>
          <img src="./imgs/del-icon.png" alt="" class="del-img" @click="del()">
        </div>
      </div>
      <div class="item">
        <img src="./imgs/del-icon.png" alt="" class="group-img">
        <div class="item-right">
          <div class="group-info">
            <p>兴龙县步行街美食一群</p>
            <div>3人 | 群主:谢晋</div>
          </div>
          <img src="./imgs/del-icon.png" alt="" class="del-img">
        </div>
      </div>
    </div>
    <AiAdd @add="add"/>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '群分组',
    data() {
      return {
        keyword: ''
      }
    },
    computed: {
      ...mapState(['user']),
    },
    onShow() {
      document.title = '群分组'
    },
    methods: {
      getListInit() {
        
      },
      getTotal() {
        this.$http.post(`/app/appwxuserfamiliarityrate/wxTopStatistics`).then(res=> {
          if(res?.data) {
            this.form = {...res.data}
          }
        })
      },
      del() {
        this.$confirm('是否确认从该标签组中移除？').then(() => {
          // this.$http.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${this.info.id}`).then((res) => {
          //   if (res.code == 0) {
          //     this.$u.toast('撤回成功！')
          //     this.getDetail()
          //   }
          // })
        })
      },
      add() {
        uni.navigateTo({url: `./groupList`})
      }
    },
  }
</script>

<style lang="scss" scoped>
  .AppGroupGrouping {
    .list-content {
      margin-top: 24px;
      .item {
        background-color: #fff;
        padding: 32px 0 0 32px;
        .group-img {
          width: 112px;
          height: 112px;
          margin-right: 24px;
          vertical-align: middle;
        }
        .item-right {
          display: inline-block;
          width: calc(100% - 136px);
          padding: 0 32px 32px 0;
          border-bottom: 1px solid #ddd;
          box-sizing: border-box;
          .group-info {
            display: inline-block;
            width: calc(100% - 80px);
            vertical-align: middle;
            p {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 36px;
              color: #333;
              word-break: break-all;
              line-height: 50px;
              margin-bottom: 18px;
            }
            div {
              line-height: 20px;
              font-family: PingFangSC-Regular;
              font-size: 28px;
              color: #999;
            }
          } 
          img {
            width: 56px;
            height: 56px;
            margin-left: 24px;
            padding-top: 24px;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>
