<template>
  <u-popup
    mode="bottom"
    border-radius="20"
    :popup="false"
    v-model="show"
    :maskCloseAble="true"
    length="auto"
    :safeAreaInsetBottom="true"
    @close="popupClose"
    :z-index="9999"
    close-icon="cross"
    :closeable="true"
  >
    <view class="pesongBox">
      <view class="title">配送</view>
      <view class="details">
        <template v-for="(x, i) in list">
          <text
            :key="i"
            v-if="currentChosen == x.value"
            class="item"
            :style="{ color: mc, borderColor: mc, background: mc + '19' }"
            @click="changeHandler(x.value)"
            >{{ x.name }}</text
          >
          <text
            :key="i"
            v-else
            class="item"
            @click="changeHandler(x.value)"
            :style="{ color: dc, borderColor: dc, background: dc + '19' }"
            >{{ x.name }}</text
          >
        </template>
      </view>
      <view style="margin-bottom:2px;color:#777;font-size:13px">{{tips[`${currentChosen}`].title}}</view>
      <view style="font-weight:600;font-size:13px">{{tips[`${currentChosen}`].content}}</view>
      <view class="btton-box">
        <u-button
          size="80"
          :ripple="true"
          shape="circle"
          :custom-style="{
            backgroundColor: mc,
            height: '80rpx',
            color: '#FFF',
            fontSize: '14px',
            margin: '0 8vw',
            width: '80vw',
          }"
          @click="chosenHandler"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [
        {
          name: "快递配送",
          value: "express",
        },
        {
          name: "线下自提",
          value: "offline",
        },
        {
          name: "区域配送",
          value: "city",
        },
      ],
    },
    sendType: {
      type: String,
      default: "express",
    },
    index:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      mc: "",
      styleItem: {},
      currentChosen: "",
      show:true,
      dc: "#666",
      tips: {
        express: {
          title: "送货时间",
          content: "同城次日到达，其他省3-5日送达",
        },
        offline: {
          title: "自提地点",
          content: "请咨询客服人员具体提货地点",
        },
        city: {
          title: "送货时间",
          content: "一般为当日送达，如遇特殊情况将延伸至次日送达",
        },
      },
    };
  },
  mounted() {
    this.mc = this.$uiConfig.mainColor;
    this.currentChosen = this.sendType;
    this.styleItem = {
      color: this.mc,
      borderColor: this.mc,
      background: this.mc + "19",
    };
    //"offline","city"
  },
  methods: {
    popupClose() {
      this.$emit("close",{
        index:this.index
      })
    },
    chosenHandler(){
      this.$emit("close",{
        index:this.index,
        val:this.currentChosen
      })
    },
    changeHandler(val){
        this.currentChosen=val
    }
  },
};
</script>

<style>
.pesongBox {
  min-height: 60vh;
  padding: 20px;
  padding-bottom: 50px;
  text-align: left !important;
}
.pesongBox .title {
  font-size: 22px;
  color: #000;
}
.pesongBox .details {
  margin-top: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 15px;
  display: block;
}
.pesongBox .details .item {
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  margin-right: 20px;
  font-size: 12px;
}
.pesongBox .btton-box {
  height: 50px;
  display: flex;
  padding: 5px 10px;
  border-top: 1px solid #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background: #fff;
}
</style>
