<template>
  <div class='actions-terms'>
    <TitleComponent data='触发条件' style='font-size: 14px;' >
      <template #extra>
        <j-switch
          :checked='open'
          @change='change'
          checkedChildren='开'
          unCheckedChildren='关'
          style='margin-left: 4px;'
        />
      </template>
    </TitleComponent>
    <template v-if='open'>
      <template v-for='(item, index) in data.branches'>
        <Branches
          v-if='!!item'
          :data='item'
          :isFirst='index === 0'
          :name='index'
          :key='item.key'
          @delete='branchesDelete'
          @deleteAll='branchesDeleteAll'
        />
        <div v-else class='actions-terms-warp' :style='{ marginTop: data.branches.length === 2 ? 0 : 24 }'>
          <div class='actions-terms-title' style='padding: 0'>
            否则
          </div>
          <div class='actions-terms-options no-when'>
            <AIcon type='PlusOutlined' class='when-add-button' @click='addBranches' />
          </div>
        </div>
      </template>
    </template>
    <j-form-item
      v-else
      :name='["branches", 0, "then"]'
      :rules='rules'
    >

    </j-form-item>
  </div>
</template>

<script setup lang='ts' name='Terms'>
import { storeToRefs } from 'pinia';
import { useSceneStore } from 'store/scene'
import { cloneDeep } from 'lodash-es'
import { provide } from 'vue'
import { ContextKey } from './util'
import { getParseTerm } from '@/api/rule-engine/scene'
import type { FormModelType } from '@/views/rule-engine/Scene/typings'
import Branches from './Branchs.vue'

const sceneStore = useSceneStore()
const { data } = storeToRefs(sceneStore)

const open = ref(false)
const columnOptions = ref<any[]>([])

provide(ContextKey, columnOptions)

const change = (e: boolean) => {
  open.value = e
}

const rules = [{
  validator(_: string, value: any) {
    if (!value || (value && !value.length)) {
      return Promise.reject('至少配置一个执行动作')
    } else {
      const isActions = value.some((item: any) => item.actions && item.actions.length)
      return isActions ? Promise.resolve() : Promise.reject('至少配置一个执行动作');
    }
    return Promise.resolve();
  }
}]

const queryColumn = (dataModel: FormModelType) => {
  const cloneDevice = cloneDeep(dataModel)
  cloneDevice.branches = cloneDevice.branches?.filter(item => !!item)
  getParseTerm(cloneDevice).then(res => {
      columnOptions.value = res as any
  })
}

const addBranches = () => {

}

const branchesDelete = (index: number) => {
  if ((data as FormModelType).branches?.length === 2) {
    (data as FormModelType).branches?.splice(index, 1, null as any)
  } else {
    (data as FormModelType).branches?.splice(index, 1)
  }
  (data as FormModelType).options?.when?.splice(index, 1)
}

const branchesDeleteAll = () => {

}

watchEffect(() => {
  if ((data as FormModelType).trigger?.device) {
    queryColumn((data as FormModelType))
  }
})

watchEffect(() => {
  open.value = !(
    (data as FormModelType).branches &&
    (data as FormModelType).branches?.length === 1
  )
})

</script>

<style scoped lang='less'>

</style>