<script setup lang="ts">
import ConfigTemplate from '../../ConfigTemplate.vue'
import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
import { useUserAttr } from '../../../composables/useAllData'

const props = defineProps<{ node: any }>()

const role = inject('role') as string

const form: any = reactive({
  attr_id: '',
  attr_type: '',
  operate: '',
  value: ''
})
watchEffect(() => {
  Object.assign(form, props.node.data[role])
})

const { userAttrList } = useUserAttr()

// 获取运算符列表
function getOperatorList(type: string) {
  if (type === '1') return stringOperatorList
  if (type === '2' || type === '3') return numberOperatorList
  if (type === '4' || type === '5') return dateOperatorList
  return stringOperatorList
}

const operatorList = computed(() => {
  const found = userAttrList.value.find(item => item.id === form.attr_id)
  return found ? getOperatorList(found.type) : []
})

function onAttrChange() {
  const currentUserAttr = userAttrList.value.find(item => item.id === form.attr_id)
  form.attr_type = currentUserAttr ? currentUserAttr.type : ''
  form.operate = ''
  form.value = ''
}

function getAttr(attrId: string) {
  return userAttrList.value.find(item => item.id === attrId)
}

// 条件改变
function handleOperateChange(value: string) {
  form.value = ''
  // 区间
  if (value === 'range') {
    form.value = { start: undefined, end: undefined }
  }
}
</script>

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item>
      <div>
        <div style="display: flex">
          <el-select v-model="form.attr_id" @change="onAttrChange" placeholder="请选择属性" style="width: 130px">
            <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
          </el-select>
          <el-select v-model="form.operate" style="margin: 0 10px; width: 130px" @change="handleOperateChange">
            <el-option v-for="item in operatorList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
          <!-- 数字区间 -->
          <template v-if="['2', '3'].includes(form.attr_type) && form.operate === 'range'">
            <el-input-number step-strictly :controls="false" :min="0" v-model="form.value.start" />
            <el-input-number step-strictly :controls="false" :min="0" v-model="form.value.end" style="margin-left: 10px" />
          </template>
          <!-- 日期区间 -->
          <template v-else-if="form.attr_type === '4' && form.operate === 'range'">
            <el-date-picker v-model="form.value.start" type="date" value-format="YYYY-MM-DD" style="width: 180px" />
            <el-date-picker v-model="form.value.end" type="date" value-format="YYYY-MM-DD" style="width: 180px; margin-left: 10px" />
          </template>
          <!-- 时间区间 -->
          <template v-else-if="form.attr_type === '5' && form.operate === 'range'">
            <el-date-picker v-model="form.value.start" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
            <el-date-picker v-model="form.value.end" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px; margin-left: 10px" />
          </template>
          <template v-else-if="form.attr_type === '4' && (form.operate === 'after' || form.operate === 'before')">
            <el-date-picker v-model="form.value" type="date" value-format="YYYY-MM-DD" />
          </template>
          <template v-else-if="form.attr_type === '5' && (form.operate === 'after' || form.operate === 'before')">
            <el-date-picker v-model="form.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px; margin-left: 10px" />
          </template>
          <template v-else>
            <el-input v-model="form.value" placeholder="请输入属性值" :maxlength="getAttr(form.attr_id)?.format" style="width: 180px"></el-input>
          </template>
        </div>
        <p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户，将会触发该旅程</p>
      </div>
    </el-form-item>
  </ConfigTemplate>
</template>
