<template>
  <div class="condition-group-item-wrap">
    <div>
      <el-form :model="formData" ref="formRef" label-suffix="：" label-position="right" label-width="100px" :inline="true">
        <el-form-item label="数据周期" required props="day">
          <el-select v-model="formData.day" @change="formData.exceptDay = 0">
            <el-option v-for="item in periodEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排除" required props="exceptDay">
          <el-select v-model="formData.exceptDay">
            <el-option
              v-for="item in excludeEnum"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="formData.day <= item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        v-for="(conditionInfo, index) of formData.items"
        :model="conditionInfo"
        :inline="true"
        label-position="right"
        label-width="100px"
        ref="ruleFormRef"
        :key="conditionInfo.dataType">
        <el-form-item :required="index === 0" prop="dataType">
          <template #label>
            <span v-if="index === 0">条件：</span>
            <span class="and-span" v-else>&</span>
          </template>
          <el-select v-model="conditionInfo.dataType" style="width: 140px" @change="conditionInfo.num = ''">
            <el-option
              v-for="item in candidateFields"
              :key="item.value"
              :disabled="selectedFields[item.value] ? true : false"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="dayType">
          <el-select v-model="conditionInfo.dayType" style="width: 80px">
            <el-option label="总计" value="sum"></el-option>
            <el-option label="均值" value="avg"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="symbol">
          <el-select v-model="conditionInfo.symbol" style="width: 120px">
            <el-option label="大于" value="gt"></el-option>
            <el-option label="大于等于" value="gte"></el-option>
            <el-option label="小于" value="lt"></el-option>
            <el-option label="小于等于" value="lte"></el-option>
            <el-option label="等于" value="eq"></el-option>
            <el-option label="包含" value="in"></el-option>
            <el-option label="范围内" value="between"></el-option>
            <el-option label="范围外" value="not_between"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="num" :rules="[{ validator: checkRight, trigger: 'blur' }]">
          <InputFloat
            v-model="conditionInfo.num"
            :prefix="findPrefix(conditionInfo.dataType)"
            :suffix="findSuffix(conditionInfo.dataType)"
            style="width: 200px">
          </InputFloat>
        </el-form-item>
        <el-form-item>
          <el-button @click="deleteCondition(index)" type="danger" :icon="Delete" v-show="formData.items.length > 1" link></el-button>
        </el-form-item>
      </el-form>
      <el-button link type="primary" @click="addCondition" :icon="Plus" style="margin-left: 100px; color:blue" v-show="showAddCondiBtn">添加条件</el-button>
    </div>
    <el-button type="danger" @click="deleteConditionGroup" :icon="Delete" v-show="showDelGroupBtn">删除组</el-button>
  </div>
  <el-divider border-style="dashed" class="condition-group-divider"> 或 </el-divider>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import InputFloat from '/@/components/input-float/index.vue'

interface Props {
  candidateFields: CandidateField[]
  data: ConditionGroupItem
  showDelGroupBtn: boolean
}
const emits = defineEmits(['deleteGroup'])
const periodEnum = [
  { label: '昨天', value: 1 },
  { label: '过去7天', value: 7 },
  { label: '过去14天', value: 14 },
  { label: '过去30天', value: 30 },
  { label: '过去60天', value: 60 },
  { label: '过去90天', value: 90 },
]
const excludeEnum = [
  { label: '不排除', value: 0 },
  { label: '昨天', value: 1 },
  { label: '最近2天', value: 2 },
  { label: '最近3天', value: 3 },
  { label: '最近7天', value: 7 },
  { label: '最近14天', value: 14 },
]
const props = defineProps<Props>()
const formRef = ref()
const ruleFormRef = ref()
const formData = reactive(props.data)
const checkRight = (rule: any, value: string, callback: any) => {
  if (value === '0.00' || value === '') {
    callback(new Error('请输入大于0的数值！'))
  } else {
    callback()
  }
}
const validate = async () => {
  let ret = []
  for (const info of ruleFormRef.value) {
    await info.validate((valid:any, fields:string) => {
      ret.push(valid)
      if(!valid) return false
    })
  }
  return ret
}
const showAddCondiBtn = computed(() => {
  return formData.items.length < props.candidateFields.length
})
const selectedFields = computed(() => {
  const ret = {}
  for (const info of formData.items) {
    ret[info.dataType] = true
  }
  return ret
})
const addCondition = () => {
  for (const item of props.candidateFields) {
    if (!selectedFields.value[item.value]) {
      formData.items.push({
        dataType: item.value,
        dayType: 'sum',
        symbol: 'gte',
        num: '',
      })
      break
    }
  }
}
const findPrefix = (dataType: string) => {
  return props.candidateFields.find((item) => item.value === dataType).prefix ?? ''
}
const findSuffix = (dataType: string) => {
  return props.candidateFields.find((item) => item.value === dataType).suffix ?? ''
}
const deleteCondition = (index: number) => {
  formData.items.splice(index, 1)
}
const deleteConditionGroup = () => {
  emits('deleteGroup')
}

defineExpose({validate})
</script>

<style scoped>
.condition-group-item-wrap {
  background: #f4f7fe;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: relative; */
}
.condition-group-period {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}
.condition-item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.and-span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  margin: auto 0;
}
div.condition-group-divider:last-of-type {
  display: none;
}
</style>
