<template>
  <div class="col-9 row q-px-md">
    <q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" @update:model-value="changeWhereHandler" v-model="colData.where" :options="colData.nodeWhere" option-label="Name" class="col-5 q-pr-md" dense option-value="Id" map-options filled></q-select>
    <div class="col">
      <where-node-value :node="node" v-if="(colData.where && !colData.where.IsNotValue) || model.Direction == ''"></where-node-value>
    </div>
  </div>
</template>

<script>
import { reactive, watch, onMounted, inject } from 'vue'
import { UseDirection } from '@/config/direction'
import whereNodeValue from './whereNodeValue.vue'
export default {
  components: { whereNodeValue },
  props: {
    /**
     * @description 传入Node对象
     */
    node: Object
  },
  setup(props) {
    const colData = reactive({
      nodeWhere: [],
      where: null,
      whereValue: ''
    })

    const model = inject('whereModel')

    watch(
      () => props.node,
      val => {
        initWhere(val)
      },
      { deep: true }
    )

    const initWhere = val => {
      colData.nodeWhere = UseDirection.QueryDirectionByType(val.data.Type)
      model.value.Name = val.data.Id
      model.value.Type = val.data.Type
      model.value.StartValue = ''
      model.value.EndValue = ''
      model.value.IsCustom = val.IsCustom
      if (colData.nodeWhere && colData.nodeWhere.length > 0) {
        colData.where = colData.nodeWhere[0]
        model.value.Direction = colData.where.Id
      } else {
        colData.where = null
        model.value.Direction = ''
      }
    }

    const changeWhereHandler = val => {
      model.value.Direction = val.Id
    }

    onMounted(() => {
      if (model.value.StartValue == '') {
        initWhere(props.node)
      } else {
        colData.nodeWhere = UseDirection.QueryDirectionByType(model.value.Type)
        if (colData.nodeWhere && colData.nodeWhere.length > 0 && model.value.Direction != '') {
          colData.where = colData.nodeWhere.find(x => x.Id == model.value.Direction)
        } else {
          colData.where = null
        }
      }
    })
    return { colData, model, changeWhereHandler }
  }
}
</script>

<style></style>
