<template>
  <q-card class="vt-customwhere-card column" flat v-if="allCol">
    <q-card-section v-if="modeType == 1">
      <div class="text-h6 pfb">{{ colData.cardTitle }}</div>
      <div class="f12 text-grey">当线索符合以下条件时</div>
    </q-card-section>
    <q-card-section v-else-if="modeType == 2 || modeType == 3">
      <div class="text-h6 pfb">{{ modeType == 2 ? '添加' : '编辑' }}常用筛选</div>
    </q-card-section>
    <q-card-section v-if="(modeType == 2 || modeType == 3) && model">
      <q-input ref="whereName" maxlength="20" filled dense v-model="model.Name" :rules="[val => !!val || '请输入分类名称']" placeholder="请输入分类名称"></q-input>
    </q-card-section>
    <q-card-section v-if="modeType == 2 || modeType == 3">
      <div class="text-h6 pfb">当线索符合以下条件时</div>
    </q-card-section>
    <div class="col">
      <q-scroll-area :thumb-style="colData.scroll.scrollStyle.thumbStyle" :bar-style="colData.scroll.scrollStyle.barStyle" class="full-height full-width q-px-md">
        <where ref="whereBox" :columns="allCol" :data="currentData" v-if="allCol.length > 0 && modeType!=0"></where>
      </q-scroll-area>
    </div>
    <q-separator />
    <q-card-section class="row">
      <div class="col">
        <q-btn dense outline color="dark" @click="changeModeToNew" v-if="modeType == 1" label="存为常用模板" class="q-px-sm"></q-btn>
      </div>
      <div>
        <q-btn dense flat label="重置" class="q-mr-md" v-if="modeType == 1" @click="resetHandler"></q-btn>
        <q-btn unelevated dense color="primary" @click="subCustomHander" label="确定" :loading="subLoading" v-if="modeType == 1" class="q-mr-md q-px-lg"></q-btn>
        <q-btn unelevated dense color="primary" label="立即保存" :loading="subLoading" @click="saveHandler" v-if="modeType == 2 || modeType == 3" class="q-mr-md q-px-lg"></q-btn>
      </div>
    </q-card-section>
  </q-card>
</template>

<script>
import { ref, computed, reactive, onMounted } from 'vue'
import useScrollModule from '@/module/scrollbar/scrollModule'
import where from './where.vue'
import CustomQueryService from '@/api/customQuery'
import message from '@/utils/message'
export default {
  components: { where },
  props: {
    /**
     * @description 当前表格列（只适用于自定义列）
     */
    columns: Array,

    /**
     * @description 标题
     */
    title: String,

    /**
     * @description 条件所属页面编号
     */
    code: String,

    /**
     * @description 1,临时查询；2,新增；3,编辑
     */
    mode: String,

    /**
     * @description 编号
     */
    dataId: Number,

    /**
     * 当前自定义条件
     */
    current: Object
  },
  setup(props, context) {
    const allCol = computed(() => {
      return props.columns.filter(x => x.IsCustom > 0)
    })
    const model = ref(null)
    const modeType = ref(0)
    const whereName = ref(null)
    const currentData = ref(props.current)

    const colData = reactive({
      cardTitle: props.title ? ref(props.title) : '自定义筛选',
      scroll: useScrollModule(),
      currentNode: null
    })

    onMounted(() => {
      const tempCurrent = props.columns.filter(x => x.IsCustom > 0)
      colData.currentNode = tempCurrent ? tempCurrent[0] : null
    })

    const whereBox = ref(null)

    const resetHandler = () => {
      whereBox.value.reset()
    }

    const changeModeToNew = () => {
      model.value = {
        Id: 0,
        Name: '',
        Code: props.code,
        SelectLit: '',
        AddCondition: 1
      }
      modeType.value = 2
    }

    const changeModeToModify = () => {
      if (props.dataId) {
        CustomQueryService.queryCustomById(props.dataId).then(r => {
          if (r.data.Data.Id !== props.dataId) {
            changeModeToNew()  
          } else {
            model.value = r.data.Data
            currentData.value.list = JSON.parse(model.value.SelectList)
            currentData.value.condition = model.value.AddCondition
            modeType.value = 3
          }
        })
        
      } else {
        changeModeToNew()
        modeType.value = 2
      }
    }

    if (props.mode == 3) {
      changeModeToModify()
    } else if (props.mode == 2) {
      changeModeToNew()
    } else if (props.mode == 1) {
      modeType.value=1
    }


    const subLoading = ref(false)
    const saveHandler = () => {
      subLoading.value = true
      const data = whereBox.value.getData()
      if (data.list && data.list.length > 0) {
        whereName.value.validate()
        if (whereName.value.hasError) {
          message.warnMsg('请填写分类名称')
        } else {
          model.value.AddCondition = data.condition
          model.value.SelectList = JSON.stringify(data.list)
          CustomQueryService.saveCustom(model.value).then(r => {
            if (r.data && r.data.Code == 1) {
              message.successMsg('保存完毕')
              context.emit('change-reload', 'SAVE')
            }
            subLoading.value = false
          })
        }
      }
      subLoading.value = false
    }

    const subCustomHander = () => {
      subLoading.value = true
      const data = whereBox.value.getData()
      if (data.list && data.list.length > 0) {
        context.emit('change-reload', 'CUSTOM', data)
      } else {
        message.warnMsg('你还未设置任何查询内容')
      }
      subLoading.value = false
    }

    return { allCol, colData, currentData, whereBox, subCustomHander, resetHandler, changeModeToNew, model, modeType, saveHandler, subLoading, whereName }
  }
}
</script>

<style lang="sass" scoped>
.vt-customwhere-card
  max-width: 700px !important
  width: 700px
  height: 500px
</style>
