<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="top_whit">
<!--        <input type="text" @input="selectByName()" v-model="merchantName" placeholder="请输入商户名称、商户联系人查询"-->
<!--               placeholder-style="text-align: center; color:#fff;font-size:12px">-->
        <u-search :showAction="false" placeholder="请输入商户名称、商户联系人查询" v-model="merchantName" @clear="selectByName" @search="selectByName"></u-search>
      </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.reportStatus)">
          <view class="tab-size">{{ item.name }}</view>
          <view class="gang" :class="{'show' :tabindex == index}"></view>
        </view>
      </view>
      <view class="box_out">
        <view class="box_" @click="goDetail(item.id)" v-for="(item,index) in merList">
          <view class="left-img">
            <image :src="item.imgUrl" mode=""></image>
            <!-- <image src="../../static/imgs/sjimg.png" mode=""></image> -->
          </view>
          <view class="right-box">
            <view class="title-tp">
              <view class="t-title">{{ item.merchantName }}</view>
              <view v-if="item.merchantType == '0'">
                <view class="h-size">非直属</view>
              </view>
              <view v-if="item.merchantType == '1'">
                <view class="h-size">直属</view>
              </view>
            </view>
            <view class="title-tp">
              <view class="">
                <view class="size14">商户联系人:&nbsp;&nbsp;{{ item.merchantContactName }}</view>
                <view class="size14">商户联系人:&nbsp;&nbsp;{{ item.agentName }}</view>
              </view>
              <view class="d-s" style="align-items: center;">
                <view v-if="item.reportStatus =='10D'">
                  <text class="s-color" style="color: red;">未申请</text>
                </view>
                <view v-if="item.reportStatus =='10F'">
                  <text class="s-color">审核中</text>
                </view>
                <view v-if="item.reportStatus =='10A'">
                  <text class="s-color" style="color: green;">审核成功</text>
                </view>
                <view v-if="item.reportStatus =='10B'">
                  <text class="s-color" style="color: red;">审核失败</text>
                </view>
                <view style="height: 10px;">
                  <u-icon name="arrow-right" size="14"></u-icon>
                </view>
              </view>
            </view>
            <view class="box-time">
              创建时间:{{ item.createDate }}
            </view>
          </view>
        </view>
      </view>


      <u-loadmore :status="status" v-if="show == true"/>
    </view>
    <u-overlay :show="overlayshow" @click="overlayshow = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <view class="warp_input">
            <input type="text" v-model="agentName" placeholder="请输入所属代理商"/>
          </view>
          <view class="warp_right">
            <view class="warp_button" @click="getMerList()">查询</view>
          </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>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import request from '../../utils/request.js'
import USearch from "@/uni_modules/uview-ui/components/u-search/u-search.vue";

export default {
  data() {
    return {
      tablist: [
        "全部", "直属", "非直属",
      ],
      warindex: 0,
      merchantName: '',
      reportStatus: ["10A", "10B", "10C", "10D", "10E", "10F"],
      page: 1,
      limit: 10,
      totalPage: 0,
      merList: [],

      dropdownMenuList: [],
      dataList: [],
      show: false,
      overlayshow: false,
      status: 'loading',
      tabindex: 0,
      merchantType: null,
      agentName: null,
      tabList: [{
        name: "全部",
        reportStatus: ["10A", "10B", "10C", "10D", "10E", "10F"]
      },
        {
          name: "审核中",
          reportStatus: ["10C", "10F"]
        },
        {
          name: "审核成功",
          reportStatus: ["10A"]
        },
        {
          name: "审核失败",
          reportStatus: ["10B", "10E"]
        },
      ]
    }
  },
  onShow() {
    this.page = 1,
        this.limit = 10,
        this.totalPage = 0,
        this.merList = [],
        this.getMerList();

  },
  onPullDownRefresh() {
    this.page = 1,
        this.limit = 10,
        this.totalPage = 0,
        this.merList = [],
        this.getMerList();
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    this.show = true
    // 触底加载
    if (this.merList.length < this.totalPage) {
      this.page++
      this.getMerList()

    } else {
      this.status = 'nomore'
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    }
  },
  components: {USearch},
  methods: {
    getwrap(id) {
      this.warindex = id
      if (id == 1) {
        this.merchantType = 0
      } else if (id == 2) {
        this.merchantType = 1
      }
    },
    //商户列表
    getMerList() {

      request({
        url: 'app/uaAgent/merList',
        method: 'post',
        data: {
          limit: this.limit,
          reportStatus: this.reportStatus,
          page: this.page,
          merchantName: this.merchantName,
          agentName: this.agentName,
          merchantType: this.merchantType
        }
      }).then(res => {
        if (res.data) {
          if (this.page != 1) {
            this.merList = this.merList.concat(res.data)
          } else {
            this.merList = res.data
          }
          this.totalPage = res.total
          this.overlayshow = false
        }
      })
    },
    //商户名称查询
    selectByName() {
      this.page = 1
      this.getMerList()
    },


    goDetail(id) {
      uni.navigateTo({
        url: '/homePages/Manage/detail?id=' + id
      })
    },
    getindex(index, status) {
      console.log(status, 219);
      this.page = 1
      this.tabindex = index
      this.reportStatus = status
      this.merList = []
      this.getMerList();
    },
    handleOpen(e) {
      console.log('打开了');
    },
    handleClose(e) {
      console.log('关闭');
    },
    goback() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #f4f5f6;
  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: white;
  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;
  }

}

.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;
}

.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-between;
  background: #fff;
}

.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;
  border-radius: 20rpx;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  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;
}

.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;
}
.box_out{
  padding: 30rpx;
}
</style>
