<template>
  <div class="q-pa-md customer">
    <q-page padding style="background-color: #fff; border-radius: 10px">
      <div class="page-search row items-center" v-if="data.selected.length==0">
        <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" dense
              @update:model-value="getSelectWay(), getCustomerList" placeholder="请输入">
              <template #before>
                <div style="border-right: 1px solid #999;padding-right:0">
                  <q-select filled @update:model-value="getSelectWay" option-value="Id" option-label="Name" dense
                    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" dense
              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="small" 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-dropdown label="导入" dense color="primary">
              <q-list>
                <q-item>
                  <q-btn unelevated dense label="导入个人客户" @click="data.showImport=true"/>
                </q-item>
                <q-item>
                  <q-btn unelevated dense label="导入企业客户" />
                </q-item>
              </q-list>
            </q-btn-dropdown>
            <q-btn-dropdown label="导出" color="primary" dense class="q-ml-md">
              <q-list>
                <q-item>
                  <q-btn unelevated dense label="导出个人客户" />
                </q-item>
                <q-item>
                  <q-btn unelevated dense label="导出企业客户" />
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </div>
      </div>
      <div class="select-navs row q-mb-md q-pa-sm flex justify-between items-center" v-if="data.selected.length>0">
        <div class="flex items-center">
          <div style="color: #111;font-weight:bold">已选择{{data.selected.length}}项</div>
          <q-btn style="background-color: #fff; color: #606266" unelevated outline label="设置标签" class="q-ml-md"
            @click="showDialog('isshowlabel')" />
          <q-btn style="background-color: #fff; color: #606266" unelevated outline label="放弃" class="q-ml-md"
            @click="showDialog('showAbandon')" />
          <q-btn style="background-color: #fff; color: #606266" unelevated outline label="转移" class="q-ml-md"
            @click="showDialog('showTransfer')" />

          <q-btn-dropdown label="导出" outline style="background-color: #fff; color: #606266" class="q-ml-md">
            <q-list>
              <q-item>
                <q-btn unelevated dense label="导出客户" />
              </q-item>
              <q-item>
                <q-btn unelevated dense label="导出标签记录" />
              </q-item>
            </q-list>
          </q-btn-dropdown>
          <q-btn style="background-color: #FFEDED; color: #FF4949" unelevated outline label="彻底删除" class="q-ml-md"
            @click="delCustomer" />
        </div>
        <q-icon name="cancel" size="sm" style="color:#707070" @click="data.selected=[]"></q-icon>
      </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>
      <div>
        <labelgroup v-model="data.isshowlabel" @submit="getlabel"></labelgroup>
      </div>
      <!-- ----------------转移客户-------------------------- -->
      <q-dialog v-model="data.showTransfer" class="col-6" persistent>
        <q-card style="width: 480px;  max-width: 80vw">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6">转移客户</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>

          <q-card-section class="q-pt-none">
            <div class="row q-my-md flex items-center no-wrap" style="white-space:nowrap">
              转移给：
              <n-cascader v-model:value="TransferMsg.EmpId" clearable placeholder="客户筛选" check-strategy="child"
                size="large" :show-path="false" max-tag-count="responsive" :options="data.EmployeeList" cascade
                value-field="DeptId" label-field="DeptName" children-field="ChildList" />
            </div>
            <div>
              90个自然日内，在职成员的每位客户仅可被转接2次。
            </div>
          </q-card-section>

          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn flat label="取消" v-close-popup />
            <q-btn color="primary" unelevated label="确定" @click="setTransfer" />
          </q-card-actions>
        </q-card>
      </q-dialog>
      <!-- ----------------放弃客户-------------------------- -->
      <q-dialog v-model="data.showAbandon" class="col-6" persistent>
        <q-card style="width: 480px;  max-width: 80vw">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6">放弃客户</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>

          <q-card-section class="q-pt-none">
            <div class="row q-my-md flex  no-wrap" style="white-space:nowrap">
              <q-input outlined v-model="AbandonMsg.Reason" label="放弃原因：" dense type="textarea" style="width:100%" />
            </div>
            <div>
              放弃后，客户将进入公海
            </div>
            <div>
              审批人 审批人为空（您所在部门没有设置主管），将自动通过审批
            </div>
          </q-card-section>

          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn flat label="取消" v-close-popup />
            <q-btn color="primary" unelevated label="确定" @click="setAbandon" />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </q-page>
    <importComponents v-model="data.showImport"></importComponents>
  </div>
</template>
<script lang="ts">
  import {
    ref,
    defineComponent,
    onMounted
  } 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 labelgroup from '@/components/customer/label-group.vue'
  import importComponents from '@/components/common/import.vue'
  import {
    zhCN,
    dateZhCN
  } from 'naive-ui'

  export default defineComponent({
    components: {
      customRight,
      visibleColumns,
      labelgroup,
      importComponents
    },
    setup() {
      useMeta({
        title: '客户',
      })
      let {
        getCustomerList,
        getWayList,
        data,
        msg,
        TypeList,
        SeletObj,
        getSelectWay,
        TimeObj,
        TimeList,
        changeTime,
        changeTimeRange,
        changePage,
        pagination,
        CustomList,
        getEmployeeData,
        getDept,
        customerUpdateValue,
        showDialog,
        getlabel,
        setTransfer,
        TransferMsg,
        AbandonMsg,
        setAbandon,
        delCustomer
      } = 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,
        showDialog,
        getlabel,
        setTransfer,
        TransferMsg,
        AbandonMsg,
        setAbandon,
        delCustomer
      }
    }
  })

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

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

  ::v-deep .n-base-selection-input {
    height: 40px;
    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: 40px;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .select-navs {
    background-color: #f6f6f6;
    border-radius: 4px;
  }

</style>
