<template>
  <div class="max-w1280">
    <div class="layer cart-wrap detail-wrap" v-if="buyList?.cartList?.length>0">
      <div class="price-wrap line-wrap mb12">
        <div class="line-item line-total2"><span class="label">收货信息</span><span class="val" @click="editAddress">修改</span></div>
        <div class="line-item mb5">
          <span class="val">{{HktOrderInfo.order.contacts}} <span class="ml10" style="color: #666;">{{HktOrderInfo.order.contactsMobile}}</span></span>
        </div>
        <div class="line-item">
          <span class="val ccc">{{HktOrderInfo.order.province}} {{HktOrderInfo.order.city}} {{HktOrderInfo.order.district}} {{HktOrderInfo.order.address}}</span>
        </div>
      </div>
      <div class="price-wrap line-wrap mb12">
        <div class="line-item line-total2"><span class="label">选择物流快递</span><span class="val mainColor">当前收货地址需要运费 {{kdList[kdIndex]?.price}} 元</span></div>
        <div class="line-item ps-wrap">
          <ul>
            <template v-if="kdList.length==0">
              <li @click="tip">速尔快递</li>
              <li @click="tip">龙邦快递</li>
              <li @click="tip">顺丰快递</li>
            </template>
            <template v-else>
              <li v-for="(item,index) in kdList" :key="index" @click="psSelectFun(index)" :class="{current:kdIndex==index}">{{item.expressName}}</li>
            </template>
          </ul>
        </div>
      </div>
      <div class="price-wrap line-wrap mb12">
        <div class="line-item line-total2"><span class="label">发票信息</span></div>
        <div class="line-item ps-wrap ps-bill-wrap">
          <ul>
            <li :class="{current:isAct==1}" @click="billClick(1)" v-if="buyList.cartList[0].isSample!=1">
              普通发票
              <em></em>
            </li>
            <li :class="{current:isAct==2}" @click="billClick(2)" v-if="buyList.cartList[0].isSample!=1">
              增值税发票
              <em></em>
            </li>
            <li class="recommended" :class="{current:isAct==0}" @click="billClick(0)">
              <i></i>
              不需要发票
              <em></em>
            </li>
          </ul>
        </div>
        <template v-if="selectedInvoice.type">
          <div class="line-item mt5">
            <span class="label">发票类型</span>
            <span class="val">{{ selectedInvoice.type }}</span>
          </div>
          <div class="line-item">
            <span class="label">发票抬头</span>
            <span class="val">{{ selectedInvoice.looked }}</span>
          </div>
          <div class="line-item">
            <span class="label">发票金额</span>
            <span class="val">{{ selectedInvoice.parce }}</span>
          </div>
        </template>
        <div class="line-item ps-wrap ps-bill-wrap">
          <div class="explain-bottom-box">
            <div class="infoice-explain">
              <div class="explain-caption"><span>注意事项</span></div>
              <div class="explain-text-box">
                <p>开票时间:当月发票次月25日统一开出。</p>
                <p>开票规则:开票时间内开具上个月已确认收货交易完成订单的累计金额（包含运费）。</p>
                <p>按商品明细开票:相同型号和相同价格的同一商品，数量合并开票。</p>
                <p>增值税专用发票开票要求:交易金额累计大于500元开票。</p>
                <p>增值税普通发票开票要求:交易金额累计大于300元开票。</p>
                <p>电子发票开票要求:交易金额累计大于50元开票。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-wrap line-wrap mb12">
        <div class="line-item">
          <span class="label">备注说明</span>
        </div>
        <div class="line-item">
          <span class="val" style="width: 100%;">
            <el-input type="textarea" :rows="4" v-model="HktOrderInfo.order.userNote" placeholder="文本框字数限制：500字" maxlength="500" />
          </span>
        </div>
      </div>
      <div class="product-wrap line-wrap mb12">
        <ul class="product-ul">
          <li class="product-li" v-for="(item,idx) in buyList?.cartList" :id="`item-idx`" :key="idx">
            <NuxtLink :to="{path:`/product`}">
              <div class="product-img">
                <NuxtImg :src="item.goodsImage" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined"></NuxtImg>
              </div>
              <div class="product-info">
                <h3 title="三极管 SS8050" class="title">{{item.goodsName}}</h3>
                <p>品牌：{{item.brandName}}</p>
                <p>编号：{{item.customerSn}}</p>
                <p class="d-flex space-between align-center"><span>单价：¥{{ item.cprice }}</span><span>数量：{{item.isSample==1?item.stepSample:item.goodsNum}}pcs</span></p>
                <p></p>
                <p class="price"><span class="mainColor">¥{{item.isSample==1?'0':item.ctotalPrice}}</span></p>
              </div>
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="price-wrap line-wrap mb12">
        <div class="line-item">
          <span class="label">商品数量</span>
          <span class="val">{{buyList?.cartList?.length}}种</span>
        </div>
        <div class="line-item">
          <span class="label">应付运费</span>
          <span class="val">+ ¥{{HktOrderInfo.order.shippingPrice}}</span>
        </div>
        <div class="line-item">
          <span class="label">优惠减免</span>
          <span class="val">- ¥{{buyList.discountPrice}}</span>
        </div>
        <div class="line-item">
          <span class="label">收货信息</span>
        </div>
        <div class="line-item">
          <span class="val">{{HktOrderInfo.order.contacts}} {{HktOrderInfo.order.contactsMobile}}</span>
        </div>
        <div class="line-item">
          <span class="val">{{HktOrderInfo.order.province}} {{HktOrderInfo.order.city}} {{HktOrderInfo.order.district}} {{HktOrderInfo.order.address}}</span>
        </div>
        <div class="line-item line-total"><span class="label">实付金额</span><span class="val">¥{{calcPriceFun(buyList.realTotalPrice+HktOrderInfo.order.shippingPrice)}}</span></div>
      </div>
    </div>

    <el-drawer title="" v-model="open.detail" size="auto" direction="btt" append-to-body class="detail-drawer" @close="open.detail = false" :with-header="false" :z-index="2000">
      <editCart :detailInfo="currentItem" @done="done"></editCart>
    </el-drawer>
    <div class="buy-btn-wrap" v-if="buyList?.cartList?.length>0">
      <div class="tips">
        <p>共&nbsp;<span class="mainColor">{{buyList.cartList.length}}</span>&nbsp;种商品</p>
        <p>实付金额&nbsp;<span class="mainColor">¥{{calcPriceFun(buyList.realTotalPrice+HktOrderInfo.order.shippingPrice)}}</span></p>
      </div>
      <el-button class="btn_main" @click="saveOrderFun">
        提交订单
      </el-button>
    </div>
    <el-drawer v-model="open.address" size="80%" direction="rtl" no-title append-to-body class="address-drawer" :show-close="false" :z-index="2000">
      <template v-if="isClient">
        <div class="drawer-con">
          <div class="title">选择收货地址</div>
          <ul class="item-ul">
            <li class="item-li" v-for="(item,idx) in addressList" :key="idx" @click="setDefault(item)">
              <h3>{{item.consignee}}<span>{{item.mobile}}</span><i v-if="item.isDefault==1">已选中</i></h3>
              <div class="address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
            </li>
          </ul>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="open.bill" size="80%" direction="rtl" no-title append-to-body class="bill-drawer" :show-close="false" :z-index="2000">
      <template v-if="isClient">
        <div class="drawer-con">
          <div class="title">{{billTitle}}</div>
          <div class="bill-wrap">
            <div class="notice_box">
              <h5>发票须知：</h5>
              <p>1. 选择电子发票的订单付款后纳税人识别号不可修改，请确认信息后付款；</p>
              <p>2. 电子发票可在订单完成后，在订单详情中下载和查看。</p>
              <p>3. 发票金额为实际支付金额，不包含优惠券、礼品卡等。</p>
            </div>
            <van-cell-group inset class="mt12_i">
              <van-field required name="radio" label="单位/个人" v-if="isAct==1">
                <template #input>
                  <van-radio-group v-model="HktOrderInfo.orderInvoice.openObj" direction="horizontal">
                    <van-radio name="1">个人</van-radio>
                    <van-radio name="2">单位</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-field required v-model="HktOrderInfo.orderInvoice.title" name="openName" label="发票抬头" placeholder="请输入发票抬头" />
              <van-field required v-model="HktOrderInfo.orderInvoice.openTaxpayer" name="openTaxpayer" label="识别号" placeholder="请输入纳税人识别号" />
              <template v-if="isAct==2">
                <van-field required v-model="HktOrderInfo.orderInvoice.operatingAddress" name="operatingAddress" label="经营地址" placeholder="请输入经营地址及电话" />
                <van-field required v-model="HktOrderInfo.orderInvoice.openBankAddress" name="openBankAddress" label="开户支行" placeholder="请输入开户行所属地" />
                <van-field required v-model="HktOrderInfo.orderInvoice.openBankAccount" name="openBankAccount" label="开户账号" placeholder="请输入开户行帐号" />
              </template>
              <van-field required v-model="HktOrderInfo.orderInvoice.collectMobile" name="username" label="收件手机" placeholder="请输入发票收件手机" />
              <van-field required v-model="HktOrderInfo.orderInvoice.collectEmail" name="collectEmail" label="收票邮箱" placeholder="请输入收票邮箱" />
            </van-cell-group>
            <div class="buy-btn-wrap2">
              <el-button class="btn_main" @click="saveInvoice">
                保存
              </el-button>
            </div>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { showLoadingToast, closeToast } from "vant";
