<template>
  <div class="wrapper padding">
    <!-- <u-tabs :list="tabs" height="124" font-size="40" bg-color="#4181FF" inactive-color="rgba(255,255,255,0.75)"
            :bar-style="{backgroundColor:'#fff'}" :active-item-style="active"
            :is-scroll="true" :current="index" @change="onChange"></u-tabs> -->
    <div class="tabs">
      <u-tabs
          :list="tabs"
          font-size="36"
          bg-color="transparent"
          :bold="false"
          inactive-color="#ccddff"
          :is-scroll="true"
          :gutter="16"
          active-color="#fff"
          :current="index"
          @change="onChange">
      </u-tabs>
    </div>
    <header>
      <span @click="show=true">{{ !typeName ? '全部类型' : typeName }}
        <u-icon name="arrow-down" size="28" color="#333333" :custom-style="{marginLeft:'8px'}"></u-icon>
      </span>
      <div class="total">
        共<em>{{ list.total }}</em>个农产品
      </div>
    </header>
    <div class="card-list">
      <div class="card" v-for="(item,index) in list.list" :key="index" @click="toDetail(item)">
        <div class="top">
          <div class="title">{{ item.title }}
          </div>
          <div class="ag-content">{{ item.content }}
          </div>
          <div class="phone-wrap">
            <img class="img" :class="[item.files.length ==1 ? 'single' : '']" v-for="(photo,idx) in item.files"
                 :key="idx" :src="photo.url" alt="">
          </div>
          <div class="ag-info">
            <div class="tag">{{ $dict.getLabel('agriculturalType', item.type) }}</div>
            <div class="date">{{ item.createTime }}</div>
          </div>
        </div>
        <div class="phone" @click.stop="phone(item.phone)">
          <u-icon name="phone-fill" size="32" color="#4181FF"></u-icon>
          <span>{{ item.phone }}</span>
        </div>
      </div>
    </div>
    <AiEmpty v-if="!list.list.length"/>
    <div class="btn-wrapper">
      <div class="btn" @click="suport" hover-class="text-hover">我要发布</div>
    </div>
    <u-select v-model="show" :list="$dict.getDict('agriculturalTypeSearch')" value-name="dictValue"
              label-name="dictName" @confirm="confirm"></u-select>
  </div>
</template>

<script>
import List from "dvcp-wui/utils/list";

export default {
  name: "AppAgProducts",
  appName: "晒农产品",
  data() {
    return {
      index: 0,
      show: false,
      type: "",
      typeName: "",
      list: [],
    }
  },

  onLoad() {
    this.$dict.load("agriculturalTypeSearch");
  },
  computed: {
    active() {
      return {
        fontSize: "22px",
        color: "#FFFFFF",
      };
    },
    tabs() {
      return [{
        name: '全部'
      }, {
        name: '我的发布'
      }]
    },
  },
  methods: {
    preview(photos, index) {
      this.$previewImage(photos, index, "url");
    },
    onChange(val) {
      this.index = val;
      if (!!this.index) {
        this.getMine();
      } else this.getAll();
    },
    phone(phoneNumber) {
      uni.makePhoneCall({phoneNumber});
    },
    confirm(val) {
      this.type = val[0].value;
      this.typeName = val[0].label;
      if (!!this.index) {
        this.getMine();
      } else this.getAll();
    },
    getAll() {
      const {type} = this
      this.list = new List("/app/appshowagriculturalproduce/list")
      this.list.init({type})
    },
    getMine() {
      const {type} = this
      this.list = new List("/app/appshowagriculturalproduce/listByWx")
      this.list.init({type})
    },
    toDetail({id}) {
      uni.navigateTo({
        url: "./agDetail?id=" + id + "&type=" + this.index
      })
    },
    suport() {
      uni.navigateTo({
        url: "./agAdd"
      })
    }
  },
  onShow() {
    if (!!this.index) {
      this.getMine();
    } else {
      this.getAll();
    }
  },
  onReachBottom() {
    const {type} = this
    this.list.loadMore({type})
  }
}
</script>

<style lang="scss" scoped>
.padding {
  padding-top: 100px;
  padding-bottom: 156px;

  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    padding: 10px 0 10px 16px;
    box-sizing: border-box;
    background: #4181FF;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48px 32px 32px;

    & > span {
      font-size: 38px;
      font-weight: 600;
      color: #333333;
    }

    .total {
      margin-left: auto;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      display: flex;
      align-items: center;

      & > em {
        color: #4181FF;
      }
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 32px;

    .card {
      background: #FFFFFF;
      box-shadow: 0px -1px 0px 0px #DDDDDD;
      border-radius: 16px 16px 0px 0px;
      margin-bottom: 24px;

      .top {
        box-sizing: border-box;
        padding: 32px;
        border-bottom: 1px solid #DDDDDD;

        .title {
          font-size: 36px;
          font-weight: 600;
          color: #333333;
          line-height: 50px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .ag-content {
          font-size: 32px;
          font-weight: 400;
          color: #999999;
          line-height: 44px;
          margin-top: 8px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .phone-wrap {
          gap: 4px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 24px;

          .img {
            width: 203px;
            height: 204px;
          }

          .single {
            width: 100%;
            height: 350px;
          }
        }

        .ag-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24px;

          .tag {
            width: 88px;
            height: 48px;
            background: #EEEEEE;
            border-radius: 24px;
            font-size: 28px;
            font-weight: 400;
            color: #999999;
            text-align: center;
            line-height: 50px;
          }

          .date {
            font-size: 28px;
            font-weight: 400;
            color: #999999;
          }
        }
      }

      .phone {
        height: 104px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 32px;

        & > img {
          width: 32px;
          height: 33px;
        }

        & > span {
          font-size: 28px;
          font-weight: 400;
          color: #4181FF;
          margin-left: 12px;
        }
      }
    }
  }
}
</style>
