<template>
  <div class="app-content">
    <!-- tabs -->
    <app-tabs
      :tabs="tabs"
      :currentTab="tabIndex"
      :isFixed="true"
      :borderLeft="true"
      @change="tabChange"
      itemWidth="50%"
    />
    <!-- 配送 -->
    <form @submit="formSubmit">
      <block v-if="tabIndex == 0">
        <app-delivery-module ref="appDelivery" @changeAddress="changeAddress" />
      </block>
      <!-- 自取 -->
      <block v-else>
        <!-- 收花人 -->
        <div class="module-com">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title">手机号</div>
            <input
              v-model="mentionForm.bookMobile"
              placeholder-class="phcolor"
              class="tui-input"
              name="phone"
              placeholder="请输入手机号"
              type="number"
            />
          </tui-list-cell>
        </div>
      </block>

      <!-- 商品金额 -->
      <div class="module-com shop-price-wrap">
        <div class="module-tit">商品信息</div>
        <div class="module-det">
          <app-list-module v-if="!$util.isEmpty(goodsInfo)" :info="goodsInfo" />
          <div class="shop-prompt" v-if="!$util.isEmpty(orderShop)" @click="showAlert = true">
            <div>
              <span>{{ `运费(${showDistance}公里)` }}</span>
              <i class="iconfont iconchangjianwentixiangguanwenti2" style="font-size:45rpx;"></i>
            </div>
            <div>￥{{ freightPrice }}</div>
          </div>

          <div class="shop-prompt">
            <div>总计</div>
            <div>￥{{ totalPrice }}</div>
          </div>
        </div>
      </div>
      <!-- 可选优惠 -->
      <div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
        <div class="module-tit">可选优惠</div>
        <div class="module-det">
          <app-coupon-sel
            ref="couponSel"
            @calcDiscount="calcDiscount"
            :discountArr="['member', 'coupon']"
          />
        </div>
      </div>
      <app-trademark />
      <view style="width:100%;height:90px"></view>
      <!-- 按钮 -->
      <div class="page-btn app-footer">
        <div class="flex-center">
          <span>应付款</span>
          <span class="app-price">
            <span>￥</span>
            <span class="app-size-40">{{ mayPayAmount }}</span>
          </span>
        </div>
        <button class="button-com red" formType="submit">确认</button>
      </div>
    </form>
    <!-- 弹窗 -->
    <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
      <div class="alt-content" v-if="!$util.isEmpty(orderShop)">
        <div>
          <span class="app-price">{{ `${orderShop.freight.first}公里`}}</span>内免运费
        </div>
        <div>
          <span>超过每增加1公里运费加</span>
          <span class="app-price">{{ `${orderShop.freight.add}元` }}</span>
        </div>
      </div>
    </alert-module>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppTabs from "@/components/plugin/tabs";
