<template>
  <view>
    <!-- 收货人信息 -->
    <!-- 收货人信息 -->
    <view class="form-title d-b-c" v-if="form.deliveryWay == 4">
      <text>
        {{ $t("w_0065") }}
      </text>
      <view class="d-c-c" @click="gotoPage('/pages/user/address/add')">
        <u-icon name="plus-circle-fill" size="38rpx" color="#fff"></u-icon>
        <text class="ml10">{{ $t("w_0328") }}</text>
      </view>
    </view>
    <view class="prefecture form-group mb20" v-if="form.deliveryWay == 4">
      <!-- 收货人 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MY_ORD_10") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.recName"
          placeholder=""
        />
      </view>
      <!-- 联系方式 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("w_0052") }}
        </view>
        <input
          class="form-input"
          type="text"
          v-model="form.recPhone"
          placeholder=""
        />
      </view>
      <!-- 收货地址 -->
      <view class="form-item" @click="showAddPicker">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("w_0068") }}
        </view>
        <input
          class="form-input"
          disabled
          type="text"
          v-model="form.nameList"
          placeholder=""
        />
        <text class="icon iconfont icon-jiantou"></text>
      </view>
      <!-- 详细地址 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("S_C_27") }}
        </view>
        <textarea
          auto-height
          class="form-textarea"
          v-model="form.recAddress"
          placeholder=""
        />
      </view>
      <!-- 邮费 -->
      <!-- <view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('w_0071') }}
				</view>
				<input class="form-input" disabled type="text" :value="formatNum(form.postage)" />
			</view> -->
      <!-- 备注 -->
      <view class="form-item">
        <view class="form-label">
          <text class="domation mr10">*</text>
          {{ $t("MY_WAL_22") }}
        </view>
        <textarea
          auto-height
          class="form-textarea"
          v-model="form.remark"
          placeholder=""
        />
      </view>
      <template v-if="shareType">
        <!-- 发货方式 -->
        <picker
          :disabled="userCountry == 1"
          :range="deliveryList"
          range-key="label"
          @change="changeDelivery"
        >
          <view class="form-item" v-if="deliveryList[deliveryIndex]">
            <view class="form-label">
              <text class="domation mr10">*</text>
              {{ $t("w_0061") }}
            </view>
            <input
              class="form-input"
              disabled
              type="text"
              :value="deliveryList[deliveryIndex].label"
              placeholder=""
            />
            <text
              v-if="userCountry != 1"
              class="icon iconfont icon-jiantou"
            ></text>
          </view>
        </picker>
        <!-- 运输方式 -->
        <!-- <picker :disabled="userCountry == 1" :range="transportType" range-key="label" @change="changeTransport">
					<view class="form-item" v-if="transportType[transportIndex]">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('w_0063') }}
						</view>
						<input class="form-input" disabled type="text" :value="transportType[transportIndex].label" placeholder="" />
						<text v-if="userCountry != 1" class="icon iconfont icon-jiantou"></text>
					</view>
				</picker> -->
        <!-- 会员店铺 -->
        <picker
          :range="storeList"
          v-if="userCountry != 1"
          range-key="storeName"
          @change="changeStore"
        >
          <view class="form-item" style="border-bottom: 1rpx solid #eee">
            <view class="form-label">
              <text class="white mr10">*</text>
              {{ $t("w_0100") }}
            </view>
            <input
              class="disabled-input"
              disabled
              type="text"
              :value="
                (storeList &&
                  storeList[storeIndex] &&
                  storeList[storeIndex].storeName) ||
                ''
              "
              placeholder=""
            />
            <text class="icon iconfont icon-jiantou"></text>
          </view>
        </picker>
        <!-- 仓库 -->
        <!-- <picker :range="storehouse" v-if="userCountry != 1" range-key="name" @change="changeStorehouse">
					<view class="form-item">
						<view class="form-label">
							<text class="white mr10">*</text>
							{{ $t('w_0102') }}
						</view>
						<input
							class="disabled-input"
							disabled
							type="text"
							:value="(storehouse && storehouse[storehouseIndex] && storehouse[storehouseIndex].name) || ''"
							placeholder=""
						/>
						<text class="icon iconfont icon-jiantou"></text>
					</view>
				</picker> -->
      </template>
    </view>
    <!-- 历史地址 -->
    <template
      v-if="!shareType && memberAddress.length > 0 && form.deliveryWay == 4"
    >
      <view class="form-title">
        {{ $t("w_0073") }}
      </view>
      <view class="prefecture form-group mb20">
        <view
          class="d-b-s address-item"
          v-for="(item, index) in memberAddress"
          :key="index"
        >
          <view
            class="radio-check d-c-c"
            :class="{ checked: checkedindex == index }"
            @click.stop="checkedFunc(item, index)"
          >
            <u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon>
          </view>
          <view class="flex-1">
            <view class="f28 gray3 fb mb10 d-s-s">
              {{ item.recName }}
              <text class="small-text-btn" v-if="item.isDefault == 1">{{
                $t("w_0263")
              }}</text>
            </view>
            <view class="f24 gray9">{{ item.recArea }}</view>
          </view>
          <view class="d-c-c">
            <view
              class="icon-box plus d-c-c ml30"
              @click="gotoPage('/pages/user/address/edit?pkId=' + item.pkId)"
            >
              <image
                class="add_icon_img edit"
                src="/static/icon/add-edit.png"
                mode="aspectFill"
              ></image>
            </view>
            <view
              class="icon-box plus d-c-c ml30"
              @click="delAddress(item.pkId)"
            >
              <image
                class="add_icon_img delete"
                src="/static/icon/add-delete.png"
                mode="aspectFill"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view class="product-box" @click="testFunc(form)">
      <view class="product-title">
        <!-- 商品信息 -->
        {{ $t("w_0077") }}
      </view>
      <view class="product-list order-product">
        <view
          v-for="(item, index) in form.orderItemsParams"
          :key="index"
          class="product-item"
        >
          <view class="d-b-s mb20">
            <image
              class="product-img"
              :src="item.cover1 || item.cover"
              mode=""
            ></image>
            <view class="product-info d-c d-b-s flex-1">
              <view class="text-ellipsis-2 f28 gray3">{{
                item.waresName || item.productName
              }}</view>
              <view v-if="item.waresSkuList" class="f22 gray6">{{
                item.waresSkuList[0].specValueNames
              }}</view>
              <view class="price-color f24">
                <view
                  v-if="
                    (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
                    userinfo.pkSettleCountry != userCountry
                  "
                >
                  {{ borderunits
                  }}<text class="f32 fb">{{
                    formatNum(item.borderPrice)
                  }}</text>
                  ({{ currencyIcon() }}
                  <text class="f32 fb">{{
                    formatNum(item.price || item.waresPrice)
                  }}</text
                  >)
                </view>
                <view v-else>
                  {{ currencyIcon() }}
                  <text class="f32 fb">{{
                    formatNum(item.price || item.waresPrice)
                  }}</text>
                </view>
              </view>
            </view>
            <view class="f24 gray9 ml20">X{{ item.quantity }}</view>
          </view>
          <view class="mb10 gray9 f26" v-if="cid != 30"
            >{{ $t("ENU_TOTAL_V_1") }}：{{
              formatNum(item.achieve || item.pv)
            }}</view
          >
          <view class="secend-product" v-if="cid != 21">
            <view
              class="d-b-s mb20"
              v-for="(sitem, sindex) in item.waresItemsParamList"
              :key="sindex"
            >
              <view class="d-s-c">
                <image
                  :src="sitem.specCover"
                  mode=""
                  class="s-product-img"
                ></image>
                <view class="f28">
                  {{ sitem.productName }}
                  <text class="ml20">{{ sitem.skuInfo }}</text>
                </view>
              </view>
              <view class="f24 gray9 ml20">X{{ sitem.quantity }}</view>
            </view>
            <view class="d-b-c mb20" v-if="cid!=30">
              <view class="flex-1 f26 gray9">{{ $t("w_0080") }}</view>
              <view class="f26 gray3">
                {{ formatNum(item.achieveAmount) }}
              </view>
            </view>
            <view class="d-b-c">
              <view class="flex-1 f26 gray9">{{ $t("w_0093") }}</view>
              <view class="f26 gray3">
                <view
                  v-if="
                    (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
                    userinfo.pkSettleCountry != userCountry
                  "
                >
                  {{ borderunits }}{{ formatNum(item.borderAmount) }}({{
                    currencyIcon()
                  }}{{ formatNum(item.priceAmount) }})
                </view>
                <view v-else>
                  {{ currencyIcon() }}{{ formatNum(item.priceAmount) }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="ww100 pt30" v-if="cid != 21">
          <view class="d-b-c mb20">
            <view class="flex-1 f26 gray9">{{ $t("w_0083") }}</view>
            <view class="f26 gray3">
              <view
                v-if="
                  (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
                  userinfo.pkSettleCountry != userCountry
                "
              >
                {{ borderunits }}{{ formatNum(form.borderPriceAmount) }} ({{
                  currencyIcon()
                }}{{ formatNum(form.priceAmount) }})
              </view>
              <view v-else>
                {{ currencyIcon() }}{{ formatNum(form.priceAmount) }}
              </view>
            </view>
          </view>
          <view class="d-b-c mb20">
            <view class="flex-1 f26 gray9">{{ $t("w_0071") }}</view>
            <view class="f26 gray3">
              <view
                v-if="
                  (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
                  userinfo.pkSettleCountry != userCountry
                "
              >
                {{ borderunits }}{{ formatNum(form.postage) || "0.00" }} ({{
                  currencyIcon()
                }}{{ formatNum(form.postage) || "0.00" }})
              </view>
              <view v-else>
                {{ currencyIcon() }}{{ formatNum(form.postage) || "0.00" }}
              </view>
            </view>
          </view>
          <!-- <view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">复购券抵扣</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view> -->
          <!-- <view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">总价</view>
						<view class="f26 gray3">{{currencyIcon()}}{{form.priceAmount}}</view>
					</view> -->
          <view class="d-b-c mb20" v-if="cid != 30">
            <view class="flex-1 f26 gray9" >{{ $t("ENU_TOTAL_V_1") }}</view>
            <view class="f26 gray3"
              >{{ performanceCurrency()
              }}{{ formatNum(form.achieveAmount) }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checkedindex: 0,
      deliveryIndex: 0,
      transportIndex: 0,
      storeIndex: "",
      storehouseIndex: "",
      userinfo: {},
    };
  },
  props: [
    "shareType",
    "memberAddress",
    "transportType",
    "deliveryList",
    "userCountry",
    "storeList",
    "storehouse",
    "cid",
    "borderunits",
  ],
  inject: ["form"],
  mounted() {
    this.getInfo();
    console.log(this.form, "form");
  },
  methods: {
    getInfo() {
      let self = this;
      self._get("member/api/member/get-info", {}, (res) => {
        self.userinfo = res.data;
      });
    },
    changeStore(e) {
      this.storeIndex = e.detail.value;
      this.form.pkMemberStore = this.storeList[this.storeIndex].pkId;
    },
    changeStorehouse(e) {
      this.storehouseIndex = e.detail.value;
      this.form.pkStorehouse = this.storehouse[this.storehouseIndex].pkId;
    },
    delAddress(e) {
      this.$emit("delAddress", e);
    },
    showAddPicker() {
      this.$emit("showAddPicker");
    },
    checkedFunc(e, n) {
      this.checkedindex = n;
      this.form.recName = e.recName;
      this.form.recPhone = e.recPhone;
      this.form.recProvince = e.recProvince;
      this.form.recCity = e.recCity;
      this.form.recCounty = e.recCounty;
      this.form.nameList = e.recArea;
      this.form.recAddress = e.recAddress;
      this.form.dizhi = [e.recProvince, e.recCity, e.recCounty];
      this.$emit("queryOrderPostage");
    },
    changeDelivery(e) {
      this.deliveryIndex = e.detail.value;
      this.form.deliveryWay = this.deliveryList[this.deliveryIndex].value;
      this.$emit("queryOrderPostage");
    },
    changeTransport(e) {
      this.transportIndex = e.detail.value;
      this.form.transType = this.transportType[this.transportIndex].value;
      this.$emit("queryOrderPostage");
    },
  },
};
</script>

<style lang="scss">
.product-box {
  padding: 26rpx 18rpx 36rpx 20rpx;
  background: #ffffff;
  margin-bottom: 20rpx;

  .product-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 5rpx;
    font-weight: bold;
    border-bottom: 1rpx solid #eee;
    padding-bottom: 28rpx;
  }
}

.form-title {
  width: 750rpx;
  height: 106rpx;
  background: #fb3024;
  padding-left: 44rpx;
  padding-right: 25rpx;
  position: relative;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 106rpx;
  font-weight: bold;
  z-index: 1;
}

.form-title.redtitle {
  width: 750rpx;
  height: 106rpx;
  background: #fb3024;
  padding-left: 44rpx;
  position: relative;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #fff;
  line-height: 106rpx;
  font-weight: bold;
  z-index: 1;
}

.form-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 25rpx;
  width: 6rpx;
  height: 24rpx;
  background-color: #fb3024;
  z-index: 1;
}

.redtitle.form-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 25rpx;
  width: 6rpx;
  height: 24rpx;
  background-color: #fff;
  z-index: 1;
}

.radio-check {
  width: 34rpx;
  height: 34rpx;
  background: #ffffff;
  border: 1rpx solid #dddddd;
  border-radius: 50%;
  box-sizing: border;
  position: relative;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.radio-check.checked {
  border: 1rpx solid #fb3024;
  background: #fb3024;
}
</style>
