<template>
  <view class="picker-wrap">
    <uni-popup ref="popupRef" :is-mask-click="false" animation type="bottom">
      <view class="popup_box">
        <view v-if="title" class="header_title">
          {{ title }}
        </view>
        <picker-view
          :indicator-style="indicatorStyle"
          :overshoot="false"
          :value="pickValue"
          class="picker-view"
          @change="bindChange"
        >
          <picker-view-column>
            <view
              v-for="(item, index) in pickList"
              :key="index"
              :class="['picker_item', pickValue[0] === item.value ? 'selected_item' : '']"
              >{{ item.name }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
      <view class="footer">
        <button class="cancel_btn flex-center" @click="tapCancelBtn">取消</button>
        <button class="confirm_btn flex-center" @click="tapConfirmBtn">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  pickList: {
    type: Array,
    default: () => [],
  },
  pickVal: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(['update:modelValue', 'confirm']);

const btnDisabled = ref(true); // 按钮禁用

const popupRef = ref(null);
const indicatorStyle = ref(`height: 50px;`);
const pickValue = ref([]);
const isBindChange = ref(false); // 是否触发选择操作

// 选择值
function bindChange(e) {
  isBindChange.value = true;
  btnDisabled.value = false;
  pickValue.value = e.detail.value;
}
// 取消
function tapCancelBtn() {
  emits('update:modelValue', false);
}
// 确定
function tapConfirmBtn() {
  if (isBindChange.value) {
    // 选择
    if (!btnDisabled.value) {
      emits('confirm', props.pickList[pickValue.value[0]]);
    }
  } else {
    // 没有选择
    emits('confirm', props.pickList[pickValue.value[0]]);
    emits('update:modelValue', false);
  }
}
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      nextTick(() => {
        popupRef.value.open();
        pickValue.value = props.pickVal;
        btnDisabled.value = true;
        isBindChange.value = false;
      });
    } else {
      if (popupRef.value) {
        popupRef.value.close();
        isBindChange.value = false;
        btnDisabled.value = true;
      }
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>

<style lang="scss" scoped>
.picker-wrap {
  .popup_box {
    position: relative;
    height: 660rpx;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;

    .header_title {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      z-index: 99;
      color: #333;
      font-size: 32rpx;
    }

    .picker-view {
      width: 750rpx;
      height: 600rpx;
      margin-top: 20rpx;
    }

    .picker_item {
      line-height: 100rpx;
      text-align: center;
    }

    .selected_item {
      color: #615dff;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  border-top: 1px solid #eeeeee;
  bottom: 0;
  z-index: 9;
  background-color: #fff;
  button::after {
    border: none;
  }

  .cancel_btn {
    width: 230rpx;
    height: 90rpx;
    color: #615dff;
    font-size: 30rpx;
    background-color: #ececff;
    border-radius: 20rpx;
  }

  .confirm_btn {
    margin-left: 20rpx;
    height: 90rpx;
    width: 440rpx;
    color: #fff;
    font-size: 30rpx;
    border-radius: 20rpx;
    background: #615dff;
  }
}
</style>
