<template>
  <view class="content">
    <view class="my-header">
      <view class="my-icons" @click="goback">
        <uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons>
      </view>
      <view class="">代理商管理</view>
      <view class="my-icons" @click="overlayshow = true">
        <uni-icons type="list" color="#fff" size="22px"></uni-icons>
      </view>
    </view>
    <view class="container">
      <view class="tab-r">
        <view class="tab-box" v-for="(item,index) in tabList" :key="index"
              @click="getindex(index,item.agentType)">
          <view class="tab-size">{{ item.name }}</view>
          <view class="gang" :class="{'show' :tabindex == index}"></view>
        </view>
      </view>
      <view class="box_out">
        <view class="box_" v-for="(item,index) in agentList" :key="index" @click="goDetail(item.id)">
          <view class="b-bs">
            <view class="title-">{{ item.agentNo }}</view>
            <view v-if="item.auditStatus == '0'">
              <view class="red-size">存量</view>
            </view>
            <view v-if="item.auditStatus == '1'">
              <view class="red-size">待审核</view>
            </view>
            <view v-if="item.auditStatus == '2'">
              <view class="red-size">审核通过</view>
            </view>
            <view v-if="item.auditStatus == '3'">
              <view class="red-size">审核失败</view>
            </view>
          </view>
          <view class="b-bs" style="margin: 5px 0px;">
            <view class="">代理商名称:&nbsp;&nbsp;{{ item.agentName }}</view>
            <u-icon name="arrow-right" size="14"></u-icon>
          </view>

          <view class="ss" style="margin: 5px 0px;">法人名称:&nbsp;&nbsp;{{ item.accName }}</view>
          <view class="ss" style="margin: 5px 0px;">创建时间:&nbsp;&nbsp;{{ item.createDate }}</view>
        </view>
      </view>
      <u-loadmore :status="status" v-if="show == true"/>
      <view class="por-r" @click="goAdd()">
        +
      </view>
    </view>
    <u-overlay :show="overlayshow" @click="overlayshow = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <view class="h-size">
            选择审核状态
          </view>


          <view class="warp_w">
            <view class="tabBox" :class="{ 'acvbox' :warindex == index }" v-for="(item,index) in tablist"
                  :key="index" @click="getwrap(index)">
              {{ item }}
            </view>
          </view>
          <view @click="clickSearch()" class="anniu">
            查询
          </view>

        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import request from '../../utils/request.js'

