<script setup lang="ts">
import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
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({
  rules: [{ 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
}

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

function addRule() {
  form.rules.push({ attr_id: '', attr_type: '', operate: '', value: '' })
}

function removeRule(index: number) {
  form.rules.splice(index, 1)
}

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

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

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item v-for="(rule, index) in form.rules" :key="index">
      <el-row align="middle">
        <el-select v-model="rule.attr_id" @change="onAttrChange(rule)" placeholder="请选择属性" style="width: 120px">
          <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="rule.operate" style="margin: 0 10px; width: 120px" @change="value => handleOperateChange(value, rule)">
          <el-option v-for="item in getOperatorList(rule.attr_type)" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-form-item v-if="!['null', 'not null'].includes(rule.operate)">
          <!-- 数字区间 -->
          <template v-if="['2', '3'].includes(rule.attr_type) && rule.operate === 'range'">
            <el-input-number step-strictly :controls="false" :min="0" v-model="rule.value.start" />
            <el-input-number step-strictly :controls="false" :min="0" v-model="rule.value.end" style="margin-left: 10px" />
          </template>
          <!-- 日期区间 -->
          <template v-else-if="rule.attr_type === '4' && rule.operate === 'range'">
            <el-date-picker v-model="rule.value.start" type="date" value-format="YYYY-MM-DD" style="width: 180px" />
            <el-date-picker v-model="rule.value.end" type="date" value-format="YYYY-MM-DD" style="width: 180px; margin-left: 10px" />
          </template>
          <!-- 时间区间 -->
          <template v-else-if="rule.attr_type === '5' && rule.operate === 'range'">
            <el-date-picker v-model="rule.value.start" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
            <el-date-picker v-model="rule.value.end" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px; margin-left: 10px" />
          </template>
          <template v-else-if="rule.attr_type === '4' && (rule.operate === 'after' || rule.operate === 'before')">
            <el-date-picker v-model="rule.value" type="date" value-format="YYYY-MM-DD" />
          </template>
          <template v-else-if="rule.attr_type === '5' && (rule.operate === 'after' || rule.operate === 'before')">
            <el-date-picker v-model="rule.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="rule.value" placeholder="请输入属性值" :maxlength="getAttr(rule.attr_id)?.format" style="width: 180px"></el-input>
          </template>
        </el-form-item>
        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="removeRule(index)" v-if="index !== 0">
          <RemoveFilled />
        </el-icon>
        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="addRule" v-if="index === form.rules.length - 1">
          <CirclePlusFilled />
        </el-icon>
      </el-row>
    </el-form-item>
  </ConfigTemplate>
</template>
