<template>
  <div class="Evaluate" :style="{paddingTop: (statusBarHeight + 94) + 'px'}">
    <div class="search">
      <div class="search-input">
        <u-search v-model="searchVal" :clearabled="true" placeholder="搜索门店名称" :show-action="false"
          bg-color="#F4F5FA" search-icon-color="#666" color="#222" height="72" @search="getListInit" @clear="getListInit">
        </u-search>
      </div>
      <div class="search-type">
        <div class="item" @click="showStoreLevel=true">
          {{searchStoreLevel.label ? searchStoreLevel.label : '按评分排序'}}<u-icon name="arrow-down" color="#999" size="28"></u-icon>
        </div>
        <div class="item">
          <AiPagePicker type="gird" @select="handleGridSelect" :params="{formType:2}">
            <span style="color:#222">{{girdInfo.girdName || '请选择网格'}}</span>
            <u-icon name="arrow-down" color="#999" size="28"></u-icon>
          </AiPagePicker>
        </div>
        <div class="item" @click="showOperatorType=true">
          {{searchOperatorType.label ? searchOperatorType.label : '经营类型'}}<u-icon name="arrow-down" color="#999" size="28"></u-icon>
        </div>
      </div>
    </div>
    <div class="list-content">
      <div class="item" @click="toStoreDetail(item.id)" v-for="(item, index) in list" :key="index">
        <div class="left">
          <image :src="item.fileUrl ? item.fileUrl : 'https://cdn.cunwuyun.cn/wechat/fd-store/shop-img.png' " alt="" mode="aspectFill">
        </div>
        <div class="right">
          <div class="right-btn" @click.stop="toEvaluateForm(item.id)">
            <div>
              <img src="https://cdn.cunwuyun.cn/wechat/fd-store/store-detail-edit-icon.png" alt="">评价
            </div>
          </div>
          <div class="store-name">{{ item.shopName }}</div>
          <div class="star-info">
            <u-icon name="star-fill" color="#FF8C19" size="24" v-for="(items, indexs) in item.xzStar" :key="indexs"></u-icon>
            <u-icon name="star-fill" color="#F0F0F0" size="24" v-for="(items, indexs) in item.wxzStar" :key="indexs"></u-icon>
            <span class="star-num">{{ item.storeScore }}</span>
          </div>
          <div class="flex-info">
            <div class="flex-item item-user">
              <p>经营者</p>
              <div>{{ item.name }}</div>
            </div>
             <div class="flex-item item-type">
              <p>经营类型</p>
              <div>{{ $dict.getLabel('operatorType', item.operatorType) }}</div>
              <span></span>
            </div>
            <div class="item-phone" v-if="item.phone" @click.stop="callPhone(item.phone)">
              <img src="https://cdn.cunwuyun.cn/wechat/fd-store/phone-icon.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-if="!list.length" />
    </div>
    <u-select v-model="showOperatorType" :list="operatorTypeDict" value-name="dictValue"
      label-name="dictName" @confirm="confirmOperatorType"></u-select>
    <u-select v-model="showStoreLevel" :list="storeLevelDict" value-name="dictValue"
      label-name="dictName" @confirm="confirmStoreLevel"></u-select>
  </div>
</template>

<script>

