<template>
  <view class="px-2 text-3.5">
    <view v-if="inline">
      <view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
        <view>{{ title }}</view>
        <view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
          {{ text || placeholder }}
        </view>
        <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
      </view>
    </view>
    <view v-else>
      <view class="flex flex-items-center pos-relative">
        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
        <view>{{ title }}</view>
      </view>
      <view class="pt-2" @click="toSelect">
        <view class="flex flex-items-center flex-justify-between">
          <view :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
            {{ text || placeholder }}
          </view>
          <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  const text = ref<string | null>(null)

  const props = defineProps({
    id: {
      type: Number,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, null],
      default: null
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    inline: {
      type: Boolean,
      default: false
    }
  })

  const toSelect = () => {
    if (props.type === 'accessControl') {
      uni.navigateTo({
        url: `/pages/select/select-access-control`,
        events: {
          change: res => {
            console.log(1111, res)
          }
        }
      })
    } else {
      const params = {
        type: props.type,
        multiple: props.multiple,
        title: props.type === 'member' ? '选择审批用户' : '选择部门'
      }
      uni.navigateTo({
        url: `/pages/select/select-organization?params=${JSON.stringify(params)}`,
        events: {
          change: res => {
            console.log(1111, res)
          }
        }
      })
    }
  }
</script>
