<template>
  <view>
    <view class="main-content">
      <!--顶部内容-->
      <view class="search">
        <input class="search-text" v-model="search_text" placeholder="商户名称/联系电话" placeholder-style="color: #ffffff!important;" />
      </view>
      <!--信息列表-->
      <view class="list-content" v-if="Object.values(list).length > 0">
        <view class="list-box" v-for="(item,index) in list" :key="index">
          <view class="mer-info">
            <image class="mer-avatar" :src="item.mer_avatar || '/static/images/mer_avatar.png'"></image>
            <view class="mer-right">
              <view class="mer-nickanme">{{ item.mer_name || '' }}</view>
              <view class="phone" v-if="item.mer_phone">联系电话：{{ item.mer_phone || '' }}</view>
            </view>
          </view>
          <view class="buttons">
            <view class="btn-item" v-if="agent_delivery_id > 0" @click="allocation(item.mer_id)">选中</view>
          </view>
        </view>
      </view>
      <emptyPage v-else title="暂无信息～"></emptyPage>
    </view>

    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';
import authorize from '@/components/Authorize';
import {deliveryMerList, deliveryAllocationOrder} from "@/api/agent";

export default {
  components: {
    authorize,
    emptyPage
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 列表
      total: 0,
      list: [],
      page: 1,
      agent_id: 0,
      search_text: '',
      // 分配缴费订单
      agent_delivery_id: '',
    }
  },
  watch: {
    search_text: {
      handler() {
        this.page = 1;
        this.list = [];

        this.getList();
      },
      immediate: true
    }
  },
  onLoad(options) {
    let _this = this;
    _this.agent_id = options.agent_id || 0;
    _this.agent_delivery_id = options.agent_delivery_id || 0;
    // 判断：agent_id <= 0 抛出错误，返回代理中心
    if(Number(_this.agent_id) <= 0){
      _this.$util.Tips({
        title: '非法访问，信息不存在！',
      },{tab:5,url:`/pages/agent/centerV2?agent_id=${_this.agent_id}`});
      return false;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  // 滚动到底部
  onReachBottom() {
    this.getList();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getList();
    },
    // 信息获取
    getList() {
      let _this = this;
      if(Number(_this.agent_id) <= 0) return false;
      let params = {
        page: _this.page,
        agent_id: _this.agent_id,
        search_text: _this.search_text || ''
      };
      deliveryMerList(params).then(res => {
        let list = res.data.list || {};
        _this.total = res.data.count || 0;
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 配送商缴费分配 - 选中
    allocation(mer_id){
      let _this = this;
      let config = {
        content: '是否确认分配给当前商户，确认后订单赠送的相关额度会赠送给当前商户！',
        confirmText: '选中',// 确认按钮文字
        showCancel: true, // 是否显示取消按钮
        cancelText: '取消', // 取消按钮文字
      };
      // 提示
      _this.$util.tips(config, function () {
        let params = {
          mer_id: mer_id,
          agent_id: _this.agent_id,
          agent_delivery_id: _this.agent_delivery_id
        };
        deliveryAllocationOrder(params).then(res => {
          if(Number(res.status) === 200){
            _this.$util.tips({ content: '分配成功！'}, function () {
              uni.navigateTo({
                url: '/pages/agent/delivery/payment_record?agent_id=' + _this.agent_id
              })
            });
          }else{
            _this.$util.Tips({title: res.message});
          }
        }).catch(err => {
          _this.$util.Tips({title: err});
        });
      });
    },


  }
}
</script>

<style lang="scss" scoped>
.main-content {
  width: 100vw;
  min-height: 100vh!important;
  background: #f6f6f6;// #f6f6f6

  .search{
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: #c20000;
    .search-text{
      width: 100%;
      border-radius: 80rpx;
      background-color: #cc2e2d;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      color: #ffffff;
    }
    .search-text::placeholder{
      color: #ffffff!important;
    }
  }

  .list-content{
    width: 100%;
    padding: 30rpx;

    .list-box:not(:last-child){
      margin-bottom: 30rpx;
    }
    .list-box{
      background-color: #ffffff;
      border-radius: 20rpx;
      width: 100%;
      padding: 20rpx;

      .mer-info{
        width: 100%;
        padding-bottom: 20rpx;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        .mer-avatar{
          width: 100rpx!important;
          height: 100rpx!important;
          border-radius: 15rpx;
        }
        .mer-right{
          width: calc(100% - 100rpx);
          padding-left: 20rpx;
          height: 100rpx!important;
          .mer-nickanme{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 32rpx;
            font-weight: bold;
          }
          .phone{
            font-size: 26rpx;
            color: #9d9d9d;
            height: 30rpx;
            line-height: 30rpx;
          }
        }
      }
      .buttons{
        border-top: 2rpx solid #f6f6f6;
        width: 100%;
        padding-top: 20rpx;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        .btn-item{
          width: max-content!important;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 28rpx;
          border: 2rpx solid #cccccc;
          padding: 0 20rpx;
          border-radius: 50rpx;
        }
        .btn-item:not(:last-child){
          margin-right: 15rpx!important;
        }
      }
    }
  }
}
</style>
