<template>
  <div class="pickandtransfer bg-grey">
    <div style="height: 5px" />
    <div class="crad-con goods-con">
      <div class="title">提货商品</div>
      <div class="goods-content flex-default">
        <div class="img-box">
          <img
            :src="resData.skuVo ? resData.skuVo.thumb : ''"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="goods-message">
          <div class="desc">
            {{ resData.skuVo ? resData.skuVo.name : "" }}
          </div>
          <div class="classification flex-default">
            <div
              class="text"
              v-for="(item, index) in resData.skuVo
                ? resData.skuVo.skuProps
                : []"
              :key="index"
            >
              {{ item.propVal }}
            </div>
          </div>
          <div class="number">
            <div class="text">可提数量：{{ resData.amount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 10px" />
    <div class="crad-con form-con">
      <div class="title">提货信息</div>
      <div class="form-list">
        <div class="form-item flex-default">
          <div class="label">提货数量</div>
          <div class="value-con flex-default">
            <m-steper v-model="number" :min="1" :max="resData.amount" />
          </div>
        </div>
        <div class="form-item flex-default">
          <div class="label">提货地址</div>
          <div class="value-con flex-default addr" @click="handleAddr">
            <div class="text">{{ addrLabel }}</div>
            <m-icon icon="icon-more-light" :size="10" className="more" />
          </div>
        </div>
        <div class="form-item flex-default">
          <div class="label">快递费用</div>
          <div class="value-con flex-default">
            <div class="price">￥{{ total.express }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="foorter-btn" @click="submitData">
      <van-button type="primary" block round>提交</van-button>
    </div>
    <addr-select-popup
      ref="addrSelectPopup"
      v-model="showAddr"
      @confirm="handleAddrSelect"
    />
  </div>
</template>

<script>
import AddrSelectPopup from "@/components/addr-select-popup.vue";
import { expressCalc } from "@/utils/mallCalc.js";
import { mapMutations } from "vuex";
import { PayType } from "@/enums";
export default {
  components: { AddrSelectPopup },
  data() {
    return {
      number: 1,
      showAddr: false,
      selectAddr: null,
      selectAddrIndex: null,
      coin: "",
      resData: {},
      disable: false,
      distribution: null,
    };
  },
  watch: {
    selectAddr(val) {
      if (val && this.resData.skuVo) {
        this.requestDistribution();
      }
    },
    resData(val) {
      if (val.skuVo && this.selectAddr) {
        this.requestDistribution();
      }
    },
  },
  computed: {
    total() {
      let express = 0;
      express = expressCalc(
        this.resData.skuVo ? this.resData.skuVo.originalPrice : null,
        this.resData.skuVo ? this.resData.skuVo.weight : null,
        this.number,
        this.distribution
      );
      express = express.toFixed(2);

      return {
        express,
      };
    },
    addrLabel() {
      if (!this.selectAddr) {
        return "请选择";
      }
      let { province, city, county, street, detailAddr, name, phone } =
        this.selectAddr;
      return `${province}${city}${county}${street} ${detailAddr}`;
    },
    express() {
      return;
    },
  },
  created() {
    let { coin } = this.$route.query;
    if (coin) {
      this.coin = coin;
      this.requestData();
    }
  },
  methods: {
    ...mapMutations(["setWithdrawGoodsInfo"]),
    requestDistribution() {
      this.distribution = null;
      if (this.selectAddr) {
        this.$showLoading();
        let area = this.selectAddr.provinceCode;
        this.$api({
          apiName: "getGoodsDistribution",
          postData: {
            area,
            merchantId: this.resData.skuVo.merchantId,
          },
          success: (res) => {
            this.$hideLoading();
            if (
              res &&
              res.distributionTemplateItem &&
              res.distributionTemplateItem.pricingType == 5
            ) {
              this.disable = true;
              this.$toast("暂不支持该地区下单！");
            } else {
              this.distribution = res;
              this.disable = false;
            }
          },
        });
      }
    },
    requestData() {
      this.$api({
        apiName: "getOwnAsset",
        postData: { coin: this.coin },
        success: (res) => {
          this.resData = res;
          this.resData.skuVo = res.skuVo || {};
        },
        complete: () => {},
      });
    },
    handleAddr() {
      if (!this.checkLogin()) return;
      this.showAddr = true;
    },
    handleAddrSelect(index, item) {
      this.selectAddrIndex = index;
      this.selectAddr = item;
    },
    submitData() {
      if (this.selectAddr) {
        let ruleForm = {
          address: this.addrLabel,
          merchantId: this.resData.skuVo.merchantId,
          goodsId: this.resData.skuVo.goodsId,
          skuId: this.resData.skuVo.skuId,
          coin: this.coin,
          name: this.resData.skuVo.name,
          number: this.number,
          uname: this.selectAddr.name,
          phone: this.selectAddr.phone,
          note: "",
          postFee: Number(this.total.express),
          unpaidAmount: Number(this.total.express),
        };
        this.setWithdrawGoodsInfo(ruleForm);
        let query = { type: PayType.WITHDRAW_GOODS };
        this.$router.replace({ name: "payment", query });
      } else {
        this.$toast("请选择提货地址");
      }
    },
  },
};
</script>

<style lang="less">
.pickandtransfer {
  height: 100%;

  .crad-con {
    background-color: #ffffff;
    border-radius: 10px;
  }

  .goods-con {
    margin-top: 5px;
    padding: 16px;

    .title {
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 16px;
      color: #140603;
      font-weight: bold;
      padding-left: 2px;
    }

    .goods-content {
      .img-box {
        width: 98px;
        height: 98px;
        // background-color: #D8D8D8;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .goods-message {
        flex-shrink: 1;
        height: 98px;
        margin-left: 10px;
        width: calc(~"100% - 108px");
        .desc {
          font-size: 14px;
          line-height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          // height: 40px;
        }

        .text {
          font-size: 12px;
          color: #aeaeae;
          line-height: 17px;
        }

        .classification {
          // height: 17px;
          margin: 9px 0 2px;
          min-height: 17px;
          max-height: 34px;
          .text {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .form-con {
    padding: 16px 16px 19px 18px;
    .title {
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 19px;
      color: #140603;
      font-weight: bold;
      padding-left: 2px;
    }

    .form-list {
      .form-item {
        margin-bottom: 15px;
        .label {
          flex-shrink: 0;
          font-size: 14px;
          line-height: 20px;
          margin-right: 10px;
        }

        .value-con {
          width: calc(~"100% - 10px");
          justify-content: flex-end;
          align-items: center;

          .price {
            font-size: 16px;
            color: #dd2e41;
            font-weight: bold;
          }

          ::v-deep.m-num-box-con {
            .add,
            .del {
              height: 20px;
              line-height: 20px;
              width: inherit;
              padding-left: 5px;
            }
            .del {
              padding-right: 5px;
            }
            .val-input {
              height: 20px;
              width: 39px;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .foorter-btn {
    background-color: #ffffff;
    // z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 16px;
    button {
      height: 40px;
      font-size: 16px;
    }
  }
  .addr {
    align-items: center;
    .text {
      text-align: right;
      line-height: 20px;
      font-size: 14px;
    }
    .m-icon.more {
      width: 10px;
    }
  }
}
</style>