let pageTitle: any = ref("HOTKING-生成订单");
useHead(() => ({
  title: pageTitle.value,
}));
import { useAll } from "~/api/pubAll/service";
const {
  delCartGood,
  calculateGoodsPrice,
  getUserAddress,
  getHktExpressCompanyList,
  setDefaultAddress,
  getUserInvoice,
  saveOrder,
} = useAll();
let currentItem: any = ref({});
let buyList: any = ref({});
let addressData: any = ref([]);
let addressList: any = ref([]);
let kdList: any = ref([]);
let baseInvoice: any = ref({});
let kdIndex: Ref<number> = ref(-1);
let linkParams: any = ref({ invoice: 2, giveType: "" });
let HktOrderInfo: any = ref({
  order: {
    address: "", //详细地址 ,
    addressId: "", //送货地址 ,
    bom: "", //订单bom标识 ,
    city: "", //城市
    consignee: "", //送货人
    contacts: "", //下单联系人
    contactsMobile: "", //下单联系人 电话 ,
    discount: 0, //折扣
    district: "", //街道
    email: "", //收货人邮件
    giveTime: 1, //配送时间 1不限 2周一到周五 3周六日 ,
    giveType: 1, //配送类型 1 物流 2 到店自提 3 自主配送 ,
    goodsPrice: 0, //货物价格-实价 ,
    mobile: "", //手机号
    orderAmount: 0, //订单金额 ,
    province: "", //省会
    shippingCode: "", //物流编码 ,
    shippingName: "", //物流名称
    shippingPrice: 0.0, //物流费用 ,
    userNote: "", //用户备注 ,
    language: 1,
    warehouseName: "", //自提门店名称
    warehouseId: "", //门店ID
  },
  orderInvoice: {
    category: 0, //0 不开票 1 普通票 2 专用票 ,
    collectAddress: "", //发票人联系地址 ,
    collectEmail: "", //发票人邮箱 ,
    collectMobile: "", //发票人联系电话 ,
    collectName: "", //发票人收件名 ,
    openBankAccount: "", //开户行账户 ,
    openBankAddress: "", //开户行所属地 ,
    openObj: "2", //开票对象(1个人|2单位) ,
    openTaxpayer: "", //开票纳税人识别号 ,
    openType: 1, //开票类型(1电子元器件) ,
    status: 0, //1 已开票 0 未开票 ,
    title: "", //发票抬头 ,
    type: 1, //发票类型(1电子发票|2纸质发票)
  },
});
let isAct: any = ref(0);
const user = useUserStore();
user.value.adminTitle = "生成订单";
const open = ref({
  detail: false,
  address: false,
  bill: false,
});
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
let allPrice: any = ref(0);
let selectedInvoice: any = ref({});
let billTitle: Ref<string> = ref("普通电子发票");
onMounted(() => {
  getUserAddressFun();
  calculateGoodsPriceFun(0);
  getUserInvoiceFun();
});
function saveInvoice() {
  if (!HktOrderInfo.value.orderInvoice.title) {
    ElMessage.error("请输入发票抬头");
    return;
  }
  if (!HktOrderInfo.value.orderInvoice.openTaxpayer) {
    ElMessage.error("请输入纳税人识别号");
    return;
  }
  if (isAct.value == 2) {
    if (!HktOrderInfo.value.orderInvoice.operatingAddress) {
      ElMessage.error("请输入经营地址");
      return;
    }
    if (!HktOrderInfo.value.orderInvoice.openTaxpayer) {
      ElMessage.error("请输入开户行所属地");
      return;
    }
    if (!HktOrderInfo.value.orderInvoice.openBankAccount) {
      ElMessage.error("请输入开户行帐号");
      return;
    }
  }
  if (!HktOrderInfo.value.orderInvoice.collectMobile) {
    ElMessage.error("请输入发票收票人手机");
    return;
  }
  if (!HktOrderInfo.value.orderInvoice.collectEmail) {
    ElMessage.error("请输入发票收票人邮箱");
    return;
  }
  linkParams.value.invoice = "";
  calculateGoodsPriceFun(0);
  if (isAct.value == 2) {
    HktOrderInfo.value.orderInvoice.category = 2;
    selectedInvoice.value = {
      type: "增值税发票",
      looked: HktOrderInfo.value.orderInvoice.title,
      parce: buyList.value.totalPrice,
    };
  } else if (isAct.value == 1) {
    if (
      HktOrderInfo.value.orderInvoice.type == 1 &&
      HktOrderInfo.value.orderInvoice.openObj == 1
    ) {
      selectedInvoice.value.type = "电子发票(个人)";
    } else if (
      HktOrderInfo.value.orderInvoice.type == 1 &&
      HktOrderInfo.value.orderInvoice.openObj == 2
    ) {
      selectedInvoice.value.type = "电子发票(单位)";
    } else if (
      HktOrderInfo.value.orderInvoice.type == 2 &&
      HktOrderInfo.value.orderInvoice.openObj == 1
    ) {
      selectedInvoice.value.type = "纸质发票(个人)";
    } else if (
      HktOrderInfo.value.orderInvoice.type == 2 &&
      HktOrderInfo.value.orderInvoice.openObj == 2
    ) {
      selectedInvoice.value.type = "纸质发票(单位)";
    }
    selectedInvoice.value.looked = HktOrderInfo.value.orderInvoice.title;
    selectedInvoice.value.parce = buyList.value.totalPrice;
    HktOrderInfo.value.orderInvoice.category = 1;
  }
  open.value.bill = false;
}
function billClick(type: number) {
  isAct.value = type;
  if (type == 0) {
    calculateGoodsPriceFun(1);
    HktOrderInfo.value.orderInvoice.category = 0;
    selectedInvoice.value = {
      type: "",
      looked: "",
      parce: "",
    };
  } else {
    open.value.bill = true;
    if (type == 1) {
      billTitle.value = "普通电子发票";
      // HktOrderInfo.orderInvoice.category = 1
    } else {
      billTitle.value = "增值税发票";
      // HktOrderInfo.orderInvoice.category = 2
    }
  }
}

