<template>
  <div class='terms-params-item'>
    <div v-if='!isFirst' class='term-type-warp'>
      <DropdownButton
        :options='[
            { label: "并且", value: "and" },
            { label: "或者", value: "or" },
          ]'
        type='type'
        v-model:value='paramsValue.type'
        @select='typeSelect'
      />
    </div>
    <div
      class='params-item_button'
      @mouseover='mouseover'
      @mouseout='mouseout'
    >
      <DropdownButton
        :options='columnOptions'
        icon='icon-zhihangdongzuoxie-1'
        type='column'
        value-name='column'
        label-name='fullName'
        placeholder='请选择参数'
        v-model:value='paramsValue.column'
        component='treeSelect'
        @select='columnSelect'
      />
      <DropdownButton
        :options='termTypeOptions'
        type="termType"
        value-name='id'
        label-name='name'
        placeholder="操作符"
        v-model:value='paramsValue.termType'
        @select='termsTypeSelect'
      />
      <DoubleParamsDropdown
        v-if='showDouble'
        icon='icon-canshu'
        placeholder='参数值'
        :options='valueOptions'
        :metricOptions='metricOption'
        :tabsOptions='tabsOptions'
        v-model:value='paramsValue.value.value'
        v-model:source='paramsValue.value.source'
        @select='valueSelect'
      />
      <ParamsDropdown
        v-else
        icon='icon-canshu'
        placeholder='参数值'
        :options='valueOptions'
        :metricOptions='metricOption'
        :tabsOptions='tabsOptions'
        v-model:value='paramsValue.value.value'
        v-model:source='paramsValue.value.source'
        @select='valueSelect'
      />
      <j-popconfirm title='确认删除？' @confirm='onDelete'>
        <div v-show='showDelete' class='button-delete'> <AIcon type='CloseOutlined' /></div>
      </j-popconfirm>
    </div>
    <div class='term-add' @click.stop='termAdd' v-if='isLast'>
      <div class='terms-content'>
        <AIcon type='PlusOutlined' style='font-size: 12px' />
      </div>
    </div>
  </div>
</template>

<script setup lang='ts' name='ParamsItem'>
import type { PropType } from 'vue'
import type { TermsType } from '@/views/rule-engine/Scene/typings'
import DropdownButton from '../DropdownButton'
import { getOption } from '../DropdownButton/util'
import ParamsDropdown, { DoubleParamsDropdown } from '../ParamsDropdown'
import { inject } from 'vue'
import { ContextKey } from './util'
import { useSceneStore } from 'store/scene'
import { storeToRefs } from 'pinia';
import { Form } from 'jetlinks-ui-components'
import { pick } from 'lodash-es'

const sceneStore = useSceneStore()
const { data: formModel } = storeToRefs(sceneStore)
const formItemContext = Form.useInjectFormItemContext();

type Emit = {
  (e: 'update:value', data: TermsType): void
}

type TabsOption = {
  label: string;
  key: string;
  component: string
}

const props = defineProps({
  isFirst: {
    type: Boolean,
    default: true
  },
  isLast: {
    type: Boolean,
    default: true
  },
  showDeleteBtn: {
    type: Boolean,
    default: true
  },
  name: {
    type: Number,
    default: 0
  },
  termsName: {
    type: Number,
    default: 0
  },
  branchName: {
    type: Number,
    default: 0
  },
  whenName: {
    type: Number,
    default: 0
  },
  value: {
    type: Object as PropType<TermsType>,
    default: () => ({
      column: '',
      type: '',
      termType: 'eq',
      value: {
        source: 'fixed',
        value: undefined
      }
    })
  }
})

const emit = defineEmits<Emit>()

const paramsValue = reactive<TermsType>({
  column: props.value?.column,
  type: props.value?.type,
  termType: props.value?.termType,
  value: props.value?.value
})

const showDelete = ref(false)
const columnOptions: any = inject(ContextKey) //
const termTypeOptions = ref<Array<{ id: string, name: string}>>([]) // 条件值
const valueOptions = ref<any[]>([]) // 默认手动输入下拉
const metricOption = ref<any[]>([])  // 根据termType获取对应指标值
const tabsOptions = ref<Array<TabsOption>>([{ label: '手动输入', key: 'manual', component: 'string' }])
const arrayParamsKey = ['nbtw', 'btw', 'in', 'nin']
let metricsCacheOption: any[] = [] // 缓存指标值

