<template>
  <view>
    <view class="picker-container">
      <view v-for="(item, idx) in pickerList" :key="item.id" class="single-picker">
        <picker mode="selector" :value="item.value" :range="item.range" range-key="name"
          @change="bindPickerChange($event, idx, item)">
          <view class="picker">当前选择：{{ item.range[item.value].name || '请选择' }}</view>
        </picker>
      </view>
    </view>
    <block v-if="answerName">
      <view style="font-size:32rpx;color:#ff0000;text-align:center;">
        <view style="color:#ff0000;">选型结果：</view>{{ answerName }}
      </view>
    </block>
    <block v-if="files_url">
      <view class="pdfcss" style="text-align:center;">
        <view @tap="onTapDoc" class="graphic-nav-item">
          <view style="display:flex;margin:10rpx;">
            <view style="flex:1;">
              <image style="width:50rpx;height:50rpx;" :src="g0" mode="widthFix"></image>
            </view>
          </view>
          <view class="file_title">结果文件</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerList: [],
      answerName: '',
      files_url: '',
      g0: ''
    };
  },
  computed: {
    themeColor() {
      return '#ffffff';
    }
  },
  onLoad() {
    // 初始化数据
    this.files_url = '';
    this.g0 = this.files_url ? this.$util.img('addon/personnel/shop/view/enterprise/fileicon.png') : null;
  },
  methods: {
    bindPickerChange(e, idx, item) {
      // 处理选择器变化
      item.value = e.detail.value;
      this.$set(this.pickerList, idx, item);
      // 可以在这里添加逻辑，根据选择结果更新 answerName
    },
    onTapDoc() {
      // 处理文档点击事件
      if (this.files_url) {
        uni.downloadFile({
          url: this.files_url,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                success: (res) => {
                  console.log('打开文档成功');
                }
              });
            }
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.picker-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.single-picker {
  display: flex;
  align-items: center;
  gap: 20rpx;
  border: solid 2rpx red;
  border-radius: 16rpx;
  justify-content: center;
  width: 100%;
}

.picker {
  flex: 1;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  width: 100%;
  font-weight: 600;
}

.file_title {
  font-size: 28rpx;
  color: #666;
}

.graphic-nav-item {
  padding: 20rpx;
  text-align: center;
}
</style>