<template>
  <div class="relative-position">
    <div class="bg-white relative-position" :class="{ 'q-ml-xl': selectList.length > 1 }" v-if="selectList.length > 0" style="z-index: 2">
      <div class="row q-mb-md" v-for="(x, i) in selectList" :key="`${i}`">
        <div class="col-10">
          <where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
        </div>
        <div class="col-2 flex items-center justify-start">
          <img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="selectList.length>1" @click="deleteSelect" />
          <img src="@/assets/images/customer/add.png" style="width: 20px" class="cursor-pointer" @click="addSelect" v-if="i + 1 == selectList.length" />
        </div>
      </div>
    </div>
    <div class="absolute-full q-my-md q-ml-md flex" style="border: 1px solid #f1f1f1" v-if="selectList.length > 1">
      <div class="where-box">
        <div class="where-box-item cursor-pointer" :class="{ active: addCondition == 1 }" @click="changeCondition(1)">且</div>
        <div class="where-box-item cursor-pointer" :class="{ active: addCondition == 2 }" @click="changeCondition(2)">或</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, provide, nextTick } from 'vue'
import whereItem from './whereItem.vue'
import { UseDirection } from '@/config/direction'
import message from '@/utils/message'
export default {
  components: { whereItem },
  props: {
    /**
     * @description 当前表格列（只适用于自定义列）
     */
    columns: Array,

    /**
     * 数据
     */
    data: Array
  },
  setup(props) {
    const selectList = ref([])
    provide('columns', props.columns)
    watch(
      () => props.columns,
      val => {
        provide('columns', val)
      },
      { deep: true }
    )

    const addCondition = ref(1)
    const initList = val => {
      if (val && val.list && val.list.length > 0) {
        selectList.value = val.list
        addCondition.value = val.condition
      } else {
        selectList.value = [
          {
            Name: '',
            Type: 0,
            Direction: -1,
            StartValue: '',
            EndValue: '',
            IsCustom: 1
          }
        ]
      }
    }

    initList(props.data)

    const addSelect = () => {
      selectList.value.push({
        Name: '',
        Type: 0,
        Direction: -1,
        StartValue: '',
        EndValue: '',
        IsCustom: 1
      })
    }

    const deleteSelect = index => {
      selectList.value.splice(index, 1)
    }

    const changeDataHandler = (e, i) => {
      if (e.StartValue != undefined) {
        selectList.value[i] = e
        console.log('收到了：', e)
      }
    }

    const changeCondition = val => {
      addCondition.value = val
    }

    const reset = async () => {
      selectList.value = []
      await nextTick()
      selectList.value.push({
        Name: '',
        Type: 0,
        Direction: -1,
        StartValue: '',
        EndValue: '',
        IsCustom: 1
      })
      addCondition.value = 1
    }

    const getData = () => {
      let list = []
      if (selectList.value.length > 0) {
        const temp = JSON.parse(JSON.stringify(selectList.value))
        const msg = UseDirection.ValidateCoustom(temp)
        if (msg != '') {
          message.warnMsg(msg)
        } else {
          list = temp
        }
      }

      return { list, condition: addCondition.value }
    }

    return { selectList, deleteSelect, addSelect, changeDataHandler, addCondition, changeCondition, reset, getData }
  }
}
</script>

<style>
.where-box {
  position: absolute;
  width: 23px;
  left: -11px;
  top: 50%;
  margin-top: -23px;
  z-index: 3;
}
.where-box .where-box-item {
  height: 23px;
  line-height: 23px;
  text-align: center;
  font-size: 12px;
  font-family: 'microsoft yahei';
  background: var(--q-secondary);
  color: var(--q-dark);
}
.where-box .where-box-item.active {
  background: var(--q-dark);
  color: var(--q-secondary);
}
</style>
