<template>
  <div class="q-pa-md customer">
    <q-page padding style="background: #fff; border-radius: 10px">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input filled v-model="SeletObj.selectVal" clearable @clear="getCustomerList"
              @update:model-value="getSelectWay(), getCustomerList" placeholder="请输入">
              <template #before>
                <div style="border-right: 1px solid #999">
                  <q-select filled @update:model-value="getSelectWay" option-value="Id" option-label="Name"
                    v-model="SeletObj.selectWay" :options="TypeList" emit-value map-options />
                </div>
              </template>
            </q-input>
          </div>
          <div class="flex no-wrap">
            <q-select filled option-value="Id" option-label="Name" v-model="TimeObj.timeWay" :options="TimeList"
              emit-value map-options @update:model-value="changeTime"> </q-select>
            <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
              <n-date-picker v-model:value="TimeObj.timeRange" type="datetimerange" size="large" separator="至" clearable
                class="full-height"  @update:value='changeTimeRange'/>
            </n-config-provider>
          </div>
          <div class="col-2">
            <n-cascader v-model:value="data.customerCascaderValue" clearable placeholder="客户筛选" check-strategy="child"
              size="large" :show-path="false" max-tag-count="responsive" multiple :options="CustomList" cascade
              @update:value="customerUpdateValue" />
          </div>
          <div class="col-2">
            <n-cascader v-model:value="data.deptCascaderValue" clearable placeholder="选择部门/人员" check-strategy="all"
              value-field="newId" label-field="DeptName" size="large" :show-path="false" max-tag-count="responsive"
              :options="data.EmployeeList" cascade children-field="ChildList" @update:value="getDept" />
          </div>
          <div class="col-2">
            <q-btn color="primary" size="sm" label="导入" />
            <q-btn color="primary" size="sm" style="margin-left: 20px" label="导出" />
          </div>
        </div>
      </div>
      <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
  } from 'vue'
  import CustomerModule from '@/module/customer/customerModule'
  import customRight from '@/components/common/customRight.vue'
  import visibleColumns from '@/components/common/visibleColumns.vue'
  import {
    zhCN,
    dateZhCN
  } from 'naive-ui'
  export default defineComponent({
    components: {
      customRight,
      visibleColumns
    },
    setup() {
      let {
        getCustomerList,
        getWayList,
        data,
        msg,
        TypeList,
        SeletObj,
        getSelectWay,
        TimeObj,
        TimeList,
        changeTime,
        changeTimeRange,
        changePage,
        pagination,
        CustomList,
        getEmployeeData,
        getDept,
        customerUpdateValue,
      } = 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
      }

      onMounted(() => {
        getCustomerList()
        getWayList({})
        getEmployeeData()
      })
      return {
        zhCN,
        dateZhCN,
        getCustomerList,
        data,
        msg,
        TypeList,
        SeletObj,
        getSelectWay,
        TimeObj,
        TimeList,
        changeTime,
        changeTimeRange,
        changePage,
        pagination,
        CustomList,
        isShowCustom,
        closeCustomer,
        getDept,
        CustomerId,
        getCustomInfo,
        customerUpdateValue,
      }
    }
  })

</script>
<style lang="scss">
  .customer .q-field__before {
    padding-right: 0 !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;
  }

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

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

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

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

</style>
