<template>
  <view
    class="form-select"
    :style="{
      padding: getPadding,
      background: getBgColor
    }"
  >
    <view class="form-select_center" @tap="popup">
      <view class="content">
        <view
          class="label"
          :style="{
            width: labelCenter ? labelWidth + 'rpx' : ''
          }"
          >{{ label }}

          <view
            class="asterisk"
            v-if="asterisk"
            :style="{ color: '#EB0909', right: asteriskRight + 'rpx' }"
            >*</view
          >
        </view>
        <view class="placeholder" v-if="!getValue()">{{ placeholder }}</view>
        <view class="form-value">{{ getValue() }}</view>
      </view>
      <view
        class="ui-cell__arrow"
        :style="{ borderColor: getArrowColor, right: arrowRight + 'rpx' }"
        v-if="arrow"
      ></view>
    </view>
    <view
      v-if="bottomBorder"
      :style="{
        background: getBorderColor,
        left: left + 'rpx',
        right: right + 'rpx'
      }"
      class="border-bottom"
    ></view>
    <ui-bottom-popup
      :radius="false"
      :zIndex="1002"
      :maskZIndex="1001"
      :show="popupShow"
      @close="popup"
    >
      <view class="popup-box">
        <view class="title">{{ placeholder }}</view>
        <ui-cascade-selection
          height="300px"
          :itemList="props.list"
          @complete="complete"
          :defaultItemList="props.value"
        ></ui-cascade-selection>

        <view class="tools">
          <ui-form-button
            width="200rpx"
            height="70rpx"
            color="#07C160"
            background="rgba(0, 0, 0, 0.05)"
            size="30"
            borderWidth="0"
            @click="close"
            >取消</ui-form-button
          >
          <view style="width: 32rpx"></view>
          <ui-form-button
            width="200rpx"
            height="70rpx"
            color="#fff"
            background="#07C160"
            size="30"
            borderWidth="0"
            @click="confirm"
            >完成</ui-form-button
          >
        </view>
      </view>
    </ui-bottom-popup>
  </view>
</template>
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { loopGetObjectValue } from '../../libs/utils/index.js';

interface listType {
  text: string;
  value: string | number;
  children: listType[];
}
interface IProps {
  label: string;
  placeholder: string;
  arrowColor?: string;
  arrow?: boolean;
  arrowRight?: number | string;
  padding?: string;
  background?: string;
  asterisk?: boolean;
  asteriskRight?: number;
  labelCenter?: boolean;
  labelWidth?: number | string;
  bottomBorder?: boolean;
  borderColor?: string;
  left?: number | string;
  right?: number | string;
  list: listType[];
  value?: string[];
  disabled?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  label: '',
  placeholder: '请选择',
  arrow: true,
  arrowColor: '',
  arrowRight: 30,
  asterisk: false,
  asteriskRight: 6,
  labelCenter: false,
  labelWidth: 160,
  bottomBorder: true,
  borderColor: '',
  left: 30,
  right: 0,
  list: [],
  disabled: false
});
const emit = defineEmits<{
  (e: 'confirm', item: listType): void;
}>();

const popupShow = ref(false);
const actived = ref<listType>();

const getArrowColor = computed(() => {
  return (
    props.arrowColor ||
    loopGetObjectValue(['uiListCell', 'arrowColor'], uni.$ui) ||
    '#c0c0c0'
  );
});
const getPadding = computed(() => {
  return (
    props.padding ||
    loopGetObjectValue(['uiFormItem', 'padding'], uni.$ui) ||
    '26rpx 30rpx'
  );
});
const getBgColor = computed(() => {
  return (
    props.background ||
    loopGetObjectValue(['uiFormItem', 'background'], uni.$ui) ||
    '#fff'
  );
});
const getBorderColor = computed(() => {
  return (
    props.borderColor ||
    loopGetObjectValue(['uiFormItem', 'borderColor'], uni.$ui) ||
    '#eaeef1'
  );
});

const popup = () => {
  if (props.disabled) return;
  popupShow.value = !popupShow.value;
};

const close = () => {
  popupShow.value = false;
};

const confirm = () => {
  if (!actived.value) {
    uni.showToast({
      title: '请选择',
      icon: 'none'
    });
    return;
  }
  emit('confirm', actived.value);
  close();
};

const complete = (e) => {
  console.log(e);
  actived.value = e;
};

const getValue = () => {
  if (!props?.value?.length) {
    return '';
  }
  return props.value.join('/');
};

watch(
  () => props.list,
  (value, oldValue) => {}
);
</script>
<style scoped lang="scss">
@import '../../libs/css/form-classify.scss';
</style>
