<template>
  <view class="wyf">
    <u-popup v-model="show" mode="center" width="600rpx">
      <view class="container">
        <u-card :title="item.title" v-for="(item, index) in list" :key="item.id" margin="20rpx" :head-style="{ padding: '20rpx' }" :foot-style="{ padding: '0rpx' }">
          <template v-slot:body>
            <view class=""> 物料代码：{{ item.itemCode }} </view>
            <view class=""> 物料名称：{{ item.itemName }} </view>
          </template>
          <template v-slot:foot>
            <!-- <button class="go" >Go</button> -->

            <u-button type="primary" @click="selectItem(item, index)" style="width: 200rpx; height: 60rpx">Go</u-button>
          </template>
        </u-card>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([])
const show = ref(false)
const openList = (listParmas) => {
  list.value = listParmas
  show.value = true
}
const selectItem = (item, index) => {
  emit('selectItem', item)
}

// 传递给父类
const emit = defineEmits(['selectItem'])
defineExpose({
  openList
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;

  .list {
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 10px !important;

    .slot-image {
      width: 40rpx;
    }

    .go {
      color: rgb(60, 156, 255);
    }
  }
}
.list ::v-deep .uni-list--border {
  border: 1rpx solid #e5e5e5;
}
</style>
