<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(msg)" @update:model-value="getSelectWay(),getCustomerList(msg)" label='请输入'>
              <template #before>
                <q-select
                  filled
                  style="width:120px;"
                  @update:model-value="getSelectWay"
                  option-value="Id"
                  option-label="Name"
                  v-model="SeletObj.selectWay"
                  :options="TypeList"
                  emit-value
                  map-options
                  label="选择类型"
                />
              </template>
            </q-input>
          </div>
          <div class="col-3">
            <q-select
              filled
              option-value="Id"
              option-label="Name"
              v-model="TimeObj.timeWay"
              :options="TimeList"
              emit-value
              map-options
            />
          </div>
          <template v-if="TimeObj.timeWay == 1">
            <div class="col-3">
              <q-input filled v-model="msg.CreateSTime" mask="date" @update:model-value="getCustomerList(msg)" placeholder="创建时间">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy"
                      cover
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date v-model="msg.CreateSTime">
                        <div class="row items-center justify-end">
                          <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <div class="col-3">
              <q-input filled v-model="msg.CreateETime" mask="date" @range-end="getCustomerList(msg)" placeholder="创建时间">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy"
                      cover
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date v-model="msg.CreateETime">
                        <div class="row items-center justify-end">
                          <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </template>
          <template v-if="TimeObj.timeWay == 2">
            <div class="col-3">
              <q-input filled v-model="msg.FriendSTime" mask="date" placeholder="添加时间">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy"
                      cover
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date v-model="msg.FriendSTime">
                        <div class="row items-center justify-end">
                          <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <div class="col-3">
              <q-input filled v-model="msg.FriendETime" mask="date" placeholder="添加时间">
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy
                      ref="qDateProxy"
                      cover
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date v-model="msg.FriendETime">
                        <div class="row items-center justify-end">
                          <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                      </q-date>
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </template>
          <div class="col-3">
            <q-select
              filled
              option-value="Id"
              option-label="Name"
              v-model="customSetObj.customWay"
              :options="CustomList"
              emit-value
              map-options
            />
          </div>
          <div class="col-3" v-if="customSetObj.customWay == 1">
            <q-select
              filled
              label="请选择"
              use-chips
              @update:model-value="getCkedFriend"
              option-value="Id"
              option-label="Name"
              :options="friendOptions"
              v-model="friendObj.frendArr"
              multiple
            />
          </div>
          <div class="col-3" v-if="customSetObj.customWay == 2">
            <q-select
              filled
              label="请选择"
              use-chips
              option-value="Id"
              option-label="Name"
              :options="data.WayList"
              v-model="friendObj.wayArr"
              multiple
            />
          </div>
          <div class="col-3" v-if="customSetObj.customWay == 3">
            <q-input filled v-model="msg.Q_NotFollowUpDay" label="几天未跟进"></q-input>
          </div>
          <div class="col-3">
            <selectTree
              :treeData="data.EmployeeList"
              :defaultArray="data.defaultArray"
              nodeKey="newId"
              :multiple="false"
              labelKey="DeptName"
              childrenKey="ChildList"
              tipText="选择部门/人员"
              @getChild="getChild"
            ></selectTree>
          </div>
          <div class="col-3">
            <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="my-sticky-header-column-table"
          row-key="name"
          v-model:pagination="pagination"
          selection="multiple"
        >
          <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>
        </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 selectTree from '@/components/common/selectTree.vue'
import customRight from '@/components/common/customRight.vue'
export default defineComponent({
  components: {
    selectTree,
    customRight
  },
  setup() {
    let {
      getCustomerList,
      getWayList,
      data,
      msg,
      title,
      TypeList,
      SeletObj,
      getSelectWay,
      TimeObj,
      TimeList,
      changePage,
      pagination,
      CustomList,
      customSetObj,
      friendObj,
      friendOptions,
      getEmployeeData,
      getChild,
      getCkedFriend
    } = 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(msg)
      getWayList({})
      getEmployeeData({})
    })
    return {
      getCustomerList,
      getWayList,
      data,
      msg,
      title,
      TypeList,
      SeletObj,
      getSelectWay,
      TimeObj,
      TimeList,
      changePage,
      pagination,
      CustomList,
      customSetObj,
      friendObj,
      friendOptions,
      getEmployeeData,
      getChild,
      getCkedFriend,
      isShowCustom,
      closeCustomer,
      CustomerId,
      getCustomInfo
    }
  }
})

</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;
}
</style>
