<template>
  <u-popup
    style="position: absolute"
    :show="isViewLetter"
    @close="close"
    :closeable="true"
    mode="center"
    customStyle="border-radius: 40rpx;"
  >
    <view class="content-main">
      <view class="content-title"> 请选择制作方式 </view>
      <view
        class="content-item"
        v-for="(item ,index) in productionType"
        :key="item.id"
      >
        <view class="content-item-button" @click="$emit('selectPlan', item)">
          {{ item.title }}
        </view>
        <view class="content-item-explain">
          {{ item.explain }}
          <text style="color: #ce7a2c" v-if="item.price">{{ item.price }}</text
          >{{ item.price ? "元/次" : "" }}
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "SelectProductionMethod",
  created() {
    this.productionType = this.$store.productionType;
    console.log(this.productionType, "111111111111111");
  },
  data() {
    return {
      isViewLetter: true,
      productionType: false,
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss">
.content-main {
  width: 600rpx;
  height: 654rpx;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-title {
  width: 238rpx;
  height: 45rpx;
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.content-item-button {
  margin-top: 40rpx;
  flex: 1;
  background: linear-gradient(to bottom right, #e8b648, #e08745);
  height: 80rpx;
  width: 500rpx;
  font-size: 34rpx;
  border-radius: 20rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-item-explain {
  width: 100%;
  font-size: 26rpx;
  font-family: OPPOSans Regular-Regular, OPPOSans Regular;
  font-weight: 400;
  color: #111111;
  text-align: center;
  margin-top: 10rpx;
}
</style>