<template>
  <div class="q-pa-md customer">
    <customerHead v-model:select="data.selected" :EmployeeList="data.EmployeeList" @update="updatePage"/>
    <q-page padding style="background-color: #fff; border-radius: 10px">
      <div class="page-content" style="margin-top: 20px">
        <q-table :rows="data.dataList" :columns="data.columns"
          class="sticky-tow-column-table full-height sticky-right-column-table" row-key="Id" :loading="data.loading"
          v-model:pagination="pagination" selection="multiple" v-model:selected="data.selected"
          :visible-columns="data.showColumns">
          <template v-slot:body-cell-CustomerName="props">
            <q-td auto-width :props="props">
              <div class="cutomer_Header">

                <div class="customer_Img">
                  <img :src="props.row.WeChatPhoto" style="width: 100%; height: 100%" />
                </div>
                <div>
                  <div class="cutomer_Free" @click="getCustomInfo(props)">{{ props.row.CustomerName }}</div>
                  <div class="customer_Wechat">{{ props.row.WeChatName }}</div>
                </div>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-LableList="props">
            <q-td auto-width :props="props">
              <q-chip v-for="(item, index) in props.row.LableList" :key="index">{{ item }}</q-chip>
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="msg.pageCount"
              :input="true" @update:model-value="changePage" />
          </template>
          <template v-for="x in data.allColumns.filter(x=>x.IsCustom>0)" :key="x.value"
            v-slot:[`body-cell-${x.value}`]="props">
            <q-td auto-width :props="props">
              {{props.row.CustomFiledList.find(y=>y.Name==x.name).ShowValue}}
            </q-td>
          </template>
          <template v-slot:body-cell-setting="props">
            <q-td :props="props" style="background:rgba(0,0,0,0)"></q-td>
          </template>
          <template v-slot:header-cell-setting="props">
            <q-th class="mysetting" :props="props">
              <i class="iconfont icon-tiaojieqi cursor-pointer" style="font-size:20px;">
                <q-popup-proxy>
                  <visible-columns v-model="data.showColumns" :allCol="data.allColumns"></visible-columns>
                </q-popup-proxy>
              </i>
            </q-th>
          </template>
        </q-table>
        <customRight v-if="isShowCustom" :CustomerId="CustomerId" @close="closeCustomer"></customRight>
      </div>
    </q-page>
  </div>
</template>
<script lang="ts">
  import {
    ref,
    defineComponent,
    onMounted,
    provide,
  } from 'vue'
  import {
    useMeta
  } from 'quasar'
  import CustomerModule from '@/module/customer/customerModule'
  import customRight from '@/components/customer/customRight.vue'
  import visibleColumns from '@/components/common/visibleColumns.vue'
  
  
  
  import customerHead from '@/components/customer/customerHead.vue'
  export default defineComponent({
    components: {
      customRight,
      visibleColumns,
      customerHead,
    },
    setup() {
      useMeta({
        title: '客户',
      })
    
      let {
        getCustomerList,
        getWayList,
        data,
        msg,
        changePage,
        pagination,
        getEmployeeData,
      } = CustomerModule()
      let isShowCustom = ref(false)
      const closeCustomer = () => {
        isShowCustom.value = false
      }

      let CustomerId = ref(0)
      const getCustomInfo = item => {
        CustomerId.value = item.row.Id
        isShowCustom.value = true
      }
      provide('msg',msg)
      const updatePage=()=>{
        msg.PageIndex=1
        getCustomerList()
      }
      onMounted(() => {
        getCustomerList()
        getWayList({})
        getEmployeeData()
      })
      return {
        updatePage,
        data,
        msg,
        changePage,
        pagination,
        isShowCustom,
        closeCustomer,
        CustomerId,
        getCustomInfo,
      }
    }
  })

</script>
<style>
  .customer .q-field__before {
    padding-right: 0 !important;
  }

  .v-binder-follower-container {
    z-index: 99999999 !important;
  }

</style>
<style lang="scss" scoped>
  .cutomer_Header {
    display: flex;
  }

  .customer_Img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 14px;
  }

  .cutomer_Free {
    color: #3470ff;
    font-size: 14px;
    cursor: pointer;
  }

  .customer_Wechat {
    color: #9999a8;
  }

  :deep(.n-base-selection-label) {
    height: 40px;
    background-color: rgba(0, 0, 0, 0.05);
    border: none !important;
  }

  :deep(.n-base-selection-input) {
    height: 40px;
    display: flex;
    align-items: center;
    border: none !important;
  }

  :deep(.n-input) {
    height: 100%;
    border: none;
    display: flex;
    align-items: center;
  }

  :deep(.n-base-selection-tags) {
    height: 40px;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .select-navs {
    background-color: #f6f6f6;
    border-radius: 4px;
  }
  .bottom-slot{
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 35px;
  }
  .add-dep-left{
    white-space: nowrap;
    min-width: 76px;
    line-height: 36px;
  }
</style>
