<template>
  <uv-popup ref="popup" mode="bottom" round="15">
    <view class="popup-content">
      <view class="title">选择推广产品</view>
      <view class="search-input">
        <uv-input
          v-model="searchContent"
          placeholder="请输入内容"
          border="surround"
          clearable
        ></uv-input>
      </view>
      <view class="checkbox">
        <scroll-view scroll-y="true" class="checkbox-content">
          <uv-checkbox-group
            v-model="checkboxValue"
            placement="column"
            iconPlacement="right"
            borderBottom
          >
            <uv-checkbox
              :customStyle="customStyle"
              :name="item.label"
              :label="item.label"
              :key="item.value"
              v-for="item in list"
            />
          </uv-checkbox-group>
        </scroll-view>
      </view>
      <view class="confirm-btn">
        <uv-button class="operate-btn" @click="close" :customStyle="saveBtnStyle">取消</uv-button>
        <uv-button class="operate-btn" @click="confirm" :customStyle="submitBtnStyle"
          >确认</uv-button
        >
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const customStyle = {
  paddingBottom: '24rpx',
  marginBottom: '32rpx'
}

const emmits = defineEmits(['updateMultiplePicker'])

let props = defineProps({
  dictData: Array,
  currValue: String
})

const list = ref<any[]>([])
watch(
  () => props.dictData,
  (newProps) => {
    list.value = newProps || []
  }
)

watch(
  () => props.currValue,
  (newProps) => {
    if (newProps) {
      let arr: string[] = []
      arr = newProps.split(',')
      checkboxValue.value = arr
    }
  }
)

const searchContent = ref()

watch(searchContent, () => {
  filterInfo()
})
const filterInfo = () => {
  if (!searchContent.value) {
    if (props.dictData) {
      list.value = props.dictData
    }
  } else {
    let arr = ['', ...searchContent.value, '']
    let str = arr.join('.*')
    let reg = new RegExp(str)
    list.value = list.value.filter((item) => reg.test(item.label))
  }
}

const popup = ref()
const open = () => {
  popup.value.open()
}

const saveBtnStyle = {
  color: 'black',
  width: '350rpx',
  border: '2rpx solid #000'
}
const submitBtnStyle = {
  background: '#FFAA0A',
  color: '#fff',
  width: '350rpx  '
}

const checkboxValue = ref<string[]>([])

const close = () => {
  popup.value.close()
}

const confirm = () => {
  if (!checkboxValue.value.length) {
    return uni.showToast({
      title: '请选择内容！',
      icon: 'none'
    })
  }
  emmits('updateMultiplePicker', checkboxValue.value)
  close()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.popup-content {
  height: 1000rpx;
  padding: 30rpx;
  .title {
    text-align: center;
    color: #000;
    font-size: 32rpx;
    line-height: 48rpx;
  }
  .search-input {
    margin-top: 20rpx;
  }
  .checkbox {
    margin-top: 40rpx;
    .checkbox-content {
      height: 800rpx;
      box-sizing: border-box;
    }
  }
  .confirm-btn {
    box-shadow: 0px 0px 8rpx 0px rgba(193, 193, 193, 0.5);
    padding: 28rpx 16rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .operate-btn {
      width: calc(50% - 8rpx);
    }
  }
}
</style>