export default {
  data() {
    return {
      tablist: [
        "全部", "审核中", "审核通过", "审核失败"
      ],
      warindex: 0,
      agentList: [],
      agentType: '0',
      page: 1,
      limit: 10,
      totalPage: 0,
      dropdownMenuList: [],
      dataList: [],
      show: false,
      overlayshow: false,
      status: 'loading',
      tabindex: 0,
      showAgentGradeInfo: 0,
      auditStatus: null,
      tabList: [{
        name: "直属",
        agentType: '0'
      },
        {
          name: "非直属",
          agentType: '1'
        },
      ]
    }
  },
  onShow() {
    this.page = 1,
        this.limit = 10,
        this.totalPage = 0,
        this.agentList = [],
        this.getAgentList();

    // this.actList = ["1", "1", "1", "1", "1", ]
    // this.status = "nomore" 底部刷新结束
  },
  onPullDownRefresh() {
    this.page = 1,
        this.limit = 10,
        this.totalPage = 0,
        this.agentList = [],
        this.getAgentList();
    console.log("刷新");
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    // 触底加载
    if (this.agentList.length < this.totalPage) {
      this.page++
      this.agentList()

    } else {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    }
  },
  onReachBottom() {
    // this.show = true
    setTimeout(() => {
      console.log("加载执行");
    }, 2000)
  },
  components: {},
  methods: {
    clickSearch() {
      this.page = 1,
          this.limit = 10,
          this.totalPage = 0,
          this.agentList = [],
          this.getAgentList();
      this.overlayshow = false
    },
    getwrap(id) {

      this.warindex = id
      if (id == 1) {
        this.auditStatus = 1
      } else if (id == 2) {
        this.auditStatus = 2
      } else if (id == 3) {
        this.auditStatus = 3
      } else {
        this.auditStatus = null
      }
    },
    //代理商列表
    getAgentList() {
      request({
        url: '/app/uaAgent/twoAgentList',
        method: 'post',
        data: {
          limit: this.limit,
          page: this.page,
          agentType: this.agentType,
          auditStatus: this.auditStatus
        }
      }).then(res => {
        this.showAgentGradeInfo = res.showAgentGradeInfo
        if (res.data) {
          if (this.page != 1) {
            this.agentList = this.agentList.concat(res.data)
          } else {
            this.agentList = res.data
          }
          this.totalPage = res.total
          console.log("代理商列表", this.agentList);
        }
      })

    },
    //根据id查询商户详情

    //设备列表

    goDetail(objectId) {
      uni.navigateTo({
        url: '/homePages/Agent/Details?objectId=' + objectId
      })
    },
    getindex(index, agentType) {
      console.log("agentType:", agentType);
      this.agentType = agentType
      this.tabindex = index
      this.getAgentList()
    },
    handleOpen(e) {
      console.log('打开了');
    },
    handleClose(e) {
      console.log('关闭');
    },
    goAdd() {
      uni.navigateTo({
        url: '/homePages/Agent/AddAgent'
      })
    },
    goback() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #fff;
  height: 100vh;
}

.my-header {
  width: 100%;
  height: 88px;
  // background: linear-gradient(180deg, #B2D2FC 0%, rgba(255, 255, 255, 0.84) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  box-sizing: border-box;
  padding: 0px 15px;
  padding-top: 40px;
  z-index: 99999;
  background: #E4612E;
  position: fixed;
  top: 0px;

  .top_whit {
    width: 65%;
    border-radius: 50px;
    border: 1px solid #fff;
    box-sizing: border-box;
    padding: 5px;
  }

  .my-icons {
    height: 20px;
    width: 20px;

  }

  .my-text {
    font-weight: bold;
  }

}

.h-size {
  font-size: 14px;
  color: #9f9f9f;
  margin-bottom: 10px;
}

.d-s {
  display: flex;

}

.warp {
  box-sizing: border-box;
  padding-top: 88px;
}

.rect {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
}

.container {
  width: 100%;
  background: #f4f5f6;
  box-sizing: border-box;
  padding-top: 88px;
}

.warp_input {
  width: 50%;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
  padding: 5px 10px;
}

.warp_right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.warp_button {
  width: 55px;
  height: 25px;
  background: #E4612E;
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.tab-r {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: 5px;
  box-shadow: 2px 0px 7px 1px #b1b1b1;
  z-index: 99;
}

.tab-box {
  width: 25%;
  text-align: center;
  box-sizing: border-box;

  padding-top: 20px;


}

.tab-size {
  font-size: 16px;
  font-weight: bold;
}

.gang {
  width: 30px;
  height: 2px;
  // background: #E4612E;
  margin: 0px auto;
  margin-top: 5px;
}

.show {
  background: #E4612E;
}

.box_ {
  width: 100%;
  //border-bottom: 1px solid #d5d5d5;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 10px;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.left-img {
  width: 85px;
  height: 85px;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.right-box {
  width: 70%;
}

.title-tp {
  width: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.t-title {
  font-size: 16px;
  font-weight: bold;
}

.h-size {
  font-size: 14px;
  color: #b1b1b1;
}

.size14 {
  font-size: 14px;
}

.box-time {
  color: #a6a6a6;
  font-size: 14px;
}

.s-color {
  font-size: 14px;
  color: #f48b2b;
}

.b-bs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.red-size {
  color: red;
}

.title- {
  font-weight: bold;
}

.ss {
  font-size: 14px;
}

.por-r {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #E4612E;
  color: white;
  font-size: 35px;
  text-align: center;
  position: fixed;
  right: 15px;
  bottom: 40px;
}

.warp_w {
  width: 100%;
  display: flex;
  align-items: center;
}

.tabBox {
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #989898;
  margin-right: 10px;

}

.acvbox {
  border: 1px solid #E4612E;
  color: #E4612E;
}

.anniu {
  width: 150px;
  height: 30px;
  font-size: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #E4612E;
  margin: 10px auto;
  margin-top: 25px;
}
.box_out{
  padding: 30rpx;
}
</style>