import TuiListCell from "@/components/plugin/list-cell";
import AppDeliveryModule from "@/components/app-delivery";
import AppTrademark from "@/components/module/app-trademark";
import AppListModule from "@/components/module/app-order-list";
import AppCouponSel from "@/components/app-coupon-sel";
import AlertModule from "@/components/plugin/alert";
const form = require("@/utils/formValidation.js");
import { getShopUser } from "@/utils/auth";
import { getOrderShop } from "@/utils/config";
import { createOrder } from "@/api/order";
import { getUserDistance } from "@/api/express";
export default {
  name: "order-buy",
  components: {
    AppTabs,
    AppDeliveryModule,
    TuiListCell,
    AppListModule,
    AppCouponSel,
    AppTrademark,
    AlertModule
  },
  data() {
    return {
      goodsInfo: {},
      tabIndex: 0,
      tabs: [
        {
          name: "帮我送"
        },
        {
          name: "到店取"
        }
      ],
      showAlert: false,
      // form
      form: {
        anonymity: "0", // 是否匿名 0不 1要
        sendDistance: "", // 配送距离，根据腾讯js进行计算
        goodsId: "", // 【商城下单特有字段】商品id
        goodsStyleId: "", // 【商城下单特有字段】商品款式id
        goodsNum: "", // 【商城下单特有字段】商品数量
        couponId: "0", // 优惠券id，默认0没有使用优惠券
        receiveLat: "", // 收花人纬度
        receiveLong: "" // 收花人经度
      },
      // 自提form
      mentionForm: {
        bookMobile: ""
      },
      discountArr: false,
      // 运费
      freightPrice: 0,
      goodsNum: 1,
      //显示的距离
      showDistance: 0,
      totalPrice: 0,
      memberDiscount: 1,
      couponDiscountAmount: 0
    };
  },
  mounted() {},
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" }),
    ...mapGetters({ shopUser: "getShopUser" }),
    mayPayAmount: function() {
      let price =
        (this.goodsInfo.price * this.goodsInfo.buyNum + this.freightPrice) *
          this.memberDiscount -
        this.couponDiscountAmount;
      return price.toFixed(2);
    }
  },
  watch: {
    //运费变化则总金额和应付金额变化
    freightPrice(newVal) {
      let price = this.goodsInfo.price * this.goodsInfo.buyNum + newVal;
      this.totalPrice = price.toFixed(2);
    }
  },
  onLoad(option) {
    //已有手机号则自动补全
    this.$set(this.mentionForm, "bookMobile", this.shopUser.mobile);
  },
  created() {},
  methods: {
    init() {
      let goodsInfo = uni.getStorageSync("buyGoodsDetil");

      goodsInfo.price = this.option.goodsStyleId
        ? goodsInfo.goodsStyleList[this.option.selIndex].price
        : goodsInfo.price;

      getOrderShop().then(() => {
        this.$refs.couponSel._getUserDiscount().then(discountData => {
          this.discountArr = discountData;
        });
      });

      getShopUser();

      goodsInfo.buyNum = this.option.goodsNum;
      this.goodsInfo = goodsInfo;

      this.totalPrice = goodsInfo.price * this.option.goodsNum;

      // 初始化上个页面带入的值
      Object.keys(this.form).forEach((i, index) => {
        this.form[i] = this.option[i];
      });
    },
    //最终会员优惠的折扣和优惠券优惠金额
    calcDiscount(discountData) {
      this.memberDiscount = discountData.memberDiscount;
      this.couponDiscountAmount = discountData.couponDiscountAmount;
    },
    // 生成订单
    createOrderFn() {
      let addForm = {};
      let form =
        this.tabIndex == 0 ? this.$refs.appDelivery.form : this.mentionForm;
      let region = this.tabIndex == 0 ? this.$refs.appDelivery.region : {};
      if (this.$refs.couponSel) {
        addForm.couponId = this.$refs.couponSel.couponId;
      }
      if (this.tabIndex == 0) {
        let receiveUserName = form.receiveUserName;
        if (this.$util.isEmpty(receiveUserName)) {
          this.$msg("请填写收花人姓名");
          return false;
        }
        let receiveMobile = form.receiveMobile;
        if (this.$util.isEmpty(receiveMobile)) {
          this.$msg("请填写收花人电话");
          return false;
        }
        let reachDate = form.reachDate;
        let receiveAddress = form.receiveAddress;
        if (this.$util.isEmpty(receiveAddress)) {
          this.$msg("请填写地址！");
          return false;
        }
        if (this.$util.isEmpty(reachDate) || reachDate == 0) {
          this.$msg("请填写送达时间！");
          return false;
        }
      }

      createOrder({
        needSend: this.tabIndex == 0 ? "1" : "0",
        ...form,
        ...this.form,
        ...addForm,
        ...region
      }).then(res => {
        uni.removeStorageSync("buyGoodsDetil");
        this.$util.pageTo({
          url: "/pages/callback/index",
          type: 2,
          query: {
            pageStatus: 1,
            ...res.data
          }
        });
      });
    },
    confirmFn() {
      this.createOrderFn();
    },
    tabChange(e) {
      this.tabIndex = e.index;
    },
    hideAlert() {
      this.showAlert = false;
    },
    anonymityChange(e) {
      this.form.anonymity = this.form.anonymity == 1 ? 0 : 1;
    },
    // 选择地址
    changeAddress(e) {
      // 计算客户距离和运费
      let lat = this.$refs.appDelivery.region.latitude;
      let long = this.$refs.appDelivery.region.longitude;
      getUserDistance({ lat: lat, lng: long }).then(res => {
        this.freightPrice = res.data.fee;
        this.showDistance = res.data.showDistance;
      });
    },
    // 表单验证
    formSubmit(e) {
      let rules = [];
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.app-content {
  padding-top: 100px;
  padding-bottom: 120px;
  min-height: calc(100vh - 220px);
  .module-com {
    margin-bottom: 20px;
    background-color: #fff;
    .module-tit {
      padding: 20px 18px;
      font-size: 28px;
      font-weight: 600;
      border-bottom: 1px solid $borderColor;
    }
    .module-det {
      padding: 0 30px;
    }
  }
  // 公共
  .line-cell {
    .tui-title {
      width: 210px;
      color: $fontColor2;
    }
    .tui-input {
      width: calc(100% - 210px);
      font-size: 28px;
    }
    .tui-placeholder {
      color: #ccc;
    }
    .phcolor {
      color: #ccc;
    }
  }
  // 商品金额
  .shop-price-wrap {
    .module-det {
      padding-bottom: 20px;
    }
    .shop-prompt {
      @include disFlex(center, space-between);
      color: $fontColor2;
      margin-top: 20px;
      .iconchangjianwentixiangguanwenti2 {
        color: #ccc;
        margin-left: 10px;
      }
    }
  }
  // 可选优惠
  .discount-wrap {
    .module-det {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
  // 匿名派送
  .none-name-delivery {
    padding-left: 30px;
    margin-top: 40px;
    .none-name-text {
      margin-left: 14px;
      color: $fontColor2;
    }
  }
}
.page-btn {
  width: calc(100% - 60px);
  @include disFlex(center, space-between);
  padding: 0 30px;
  .app-price {
    margin-bottom: 8px;
    margin-left: 4px;
  }
  .red {
    width: 270px;
  }
}
// 弹窗
/deep/.tui-alert-content {
  padding: 40px 40px;
}
.alt-content {
  & > div {
    margin: 10px 0;
  }
}
</style>