<script setup name="conditionDialog">
import { ref, watch } from 'vue'
import store from '@/store'
const { filedConditionsOptions } = store.dictStore.globalDicts || {},
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  emits = defineEmits(['close', 'update:data']),
  formRef = ref(),
  form = ref({
    groups: []
  }),
  rules = {
    name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }]
  },
  // 提交
  submit = async formEl => {
    if (!formEl) {
      emits('close', true)
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const groups = []
        form.value.groups.length && form.value.groups.forEach((orItem, index) => {
          const conditions = orItem.conditions.map(i => {
            return {
              id: i.id,
              title: filedConditionsOptions.find(data => data.value === i.id).label,
              compare: i.compare,
              value: Array.of(i.value),
              valueType: filedConditionsOptions.find(data => data.value === i.id).valueType
            }
          })
          groups.push({
            groupType: 'AND',
            conditions,
            cids: conditions.map(i => i.id)
          })
        })
        const data = {
          id: props.data.id,
          name: props.data.name,
          type: 'CONDITION',
          props: {
            groups,
            groupsType: 'OR'
          }
        }
        emits('update:data', data)
        emits('close', true)
      }
    })
  },
  // 添加且条件
  addAnd = (index) => {
    form.value.groups[index].conditions.push({})
  },
  // 删除且条件
  delAnd = (index, key) => {
    form.value.groups[index].conditions.splice(key, 1)
  },
  // 增加或条件
  addOr = () => {
    form.value.groups.push({
      conditions: []
    })
  },
  // 删除或条件
  delOr = (index) => {
    form.value.groups.splice(index, 1)
  },
  // 修改条件字段
  changeField = (index, key) => {
    form.value.groups[index].conditions[key].compare = undefined
    form.value.groups[index].conditions[key].value = undefined
  }
watch(
  () => props.visible,
  async val => {
    if (val) {
      form.value = {
        groups: props.data.props.groups.map(i => {
          return {
            conditions: i.conditions.map(
              data => {
                return {
                  ...data,
                  value: filedConditionsOptions.find(r => r.value === data.id).type === 'bool_condition' ? data.value.join() * 1 : data.value.join()
                }
              }
            )
          }
        })
      }
    } else {
      formRef.value.resetFields()
    }
  }
)
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="筛选数据"
    width="840px"
    destroy-on-close
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-suffix=":"
      class="form"
    >
      <div v-for="(orList,index) in form.groups" :key="index">
        <div class="orBox">

          <el-row
            v-for="(andList,key) in orList.conditions"
            :key="key"
            :gutter="8"
            class="mb-8"
          >
            <el-col :span="8">
              <el-form-item
                :prop="`groups[${index}][conditions][${key}].id`"
                :rules="{ required: true, message: '请选择项目字段' }"
              >
                <el-select v-model="form.groups[index].conditions[key].id" class="w-full" @change="changeField(index,key)">
                  <el-option
                    v-for="field in filedConditionsOptions"
                    :key="field.value"
                    :label="field.label"
                    :value="field.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                :prop="`groups[${index}][conditions][${key}].compare`"
                :rules="{ required: true, message: '请选择判断符' }"
              >
                <el-select v-model="form.groups[index].conditions[key].compare">
                  <template v-if="form.groups[index].conditions[key].id">
                    <el-option
                      v-for="(v,k) in filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).judges"
                      :key="k"
                      :label="v"
                      :value="k"
                    />
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item
                :prop="`groups[${index}][conditions][${key}].value`"
                :rules="{ required: true, message: '请选择或输入' }"
              >
                <el-select v-if="!form.groups[index].conditions[key].id" class="w-full" />
                <!-- 是否选项-->
                <el-select v-else-if="filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).type==='bool_condition'" v-model="form.groups[index].conditions[key].value" class="w-full">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
                <!-- 多选-->
                <el-select
                  v-else-if="filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).type==='value_condition'"
                  v-model="form.groups[index].conditions[key].value"
                  class="w-full"
                >
                  <el-option
                    v-for="(v,k) in filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).options"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
                <!-- 单选-->
                <el-select v-else-if="filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).type==='single_condition'" v-model="form.groups[index].conditions[key].value" class="w-full">
                  <el-option
                    v-for="(v,k) in filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).options"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
                <!-- 金额-->
                <el-input v-else-if="filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).type==='range_condition'" v-model="form.groups[index].conditions[key].value">
                  <template #append>{{ filedConditionsOptions.find(i=>i.value===form.groups[index].conditions[key].id).unit }}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="1" class="flex items-center text-danger delCol justify-end">
              <el-icon class="cursor-pointer" @click="delAnd(index,key)"><Delete /></el-icon>
            </el-col>
          </el-row>
          <div class="flexbetween">
            <el-button size="small" @click="addAnd(index)">
              <el-icon class="mr-4"><Plus /></el-icon>且条件
            </el-button>
            <span v-if="!orList.length" class="text-danger cursor-pointer" @click="delOr(index)"><el-icon><Delete /></el-icon></span>
          </div>
        </div>
        <p
          v-if="index < form.groups.length - 1"
          class="mx-48 my-17 bg-warning text-white rounded-full w-24 h-24 flex items-center justify-center"
        >或</p>
      </div>
      <el-button
        size="small"
        type="primary"
        plain
        class="mt-16"
        @click="addOr"
      >
        <el-icon class="mr-4"><Plus /></el-icon>或条件
      </el-button>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">
        提交
      </el-button>
      <el-button @click="emits('close')">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
<style lang="less">
.form{
  .el-form-item{
    margin-bottom: 0;
  }
  .orBox{
    background: #f5f8fa;
    border-radius: 4px;
    padding: 24px;
    .delCol{
      display: flex;
    }
  }
}
</style>
