<style>
  .my-special-class {
    width: 200px;
    margin-right: 6px;
  }

  .input_label {
    width: 200px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(0 0 0 / 24%);
    font-size: 14px;
    padding: 0 10px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .right_select {
    width: 40px;
    position: absolute;
    left: 0;
    top: 20px;
  }

  .border_top {
    border: 1px solid #d7d7d7;
    width: 29px;
    border-bottom: none;
    border-right: none;
    margin-left: 12px;
  }

  .border-bottom {
    border: 1px solid #d7d7d7;
    width: 29px;
    border-top: none;
    border-right: none;
    margin-left: 12px;
  }

  .right_select .border_mid div {
    width: 23px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    color: #000;
    font-size: 12px;
    cursor: pointer;
    background: #d8d8d8;
  }

  .right_select .border_mid .checked {
    background: #333 !important;
    color: #fff !important;
  }

  .tag-select-input {
    padding: 4px 10px;
    border-radius: 5px;
    background-color: #f6f6f6;
    font-size: 14px;
  }

</style>
<template>
  <div class="requestgroup">
    <div :style="{ position: 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }">
      <div class="row no-wrap" v-for="(x, y) in addMsg" :key="y" style="margin-bottom: 8px">
        <!-- name -->
        <q-select outlined v-model="x.Id" :options="filedList" dense class="my-special-class" label="请选择客户信息"
          option-value="Id" option-label="Name" option-disable="disable" emit-value map-options
          @update:model-value="changeName($event, y)" />
        <!-- Direction -->
        <q-select v-if="x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == ''" outlined v-model="x.Direction"
          :options="x.directionList" dense label="请选择" class="my-special-class" option-value="Id" option-label="Name"
          emit-value map-options />
        <div class="cascader" v-if="x.Type == 3">
          <n-cascader v-model:value="birthday" clearable placeholder="请选择" check-strategy="child" multiple
            style="width:200px" size="large" max-tag-count="responsive" :options="dateOptions" expand-trigger="hover"
            @update:value="changeDate($event, y)" />
        </div>
        <div v-if="x.Type == 4">
          <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
            <n-date-picker v-model:value="x.rangeArr" type="datetimerange" size="large" separator="至"
            clearable  @update:value="changeRange($event,y)"/>
          </n-config-provider>
          
        </div>
        <!-- StartValue -->
        <div v-if="x.Name == '标签' && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
          class="input_label" @click="showlabel(x, y)">
          <div style="display: flex" v-if="lableList && lableList.length > 0">
            <div class="text-clamp-1 tag-select-input">{{ lableList[0].Name }}</div>
            <div v-if="lableList.length > 1" class="tag-select-input" style="margin-left: 5px">
              {{ lableList.length - 1 }}+</div>
          </div>
        </div>
        <div v-if="(x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == '') && x.Name !== '标签'">
          <div v-if="x.labelType == 3">
            <q-select v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == ''" outlined v-model="x.StartValue"
              :options="x.OptionsList" dense :multiple="x.labelType == 4" label="请选择" class="my-special-class"
              option-value="Id" option-label="Name" emit-value map-options />
          </div>
          <div v-else-if="x.labelType == 4">
            <q-select v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == ''" outlined
              v-model="x.StartValue" :options="x.OptionsList" dense :multiple="true" label="请选择"
              class="my-special-class" option-value="Id" option-label="Name" emit-value map-options />
          </div>
          <div v-else-if="x.labelType == 1 || x.labelType == 2 || x.labelType == 7">
            <q-input
              v-if="x.Type == 1 && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
              outlined v-model="x.StartValue" label="请输入" dense />
            <q-input v-if="x.Type == 2 && (x.Direction == 1 || x.Direction == 2 || x.Direction == '')" outlined
              v-model="x.StartValue" label="请输入" dense />
            <q-input v-if="x.Type == 5 || x.Type == ''" outlined v-model="x.StartValue" label="请输入" dense />
          </div>
          <div v-else>
            <q-input outlined label="请输入" dense />
          </div>
        </div>

        <!-- 新增和删除 -->
        <div style="display: flex; align-items: center">
          <img src="../../assets/images/customer/delete.png" v-if="addMsg.length > 1"
            style="width: 20px; height: 20px; margin-left: 10px" @click="deleteadd(y)" />
          <img src="../../assets/images/customer/add.png" v-if="addMsg.length == y + 1 && addMsg.length < 10"
            style="width: 20px; height: 20px; margin-left: 10px" @click="addsList()" />
        </div>
      </div>
      <div class="right_select" v-if="addMsg.length > 1">
        <div class="border_top" :style="{ height: (addMsg.length * 48 - 8 - 46 - 40) / 2 + 'px' }"></div>
        <div class="border_mid">
          <div class="and" :class="{ checked: addCondition == 1 }" @click="changeAddCondition(1)">且</div>
          <div class="no" :class="{ checked: addCondition == 2 }" @click="changeAddCondition(2)">或</div>
        </div>
        <div class="border-bottom" :style="{ height: (addMsg.length * 48 - 8 - 46 - 40) / 2 + 'px' }"></div>
      </div>
    </div>
    <labelgroup v-if="isshowlabel" :list="lableList" @close="isshowlabel = false" @submit="getlabel"></labelgroup>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    ref,
    watch,
    onMounted
  } from 'vue'
  import customerSetService from '@/api/customerSet'
  import labelgroup from './label-group.vue'
  import dayjs from 'dayjs'
  import {
    Notify
  } from 'quasar'
  import {
    zhCN,
    dateZhCN
  } from 'naive-ui'
  interface params {
    Name: number | string
    IsCustom: number
    Type: number | string
    labelType ? : number | string
    Id ? : number | string
    Direction ? : string | number
    StartValue ? : string | Array < any >
      EndValue ? : string
    disable ? : boolean
    directionList ? : Array < any >
      OptionsList ? : Array < any >
      isSelect ? : boolean
    rangeArr ? : Array < any > | null
  }
  interface dateParams {
    value: string | number
    label: string
    children ? : Array < dateParams >
  }
  const format = 'YYYY/MM/DD HH:mm:ss'
  export default defineComponent({
    props: {
      addCondition: {
        type: Number,
        default: 1
      },
      defaultData: {
        type: Array,
        default: () => []
      }
    },
    components: {
      labelgroup
    },
    setup(props, ctx) {
      let birthday = ref([]) //只有一个
      let lableList = ref < Array < any >> ([]) //标签的数组//只有一个
      let filedList = ref < Array < params >> ([]) //客户字段数组
      let addMsg = ref < Array < any >> ([]) //筛选数组
      let isshowlabel = ref(false) //标签弹出显示
      let selectindex = ref(0) //现在筛选数组 索引

      //日期数组
      let dateOptions = ref < Array < dateParams >> ([])
      let year: any = new Date().getFullYear()
      for (let i = 1; i <= 12; i++) {
        let obj: dateParams = {
          value: i < 10 ? '0' + i : '' + i,
          label: i + '月',
          children: []
        }
        let day = new Date(year, i, 0).getDate()
        for (let d = 1; d <= day; d++) {
          obj.children?.push({
            value: (i < 10 ? '0' + i : '' + i) + '-' + (d < 10 ? '0' + d : '' + d),
            label: d + '号'
          })
        }
        dateOptions.value.push(obj)
      }
      const directionList1 = [{
          Id: 1,
          Name: '包含所有'
        },
        {
          Id: 2,
          Name: '包含任意'
        },
        {
          Id: 3,
          Name: '不包含'
        },
        {
          Id: 4,
          Name: '为空'
        },
        {
          Id: 5,
          Name: '不为空'
        }
      ]
      const directionList2 = [{
          Id: 1,
          Name: '等于'
        },
        {
          Id: 2,
          Name: '不等于'
        },
        {
          Id: 3,
          Name: '为空'
        },
        {
          Id: 4,
          Name: '不为空'
        },
        {
          Id: 5,
          Name: '模糊'
        }
      ]
      const directionList5 = [{
          Id: 1,
          Name: '等于'
        },
        {
          Id: 2,
          Name: '大于'
        },
        {
          Id: 3,
          Name: '大于等于'
        },
        {
          Id: 4,
          Name: '小于'
        },
        {
          Id: 5,
          Name: '小于等于'
        }
      ]
      const init = () => {
        if (props.defaultData && props.defaultData.length > 0) {
          addMsg.value = []
          props.defaultData.map((e: any) => {
            let find: any = filedList.value.find(_e => {
              return _e.Id == e.Id
            })
            if (find && find.OptionsList) {
              e.OptionsList = find.OptionsList
            }
            switch (find.Type) {
              case 1: {
                //单行文本
                e.labelType = 1
                e.directionList = directionList2
                break
              }
              case 2: {
                //多行文本
                e.labelType = 2
                e.directionList = directionList2
                break
              }
              case 3: {
                //单选
                e.labelType = 3
                e.directionList = directionList2
                e.StartValue = Number(e.StartValue)
                if (find.OptionsList) {
                  e.OptionsList = find.OptionsList
                }
                break
              }
              case 4: {
                //多选
                e.labelType = 4
                if (e.Id == '标签') {
                  e.StartValue = ''
                } else {
                  if (e.StartValue) {
                    e.StartValue = e.StartValue.split(',').map(e => Number(e))
                  } else {
                    e.StartValue = []
                  }
                }

                e.directionList = directionList1
                if (find.OptionsList) {
                  e.OptionsList = find.OptionsList
                }
                break
              }
              case 5: {
                //日期
                e.labelType = 5
                if (e.StartValue) {
                  birthday.value = e.StartValue.split(',')
                } else {
                  birthday.value = []
                }
                console.log(5, e.StartValue)
                break
              }
              case 6: {
                //日期时间范围
                e.labelType = 6
                e.rangeArr = [Date.parse(e.StartValue), Date.parse(e.EndValue)]
                console.log(6, e.StartValue)
                break
              }
              case 7: {
                //数值
                e.labelType = 7
                e.directionList = directionList5
                break
              }
            }
            addMsg.value.push(e)
          })
        } else {
          addMsg.value = [{
            Id: '标签',
            Name: '标签',
            Type: 1,
            Direction: '',
            StartValue: '',
            EndValue: '',
            IsCustom: 2,
            directionList: directionList1
          }]
        }
      }
      let changeAddCondition = val => {
        ctx.emit('update:addCondition', val)
      }
      const getCustomerFiledList = () => {
        customerSetService
          .getCustomerFiledList({
            Enable: 1
          })
          .then(res => {
            let data = res.data.Data
            filedList.value = data
            filedList.value.forEach(x => {
              // IsCustom 是否自定义字段 1是 2标签 3阶段
              x.IsCustom = 1
            })
            getCustomerStageList() //获取客户阶段
          })
      }
      const getCustomerStageList = () => {
        customerSetService.getCustomerStageList({}).then(res => {
          let obj: params = {
            Id: '客户阶段',
            Name: '客户阶段',
            Type: 3,
            IsCustom: 3,
            OptionsList: res.data.Data
          }
          filedList.value.unshift(obj)
          let obj2: params = {
            Id: '标签',
            Name: '标签',
            Type: 4,
            IsCustom: 2
          }
          filedList.value.unshift(obj2)
        })
      }
      const deleteadd = index => {
        //删除addMsg某一项
        addMsg.value.splice(index, 1)
      }
      const addsList = () => {
        let obj: params = {
          Id: 0,
          Name: '',
          Type: '',
          Direction: '',
          StartValue: '',
          EndValue: '',
          IsCustom: 2,
          directionList: directionList2
        }
        addMsg.value.push(obj)
      }

      const showlabel = (x, y) => {
        selectindex.value = y
        isshowlabel.value = true
      }
      const getlabel = list => {
        isshowlabel.value = false
        lableList.value = list
        addMsg.value[selectindex.value].StartValue = list.map(e => e.Id).toString()
      }
      //----------------------------------------------------------------------------
      // 禁用标签
      let changeLabel = () => {
        let find: any = addMsg.value.find(e => {
          return e.Id == '标签'
        })
        if (find) {
          filedList.value.map(_e => {
            if (_e.Id == '标签') {
              _e.disable = true
            }
          })
        } else {
          filedList.value.map(_e => {
            if (_e.Id == '标签') {
              _e.disable = false
            }
          })
        }
        //禁用生日
        let find2: any = addMsg.value.find(e => {
          return e.Id == 17
        })
        if (find2) {
          filedList.value.map(_e => {
            if (_e.Id == 17) {
              _e.disable = true
            }
          })
        } else {
          filedList.value.map(_e => {
            if (_e.Id == 17) {
              _e.disable = false
            }
          })
        }
      }

      //标签改变
      let changeName = (val: any, y: number) => {
        addMsg.value[y].StartValue = ''
        addMsg.value[y].EndValue = ''

        switch (val) {
          case '标签': {
            addMsg.value[y].IsCustom = 2
            break
          }
          case '客户阶段': {
            addMsg.value[y].IsCustom = 3
            break
          }
          default: {
            addMsg.value[y].IsCustom = 1
          }
        }
        let find: any = filedList.value.find(e => {
          return e.Id == val
        })
        if (find) {
          addMsg.value[y].Name = find.Name
        }
        switch (find.Type) {
          case 1: {
            //单行文本
            addMsg.value[y].labelType = 1
            addMsg.value[y].directionList = directionList2
            addMsg.value[y].Type = 2
            break
          }
          case 2: {
            //多行文本
            addMsg.value[y].labelType = 2
            addMsg.value[y].directionList = directionList2
            addMsg.value[y].Type = 2
            break
          }
          case 3: {
            //多选
            addMsg.value[y].labelType = 3
            addMsg.value[y].directionList = directionList2
            addMsg.value[y].Type = 2
            if (find.OptionsList) {
              addMsg.value[y].OptionsList = find.OptionsList
            }
            break
          }
          case 4: {
            //多选
            addMsg.value[y].labelType = 4
            addMsg.value[y].StartValue = []
            addMsg.value[y].directionList = directionList1
            addMsg.value[y].Type = 1
            if (find.OptionsList) {
              addMsg.value[y].OptionsList = find.OptionsList
            }
            break
          }
          case 5: {
            //日期
            addMsg.value[y].labelType = 5
            addMsg.value[y].Type = 3
            break
          }
          case 6: {
            //日期时间范围
            addMsg.value[y].labelType = 6
            addMsg.value[y].Type = 4
            addMsg.value[y].rangeArr = null
            break
          }
          case 7: {
            //数值
            addMsg.value[y].labelType = 7
            addMsg.value[y].directionList = directionList5
            addMsg.value[y].Type = 5
            break
          }
        }
      }
      let changeDate = (value, y) => {
        addMsg.value[y].StartValue = value.toString();
      }
      let changeRange = (val, y) => {
          const newVal=JSON.parse(JSON.stringify(val))
          const s= dayjs(newVal[0]).format(format)
          const e= dayjs(newVal[1]).format(format)
        addMsg.value[y].StartValue = s
        addMsg.value[y].EndValue = e
      }
      const checkRule = (val: Array < params > ) => {
        let flag = false
        flag = val.every(e => {
          if (e.Type == 1) {
            if (e.Direction == 1 || e.Direction == 2 || e.Direction == 3) {
              return !!e.Id && !!e.StartValue
            } else {
              return !!e.Id && e.Direction
            }
          } else if (e.Type == 2) {
            if (e.Direction == 1 || e.Direction == 2) {
              return !!e.Id && !!e.StartValue
            } else {
              return e.Id && e.Direction
            }
          } else if (e.Type == 3) {
            return e.Id && e.StartValue
          } else if (e.Type == 4) {
            return e.Id && e.StartValue && e.EndValue
          } else {
            return e.Id && e.Direction && e.StartValue
          }
        })
        if (!flag) {
          Notify.create({
            type: 'warning',
            position: 'top',
            message: '规则适用范围不可空'
          })
        }
        return flag
      }
      watch(
        () => [...addMsg.value],
        val => {
          changeLabel()
          let newVal: Array < params > = []
          val.map((e: params) => {
            let item: params = JSON.parse(JSON.stringify(e))
            if (e.OptionsList) {
              delete item.OptionsList
            }
            if (e.directionList) {
              delete item.directionList
            }
            delete item.labelType
            newVal.push(item)
          })
          console.log('change', newVal)
          ctx.emit('change', newVal)
        }, {
          deep: true
        }
      )
      onMounted(() => {
        //进入页面就调用
        setTimeout(() => {
          init()
        }, 2000)
        getCustomerFiledList() //获取客户字段
      })
      return {
        zhCN,
        dateZhCN,
        birthday,
        dateOptions,
        getCustomerFiledList,
        filedList,
        addMsg,
        deleteadd,
        addsList,
        isshowlabel,
        selectindex,
        lableList,
        showlabel,
        getlabel,
        changeName,
        changeDate,
        changeRange,
        changeAddCondition,
        checkRule
      }
    }
  })

</script>
<style lang="scss" scoped>
  ::v-deep .ant-cascader-picker {
    border-radius: 4px;
    border-color: rgb(0 0 0 / 24%);
    overflow: hidden;
  }

</style>
<style>
  /*修改滚动条样式*/
  ul::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    /**/
  }

  ul::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 3px;
  }

  ul::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }

  ul::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

</style>
