<template>
  <view class="assemble">
    <fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff"
                           @click="segmented"></fui-segmented-control>
    <view class="search">
      <view :class="{'selected': select_type == 1, 'not-selected': select_type != 1}" @click="setSelect(1)">全部({{countArr.type_0}})
      </view>
      <view :class="{'selected': select_type == 2, 'not-selected': select_type != 2}" @click="setSelect(2)">待跟进({{countArr.type_1}})
      </view>
      <view :class="{'selected': select_type == 3, 'not-selected': select_type != 3}" @click="setSelect(3)">
        7天未跟进({{countArr.type_2}})
      </view>
      <view :class="{'selected': select_type == 4, 'not-selected': select_type != 4}" @click="setSelect(4)">
        30天未成交({{countArr.type_3}})
      </view>
    </view>
    <!--我的客户-->
    <scroll-view
        v-if="segmented_type == 1"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 100vh;"
    >
      <view class="card" v-for="(v,k) in tableList" :key="k">
        <view style="width: 70%;" @click="clue_info(v)">
          <view style="display: flex;align-items: center;padding: 20rpx;">
            <view>
              <image src="@/static/images/index/myk.png" class="card-image"></image>
            </view>
            <view class="card-text">{{ v.student_name }}</view>
            <view class="card-label">{{ v.is_status == 1 ? '试听' : '成交' }}</view>
          </view>
          <view class="card-con">
            首联系人：{{ v.contact_name }} <span class="card-con-span">{{ v.decision_maker }}</span>
          </view>
          <view class="card-date">
            <view class="card-con">{{ $util.formatToDateTime((v.follow && v.follow.follow_up_time || ''), 'm-d H:i') }}
              跟进
            </view>
            <view style="margin-left: 30rpx;">
              <view style="display: flex;align-items: center;">
                <view style="padding: 12rpx;">
                  <image
                      v-if="['A+','A','A-'].includes(v.follow && v.follow.initial_customer_intent || '')"
                      src="@/static/images/index/intention3.png"
                      class="drop-image-x"
                  ></image>
                  <image
                      v-else-if="['B+','B','B-'].includes(v.follow && v.follow.initial_customer_intent || '')"
                      src="@/static/images/index/intention2.png"
                      class="drop-image-x"
                  ></image>
                  <image
                      v-else
                      src="@/static/images/index/intention1.png"
                      class="drop-image-x"
                  ></image>
                </view>
                <view class="title-x">意向：{{ v.follow && v.follow.initial_customer_intent || '' }}</view>
              </view>
            </view>
          </view>
        </view>
        <view style="width: 15%;">
          <image src="@/static/images/index/message.png" class="image" @click="openViewMyMessage(v)"></image>
        </view>
        <view style="width: 15%;">
          <image v-if="v.student_phone" src="@/static/images/index/phone.png" class="image" @click="dialTel(v)"></image>
        </view>
      </view>
    </scroll-view>

    <!--区域公海-->
    <scroll-view
        v-if="segmented_type == 2"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 100vh;"
    >
      <view style="color: #999999;padding: 20rpx 30rpx;">
        今日待领（{{countArr.lq_count}}/{{countArr.max_count}}）
      </view>
      <view class="card" v-for="(v,k) in tableList" :key="k">
        <view style="width: 70%;">
          <view style="display: flex;align-items: center;padding: 20rpx;">
            <view>
              <image src="@/static/images/index/myk.png" class="card-image"></image>
            </view>
            <view class="card-text">{{v.student_name}}</view>
            <view class="card-label">{{v.is_status == 1 ? '试听' : '成交'}}</view>
          </view>
          <view class="card-con">
            首联系人：{{v.contact_name}} <span class="card-con-span">{{v.decision_maker}}</span>
          </view>
          <view class="card-date">
            <view class="card-con">{{ $util.formatToDateTime((v.follow && v.follow.follow_up_time || ''),'m-d H:i') }} 跟进</view>
            <view style="margin-left: 30rpx;">
              <view style="display: flex;align-items: center;">
                <view style="padding: 12rpx;">
                  <image
                      v-if="['A+','A','A-'].includes(v.follow && v.follow.initial_customer_intent || '')"
                      src="@/static/images/index/intention3.png"
                      class="drop-image-x"
                  ></image>
                  <image
                      v-else-if="['B+','B','B-'].includes(v.follow && v.follow.initial_customer_intent || '')"
                      src="@/static/images/index/intention2.png"
                      class="drop-image-x"
                  ></image>
                  <image
                      v-else
                      src="@/static/images/index/intention1.png"
                      class="drop-image-x"
                  ></image>
                </view>
                <view class="title-x">意向：{{ v.follow && v.follow.initial_customer_intent || '' }}</view>
              </view>
            </view>
          </view>
        </view>
        <view style="width: 15%;">
<!--          <image src="@/static/images/index/message.png" class="image"></image>-->
        </view>
        <view style="width: 15%;" @click="getSales(v)">
          <view class="ling">领</view>
        </view>
      </view>
    </scroll-view>

    <view style="height: 170rpx;"></view>
    <AQTabber/>
  </view>
</template>

<script>
import AQTabber from "@/components/AQ/AQTabber.vue"
import marketApi from '@/api/market.js';

