<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" v-else>{{ 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-radio-group @change="radioChange">
          <ui-label v-for="item in copyList" :key="item.value">
            <ui-list-cell>
              <view class="radio-center">
                <ui-radio
                  :checked="item.checked"
                  :value="item.value"
                  color="#07C160"
                  borderColor="#6D7278"
                >
                </ui-radio>
                <text class="text" v-if="!item.itemValue">{{
                  item.label
                }}</text>
                <view class="item-value" v-else>
                  <ui-input
                    :placeholder="item.itemValue.startPlaceholder"
                    v-model="item.itemValue.start"
                  ></ui-input>
                  <text class="icon">-</text>
                  <ui-input
                    :placeholder="item.itemValue.endPlaceholder"
                    v-model="item.itemValue.end"
                  ></ui-input>
                </view>
              </view>
            </ui-list-cell>
          </ui-label>
        </ui-radio-group>
        <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';
interface listType {
  label: string;
  value: string | number;
  checked: boolean;
  itemValue?: { start: string; end: string };
}
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 | number;
  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, list: listType[]): void;
}>();

const copyList = ref(JSON.parse(JSON.stringify(props.list || [])));
const popupShow = ref(false);

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 = () => {
  const item = copyList.value.find((v) => v.checked);
  if (!item) {
    uni.showToast({
      title: '请选择',
      icon: 'none'
    });
    return;
  }
  if (item.itemValue) {
    if (!item.itemValue.start || !item.itemValue.end) {
      uni.showToast({
        title: '请输入完整内容',
        icon: 'none'
      });
      return;
    }
  }
  console.log(item);
  emit('confirm', item, JSON.parse(JSON.stringify(copyList.value)));
  close();
};

const radioChange = (e) => {
  const { value } = e.detail;
  copyList.value.forEach((v) => {
    if (v.value === value) {
      v.checked = true;
    } else {
      v.checked = false;
    }
  });
};
const getValue = () => {
  if (props?.value?.itemValue) {
    return props?.value?.itemValue?.start + '-' + props?.value?.itemValue?.end;
  }
  if (props?.value?.label) {
    return props?.value?.label;
  }
  return '';
};

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