
<style lang="scss" scoped>
.header_bar {
  width: 750rpx;
  height: 693rpx;
  position: relative;
  z-index: 2;
  image {
    width: 100%;
    height: 100%;
  }
}
.content {
  height: 100vh;
  box-sizing: border-box;

  .box {
    padding: 20upx;
    width: 95%;
    height: 765rpx;
    background-color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    border-radius: 20rpx;
    background: url("../../static/detail_bg.png");
    background-size: 100% 100%;
    position: relative;
    top: -160rpx;
    .title {
      margin: 0 auto;
      margin-top: 180rpx;
      width: 368rpx;
      height: 79rpx;
      background: #ffffff;
      border: 4rpx solid #69cd2a;
      border-radius: 10rpx;
      font-size: 34rpx;
      line-height: 79rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 44rpx;
        height: 50rpx;
        margin-right: 15rpx;
      }
    }
    .card {
      border-radius: 10rpx;
      margin-top: 36rpx;
      background-color: #eeeff3;
    }
  }

  .content1 {
    padding: 0 29rpx;

    view {
      padding: 34upx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .lable {
        font-size: 26rpx;
        color: #606061;
      }
      .text {
        font-size: 28rpx;
        color: #28292b;
        font-weight: bold;
      }
    }
    .border-b {
      border-bottom: 2rpx solid #cfcfcf;
    }
  }

  .FLEX-CENTER {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.wrapper {
  padding: 18rpx 27rpx;
  top: 30rpx;
  position: relative;
}
.setmeal_wrapper {
  display: flex;
  justify-content: space-between;
  image {
    width: 95rpx;
    height: 81rpx;
    position: absolute;
    right: -40rpx;
    top: 33rpx;
  }
  .setmeal {
    width: 344rpx;
    display: flex;
    height: 174rpx;
    background: #f1e748;
    border-radius: 21rpx;
    justify-content: space-between;
    overflow: hidden;
    .radius {
      position: relative;
      width: 119rpx;
      height: 119rpx;
      background: #ffffff;
      border-radius: 50%;
      left: -40rpx;
      top: 28rpx;
    }
    .setmeal_info {
      flex: 1;
      display: flex;
      margin-left: 10rpx;
      flex-direction: column;
      color: #000506;
      .name {
        font-size: 28rpx;
        font-weight: bold;
        margin-top: 28rpx;
      }
      .num {
        margin-top: 10rpx;
        font-size: 26rpx;
      }
      .price {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        text {
          color: #d2101c;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    background-color: #97e253;
    image {
      top: 0;
      width: 97rpx;
      height: 123rpx;
    }
  }
}
.luxury_meal {
  margin-top: 16rpx;
  position: relative;
  image {
    width: 695rpx;
    height: 174rpx;
  }
  .meal_info {
    display: flex;
    align-items: center;
    position: absolute;
    left: 284rpx;
    top: 32rpx;
    .name {
      color: #f6ea26;
      font-size: 28rpx;
      font-weight: bold;
    }
    .unit {
      font-size: 26rpx;
      color: #ebdf2e;
      font-weight: 500;
      margin-left: 60rpx;
    }
    .price {
      margin-left: 60rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      color: #ffffff;
      text {
        color: #d2101c;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }
}
.purchase_wrapper {
  width: 700rpx;
  height: 365rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 16rpx;
  overflow: hidden;
  .title {
    height: 94rpx;
    background: #222222;
    display: flex;
    align-items: center;
    font-size: 28;
    color: #ffffff;
    padding-left: 35rpx;
  }
  .input_wrapper {
    padding: 0 20rpx;
    display: flex;
    margin-top: 43rpx;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #010000;
    input {
      width: 104rpx;
      height: 74rpx;
      background: #d9dadb;
      border-radius: 5rpx;
      text-align: center;
      font-size: 30rpx;
      color: #000103;
    }
    text {
      font-size: 32rpx;
      color: #7a7979;
    }
  }
  .button {
    width: 579rpx;
    height: 80rpx;
    background: #65c24a;
    margin: 0 auto;
    margin-top: 45rpx;
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #030000;
    font-weight: bold;
  }
}
.check_box {
  // margin-top: 10rpx;
}
.u-page__item__slot-icon {
  width: 50rpx;
  height: 50rpx;
}
</style>
<template>
  <view class="content">
    <u-navbar
      bgColor="transparent"
      leftIconColor="#ffffff"
      @leftClick="goHome"
      @rightClick="goPerson"
    >
      <!-- <view slot="right">
				<u-icon size="40rpx" name="account" color="#fff"></u-icon>
			</view> -->
    </u-navbar>
    <view class="header_bar">
      <image src="../../static/headerbar_bg.png" mode=""></image>
    </view>
    <view>
      <view class="wrapper">
        <view class="setmeal_wrapper">
          <view class="setmeal left" @click="handlerMeal('1')">
            <view class="radius">
              <image src="../../static/fruit-L.png" mode=""></image>
            </view>
            <view class="setmeal_info">
              <text class="name">微型套餐</text>
              <text class="num">40棵≈1分地</text>
              <view class="price"> 价格：<text>5000元</text> </view>
            </view>
          </view>
          <view class="setmeal right" @click="handlerMeal('5')">
            <view class="radius">
              <image src="../../static/fruit-R.png" mode=""></image>
            </view>
            <view class="setmeal_info">
              <text class="name">小微套餐</text>
              <text class="num">200棵≈5分地</text>
              <view class="price"> 价格：<text>25000元</text> </view>
            </view>
          </view>
        </view>
        <view class="luxury_meal" @click="handlerMeal('10')">
          <image src="../../static/luxury_bg.png" mode=""></image>
          <view class="meal_info">
            <view class="name">迷你套餐</view>
            <view>
              <view class="unit">400棵=1亩地</view>
              <view class="price"> 价格：<text>50000元</text> </view>
            </view>
          </view>
        </view>
        <view class="purchase_wrapper">
          <view class="title">购买其他份额：</view>
          <view class="input_wrapper">
            <u-number-box
              :disabledInput="true"
              :integer="true"
              v-model="value"
              @change="getAmount"
            ></u-number-box>
            <!-- <input type="number" v-model="value" @input="getAmount"> -->
            份
            <text>≈</text>
            <input type="number" disabled="true" v-model="acer" />
            亩
            <text>=</text>
            <input type="number" disabled="true" v-model="spec" /> 棵
          </view>
          <view class="button" @click="handlerPurchase">购买</view>
        </view>

      </view>
    </view>
    <u-modal
      :show="show"
      :title="title"
      confirmText="确定"
      cancelText="取消"
      :showCancelButton="true"
      @close="show = false"
      @cancel="show = false"
      @confirm="onConfirm"
      :closeOnClickOverlay="true"
    >
      <view>
        <view>
          您需要花费{{ result.payMoney }}元+{{ result.payLsjf }}个绿色积分
        </view>
        <!-- <u-gap height="10"></u-gap>
				<view class="check_box flex1">
					<u-checkbox-group>
						<u-checkbox shape="circle"></u-checkbox>
						我已阅读并同意 <u-text @click="handlerAgreement" type="primary" text="《购买协议》"></u-text>
					</u-checkbox-group>
				</view> -->
      </view>
    </u-modal>
    <!-- <neil-modal :show="show" :title="title" @cancel="show=false" @confirm="onConfirm"></neil-modal> -->
    <payModal
      :show="showModal"
      :investmentObj="investmentObj"
      @handlerClose="handlerClose"
      @handlerConfirm="handlerClose"
      ref="payModal"
    ></payModal>
    <!-- <u-tabbar
      value="/pages/chili/index"
      @change="handlerChange"
      :fixed="true"
      :placeholder="false"
      :safeAreaInsetBottom="false"
      activeColor="#ed6146"
      inactiveColor="#000000"
    >
      <u-tabbar-item text="首页" name="/pages/chili/index">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/indexs.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/index.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item text="我的" name="/pages/chili/mine/index">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/mys.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/my.png"
        ></image>
      </u-tabbar-item>
    </u-tabbar> -->
  </view>
</template>

<script>
import neilModal from "@/components/neil-modal/neil-modal.vue";
import { calcFn } from "@/utils/calc.js";
import PayModal from "@/components/payModal/payModal.vue";
import { getPrice, getType, addInvestmentRecord } from "@/api/system/type.js";
import { mapMutations } from "vuex";
export default {
  components: {
    neilModal,
    PayModal,
  },
  data() {
    return {
      detail: "",
      value: 1,
      result: "",
      show: false,
      title: "您确定购买吗?",
      titleStyle: {
        color: "#fff",
      },
      acer: "",
      spec: "",
      type: "",
      count: "",
      typeList: [],
      showModal: false,
      investmentObj: {},
    };
  },
  onLoad(option) {
    uni.showLoading({
      title: "加载中...",
    });

    console.log(calcFn);
  },
  onShow() {
    this.fetchType();
    this.calcHandler(1);
    this.checkToken();
  },
  methods: {
    ...mapMutations(["logout"]),
    //就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
    checkToken() {
      this.$http("GET", "/user/userCache").then((res) => {
        if (!res.data) {
          this.logout();
        }
      });
    },
    handlerChange(e) {
      console.log(e);
      // this.$navigateTo(e)
      uni.redirectTo({
        url: e,
      });
    },
    goHome() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
    async init() {
      this.onInput(1);
    },
    goPerson() {
      uni.navigateTo({
        url: "/pages/chili/mine/index",
      });
    },
    handlerAgreement() {
      uni.navigateTo({
        url:
          "/pages/common/webview/index?url=" +
          "http://zhongyihuashang1.oss-cn-hangzhou.aliyuncs.com/zhongyihuashang1-20230213-ca3aec9554ef4c52a413102ec47217d9.",
      });
    },
    handlerClose() {
      this.showModal = false;
    },
    handlerPurchase() {
      return uni.showToast({
      		icon: 'none',
      		title: '已售馨！'
      	}) 
      if (this.value == "") {
        return uni.showToast({
          icon: "none",
          title: "请输入购买份额",
        });
      }
      // uni.showToast({
      // 	title: '测试使用禁止购买',
      // 	icon: 'none'
      // })
      this.show = true;
    },
    handlerMeal(count) {
      // if (new Date().getTime() - new Date('2023-02-12').getTime() < 0) return uni.showToast({
      // 		icon: 'none',
      // 		title: '暂未开始售卖'
      // 	})
      // uni.showToast({
      // 	title: '测试使用禁止购买',
      // 	icon: 'none'
      // })
      this.value = count;
      this.type = "meal";
      this.calcHandler(count);
      this.onInput(count, "meal");
    },
    // 获取消费金额
    getAmount(e) {
      console.log(e);
      this.type = "";
      let { value } = e;
      this.calcHandler(value);
      this.onInput(value);
    },
    calcHandler(value) {
      this.$nextTick(() => {
        this.value = value;
        this.acer = calcFn.mul(value, 0.1);
        this.spec = calcFn.mul(40, value);
      });
    },
    // 获取购买类型列表
    async fetchType() {
      const ret = await getType({
		  type:1
	  });
      this.typeList = ret.data;
      this.init();
      uni.hideLoading();
      // this.onInput(1)
    },
    async onInput(v, type = "") {
      console.log(this.typeList[0]);
      const {
        investmentPrice,
        investmentMonthsIncome,
        investmentMoneyRatio,
        investmentLsjfRatio,
        investmentPredictIncome,
      } = this.typeList[0];

      let obj = {
        acres: v,
        price: investmentPrice,
        yield: investmentMonthsIncome,
        moneyRatio: investmentMoneyRatio,
        lsjfRatio: investmentLsjfRatio,
        predictIncome: investmentPredictIncome,
      };
      const ret = await getPrice(obj);
      this.result = ret.data;
      if (type) this.show = true;
    },
    //确认
    onConfirm() {
      console.log(this.detail, this.result, "ihjfdionqnoqfoi");
	  console.log(this.typeList[0],'this.typeList[0]')
      let {
        investmentName,
        investmentYield,
        investmentMonthsIncome,
        investmentPredictIncome,
        investmentPrice,
        investmentRewardRatio,
        investmentXfzMul,
        investmentXfzParMul,
        investmentXfzMerchantMul,
		id
      } = this.typeList[0];
      let { totalAmount, payMoney, payLsjf, predictIncome, monthIncome } =
        this.result;
      let obj = {
        investmentTypeName: investmentName,
        investmentYield: investmentYield,
        investmentMonthIncome: monthIncome,
        investmentPredictIncome: predictIncome,
        investmentCount: this.value,
        investmentPrice: investmentPrice,
        investmentAmount: totalAmount,
        investmentMoneyPay: payMoney,
        investmentLsjfPay: payLsjf,
        investmentRewardRatio: investmentRewardRatio,
        investmentXfzMul: investmentXfzMul,
        investmentXfzParMul: investmentXfzParMul,
        investmentXfzMerchantMul: investmentXfzMerchantMul,
        investmentEarningsMonths: 6,
		investmentTypeId:id
      };
      console.log(obj, "safdjsojfdshjiojdijsiod");
      this.show = false;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      addInvestmentRecord(obj).then((ret) => {
        uni.hideLoading();
        if (ret.code == 200) {
          this.investmentObj = ret.data;
          this.showModal = true;
          this.$refs.payModal.handlerSend();
        }
      });
    },
  },
};
</script>


