<template>
  <div class="page-content top-select-list" ref="pageContent">
    <div class="top-select border-bottom-1">
      <van-dropdown-menu>
        <van-dropdown-item :title="searchContent" ref="itemRef">
          <van-field v-model="search" placeholder="搜索" :right-icon="search ? 'clear' : ''"
            @click-right-icon.stop="clearSearch" />
          <div style="padding: 5px 16px;">
            <van-button type="primary" size="small" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item v-model="companyType" :options="companyTypeList" @change="onRefresh" />
        <van-dropdown-item v-model="cusLevel" :options="cusLevelList" @change="onRefresh" />
      </van-dropdown-menu>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="list.length > 0">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        :immediate-check="false">
        <van-cell v-for="item in list" :key="item.cusId"
          @click="$router.push({ name: 'organization-detail', query: { cusId: item.cusId } })">
          <div class="name1 text-start stockNames balck-text-color">{{ item.cusName }}</div>
          <div class="d-flex justify-content-between">
            <div class="font-12">负责人：{{ item.saleUserName }}</div>
            <div class="name1 text-start flex1">
              <van-tag :style="{ backgroundColor: item.cusLevelColor}" size="medium">{{ item.companyTypeName }}</van-tag>
              <van-tag class="tag" size="medium">{{ item.cusLevelName }}</van-tag>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-empty v-else />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { cusInfoList, sysDicListByType } from '@/utils/api'

let searchContent = ref('搜索')
let itemRef = ref()
const clearSearch = () => {
  search.value = ''
  searchContent.value = '搜索'
}
const onConfirm = () => {
  searchContent.value = search.value || '搜索'
  itemRef.value.toggle()
  onRefresh()
}
const getData = async () => {
  const { data } = await cusInfoList({
    companyType: companyType.value || null,
    cusLevel: cusLevel.value || null,
    cusName: search.value,
    curPage: curPage.value,
    limit: 20
  })
  console.log(data);
  
  return data
}
const companyType = ref('')
const cusLevel = ref('')
const search = ref('')
const companyTypeList = ref<any[]>([])
const cusLevelList = ref<any[]>([])
const getDicList = async () => {
  const { data } = await sysDicListByType({ dicType: 'sale_company_type' })
  companyTypeList.value = data.map((ele: any) => {
    ele.text = ele.dicValue
    ele.value = ele.dicKey
    return ele
  })
  companyTypeList.value.unshift({ text: '全部类型', value: '' })
  const { data: data1 } = await sysDicListByType({ dicType: 'sale_customer_type' })
  cusLevelList.value = data1.map((ele: any) => {
    ele.text = ele.dicValue
    ele.value = ele.dicKey
    return ele
  })
  cusLevelList.value.unshift({ text: '全部评级', value: '' })
} 
getDicList()

import { listLoadAndRefresh } from '@/mixins/list-load-and-refresh'
const { refreshing, finished, loading, curPage, list, onLoad, onRefresh } = listLoadAndRefresh(getData, 'organization')
import { scrollList } from '@/mixins/scroll-list'
const pageContent = ref()
const scrollPosition = ref(0)
const { setScrollTop, setScrollPositionAndRefreshFlag } = scrollList(pageContent, scrollPosition, onRefresh)
setScrollTop()
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
  setScrollPositionAndRefreshFlag(to, 'organization-detail')
})
</script>

<style lang='scss' scoped>
.top-select-list {
  padding-top: 60px;
}
.item {
  width: 100%;
  text-align: center;
}
.tag {
  margin-left: 10px;
  background-color: #ff758f;
}
</style>