async function getUserInvoiceFun() {
  let res: any = await getUserInvoice();
  if (res.httpCode == 200) {
    if (res.data) {
      baseInvoice.value = res.data;
      HktOrderInfo.value.orderInvoice = {
        category: 2, //0 不开票 1 普通票 2 专用票 ,
        collectAddress: res.data.collectAddress, //发票人联系地址 ,
        collectEmail: res.data.collectEmail, //发票人邮箱 ,
        collectMobile: res.data.collectMobile, //发票人联系电话 ,
        collectName: res.data.collectName, //发票人收件名 ,
        openBankAccount: res.data.openBankAccount, //开户行账户 ,
        openBankAddress: res.data.openBankAddress, //开户行所属地 ,
        openObj: "2", //开票对象(1个人|2单位) ,
        openTaxpayer: res.data.openTaxpayer, //开票纳税人识别号 ,
        openType: 1, //开票类型(1电子元器件) ,
        status: 0, //1 已开票 0 未开票 ,
        title: res.data.openName, //发票抬头 ,
        operatingAddress: res.data.operatingAddress, //经营地址
        type: 1, //发票类型(1电子发票|2纸质发票)
      };
    } else {
      HktOrderInfo.value.orderInvoice = {
        category: 1, //0 不开票 1 普通票 2 专用票 ,
        collectAddress: "", //发票人联系地址 ,
        collectEmail: "", //发票人邮箱 ,
        collectMobile: "", //发票人联系电话 ,
        collectName: "", //发票人收件名 ,
        openBankAccount: "", //开户行账户 ,
        openBankAddress: "", //开户行所属地 ,
        openObj: "2", //开票对象(1个人|2单位) ,
        openTaxpayer: "", //开票纳税人识别号 ,
        openType: 1, //开票类型(1电子元器件) ,
        status: 0, //1 已开票 0 未开票 ,
        title: "", //发票抬头 ,
        type: 1, //发票类型(1电子发票|2纸质发票)
      };
    }
  }
}
async function saveOrderFun() {
  let res: any = await saveOrder({ ...HktOrderInfo.value });
  if (res.httpCode == 200) {
    user.value.cartUpdate += 1;
    navigateTo({
      path: "/order/save-alipay",
    });
  }
}
function psSelectFun(e: any) {
  kdIndex.value = e;
  HktOrderInfo.value.order.shippingCode = kdList.value[e].id;
  HktOrderInfo.value.order.shippingName = kdList.value[e].expressName;
  HktOrderInfo.value.order.shippingPrice = parseFloat(kdList.value[e].price);
}
function tip() {
  ElMessage.warning("请先选择收货地址！");
}
async function setDefault(item: any) {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    duration: 0,
  });
  await nextTick();
  let res: any = await setDefaultAddress(item.id);
  if (res.httpCode == 200) {
    open.value.address = false;
    addressList.value.forEach((i: any) => {
      if (i.id == item.id) {
        i.isDefault = 1;
      } else {
        i.isDefault = 0;
      }
    });
    let a = addressList.value.filter((item: any) => item.isDefault == 1);
    if (a.length > 0) {
      addressData.value = a[0];
      HktOrderInfo.value.order.province = a[0].province;
      HktOrderInfo.value.order.city = a[0].city;
      HktOrderInfo.value.order.district = a[0].district;
      HktOrderInfo.value.order.address = a[0].address;
      HktOrderInfo.value.order.contacts = a[0].consignee;
      HktOrderInfo.value.order.contactsMobile = a[0].mobile;
      getHktExpressCompanyListFun(a[0].province, a[0].city);
      getUserAddressFun();
    }
  }
  toast.close();
}
function editAddress() {
  open.value.address = true;
}
function link() {
  navigateTo({
    path: "/search",
    query: {
      key: "",
      pageNum: 1,
      pageSize: 20,
    },
  });
}
function calcPriceFun(val: any) {
  return val.toFixed(2);
}
function getPrice(b: any, item: any) {
  let a = item.priceTemplateArr;
  for (let i = 0; i < a.length; i++) {
    const min = i === 0 ? a[i].num : a[i].num; // 左区间从当前 num 开始
    const max = a[i + 1] ? a[i + 1].num : Infinity; // 右区间是下一个 num，如果没有就是 Infinity
    if (b >= min && b < max) {
      return a[i].price;
    }
  }
  return a[a.length - 1].price; // b 超过最大 num
}
let selectFalg = false;
async function calculateGoodsPriceFun(type: number) {
  if (type == 1) {
    linkParams.value.invoice = 2;
  } else if (type == 2) {
    linkParams.value.giveType = 2;
  }
  const res: any = await calculateGoodsPrice({ ...linkParams.value });
  if (res.httpCode == 200) {
    buyList.value = res.data;
    buyList.value.totalPrice = parseFloat(buyList.value.totalPrice);
    buyList.value.realTotalPrice = parseFloat(buyList.value.realTotalPrice);
    HktOrderInfo.value.order.shippingPrice = parseFloat(
      HktOrderInfo.value.order.shippingPrice
    );
    if (buyList.value.cartList.length < 1) {
      navigateTo({ path: "/cart" });
    }
  }
}

