<template>
  <z-paging ref="paging" v-model="customerList" @query="queryList" :default-page-size="detaultPageSize" empty-view-text="暂无客户数据">
    <template #top>
      <uni-nav-bar title="标题" backgroundColor="#edf0f9" :fixed="true" :shadow="true" :border="false" :leftWidth="0"
        class="c-nav-bar" :rightWidth="58">
        <view class="input-view">
          <uni-search-bar placeholder="搜索客户名称" bgColor="#f8f8f8" clearButton="auto" cancelButton="none"
            style="width:100%; line-height: 30px;height: 30px;" @confirm="filterCustomer" v-model="name"
            @blur="filterCustomer" @clear="clear">
          </uni-search-bar>
        </view>
        <template #right>
          <button size="default" class="mini-btn"
            hover-class="is-hover" @click="redierectAddCustomerPage()">新增</button>
        </template>
      </uni-nav-bar>
    </template>
    <List :customer-list="customerList" />
  </z-paging>
</template>

<script lang="ts" setup>
import { getCustomerList } from '@/api/biz/customer';
import List from './List.vue'
import { Customer } from '@/types/customer';
import { useEmitt } from '@/logics/mitt/useEmitt';
const detaultPageSize = 10;
const paging = ref()
const name = ref()
const customerList = ref<Customer[]>([])
const showClearIcon = ref(false)

const { emitter } = useEmitt()

const nameInput = (event: any) => {
  if (event.detail.value.length > 0) {
    showClearIcon.value = true;
  } else {
    showClearIcon.value = false;
  }
}

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const { list } = await getCustomerList({ page_no: pageNo, page_size: pageSize })
    paging.value?.complete(list);
  } catch (e) {
    paging.value.complete(false);
  }
}

const filterCustomer = async () => {
  const { list } = await getCustomerList({ page_no: 1, page_size: detaultPageSize, name: name.value })
  customerList.value = list;
}

const clear = () => {
  name.value = undefined;
  filterCustomer()
}

const redierectAddCustomerPage = () => {
  uni.navigateTo({ url: '/pages/profile/customer/add-customer' })
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get_customer_list',
  callback: () => {
    console.log('刷新')
    filterCustomer()
  }
})

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'remove_customer',
  callback: (id: string) => {
    customerList.value = customerList.value.filter(item => item.id !== id)
    uni.showToast({
      title: '删除成功',
      icon: 'success',
      duration: 1500
    })
  }
})


</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'apply-shared', //解除样式隔离
  }

}
</script>
<style scoped lang="scss">
.c-nav-bar {
  &__content {
    color: red;
  }
}

.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}

.city {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: 4px;
}

.box-bg {
  background-color: #F5F5F5;
}


.input-view {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  flex: 1;
  // background-color: #f8f8f8;
  // height: 30px;
  // border-radius: 15px;
  flex-wrap: nowrap;
  margin: 7px 3px 7px 0px;
  // padding-left: 4px;
  line-height: 30px;
}

.input-uni-icon {
  line-height: 30px;
}

.nav-bar-input {
  height: 30px;
  line-height: 30px;
  /* #ifdef APP-PLUS-NVUE */
  /* #endif */
  padding: 0 5px;
  font-size: 12px;
  background-color: #f8f8f8;
}

:deep(.uni-searchbar__box-icon-clear) {
  padding-top: 5px;
}

.uni-navbar {
  &__header {
    padding: 0 !important
  }
}

:deep(.uni-searchbar) {
  padding: 0;
  width: 100%
}

:deep(.uni-searchbar__box) {
  height: 30px !important;
}

:deep(.uni-navbar__header-container) {
  padding: 0px !important;
}


:deep(.uni-searchbar__cancel) {
  height: 30px;
  line-height: 30px;
}

.mini-btn {
  color: #ffffff !important;
  background-color: #007aff;
  border-color: #007aff !important;
  font-size: 24rpx !important;
  -webkit-tap-highlight-color: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  line-height: 2.55555556;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-left: 28rpx;
  padding-right: 28rpx;
  position: relative;
  text-align: center;
  text-decoration: none;
  height: auto;
}

</style>