<template>
  <q-card v-if="selectList && selectList.length > 0" class="row items-center bg-grey-2 q-px-md" style="height: 40px; border-radius: 4px" flat>
    <div class="text-subtitle1 col">已选中 {{ selectList.length }} 项</div>

    <div class="flex items-center">
      <q-btn class="q-px-md" color="dark" label="有效线索" dense outline @click="setCuleStatusHandler(ClueStatus.Effective)"></q-btn>
      <q-btn class="q-ml-md q-px-md" color="dark" label="无效线索" dense outline @click="deleteWhereHandler(1)"></q-btn>
      <q-btn class="q-ml-md q-px-md" color="dark" label="待回访" dense outline @click="deleteWhereHandler(1)"></q-btn>
      <q-btn class="q-ml-md q-px-md" color="dark" dense outline @click="deleteWhereHandler(1)">
        <span>直接分配</span>
        <svg-icon icon="Code/Question-circle.svg" :size="20" color="svg-icon-darkgrey">
          <q-tooltip anchor="bottom middle" max-width="200px" class="bg-white text-dark shadow-3" self="top middle" :offset="[1, 5]">
            <div class="f12">
              以下原因可能导致分配失败：<br />
              ① 存在撞单的客户；<br />
              ② 被分配的员工已有该客户；<br />
              ③ 员工的私库已达到上限；<br />
              ④ 客户已存在于公海；<br />
              ⑤ 员工已经有该手机号的客户；<br />
              ⑥ 撞单，其它员工已存在该手机号的客户；<br />
              ⑦ 公海已存在该手机号的客户；<br />
            </div>
          </q-tooltip>
        </svg-icon>
      </q-btn>
      <q-separator vertical class="q-ml-md"></q-separator>

      <q-btn class="q-ml-md q-px-md" color="dark" label="设置标签" dense outline @click="deleteWhereHandler(1)"></q-btn>
      <q-btn class="q-ml-md q-px-md" color="negative" label="彻底删除" dense outline @click="deleteWhereHandler(1)"></q-btn>
      <svg-icon icon="Code/Error-circle.svg" size="20" color="svg-icon-darkgrey q-ml-md cursor-pointer" tips="清除选中" @click="clearSelectListHandler"></svg-icon>
    </div>
  </q-card>
</template>

<script>
import { inject, ref, reactive, toRefs } from 'vue'
import svgIcon from '../global/svg-icon.vue'
import clueService from '@/api/clue'
import customerSetService from '@/api/customerSet'
import message from '@/utils/message'
import { ClueDistribution, ClueStatus } from '@/@types/enumHelper'
import { useQuasar } from 'quasar'
export default {
  components: { svgIcon },
  setup() {
    const selectList = inject('selectList')
    const ruleConfig = ref(null)
    const $q = useQuasar()
    const data = reactive({
      loading: false,
      ClueStatus
    })

    const dataRefs = toRefs(data)

    customerSetService.getCustomerClueRuleConfig({}).then(r => {
      if (r.data && r.data.Data) {
        ruleConfig.value = r.data.Data
      }
    })
    const deleteWhereHandler = () => {
      console.log('....')
    }
    const clearSelectListHandler = () => {
      selectList.value = []
    }
    const setCuleStatusHandler = status => {
      if (selectList.value && selectList.value.length > 0) {
        let tempIds = ''
        selectList.value.forEach(x => (tempIds += `,${x.Id}`))
        console.log(status,ClueStatus.Effective,ruleConfig.value.ClueType)
        if (status == ClueStatus.Effective) {
          convertToEffectiveHandler(tempIds)
        }
      } else {
        message.warnMsg('未选中任何线索')
      }
    }
    const convertToEffectiveHandler = tempIds => {
      let data = {
        CustomerIds: tempIds,
        Type: ClueStatus.Effective,
        EmpIds: ''
      }
      if (ruleConfig.value.ClueType == ClueDistribution.Manual) {
        //
      } else {
        $q.dialog({
          title: '删除提示',
          html: '是否确认把所选线索认定为“有效线索”？确认后所选线索将会被转为“待分配客户”中。<span style="color:#FF7373">（当前已开启自动分配模式，将直接根据设定的规则分配客户）</span>',
          cancel: true,
          persistent: true
        }).onOk(() => {
          dataRefs.value.loading = true
        })
      }
    }
    return { selectList, deleteWhereHandler, clearSelectListHandler, setCuleStatusHandler, ...dataRefs }
  }
}
</script>

<style></style>