const handOptionByColumn = (option: any) => {
  if (option) {
    termTypeOptions.value = option.termTypes || []
    metricsCacheOption = option.metrics || []
    tabsOptions.value.length = 1
    tabsOptions.value[0].component = option.dataType

    if (option.metrics && option.metrics.length) {
      tabsOptions.value.push(
        { label: '指标值', key: 'metric', component: 'select' }
      )
    }

    if (option.dataType === 'boolean') {
      valueOptions.value = [
        { label: '是', value: true },
        { label: '否', value: false },
      ]
    } else if(option.dataType === 'enum') {
      valueOptions.value = option.options?.map((item: any) => ({ ...item, label: item.name, value: item.id})) || []
    } else{
      valueOptions.value = option.options || []
    }
  } else {
    termTypeOptions.value = []
    metricsCacheOption = []
    valueOptions.value = []
  }
}

watch(() => [columnOptions.value, paramsValue.column], () => {
  if (paramsValue.column) {
    const option = getOption(columnOptions.value, paramsValue.column, 'column')
    if (option && Object.keys(option).length) {
      handOptionByColumn(option)
      if (props.value.error) {
        emit('update:value', {
          ...props.value,
          error: false
        })
        formItemContext.onFieldChange()
      }
    } else {
      emit('update:value', {
        ...props.value,
        error: true
      })
      formItemContext.onFieldChange()
    }
  }
}, { immediate: true, deep: true })

const showDouble = computed(() => {
  const isRange = paramsValue.termType ? arrayParamsKey.includes(paramsValue.termType) : false
  if (metricsCacheOption.length) {
    metricOption.value = metricsCacheOption.filter(item => isRange ? item.range : !item.range)
  } else {
    metricOption.value = []
  }
  return isRange
})

const mouseover = () => {
  if (props.showDeleteBtn){
    showDelete.value = true
  }
}

const mouseout = () => {
  if (props.showDeleteBtn){
    showDelete.value = false
  }
}

const columnSelect = (option: any) => {
  const termTypes = option.termTypes
  paramsValue.termType = termTypes?.length ? termTypes[0].id : 'eq'
  paramsValue.value = {
    source: tabsOptions.value[0].key,
    value: undefined
  }
  handOptionByColumn(option)
  emit('update:value', { ...paramsValue })
  formItemContext.onFieldChange()
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][0] = option.name
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][1] = paramsValue.termType

}

const termsTypeSelect = (e: { key: string, name: string }) => {
  const value = arrayParamsKey.includes(e.key) ? [ undefined, undefined ] : undefined
  paramsValue.value = {
    source: tabsOptions.value[0].key,
    value: value
  }
  emit('update:value', { ...paramsValue })
  formItemContext.onFieldChange()
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][1] = e.name

}

const valueSelect = (_: any, label: string, labelObj: Record<number, any>) => {
  emit('update:value', { ...paramsValue })
  formItemContext.onFieldChange()
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][2] = labelObj
}

const typeSelect = (e: any) => {
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.name][3] = e.label
}

const termAdd = () => {
  const terms = {
    column: undefined,
    value: {
      source: 'fixed',
      value: undefined
    },
    termType: undefined,
    type: 'and',
    key: `params_${new Date().getTime()}`
  }
  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.[props.termsName]?.terms?.push(terms)
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms[props.termsName].push(['', '', '', '并且'])
}

const onDelete = () => {
  formModel.value.branches?.[props.branchName]?.when?.[props.whenName]?.terms?.[props.termsName]?.terms?.splice(props.name, 1)
  formModel.value.options!.when[props.branchName].terms[props.whenName].terms.splice(props.name, 1)
}

nextTick(() => {
  Object.assign(paramsValue, pick(props.value, ['column', 'options', 'termType', 'terms', 'type', 'value']))
})

</script>

<style scoped>

</style>