export default {
  name: 'Evaluate',
  appName: '我要评价',
  data() {
    return {
      list: [],
      current: 1,
      pages: 2,
      searchVal: '',
      showOperatorType: false,
      showStoreLevel: false,
      operatorTypeDict: [],
      storeLevelDict: [],
      searchStoreLevel: {},
      searchOperatorType: {},
      girdInfo: {girdName: ''},
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
    }
  },
  created() {
    this.$dict.load(['operatorType', 'storeLevel']).then(() => {
      var all = [{dictName: '全部', dictValue: ''}]
      this.operatorTypeDict = all.concat( this.$dict.getDict('operatorType'))
      this.storeLevelDict = this.$dict.getDict('storeLevel')
      this.getList()
    })
  },
  methods: {
    getList() {
      console.log(this.current, this.pages)
      if(this.current > this.pages) return
      this.$loading()
      this.$instance.post(`/app/appshoparchives/list`, null, {
        params: {
          current: this.current, 
          size: 15,
          operatorType: this.searchOperatorType.label ? this.searchOperatorType.value : '',
          storeLevel: this.searchStoreLevel.label ? this.searchStoreLevel.value : '',
          girdCode: this.girdInfo.girdCode,
          shopName: this.searchVal
        }
      }).then(res => {
        if (res?.data) {
          res.data.records.map((item) => {
            item.xzStar = Math.floor(item.storeScore)
            var wxz = 5 - item.xzStar
            item.wxzStar = wxz <= 0 ? 0 : wxz
          })
          this.list = this.current == 1 ? res.data.records : [this.list, res.data.records].flat()
          this.pages = res.data.pages
        }
      }).finally(() => uni.hideLoading())
    },
    getNextList() {
      this.current ++
      this.getList()
    },
    confirmOperatorType(e) {
      this.searchOperatorType = e[0]
      this.getListInit()
    },
    confirmStoreLevel(e) {
      this.searchStoreLevel = e[0]
      this.getListInit()
    },
    handleGridSelect(e) {
      console.log(e)
      this.girdInfo = e
      this.getListInit()
    },
    getListInit() {
      this.current = 1
      this.pages = 2
      this.getList()
    },
    toEvaluateForm(id) {
      this.$emit('toEvaluateForm', {shopId: id})
    },
    toStoreDetail(id) {
      this.$emit('toStoreDetail', {shopId: id})
    },
    callPhone(phone) {
      uni.makePhoneCall({ phoneNumber: phone })
    },
  },

}
</script>

<style lang="scss" scoped>
.Evaluate {
  .search {
    position: fixed;
    // top: 100px;
    left: 0;
    width: 100%;
    border-top: 1px solid #F4F5FA;
    z-index: 999;
    .search-input {
      width: 100%;
      padding: 24px 32px;
      background: #FFF;
      box-sizing: border-box;
    }
    .search-type {
      display: flex;
      justify-content: space-between;
      padding: 26px 32px;
      background-color: #fff;
      .item {
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #222;
        u-icon {
          margin-left: 8px;
        }
      }
    }
  }
  .list-content {
    padding: 240px 32px 64px;
    box-sizing: border-box;
    .item {
      width: 100%;
      background: #FFF;
      border-radius: 16px;
      display: flex;
      position: relative;
      padding: 32px;
      box-sizing: border-box;
      margin-bottom: 32px;
      .left {
        width: 176px;
        image  {
          width: 152px;
          height: 174px;
          border-radius: 12px;
        }
      }
      .right {
        width: calc(100% - 176px);
        .right-btn {
          position: absolute;
          top: 0;
          right: 0;
          padding: 32px;
          div {
            width: 112px;
            line-height: 48px;
            background: #2D7DFF;
            border-radius: 24px;
            padding-left: 20px;
            box-sizing: border-box;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 24px;
            color: #FFF;
          }
          img {
            width: 28px;
            height: 28px;
            margin-right: 4px;
            vertical-align: text-bottom;
          }
        }
        .store-name {
          width: calc(100% - 192px);
          line-height: 40px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 32px;
          color: #323233;
          word-break: break-all;
          margin-bottom: 14px;
        }
        .star-info {
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #FF8C19;
          line-height: 24px;
          margin-bottom: 16px;
          .star-num {
            display: inline-block;
            margin-left: 8px;
          }
        }
        .flex-info {
          width: 100%;
          position: relative;
          .flex-item {
            display: inline-block;
            position: relative;
            font-family: PingFangSC;
            font-size: 24px;
            line-height: 40px;
            p {
              color: #999;
            }
            div {
              color: #222;
            }
            span {
              position: absolute;
              top: 16px;
              left: 0;
              height: 48px;
              border-right: 1px solid #D9D9D9;
            }
          }
          .item-user {
            width: 104px;
            padding-right: 32px;
            box-sizing: border-box;
          }
          .item-phone {
            padding: 20px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            right: 0;
            img {
              width: 40px;
              height: 40px;
            }
          }
          .item-type {
            width: 128px;
            padding-left: 32px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>