<template>
  <view class="latest-content_box">
    <!-- 为了方便审核  showGlInfo == 0 showGlInfo应该等于0  -->
    <view class="shop-list_box" v-if="showGlInfo == 0">
      <template v-if="!$util.isEmpty(list)">
        <view
          :key="item.id"
          @click="pageTo({
              url: '/pages/home/index?account',
              type:4,
              query: {
                account: item.id
              }
            })"
          v-for="item in list"
        >
          <!-- <app-avatar-module :src="item.shopImg" /> -->
          <image :src="item.avatar"></image>
          <view class="tit">
            {{item.showName}}
          </view>
        </view>
      </template>
      <div v-else>
        暂无数据
      </div>
    </view>
    <div class="app-main app-content" v-else>
    <app-swiper
      :list="ad"
    />
    <div class="shop-wrap">
      <div class="shop-tit">{{ shop.name }}</div>
      <div>厦门市国兰花尚文化传播有限公司，于2010年由名师游俊涛老师、姜祖岚老师凭借18年的花艺资质，10年的教学经验，创办的花艺培训学校，每年都有几百名来自全国各地的学员出师，花店开遍福建省及全国各地，多位学员已成为行业中的佼佼者。。</div>
    </div>
    <div class="list-content">
      <tui-list-view class="tui-list-view">
        <tui-list-cell
          :lineLeft="false"
          :lineRight="false"
          padding="26rpx 30rpx 26rpx 0"
          class="tui-list"
        >
          <div class="list-wrap">
            <div class="list-label">营业时间</div>
            <div class="list-val">{{ shop.openTime || '08:00-22:00' }}</div>
          </div>
        </tui-list-cell>
        <tui-list-cell
          @click="phoneCall"
          :lineLeft="false"
          :lineRight="false"
          padding="26rpx 30rpx 26rpx 0"
          class="tui-list"
        >
          <div class="list-wrap">
            <div class="list-label">联系电话</div>
            <div class="list-val">{{ shop.telephone || '18030142050' }}</div>
          </div>
          <div class="list-icon">
            <i
              class="iconfont iconditu"
              style="font-size:36rpx;"
            ></i>
          </div>
        </tui-list-cell>
        <tui-list-cell
          @click="goNavBtn"
          :lineLeft="false"
          :lineRight="false"
          padding="26rpx 30rpx 26rpx 0"
          class="tui-list"
        >
          <div class="list-wrap">
            <div class="list-label">门店地址</div>
            <div class="list-val">{{ shop.fullAddress || '暂无' }}</div>
          </div>
          <div class="list-icon">
            <i
              class="iconfont icondianhua"
              style="font-size:36rpx;"
            ></i>
          </div>
        </tui-list-cell>
      </tui-list-view>
    </div>
  </div>
  </view>
</template>

<script>
import AppSwiper from "@/components/app-swiper";
import TuiListCell from "@/components/plugin/list-cell";
import TuiListView from "@/components/plugin/list-view";
import AppActivilyCoupon from "@/components/module/app-activily-coupon";
import { recentShop } from "@/api/user";
import { share } from "@/mixins";
import AppAvatarModule from "@/components/module/app-avatar";
import { mapGetters } from 'vuex'
export default {
  name: "recent",
  components: { 
    AppAvatarModule, 
    AppSwiper,
    TuiListView,
    TuiListCell,
    AppActivilyCoupon },
  mixins: [share],
  data () {
    return {
      list: [],
      showGlInfo: 0,
      ad: [
        {
          "img":`${this.$constant.imgUrl}/uploads/12358/202005/30/73ef244f75d985e5295c6481a693fd23.jpeg`
        },
        {
          "img":`${this.$constant.imgUrl}/uploads/12358/202005/30/3bba7b038c37bf76332db788ce9bd6aa.jpeg`
        },
        {
          "img":`${this.$constant.imgUrl}/uploads/12358/202005/30/7df62ab2bf506b3caeb3b946bb7c4653.jpeg`
        },
        {
          "img":`${this.$constant.imgUrl}/uploads/12358/202005/30/e6ca9d6d4265674b79cc52579951fba3.jpeg`
        }]
    };
  },
  computed: {
    ...mapGetters({ userInfo: "getUser" })
  },
  onLoad () {
  },
  methods: {
    async init () {
      try {
        const { data } = await recentShop({})
        this.list = data.list
        this.showGlInfo = data.showGlInfo
      } catch (e) {
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop-title_box {
  color: #333333;
  font-size: 30upx;
  font-weight: 600;
  padding: 48upx 0 80upx 40upx;
}
.shop-list_box {
  padding: 0 20upx;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  // flex-wrap: wrap;
  & > view {
    width: 150upx;
    margin: 0 10upx;
    margin-bottom: 70upx;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    & > .tit {
      vertical-align: middle;
      display: inline-block;
      text-align: center;
      margin-top: 30upx;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    & > image {
      display: inline-block;
      vertical-align: middle;
      width: 100upx;
      height: 100upx;
      border-radius: 50%;
      margin: 0 auto;
    }
  }
}
.app-footer {
  font-size: 28upx;
  & .des {
    & > text {
      color: #3385ff;
      display: inline-block;
      margin-left: 3upx;
    }
    & .iconfont {
      color: #3385ff;
      font-size: 22upx;
      margin-left: 2upx;
    }
  }
}
.shop-wrap {
  padding: 40px 20px;
  color: $fontColor3;
  background-color: #fff;
  margin-bottom: 20px;
  .shop-tit {
    font-size: 38px;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
  }
}
.list-content {
  background-color: #fff;
  .tui-list {
    width: calc(100% - 20px);
    @include disFlex(center, space-between);
    // padding-left: 0 !important;
    margin-left: 20px;
    .list-wrap {
      width: calc(100% - 40px);
      @include disFlex(center, flex-start);
      color: $fontColor3;
      .list-label {
        width: 150px;
        color: #333;
        // margin-right: 40px;
      }
      .list-val {
        width: calc(100% - 150px);
      }
    }
    .list-icon {
      margin-right: 10px;
      .iconfont {
        color: $mainColor;
        font-weight: bold;
      }
    }
  }
}
</style>