<template>
  <div class="q-pa-md clue full-height full-width">
    <q-card class="column full-height full-width q-pa-md" flat style="background: #fff; border-radius: 10px">
      <q-tabs v-model="tab" dense class="text-grey q-mb-md" align="left" active-color="primary" indicator-color="primary" narrow-indicator>
        <q-tab :name="1" label="未处理" />
        <q-tab :name="2" label="待回访" />
        <q-tab :name="3" label="无效线索" />
        <q-tab :name="4" label="已转客户" />
      </q-tabs>
      <clue-head :columns="data.allColumns" @reload-data="reloadListHandler" v-if="data.allColumns.length > 0"></clue-head>

      <div class="page-content q-mt-lg col full-width">
        <q-table :rows="data.dataList" :loading="data.dataLoding" v-model:selected="selected" :columns="data.columns" :visible-columns="data.showColumns" flat class="sticky-tow-column-table full-height sticky-right-column-table" row-key="Id" no-data-label="暂无相关数据" selection="multiple" v-if="data.colLoadingFinish" separator="none" style="max-width: 100%">
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="msg.pageCount" :input="true" />
          </template>
          <template v-slot:body-cell-Sys_CustomerName="props">
            <q-td :props="props">
              <div class="row" style="width: 200px">
                <q-avatar size="50" color="grey-4" class="text-white q-mr-md" rounded>
                  {{ props.row.CustomerName[0] }}
                </q-avatar>
                <div>
                  <div class="f16 text-accent cursor-pointer">{{ props.row.CustomerName }}</div>
                  <div class="text-grey-4">
                    <i class="iconfont icon-wechat cursor-pointer" style="font-size: 12px"></i>
                    待添加
                  </div>
                </div>
              </div>
            </q-td>
          </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-sys_setting="props">
            <q-td :props="props" style="background: rgba(0, 0, 0, 0)"></q-td>
          </template>
          <template v-slot:header-cell-sys_setting="props">
            <q-th class="mysetting" :props="props">
              <svg-icon icon="Layout/Layout-4-blocks.svg" class="cursor-pointer" size="20" color="svg-icon-primary" tips="自定义列">
                <q-popup-proxy>
                  <visible-columns v-model="data.showColumns" :allCol="data.allColumns"></visible-columns>
                </q-popup-proxy>
              </svg-icon>
            </q-th>
          </template>
        </q-table>
      </div>
    </q-card>
  </div>
</template>
<script lang="ts">
import { toRefs, defineComponent, onMounted, provide } from 'vue'
import ClueModule from '@/module/customer/clueModule'
import visibleColumns from '@/components/common/visibleColumns.vue'
import ClueHead from '@/components/clue/clueHead.vue'
import useMetaModule from '@/module/meta/metaModule'
let { setTitle } = useMetaModule()
setTitle('线索管理')
export default defineComponent({
  components: { visibleColumns, ClueHead },
  setup() {
    let { useTab, getCluerList, msg, data,selected, SeletObj, reloadListHandler } = ClueModule()
    let [tab] = useTab()
    onMounted(() => {
      getCluerList()
    })

    provide('selectList', selected)

    return {
      tab,
      msg,
      getCluerList,
      data,
      selected,
      reloadListHandler,
      ...toRefs(SeletObj)
    }
  }
})
</script>
<style lang="scss">
.clue .q-field__before {
  padding-right: 0 !important;
}
.clue .ant-input {
  height: 54.5px;
  display: inline-block;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  overflow: hidden;
}
.clue .sticky-tow-column-table th:nth-child(2),
.clue .sticky-tow-column-table td:nth-child(2) {
  left: 72px;
}
.clue .mysetting {
  padding: 7px 6px;
}
</style>
