<script lang="ts" setup>
import { menuButtonBoundingClientRect, systemInfo } from '@/utils/systemInfo'

const props = defineProps({
  regionList: {
    type: Array,
    default: () => [],
  },

})
const emits = defineEmits(['close', 'comfirm'])
const list = ref<any>([])
const selectValue = ref<string>('')
const radioStyle = computed(() => ({
  fontSize: '28rpx',
  color: '#333333',
  height: '40rpx',
  padding: '20rpx 0',
}))

function handleSubmit() {
  const region = list.value.find((item: any) => item.regionId === selectValue.value)
  emits('comfirm', region)
}

function handleBack() {
  emits('close')
}

function init(regionId: string) {
  selectValue.value = regionId
}

watch(() => props.regionList, (val) => {
  list.value = val
})

defineExpose({
  init,
})
</script>

<template>
  <view
    :style="{
      width: `${systemInfo.windowWidth}px`,
      height: `${systemInfo.windowHeight}px`,
    }"
    class="regionContainer"
  >
    <view
      :style="{
        height: `${(menuButtonBoundingClientRect.height + menuButtonBoundingClientRect.top)}px`,
      }"
      class="header"
    >
      <view class="align-center flex-row" @click="handleBack">
        <uv-icon name="arrow-left" color="#222222" size="22" />
        <text class="text">
          选择区域
        </text>
      </view>
    </view>
    <scroll-view
      class="content"
      scroll-y
      :style="{
        height: `${systemInfo.windowHeight - menuButtonBoundingClientRect.height - menuButtonBoundingClientRect.top - 80}px`,
      }"
    >
      <view v-if="list.length > 0" class="inner">
        <uv-radio-group
          v-model="selectValue"
          :border-bottom="true"
          icon-placement="right"
          placement="column"
        >
          <uv-radio
            v-for="(item) in list"
            :key="item.regionId"
            :label="item.regionName"
            :name="item.regionId"
            :custom-style="radioStyle"
          />
        </uv-radio-group>
      </view>
      <view v-else class="empty">
        <uv-empty mode="list" text="暂无运营区域" />
      </view>
    </scroll-view>
    <view class="footer">
      <uv-button
        type="primary"
        text="确定"
        :custom-style="{
          backgroundImage: `linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%)`,
          borderRadius: '28rpx',
          height: '100rpx',
        }"
        :custom-text-style="{
          fontSize: '32rpx',
          marginLeft: '8rpx',
        }"
        @click="handleSubmit"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.regionContainer {
  .header {
    padding-left: 20rpx;
    width: calc(100% - 20rpx);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: #222222;
      letter-spacing: 0;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }

  .content {
    .inner {
      padding: 20rpx;
      width: calc(100% - 40rpx);
      padding-top: 30rpx;

      .list-item {
        padding: 14rpx;
        width: calc(100% - 28rpx);
        border-bottom: 2rpx solid #e3e3e3;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .empty {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .footer {
    padding: 20rpx;
    width: calc(100% - 40rpx);
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
  }
}
</style>
