<template>
  <view class="custom-picker" v-if="show">
    <!-- 遮罩层 -->
    <view class="mask" @click="close"></view>
    <!-- 内容 -->
    <view class="custom-picker-content">
      <view class="custom-picker-header">
        <view>{{ title }}</view>
        <view class="close"> </view>
      </view>
      <picker-view
        :indicator-style="indicatorStyle"
        :indicator-class="indicatorClass"
        :value="value"
        :mask-style="maskStyle"
        :immediate-change="true"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in range"
            :class="{ active: activeIndex == index }"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
      </picker-view>
      <view class="custom-picker-footer">
        <fh-button>确认选择</fh-button>
      </view>
    </view>
  </view>
</template>

<script>
import fhButton from './fh-button.vue'
export default {
  name: '',
  components: {
    fhButton,
  },
  props: {
    // 是否显示 接收v-model
    show: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: '请选择',
    },
    // 范围
    range: {
      type: Array,
      default: () => [],
    },
    // 范围的key
    rangeKey: {
      type: String,
      default: 'id',
    },
  },
  data() {
    return {
      indicatorClass: 'indicatorClass',
      indicatorStyle: `height: 50px;`,
      activeIndex: 0,
      maskStyle: `background: transparent !important;`,
      value: [0],
    }
  },
  mounted() {
    this.show = this.show
  },
  methods: {
    bindChange(e) {
      console.log(e)
      this.value = e.detail.value
      this.activeIndex = e.detail.value[0]
    },
    close() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .indicatorClass:before,
  .indicatorClass:after {
    color: transparent !important;
    border-color: transparent !important;
  }
}
.custom-picker {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  &-content {
    width: 100%;
    padding: 0 52rpx;
    box-sizing: border-box;
    height: 850rpx;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 64, 152, 0.1);
    border-radius: 34rpx 34rpx 0rpx 0rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
  }
  &-header {
    width: 100%;
    padding-top: 42rpx;
    text-align: center;
    position: relative;
    padding-bottom: 20rpx;
    .close {
      position: absolute;
      right: 0;
      top: 0;
      width: 100rpx;
    }
  }
  &-footer {
    width: 100%;
    padding: 20rpx 0rpx 52rpx;
    box-sizing: border-box;
    .confirm {
      width: 100%;
      height: 97rpx;
      background: #dab97b;
      color: #fff;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      border-radius: 50rpx;
    }
  }
  .picker-view {
    overflow: hidden;
    flex: 1;
    .item {
      height: 50px !important;
      text-align: center;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s linear;
    }
    .active {
      color: #d3a358;
      font-weight: bold;
      font-size: 40rpx;
    }
  }
}
</style>