export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        type: '0',//0=全部,1=待跟进,2=7天,3=30天
        is_gh: '2',//1=区域公海,2=我的客户
      },

      countArr:{
        type_0:0,
        type_1:0,
        type_2:0,
        type_3:0,
        max_count:0,
        lq_count:0,

      },//统计数组
      tableList:[],//表格数据

      values: [{
        id: 1,
        name: '我的客户'
      }, {
        id: 2,
        name: '区域公海'
      }],
      select_type: 1,//筛选标签列表|1,2,3,4
      segmented_type: 1,//1=我的客户,2=区域公海

    }
  },
  onLoad(options) {},
  onShow(){
    this.init()//初始化
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    await this.resetFilteredData()
    await this.getList()
  },
  methods: {
    //初始化
    async init(){
      await this.getList();
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //获取我的客户列表
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(data.page == 1){
        this.tableList = []
      }

      let res = await marketApi.myClient(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.list.data); // 使用 concat 方法 将新数据追加到数组中

      console.log('列表',this.tableList)
      this.filteredData.total = res.data.list.total
      this.filteredData.page++

      this.countArr = {
        type_0:res.data.count[0],
        type_1:res.data.count[1],
        type_2:res.data.count[2],
        type_3:res.data.count[3],
        max_count:res.data.gh.max_count,
        lq_count:res.data.gh.lq_count,
      }

    },

    //设置筛选条件
    async setSelect(type) {
      this.select_type = type
      //重置为第一页
      await this.resetFilteredData()

      if(this.segmented_type == 1){
        this.filteredData.is_gh = '2'//2=我的客户
      }else{
        this.filteredData.is_gh = '1'//1=区域公海
      }

      switch (type) {
        //全部
        case 1:
          this.filteredData.type = '0'
          break
          //待跟进
        case 2:
          this.filteredData.type = '1'
          break
          //7天未跟进
        case 3:
          this.filteredData.type = '2'
          break
          //30天未成交
        case 4:
          this.filteredData.type = '3'
          break
      }
      await this.getList()
    },
    //切换tag列表
    async segmented(index) {
      this.select_type = 1
      this.segmented_type = index.id//1=我的客户,2=区域公海
      //重置为第一页
      await this.resetFilteredData()

      if(this.segmented_type == 1){
        this.filteredData.is_gh = '2'//2=我的客户
      }else{
        this.filteredData.is_gh = '1'//1=区域公海
      }


      this.filteredData.type = '0'
      await this.getList()
    },

    //跳转页面-我的消息
    openViewMyMessage(item) {
      let user_id = item.user_id
      uni.navigateTo({
        url: `/pages/common/my_message?user_id=${user_id}`
      })
    },

    //拨打电话
    dialTel(item) {
      let tel = item.phone
      uni.makePhoneCall({
        phoneNumber: tel
      })
    },

    //客户详情
    clue_info(item) {
      let id = item.id
      uni.navigateTo({
        url: `/pages/market/clue/clue_info?id=${id}`
      })
    },

    //公海-领取客户
    async getSales(item){
      let param = {
        sales_id:item.id
      }
      let res = await marketApi.getSales(param)
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      uni.showToast({
        title: res.msg,
        icon: 'success'
      })
      //延迟1s执行
      setTimeout(() => {
        let param = {
          index:{
            id:2//2=公海客户列表
          }
        }
        this.segmented(param)
      }, 1000)
    },
  }
}
</script>

<style lang="less" scoped>
	.assemble{
		width: 100%;
		height: 100vh;
		background-color: #292929;
		overflow: auto;
	}
	.search{
		width: 92%;
		margin: auto;
		display: flex;
		margin-top: 20rpx;
	}
	.selected{
		background: #294e48;
		border-radius: 16rpx;
		padding: 12rpx 8rpx;
		text-align: center;
		color: #29d3b4;
		margin-left: 5rpx;
	}
	.not-selected{
		margin-left: 5rpx;
		background: #ffffff;
		border: 4rpx #959595 solid;
		border-radius: 16rpx;
		padding: 12rpx 8rpx;
		text-align: center;
	}
	.card{
		width: 92%;
		margin: 20rpx auto;
		background: #434544;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
	}
	.card-image{
		width: 60rpx;
		height: 60rpx;
	}
	.card-text{
		font-size: 46rpx;
		padding-left: 16rpx;
		color: #fff;
	}
	.card-label{
		margin-left: 30rpx;
		background: #76575a;
		width: 130rpx;
		padding: 8rpx 20rpx;
		color: #c9595a;
		text-align: center;
		border-radius: 0 50rpx 50rpx 40rpx;
	}
	.card-con{
		font-size: 30rpx;
		padding: 20rpx 10rpx 20rpx 16rpx;
		color: #fff;
	}
	.card-con-span{
		font-size: 24rpx;
		color: #a47332;
		padding-left: 12rpx;
	}
	.drop-image-x {
		width: 20rpx;
		height: 20rpx;
	}
	.title-x {
		font-size: 28rpx;
		color: #fff;
		padding-left: 10rpx;
	}
	.card-date{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.image{
		width: 70rpx;
		height: 70rpx;
	}
	.neck{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f59a23;
		color: #fff;
		line-height: 60rpx;
		text-align: center;
	}
  //领取按钮
  .ling{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    color: #fff;
    width: 50rpx;
    height: 50rpx;
    background-color: #F59A23;
  }
</style>
