<template>
  <div>
    <div class="d-flex align-items-center">
      <div class="grid-item-text" @click="showPicker">{{ name }}</div>
      <van-icon name="close" v-if="name !== initialName && type !== 'echart_date' && type !== 'stock'"
        @click="clearName" />
      <van-icon name="arrow-down" v-else @click="showPicker" />
    </div>
    <van-popup v-model:show="showPickerFlag" position="bottom">
      <van-picker show-toolbar :title="initialName" :columns="list" @confirm="onConfirm"
        @cancel="showPickerFlag = false" v-model="value" />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
let showPickerFlag = ref(false)
let name: any = ref('')
let value = ref<string[]>([])
let popupValue: any = ref('')
let list: any = ref([])
let prop = defineProps({
  type: String,
  initialName: String,
  selectName: String,
  selectValue: String
})

onMounted(() => {
  nextTick(() => {
    name.value = prop.selectName
    popupValue.value = prop.selectValue
    setList()
  })
})

import { sysDicListByType, sysUserGetSaleAndManagerList, workStaffLookup } from '@/utils/api'
const setList = async () => {
  if (prop.type === 'sale') {
    const { data } = await sysUserGetSaleAndManagerList()
    list.value = data.map((ele: any) => {
      ele.text = ele.userName
      ele.value = ele.userId
      return ele
    })
  } else if (prop.type === 'echart_date') {
    list.value = [{
      text: '最近10年',
      value: '1'
    }, {
      text: '最近1年',
      value: '2'
    }, {
      text: '最近半年',
      value: '3'
    }, {
      text: '最近3个月',
      value: '4'
    }, {
      text: '最近1个月',
      value: '5'
    }, {
      text: '最近1周',
      value: '6'
    }]
  } else if (prop.type === 'link_type') {
    list.value = [{
      text: '上市公司按需会议',
      value: '31'
    }, {
      text: '机构路演',
      value: '32'
    }, {
      text: '机构沟通',
      value: '34'
    }]
  } else if (prop.type === 'create_user') {
    const { data } = await workStaffLookup()
    list.value = data.map((ele: any) => {
      ele.text = ele.staffName
      ele.value = ele.staffId
      return ele
    })
  } else {
    const { data } = await sysDicListByType({ dicType: prop.type })
    list.value = data.map((ele: any) => {
      ele.text = ele.dicValue
      ele.value = ele.dicKey
      return ele
    })
    if (prop.type === 'meeting_type') {
      list.value.push({
        text: '全选',
        value: 'all'
      })
    }
  }
}

const showPicker = () => {
  value.value = [`${popupValue.value}`]
  showPickerFlag.value = true
}
const clearName = () => {
  name.value = prop.initialName
  popupValue.value = ''
  emit('refresh', { value: popupValue.value, name: name.value })
}
const onConfirm = (e: any) => {
  const { text, value, cid } = e.selectedOptions[0]
  name.value = text
  popupValue.value = value
  showPickerFlag.value = false
  emit('refresh', { value: popupValue.value, name: text, cid })
}
const emit = defineEmits(['refresh'])
</script>
<style lang="scss"></style>