async function getUserAddressFun() {
  const res: any = await getUserAddress();
  if (res.httpCode == 200) {
    addressList.value = res.data;
    if (addressList.value.length > 0) {
      let a = addressList.value.filter((item: any) => item.isDefault == 1);
      if (a.length > 0) {
        addressData.value = a[0];
        HktOrderInfo.value.order.province = a[0].province;
        HktOrderInfo.value.order.city = a[0].city;
        HktOrderInfo.value.order.district = a[0].district;
        HktOrderInfo.value.order.address = a[0].address;
        HktOrderInfo.value.order.contacts = a[0].consignee;
        HktOrderInfo.value.order.contactsMobile = a[0].mobile;
        getHktExpressCompanyListFun(a[0].province, a[0].city);
      }
    }
  }
}

async function getHktExpressCompanyListFun(province: any, city: any) {
  const res: any = await getHktExpressCompanyList({
    city: city,
    province: province,
  });
  if (res.httpCode == 200) {
    kdList.value = res.data;
    psSelectFun(2);
  }
}

function editFun(item: any) {
  currentItem.value = item;
  open.value.detail = true;
}
function delFunDialog(item: any) {
  ElMessageBox.confirm("确认删除该商品？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(() => {
      delCartGoodFun(item);
    })
    .catch(() => {
      // catch error
    });
}
async function delCartGoodFun(item: any) {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    duration: 0,
  });
  const res: any = await delCartGood(item.goodsId);
  setTimeout(() => {
    toast.close();
  }, 1000);
  if (res.httpCode == 200) {
    user.value.cartUpdate += 1;
  }
}
function done() {
  cancel();
}
function cancel() {
  Object.keys(open.value).forEach(
    (key) => (open.value[key as keyof typeof open.value] = false)
  );
}
</script>
<style scoped lang="scss">
.max-w1280 {
  background-color: #f7f7f7;
}
.cart-wrap {
  padding: 12px;
  min-height: calc(100vh - 44px);
  padding-bottom: 60px;
  .product-ul {
    margin: 0;
    background: #fff;
    border-radius: 8px;
    padding: 0;
    .product-img {
      min-width: 90px;
      width: 90px;
      height: 90px;
      img {
        border: 1px solid #f3f3f3;
        border-radius: 5px;
        height: 90px;
        width: 90px;
        min-width: 90px;
      }
    }
    .product-info {
      max-width: 100%;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0;
      .title {
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        font-size: 12px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.price {
          margin-top: 2px;
        }
      }
    }
  }
  .product-li {
    position: relative;
    padding: 0px;
    margin-bottom: 0;
    & + .product-li {
      margin-top: 12px;
    }
    a {
      align-items: center;
      padding-left: 0;
    }
    .check-wrap {
      width: 36px;
      height: 100%;
      border-radius: 50%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      i {
        width: 16px;
        height: 16px;
        border: 1px solid #e8e8e8;
        border-radius: 50%;
        display: block;
        &.check {
          background: url(@/assets/img/icon/check.svg) no-repeat center center;
          background-size: 16px auto;
        }
      }
    }
  }
  .opt {
    display: flex;
    position: absolute;
    right: 0;
    flex-direction: column;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
    width: 44px;
    z-index: 2;
    i {
      width: 44px;
      height: 40px;
      &.edit {
        background: url(@/assets/img/icon/edit.svg) no-repeat center center;
        background-size: 28px auto;
      }
      &.sc {
        background: url(@/assets/img/icon/del.svg) no-repeat center center;
        background-size: 20px auto;
      }
    }
  }
}
.linkProduct {
  border-radius: 25px !important;
  min-width: 120px;
}
.buy-btn-wrap2 {
  display: flex;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  left: 0;
  z-index: 555;
  margin-top: 15px;
  .btn_main {
    border-radius: 25px !important;
    flex: 1;
    height: 42px !important;
    &.is-disabled {
      background: #e9e9e9;
      color: #fff;
    }
  }
}
.buy-btn-wrap {
  display: flex;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  left: 0;
  padding: 0 15px;
  z-index: 555;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
  .tips {
    color: #666;
    &.mainColor {
      font-size: 16px;
    }
  }
  .btn_main {
    border-radius: 25px !important;
    flex: 1;
    margin-left: 20px;
    height: 42px !important;
    &.is-disabled {
      background: #e9e9e9;
      color: #fff;
    }
  }
}
.line-wrap {
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  .line-item {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    .ccc {
      color: #666;
      font-size: 12px;
    }
    &.line-total2 {
      line-height: 30px;
      margin-bottom: 5px;
      .label {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .val {
        color: #666;
        font-size: 12px;
      }
    }
    &.line-total {
      line-height: 50px;
      margin-bottom: -12px;
      margin-top: 10px;
      border-top: 1px solid #e8e8e8;
      .label {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .val {
        font-size: 20px;
        font-weight: bold;
        color: $mainColor;
      }
    }
  }
  .label {
    color: #999;
    min-width: 60px;
  }
  .val {
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: none;
    line-height: 20px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
.drawer-con {
  .title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .item-li {
    background: #fff;
    background-size: 20px auto;
    padding: 6px 12px 10px 12px;
    border-radius: 4px;
    position: relative;
    & + .item-li {
      margin-top: 12px;
    }
    .address {
      font-size: 12px;
      color: #666;
      padding-right: 25px;
    }
    h3 {
      font-size: 14px;
      position: relative;
      line-height: 26px;
      font-weight: bold;
      margin-bottom: 3px;
      color: #333;
      display: flex;
      align-items: center;
      span {
        font-weight: 400;
        color: #666;
        display: flex;
        align-items: center;
        margin-left: 10px;
      }
      i {
        border: 1px solid $mainColor;
        font-size: 10px;
        font-style: normal;
        height: 16px;
        display: flex;
        align-items: center;
        color: $mainColor;
        padding: 0 3px;
        margin-left: 15px;
      }
    }
  }
}

.ps-wrap {
  &.ps-bill-wrap {
    flex-direction: column;
  }
  .explain-bottom-box {
    margin-top: 12px;

    .infoice-explain {
      position: relative;
      padding-left: 12px;
      padding-right: 12px;
      width: 100%;
      border: 1px solid #ffe3d5;
      background-color: #fefbf6;
      padding-bottom: 5px;
    }

    .explain-caption {
      position: relative;
      padding-left: 20px;
      height: 40px;
      background-image: url(@/assets/img/icon/explain.png);
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 16px 16px;
      font-size: 14px;
      line-height: 40px;
      color: #ff8a14;
    }

    .explain-text-box {
      p {
        margin-bottom: 3px;
        font-size: 12px;
        line-height: 20px;
        text-align: justify;
        color: #666;
      }
    }
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    li {
      position: relative;
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;
      border: 1px solid #dedede;
      font-size: 14px;
      justify-content: center;
      color: #333;
      cursor: pointer;
      border-radius: 4px;
      &.current {
        background: url(@/assets/img/icon/address_selected.png) no-repeat right
          bottom;
        background-size: 20px 20px;
        border-color: $mainColor;
        color: $mainColor;
      }
    }
  }
}
.bill-wrap {
  .mt12_i.van-cell-group {
    margin: 0;
  }
  .van-cell.van-field {
    padding-left: 0;
    padding-right: 0;
  }
  .notice_box {
    background: #fffaee;
    width: 100%;
    padding: 12px;
    margin: 12px 0 0px 0;

    h5 {
      color: #ff8a14;
      font-size: 12px;
      font-weight: bold;
    }

    p {
      color: #ff8a14;
      font-size: 12px;
      line-height: 20px;
    }
  }
}
</style>
<style lang="scss">
.address-drawer {
  background: #f7f7f7;
}
.address-drawer,
.bill-drawer {
  .el-drawer__header {
    display: none;
  }
  .el-drawer__body {
    padding: 12px;
  }
}
</style>
