<template>
  <div class="row q-mx-md relative-position vt-header-box" v-if="!selectColumns || selectColumns.length==0">
    <search-box v-model="queryMsg.searchKey" @blur="reloadDataHandler"></search-box>
    <q-input class="q-ml-md" outlined dense v-model="queryMsg.formatCreateDateRange" placeholder="创建时间" readonly>
      <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
        <q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
      </q-popup-proxy>
    </q-input>
    <vt-custom-btn v-if="allColumn && allColumn.length > 0" ref="vtBtn" :page-code="pageCode" :columns="allColumn" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
    <q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn>
  </div>
  <select-card></select-card>
</template>

<script>
import searchBox from '../common/searchBox.vue'
import { formatDateTime } from '@/utils/tools'
import vtCustomBtn from '../common/customWhere/vtCustomBtn.vue'
import { reactive, ref, inject } from 'vue'
import { GetLabelObject, GetChannelObject } from '@/utils/customColumn'
import selectCard from './selectCard.vue'
export default {
  props: {
    /**
     * @description 列数组
     */
    columns: Array
  },
  components: { searchBox, vtCustomBtn, selectCard },
  setup(props, context) {
    const allColumn = ref(props.columns)
    allColumn.value.splice(0,0,GetLabelObject())
    //注意GetChannelObject是异步方法，插入自己需要的位置
    GetChannelObject().then(r => {
      allColumn.value.splice(1, 0, r)
    })
    const pageCode = ref('clue_custom')
    const vtBtn = ref(null)
    const queryMsg = reactive({
      searchKey: '',
      createDate: {},
      formatCreateDateRange: ''
    })
    const selectMsg = reactive({
      CustomerName: '',
      CorpName: '',
      WeChatName: '',
      CustomerMobile: '',
      CreateSTime: '',
      CreateETime: '',
      SelectList: [],
      AddCondition: 1
    })

    const selectColumns = inject("selectList")

    const updateCreateRange = e => {
      if (e.from && e.to) {
        let tempFrom = e.from.year + '-' + e.from.month + '-' + e.from.day
        let toFrom = e.to.year + '-' + e.to.month + '-' + e.to.day
        queryMsg.formatCreateDateRange = `${tempFrom} 至 ${toFrom}`
        selectMsg.CreateSTime = tempFrom
        selectMsg.CreateETime = toFrom
      } else {
        queryMsg.formatCreateDateRange = ''
        selectMsg.CreateSTime = ''
        selectMsg.CreateETime = ''
      }
      qDateProxy.value.hide()
      pushRelaodHandler()
    }

    const nowDate = formatDateTime(new Date(), 'yyyy/MM/dd')
    const optionsFn = date => {
      return date >= '2020/01/01' && date <= nowDate
    }

    const qDateProxy = ref(null)
    const deleteWhereHandler = type => {
      selectMsg.SelectList = []
      selectMsg.AddCondition = 0
      queryMsg.whereId = 0
      //重置
      if (type == 1) {
        queryMsg.formatCreateDateRange = ''
        queryMsg.createDate = {}
        queryMsg.searchKey = ''
        vtBtn.value.clearWhereHandler()
      }
      reloadDataHandler()
    }
    const updateWhereHandler = params => {
      selectMsg.SelectList = params.SelectList
      selectMsg.AddCondition = params.AddCondition
      pushRelaodHandler()
    }

    const pushRelaodHandler = () => {
      context.emit('reload-data', selectMsg)
    }

    const reloadDataHandler = () => {
      selectMsg.CustomerName = queryMsg.searchKey
      // selectMsg.CorpName = queryMsg.searchKey
      // selectMsg.WeChatName = queryMsg.searchKey
      // selectMsg.CustomerMobile = queryMsg.searchKey
      if (queryMsg.formatCreateDateRange.indexOf('至') != -1) {
        selectMsg.CreateSTime = queryMsg.formatCreateDateRange.split(' 至 ')[0]
        selectMsg.CreateETime = queryMsg.formatCreateDateRange.split(' 至 ')[1]
      } else {
        selectMsg.CreateSTime = ''
        selectMsg.CreateETime = ''
      }
      pushRelaodHandler()
    }

    return { queryMsg, selectColumns, allColumn, updateCreateRange, optionsFn, vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
  }
}
</script>

<style>
.vt-header-box .q-field--outlined.q-field--readonly .q-field__control:before {
  border-style: solid !important;
}
</style>
