<template>
  <div class="box" ref="appBox">
    <!-- <div class="topbox_text">Cart Information</div> -->
    <div class="contentbox">
      <p class="cart_f">{{ $t("card.Cart") }}</p>
      <div class="bottomcontentbox_b">
        <div class="bottomcontentbox">
          <!-- <div class="cart_p">
            <p>Cart Information</p>
          </div> -->
          <!-- <div class="input_box">
          <span>
            {{$t('inquiry.QuickAdd')}}:
          </span>
          <el-input class="catalogInput" placeholder=""></el-input>
          <span>{{$t('button.addQuoteForm')}}</span>
        </div> -->

          <el-table
            class="table_boxf"
            :empty-text="$t('table.notable')"
            ref="dataTable"
            :row-key="getRowKeys"
            :data="list"
            border
            style="width: 100%"
            @select-all="checkSelectAll"
            @select="checkSelect"
            header-row-class-name="table_header"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="40"
            >
            </el-table-column>
            <el-table-column
              width="120"
              prop="productCatalog"
              :label="$t('table.catalog')"
            >
            </el-table-column>
            <el-table-column
              prop="productName"
              :label="$t('table.productName')"
            ></el-table-column>
            <el-table-column
              width="120"
              prop="size"
              :label="$t('table.size')"
            ></el-table-column>
            <el-table-column width="100" :label="$t('table.quantity')">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.number"
                  @change="handleChange($event, scope.row)"
                  :min="1"
                  label="描述文字"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column width="100" :label="$t('bottomBar.Price')">
              <template slot-scope="scope">
                <span class="price">{{ $t("bottomBar.money") }}</span>
                <span class="line_total" v-if="$util.localeStorage()">{{
                  scope.row.price
                }}</span>
                <span class="line_total" v-if="!$util.localeStorage()">{{
                  scope.row.cnPrice
                }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column width="120" prop="discountPrice" :label="$t('card.Discount')"> -->
            <el-table-column width="120" :label="$t('card.Discount')">
              <template slot-scope="scope">
                <span class="price">{{ $t("bottomBar.money") }}</span>
                <span class="line_total" v-if="$util.localeStorage()">{{
                  scope.row.discountPrice
                }}</span>
                <span class="line_total" v-if="!$util.localeStorage()">{{
                  scope.row.cnDiscountPrice
                }}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" :label="$t('card.Total')">
              <template slot-scope="scope">
                <span class="price">{{ $t("bottomBar.money") }}</span>
                <span class="line_total" v-if="$util.localeStorage()">{{
                  scope.row.number * scope.row.discountPrice
                }}</span>
                <span class="line_total" v-if="!$util.localeStorage()">{{
                  scope.row.number * scope.row.cnDiscountPrice
                }}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" :label="$t('card.Operate')">
              <template slot-scope="scope">
                <i @click="tapDelete(scope.row)" class="el-icon-delete"></i>
              </template>
            </el-table-column>
          </el-table>

          <!-- 移动 -->
          <el-table
            class="table_pmd"
            :empty-text="$t('table.notable')"
            ref="dataTablewx"
            :row-key="getRowKeys"
            :data="list"
            border
            style="width: 100%"
            @select-all="checkSelectAll"
            @select="checkSelect"
            header-row-class-name="table_header"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="40"
            >
            </el-table-column>
            <el-table-column
              prop="productCatalog"
              :label="$t('table.catalog')"
              style="width:20%;"
            >
            </el-table-column>
            <el-table-column
              prop="productName"
              :label="$t('table.productName')"
              style="width:20%"
            >
            </el-table-column>
            <el-table-column
              prop="size"
              :label="$t('table.size')"
              style="width:20%"
            >
            </el-table-column>
            <el-table-column :label="$t('table.quantity')" style="width:20%">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.number"
                  @change="handleChange($event, scope.row)"
                  :min="1"
                  label="描述文字"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('checkout.More')"
              style="width:20%"
              type="expand"
            >
              <template slot-scope="scope">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item :label="$t('bottomBar.Price')">
                    <span class="price">{{ $t("bottomBar.money") }}</span>
                    <span v-if="$util.localeStorage()">{{
                      scope.row.price
                    }}</span>
                    <span v-if="!$util.localeStorage()">{{
                      scope.row.cnPrice
                    }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('card.Discount')">
                    <!-- <div>{{ scope.row.discountPrice }}</div> -->
                    <span class="price">{{ $t("bottomBar.money") }}</span>
                    <span v-if="$util.localeStorage()">{{
                      scope.row.discountPrice
                    }}</span>
                    <span v-if="!$util.localeStorage()">{{
                      scope.row.cnDiscountPrice
                    }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('card.Total')">
                    <span class="price">{{ $t("bottomBar.money") }}</span>
                    <!-- <div>{{scope.row.number*scope.row.discountPrice}}</div> -->
                    <span v-if="$util.localeStorage()">{{
                      scope.row.number * scope.row.discountPrice
                    }}</span>
                    <span v-if="!$util.localeStorage()">{{
                      scope.row.number * scope.row.cnDiscountPrice
                    }}</span>
                  </el-form-item>
                  <el-form-item :label="$t('card.Operate')">
                    <i @click="tapDelete(scope.row)" class="el-icon-delete"></i>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>

          <div class="cart_button">
            <button @click="tapDeleteAll">{{ $t("card.items") }}</button>
          </div>

          <div class="cart_button_f">
            <div class="cart_text" v-if="$util.localeStorage()">
              {{ $t("card.Subtotal") }} :<span
                >{{ $t("bottomBar.money")
                }}{{ cartTotal.checkedGoodsDiscount }}</span
              >
            </div>
            <div class="cart_text" v-if="!$util.localeStorage()">
              {{ $t("card.Subtotal") }} :<span
                >{{ $t("bottomBar.money")
                }}{{ cartTotal.checkedGoodsDiscount }}</span
              >
            </div>
            <!-- <button @click="tapCheck">{{$t('card.check')}}</button> -->
          </div>
        </div>
        <!-- 客户联系信息 -->
        <div class="customer_box">
          <div class="customer" v-if="!tokenShow">
            <div class="title">
              {{ $t("taps.tips") }}<span class="required">*</span
              >{{ $t("taps.tipsRequired") }}：
            </div>
            <el-form
              :model="form"
              class="demo-form-inline"
              label-position="left"
              :label-width="langShow ? '160px' : '120px'"
              :inline="true"
            >
              <el-form-item :label="$t('input.email') + '：'" :required="true">
                <el-input
                  v-model="form.email"
                  :placeholder="$t('input.email')"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('register.Fullname') + '：'">
                <el-input
                  v-model="form.name"
                  :placeholder="$t('register.Fullname')"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('register.Company') + '：'">
                <el-input
                  v-model="form.company"
                  :placeholder="$t('register.Company')"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('register.Country') + '：'">
                <el-select
                  v-if="langShow"
                  v-model="form.country"
                  :placeholder="$t('register.Country')"
                >
                  <el-option
                    v-for="item in regionList"
                    :key="item.en"
                    :label="item.en"
                    :value="item.en"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-else
                  v-model="form.country"
                  :placeholder="$t('register.Country')"
                >
                  <el-option
                    v-for="item in regionList"
                    :key="item.cn"
                    :label="item.cn"
                    :value="item.cn"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('register.Account') + '：'">
                <el-select
                  v-model="form.accountType"
                  :placeholder="$t('register.Account')"
                >
                  <el-option
                    v-for="item in accountTypeList"
                    :key="$util.localeStorage() ? item.name : item.nameCn"
                    :label="$util.localeStorage() ? item.name : item.nameCn"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- 收货地址 -->
          <div class="information customer">
            <div class="title title_s">
              {{ $t("checkout.Shipping") }}
              <div class="horizontal"></div>
            </div>
            <disdAddress @onaddress="onaddress" v-if="tokenShow"></disdAddress>
            <el-form
              v-else
              :model="receipt"
              ref="receipt"
              class="demo-form-inline"
              label-position="left"
              :label-width="langShow ? '160px' : '120px'"
              :inline="true"
            >
              <el-form-item
                :label="$t('checkout.Name') + '：'"
                :required="true"
              >
                <el-input
                  v-model="receipt.name"
                  :placeholder="$t('checkout.Name')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Phone') + '：'"
                :required="true"
              >
                <el-input
                  v-model="receipt.tel"
                  :placeholder="$t('checkout.Phone')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Institute') + '：'"
                :required="true"
              >
                <el-input
                  v-model="receipt.company"
                  :placeholder="$t('checkout.Institute')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('order.country') + '：'"
                :required="true"
                v-if="langShow"
              >
                <el-select
                  v-model="receipt.country"
                  :placeholder="$t('register.Country')"
                >
                  <el-option
                    v-for="item in regionList"
                    :key="item.en"
                    :label="item.en"
                    :value="item.en"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="省:" :required="true" v-if="!langShow">
                <el-select
                  v-model="receipt.province"
                  placeholder="省"
                  @change="changeProvince"
                >
                  <el-option
                    v-for="item in province"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市:" :required="true" v-if="!langShow">
                <el-select v-model="receipt.city" placeholder="市">
                  <el-option
                    v-for="item in city"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Addre') + '：'"
                :required="true"
              >
                <el-input
                  v-model="receipt.address"
                  :placeholder="$t('checkout.Addre')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.postal') + '：'"
                :required="true"
              >
                <el-input
                  v-model="receipt.postalCode"
                  :placeholder="$t('checkout.postal')"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 账单地址 -->
          <div class="information customer" v-if="!tokenShow">
            <div class="title title_s">
              {{ $t("checkout.Choose") }}
              <div class="horizontal"></div>
            </div>
            <div class="checked_b">
              <el-checkbox v-model="identical" @change="identicalChange">{{
                $t("taps.sameAs")
              }}</el-checkbox>
            </div>
            <el-form
              :model="bill"
              ref="bill"
              class="demo-form-inline"
              label-position="left"
              :label-width="langShow ? '160px' : '120px'"
              :inline="true"
            >
              <el-form-item
                :label="$t('checkout.Name') + '：'"
                :required="true"
              >
                <el-input
                  v-model="bill.name"
                  :placeholder="$t('checkout.Name')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Phone') + '：'"
                :required="true"
              >
                <el-input
                  v-model="bill.tel"
                  :placeholder="$t('checkout.Phone')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Institute') + '：'"
                :required="true"
              >
                <el-input
                  v-model="bill.company"
                  :placeholder="$t('checkout.Institute')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('order.country') + '：'"
                :required="true"
                v-if="langShow"
              >
                <el-select
                  v-model="bill.country"
                  :placeholder="$t('register.Country')"
                >
                  <el-option
                    v-for="item in regionList"
                    :key="item.en"
                    :label="item.en"
                    :value="item.en"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="省:" :required="true" v-if="!langShow">
                <el-select
                  v-model="bill.province"
                  placeholder="省"
                  @change="billProvince"
                >
                  <el-option
                    v-for="item in province"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市:" :required="true" v-if="!langShow">
                <el-select v-model="bill.city" placeholder="市">
                  <el-option
                    v-for="item in billCity"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.Addre') + '：'"
                :required="true"
              >
                <el-input
                  v-model="bill.address"
                  :placeholder="$t('checkout.Addre')"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('checkout.postal') + '：'"
                :required="true"
              >
                <el-input
                  v-model="bill.postalCode"
                  :placeholder="$t('checkout.postal')"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="information customer">
            <div class="title title_s">
              {{ $t("checkout.Payout") }}
              <div class="horizontal"></div>
            </div>
            <dissPayment></dissPayment>
          </div>
        </div>
        <div class="checkButtom">
          <button class="buttom" @click="submit">
            {{ $t("application.Submit") }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import region from "@/js/region";
import provinces from "@/js/provinces";
import disdAddress from "@/components/diss-address";
import dissPayment from "@/components/diss-payment";
export default {
  components: {
    disdAddress,
    dissPayment
  },
  name: "mycart",
  data() {
    return {
      identical: false,
      rules: [],
      langShow: this.$util.localeStorage(),
      regionList: [], // 国家
      province: [], // 市
      city: [],
      billCity: [], // 账单省
      tokenShow: !!localStorage.getItem("token"),
      list: [],
      cartTotal: {
        checkedGoodsDiscount: 0
      },
      checkList: [],
      selectList: [], // 选中
      form: {
        email: "",
        name: "",
        accountType: "",
        country: "",
        company: "",
        position: ""
      },
      receipt: {
        // 收货
        address: "", // 详细收货地址
        city: "", // 中文版–市
        company: "", // 企业
        country: "", // 国家 中文默认传China
        id: 0,
        isDefault: false, // 是否默认地址
        name: "", // 收货人名称
        postalCode: "", // 邮政编码
        province: "", // 中文版–省
        tel: "" // 手机号码
      },
      bill: {
        // 账单
        address: "", // 详细账单地址
        city: "", // 中文版–市
        company: "", // 企业
        country: "", // 国家 中文默认传China
        id: 0,
        isDefault: false, // 是否默认地址
        name: "", // 账单人名称
        postalCode: "", // 邮政编码
        province: "", // 中文版–省
        tel: "" // 手机号码
      },
      accountTypeList: [
        {
          name: "Industry",
          nameCn: "工业客户"
        },
        {
          name: "Academic",
          nameCn: "科研客户"
        },
        {
          name: "Distributor",
          nameCn: "经销商"
        }
      ],
      delFlagId: "",
      billId: ""
    };
  },
  methods: {
    onaddress(e) {
      this.delFlagId = e.delFlag;
      this.billId = e.billId;
    },
    identicalChange(e) {
      // 是否与帐单地址相同
      if (e) {
        this.bill = { ...this.receipt };
        // this.$set(this.bill, this.receipt)
      } else {
        this.bill.address = "";
        this.bill.city = "";
        this.bill.company = "";
        this.bill.country = "";
        this.bill.id = 0;
        this.bill.isDefault = false;
        this.bill.name = "";
        this.bill.postalCode = "";
        this.bill.province = "";
        this.bill.tel = "";
      }
    },
    submit() {
      // 提交
      if (this.tokenShow) {
        this.tapsubmit();
      } else {
        // console.log(this.checkList, '-------')
        this.noToken();
      }
    },
    noToken() {
      if (
        this.userVerification() &&
        this.verification() &&
        this.billVerification()
      ) {
        if (this.checkList.length > 0) {
          this.$api
            .post("order/submitNoLogin", {
              cartId: 0,
              cartList: this.checkList,
              fpAddress: this.receipt,
              message: "",
              shAddress: this.bill,
              user: this.form
            })
            .then(res => {
              if (res.code === 0) {
                this.$message({
                  message: this.$t("message.checkoutSuccess"),
                  type: "success"
                });
                for (let i = 0; i < this.list.length; i++) {
                  for (let j = 0; j < this.checkList.length; j++) {
                    if (this.list[i].skuId === this.checkList[j].skuId) {
                      this.list.splice(i, 1);
                    }
                  }
                }
                window.gtag && window.gtag("event", "submit_cart");
                localStorage.setItem("shoppingCart", JSON.stringify(this.list));
                localStorage.setItem(
                  "shoppingNum",
                  JSON.stringify(this.list.length)
                );
                this.$router.push({ name: "ordersuccess" });
              } else {
                this.$message(res.msg);
              }
            });
        } else {
          this.$message(this.$t("button.Itsover"));
        }
      }
    },
    tapsubmit() {
      // 登录提交订单
      this.$api
        .post("order/submit", {
          cartId: 0,
          fpAddress: { id: this.billId },
          message: "",
          shAddress: { id: this.delFlagId }
        })
        .then(res => {
          if (res.code == 0) {
            this.$message({
              message: this.$t("message.checkoutSuccess"),
              type: "success"
            });
            gtag("event", "submit_cart");
            this.$router.push({ name: "ordersuccess" });
          } else {
            this.$message(res.msg);
          }
        });
    },
    // 发货地址获取市
    changeProvince(e) {
      let that = this;
      that.receipt.city = "";
      that.province.forEach(item => {
        if (item.label == e) {
          that.city = item.children;
        }
      });
    },
    // 账单地址获取市
    billProvince(e) {
      let that = this;
      that.bill.city = "";
      that.province.forEach(item => {
        if (item.label == e) {
          that.billCity = item.children;
        }
      });
    },
    // tapCheck () {
    //   if (JSON.parse(localStorage.getItem('token'))) {
    //     if (this.cartTotal.checkedGoodsDiscount > 0) {
    //       this.$router.push({name: 'checkout'})
    //     } else {
    //       this.$message.error(this.$t('message.PleaseSelect'))
    //     }
    //   } else {
    //     this.$router.push({name: 'login'})
    //   }
    // },
    getRowKeys(row, index) {
      if (JSON.parse(localStorage.getItem("token"))) {
        return row.id;
      } else {
        return row.skuId;
      }
    },
    checkSelectAll(e) {
      // 全选
      let that = this;
      var obj = [];
      that.selectList = [];
      if (JSON.parse(localStorage.getItem("token"))) {
        if (e.length > 0) {
          e.forEach(item => {
            that.selectList.push(item.id);
          });
          that.checked(true, that.selectList);
        } else {
          that.list.forEach(item => {
            obj.push(item.id);
          });
          that.checked(false, obj);
        }
      } else {
        if (e.length > 0) {
          var objList = [];
          e.forEach(item => {
            let data = {
              checked: true,
              id: item.id,
              number: item.number,
              productCatalog: item.productCatalog,
              skuId: item.skuId
            };
            objList.push(data);
          });
          this.checkList = objList;
        } else {
          this.checkList = [];
        }
        console.log(e, "============", this.checkList);
        // this.$router.push({name: 'login'})
      }
    },
    checkSelect(selection, row) {
      // 单选
      let that = this;
      let data = [row.id];
      if (selection.length > that.selectList.length) {
        selection.forEach(item => {
          that.selectList.push(item.id);
        });
        this.checked(true, data, row);
      } else {
        that.selectList.forEach((item, index) => {
          if (item == row.id) {
            that.selectList.splice(index, 1);
          }
        });
        this.checked(false, data, row);
      }
    },
    checked(checked, obj, row) {
      // checked
      let that = this;
      if (JSON.parse(localStorage.getItem("token"))) {
        that.$api
          .post("cart/checked", {
            checked: checked,
            ids: obj
          })
          .then(res => {
            if (res.code == 0) {
              // console.log(res)
              that.getList();
            } else {
              this.$message(res.msg);
            }
          });
      } else {
        if (checked) {
          let data = {
            checked: true,
            id: row.id,
            number: row.number,
            productCatalog: row.productCatalog,
            skuId: row.skuId
          };
          this.checkList.push(data);
        } else {
          for (let i = 0; i < this.checkList.length; i++) {
            if (this.checkList[i].skuId === row.skuId) {
              this.checkList.splice(i, 1);
            }
          }
        }
      }
    },
    tapDeleteAll() {
      // 删除所有
      let that = this;
      var obj = [];
      if (JSON.parse(localStorage.getItem("token"))) {
        that.list.forEach(item => {
          obj.push(item.id);
        });
        that.$api
          .post("cart/delete", {
            checked: true,
            ids: this.selectList
          })
          .then(res => {
            if (res.code == 0) {
              that.getList();
            } else {
              this.$message(res.msg);
            }
          });
      } else {
        this.list = [];
        this.checkList = [];
        localStorage.removeItem("shoppingCart");
        localStorage.setItem("shoppingNum", JSON.stringify(this.list.length));
      }
    },
    tapDelete(e) {
      // 删除
      let that = this;
      if (JSON.parse(localStorage.getItem("token"))) {
        this.$api
          .post("cart/delete", {
            checked: true,
            ids: [e.id]
          })
          .then(res => {
            if (res.code == 0) {
              this.getList();
            } else {
              this.$message(res.msg);
            }
          });
      } else {
        this.list.forEach((item, index) => {
          if (item.skuId == e.skuId) {
            if (this.$util.localeStorage()) {
              that.cartTotal.checkedGoodsDiscount =
                that.cartTotal.checkedGoodsDiscount -
                e.number * e.discountPrice;
            } else {
              that.cartTotal.checkedGoodsDiscount =
                that.cartTotal.checkedGoodsDiscount -
                e.number * e.cnDiscountPrice;
            }
            that.list.splice(index, 1);
          }
        });
        for (let i = 0; i < this.checkList.length; i++) {
          if (this.checkList[i].skuId === e.skuId) {
            this.checkList.splice(i, 1);
          }
        }
        localStorage.setItem("shoppingCart", JSON.stringify(this.list));
        localStorage.setItem("shoppingNum", JSON.stringify(this.list.length));
      }
    },
    getList() {
      let that = this;
      let data = JSON.parse(localStorage.getItem("shoppingCart"));
      let arry = [];
      if (JSON.parse(localStorage.getItem("token"))) {
        if (data && data.length > 0) {
          data.forEach(item => {
            var obj = {
              checked: true,
              id: item.id,
              number: item.number,
              productCatalog: item.productCatalog,
              skuId: item.skuId
            };
            arry.push(obj);
          });
        } else {
          arry = null;
        }
        this.$api
          .post("cart/index", {
            cartList: arry
          })
          .then(res => {
            if (res.code == 0) {
              this.list = res.data.cartList;
              this.cartTotal = res.data.cartTotal;
              localStorage.removeItem("shoppingCart");
              localStorage.setItem(
                "shoppingNum",
                JSON.stringify(res.data.cartList.length)
              );
            } else {
              this.$message(res.msg);
            }
          });
      } else {
        if (data && data.length > 0) {
          data.forEach(item => {
            that.list.push(item);
            let data = {
              checked: true,
              id: item.id,
              number: item.number,
              productCatalog: item.productCatalog,
              skuId: item.skuId
            };
            that.checkList.push(data);
            if (this.$util.localeStorage()) {
              that.cartTotal.checkedGoodsDiscount +=
                item.number * item.discountPrice;
            } else {
              that.cartTotal.checkedGoodsDiscount +=
                item.number * item.cnDiscountPrice;
            }
          });
        }
      }
    },
    handleChange(e, obj) {
      // 更新
      let that = this;
      if (JSON.parse(localStorage.getItem("token"))) {
        this.$api
          .post("cart/update", {
            checked: obj.checked,
            id: obj.id,
            number: obj.number,
            productCatalog: obj.productCatalog,
            skuId: obj.skuId
          })
          .then(res => {
            if (res.code == 0) {
              this.getList();
            } else {
              this.getList();
              this.$message(res.msg);
            }
          });
      } else {
        that.cartTotal.checkedGoodsDiscount = 0;
        this.list.forEach(item => {
          if (this.$util.localeStorage()) {
            that.cartTotal.checkedGoodsDiscount +=
              item.number * item.discountPrice;
          } else {
            that.cartTotal.checkedGoodsDiscount +=
              item.number * item.cnDiscountPrice;
          }
        });
        localStorage.setItem("shoppingCart", JSON.stringify(this.list));
      }
    },
    verification() {
      // 收货地址验证
      if (!this.langShow) {
        if (!this.receipt.name) {
          this.$message.error(
            this.$t("checkout.Name") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.tel) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.$util.isMobile(this.receipt.tel)) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
          );
          return false;
        } else if (!this.receipt.company) {
          this.$message.error(
            this.$t("checkout.Institute") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.province) {
          this.$message.error("请选择省份");
          return false;
        } else if (!this.receipt.city) {
          this.$message.error("请选择市");
          return false;
        } else if (!this.receipt.address) {
          this.$message.error(
            this.$t("checkout.Addre") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.postalCode) {
          this.$message.error(
            this.$t("checkout.postal") + this.$t("message.notEmpty")
          );
          return false;
        } else {
          return true;
        }
      } else {
        if (!this.receipt.name) {
          this.$message.error(
            this.$t("checkout.Name") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.tel) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.$util.isMobile(this.receipt.tel)) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
          );
          return false;
        } else if (!this.receipt.company) {
          this.$message.error(
            this.$t("checkout.Institute") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.country) {
          this.$message.error(
            this.$t("message.PleaseSelects") + this.$t("order.country")
          );
          return false;
        } else if (!this.receipt.address) {
          this.$message.error(
            this.$t("checkout.Addre") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.receipt.postalCode) {
          this.$message.error(
            this.$t("checkout.postal") + this.$t("message.notEmpty")
          );
          return false;
        } else {
          return true;
        }
      }
    },
    billVerification() {
      // 账单地址验证
      if (!this.langShow) {
        if (!this.bill.name) {
          this.$message.error(
            this.$t("checkout.Name") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.tel) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.$util.isMobile(this.bill.tel)) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
          );
          return false;
        } else if (!this.bill.company) {
          this.$message.error(
            this.$t("checkout.Institute") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.province) {
          this.$message.error("请选择省份");
          return false;
        } else if (!this.bill.city) {
          this.$message.error("请选择市");
          return false;
        } else if (!this.bill.address) {
          this.$message.error(
            this.$t("checkout.Addre") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.postalCode) {
          this.$message.error(
            this.$t("checkout.postal") + this.$t("message.notEmpty")
          );
          return false;
        } else {
          return true;
        }
      } else {
        if (!this.bill.name) {
          this.$message.error(
            this.$t("checkout.Name") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.tel) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.$util.isMobile(this.bill.tel)) {
          this.$message.error(
            this.$t("checkout.Phone") + this.$t("message.IncorrectFormat")
          );
          return false;
        } else if (!this.bill.company) {
          this.$message.error(
            this.$t("checkout.Institute") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.country) {
          this.$message.error(
            this.$t("message.PleaseSelects") + this.$t("order.country")
          );
          return false;
        } else if (!this.bill.address) {
          this.$message.error(
            this.$t("checkout.Addre") + this.$t("message.notEmpty")
          );
          return false;
        } else if (!this.bill.postalCode) {
          this.$message.error(
            this.$t("checkout.postal") + this.$t("message.notEmpty")
          );
          return false;
        } else {
          return true;
        }
      }
    },
    initialization() {
      // 获取个人信息
      if (JSON.parse(localStorage.getItem("token"))) {
        var userInfo = JSON.parse(localStorage.getItem("user"));
        this.form.user = userInfo.name;
        this.form.accountType = userInfo.accountType;
        this.form.country = userInfo.country;
        this.form.company = userInfo.company;
      }
    },
    userVerification() {
      // 个人信息验证
      if (!this.form.email) {
        this.$message.error(
          this.$t("register.Address") + this.$t("register.Cannot")
        );
        return false;
      } else if (!this.$util.isEmail(this.form.email)) {
        this.$message.error(this.$t("input.email") + this.$t("message.email"));
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {
    list(n, o) {
      let that = this;
      this.$nextTick(() => {
        that.selectList = [];
        that.list.forEach(item => {
          if (item.checked) {
            if (that.$refs.appBox.clientWidth > 750) {
              this.$refs.dataTable.toggleRowSelection(item, true);
              that.selectList.push(item.id);
            } else {
              this.$refs.dataTablewx.toggleRowSelection(item, true);
              that.selectList.push(item.id);
            }
          }
        });
      });
    }
  },
  mounted() {},
  created() {
    this.getList();
    this.regionList = region;
    this.province = provinces;
    this.initialization();
  }
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .box {
    width: 100%;
    overflow: hidden;
  }
  .topbox_text {
    font-size: 20px;
    margin-bottom: 2.4rem;
  }
  .contentbox {
    width: 100%;
    overflow: hidden;
  }

  .contentbox > .cart_f {
    font-size: 16px;
    padding: 1rem 1rem;
    font-weight: 700;
    font-family: Arial;
    color: #005bab;
    background: #cfe0ef;
  }

  .bottomcontentbox_b {
    width: 100%;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid #dbdbdb;
    background: #ffffff;
  }

  .bottomcontentbox /deep/ {
    border: 1px solid #dbdbdb;
    background: white;
    padding: 1rem;
    margin-bottom: 1.6rem;
    .cart_p {
      // border-bottom:1px solid #DBDBDB;
      p {
        margin-bottom: 1rem;
        font-size: 14px;
        font-weight: 600;
      }
    }
    .el-table {
      .table_header {
        color: #005bab;
      }
      .el-table__body-wrapper {
        .el-table__row {
          .cell {
            .el-icon-delete {
              font-size: 18px;
              color: #005bab;
              font-weight: 600;
              cursor: pointer;
            }
            .el-input-number {
              width: 100% !important;
              line-height: 30px;
              .el-input-number__decrease {
                width: 20px;
                height: 28px;
                top: 50%;
                transform: translateY(-50%);
                .el-icon-minus {
                  line-height: 30px;
                }
              }
              .el-input-number__increase {
                width: 20px;
                height: 28px;
                top: 50%;
                transform: translateY(-50%);
                .el-icon-plus {
                  margin-top: -10px;
                }
              }
              .el-input {
                .el-input__inner {
                  padding: 0 20px;
                  height: 30px;
                }
              }
            }
          }
        }
      }
    }
  }

  .input_box /deep/ {
    display: none;
    align-items: center;
    margin: 1rem 0;
    & > span:nth-of-type(1) {
      font-size: 14px;
      float: left;
      // color: #005BAB;
      margin-top: 0.3rem;
      margin-right: 0.5rem;
    }
    & > span:nth-of-type(2) {
      padding: 0 1rem;
      line-height: 2rem;
      height: 2rem;
      border: 1px solid #d3d3d3;
      display: inline-block;
      background: #005bab;
      color: white;
      border-radius: 0.2rem;
      cursor: pointer;
    }
    .catalogInput {
      width: 170px;
      margin-right: 0.5rem;
      .el-input__inner {
        height: 2rem;
        border: 1px solid #d3d3d3;
        float: left;
        border-radius: 0.2rem;
        text-indent: 0.5rem;
        padding: 0 10px;
      }
    }
  }

  .cart_button {
    border-bottom: 1px solid #dbdbdb;
    overflow: hidden;
    button {
      margin: 1rem 0;
      padding: 0.5rem;
      background: #005bab;
      color: white;
      border: none;
      border-radius: 0.2rem;
      float: right;
      cursor: pointer;
    }
  }
  .cart_button_f {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .cart_text {
      font-size: 14px;
      font-weight: 600;
      // float: right;
      color: #005bab;
      margin-top: 1rem;
      span {
        font-weight: 600;
        font-size: 18px;
      }
    }
    button {
      padding: 0.5rem;
      background: #005bab;
      color: white;
      border: none;
      border-radius: 0.2rem;
      margin-top: 0.5rem;
      cursor: pointer;
      // float: right;
    }
  }

  .footer_card {
    line-height: 1.8;
  }
  .table_pmd {
    display: none;
  }
  .footerbox_text {
    display: none;
  }
  .customer_box {
    border: 1px solid #dbdbdb;
    padding: 1rem 2rem;
    .customer {
      .title {
        font-size: 1.2rem;
        color: #331515;
        margin-bottom: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .required {
          color: red;
        }
        .horizontal {
          width: 60px;
          height: 1px;
          background-color: #bdbdbd;
          margin-left: 10px;
        }
      }
      .checked_b {
        margin: 1rem 0;
      }
      .demo-form-inline /deep/ {
        .el-form-item {
          width: 48%;
          .el-form-item__content {
            width: 60%;
            .el-select {
              width: 100%;
            }
          }
        }
      }
    }
  }
  .checkButtom {
    margin-top: 10px;
    .buttom {
      margin: 1rem 0 0;
      padding: 0.5rem 2rem;
      background: #005bab;
      color: #fff;
      border: none;
      border-radius: 0.2rem;
      float: right;
      cursor: pointer;
    }
  }
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  .box {
    width: 100%;
    overflow: hidden;
  }
  .topbox_text {
    font-size: 0.18rem;
    margin-bottom: 0.2rem;
  }
  .contentbox {
    width: 100%;
    overflow: hidden;
  }

  .contentbox > .cart_f {
    font-size: 0.16rem;
    padding: 0.2rem 0.14rem;
    font-weight: 700;
    font-family: Arial;
    color: #005bab;
    background: #cfe0ef;
  }

  .bottomcontentbox_b {
    margin-top: 0.2rem;
    width: 100%;
    overflow: hidden;
    padding: 0.08rem 0.14rem;
    border: 1px solid #dbdbdb;
    background: #ffffff;
  }

  .bottomcontentbox /deep/ {
    // margin-top: 0.12rem;
    // padding: 0rem 0.14rem;
    overflow: hidden;
    .table_boxf {
      display: none;
    }

    // 将el-table的展开图标替换为其他图标
    .el-table__expand-icon {
      width: 0.2rem;
      height: 0.2rem;
      margin: 0 auto;
      border-radius: 4px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      background: #005bab;
      color: #ffffff;
    }
    .el-table__expand-icon .el-icon-arrow-right:before {
      content: "\";
      border: 1px solid #ccc;
      // padding: 2px;
      border: none;
    }
    .el-table__expand-icon--expanded .el-icon-arrow-right:before {
      content: "\";
    }
    .el-table__cell {
      padding: 0;
      .el-form-item {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #dbdbdb;
        display: flex;
        .el-form-item__label {
          width: 40%;
          padding-left: 0.2rem;
          border-right: 1px solid #dbdbdb;
        }
        .el-form-item__content {
          width: 60%;
          padding-left: 0.2rem;
          background: #f0f5fa;
          .el-icon-delete {
            color: #005bab;
          }
        }
      }
    }

    .el-table {
      border: 1px solid #dfdfdf;
      margin-top: 0.12rem !important ;
      // margin-bottom:0.14rem !important ;
      .el-table__header-wrapper {
        width: 100%;
        .el-table__header {
          width: 100% !important;
          colgroup {
            // col{
            //   width: 20% !important;
            // }
            col:nth-of-type(1) {
              width: 10% !important;
            }
            col:nth-of-type(2) {
              width: 15% !important;
            }
            col:nth-of-type(3) {
              width: 20% !important;
            }
            col:nth-of-type(4) {
              width: 15% !important;
            }
            col:nth-of-type(5) {
              width: 25% !important;
            }
            col:nth-of-type(6) {
              width: 15% !important;
            }
          }
          thead {
            tr {
              width: 60px !important;
              th {
                width: 60px !important;
                .cell {
                  font-size: 12px;
                  padding: 0 4px;
                  font-family: Arial;
                  font-weight: bold;
                  color: #005bab;
                }
              }
            }
          }
        }
      }
      .el-table__body-wrapper {
        .el-table__body {
          width: 100% !important;
          colgroup {
            width: 100% !important;
            col:nth-of-type(1) {
              width: 10% !important;
            }
            col:nth-of-type(2) {
              width: 15% !important;
            }
            col:nth-of-type(3) {
              width: 20% !important;
            }
            col:nth-of-type(4) {
              width: 15% !important;
            }
            col:nth-of-type(5) {
              width: 25% !important;
            }
            col:nth-of-type(6) {
              width: 15% !important;
            }
          }
          tbody {
            .el-table__row {
              .el-table__cell {
                &:nth-of-type(2) {
                  .cell {
                    font-family: Arial;
                    color: #005bab;
                  }
                }
                .cell {
                  font-size: 12px;
                  padding: 0 4px;
                  line-height: 0.24rem;
                  .size_data {
                    .size_q {
                      width: 40% !important;
                      max-width: 100px;
                      .el-input__inner {
                        width: 100% !important;
                      }
                    }
                    .el-select {
                      max-width: 100px;
                      width: 60% !important;
                      .el-input__inner {
                        padding-right: 16px;
                      }
                      .el-input__suffix {
                        .el-select__caret {
                          width: 16px;
                        }
                      }
                    }
                  }
                  .el-input-number {
                    .el-input-number__decrease {
                      width: 0.16rem;
                    }
                    .el-input-number__increase {
                      width: 0.16rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .el-table__empty-block {
        width: 100% !important;
      }
    }

    .size_data {
      display: flex;
      align-items: center;
      .size_q {
        width: 0.4rem;
        .el-input__inner {
          height: 0.24rem;
          border: 1px solid #dfdfdf;
          line-height: 0.24rem;
          padding: 0 0.03rem;
          width: 0.4rem;
          // border-radius: 0.2rem;
        }
      }
      .el-select {
        width: 0.6rem;
        .el-input__inner {
          height: 0.24rem;
          line-height: 0.24rem;
          padding-left: 0.05rem;
        }
        .el-input__icon {
          line-height: 0.24rem;
        }
      }
    }
    .el-input-number {
      width: 100%;
      .el-input-number__decrease {
        width: 0.24rem;
        height: 0.22rem;
        line-height: 0.22rem;
        top: 7px;
      }
      .el-input-number__increase {
        width: 0.24rem;
        height: 0.22rem;
        line-height: 0.22rem;
        top: 7px;
      }
      .el-input {
        .el-input__inner {
          height: 0.26rem;
          line-height: 0.26rem;
          padding: 0 0.24rem;
          border: 1px solid #dfdfdf;
          &:focus {
            border: 1px solid #dfdfdf;
          }
        }
      }
    }
  }

  .input_box /deep/ {
    display: flex;
    align-items: center;
    & > span:nth-of-type(1) {
      font-size: 0.12rem;
      float: left;
      color: #005bab;
      margin-right: 0.1rem;
    }
    & > span:nth-of-type(2) {
      // padding: 0 1rem;
      line-height: 0.28rem;
      height: 0.28rem;
      border: 1px solid #d3d3d3;
      // float: left;
      display: inline-block;
      background: #005bab;
      color: white;
      cursor: pointer;
      padding: 0 0.1rem;
    }
    .catalogInput {
      width: 1rem;
      .el-input__inner {
        height: 0.28rem;
        line-height: 0.28rem;
        // border: none;
        float: left;
        padding: 0 0.1rem;
      }
    }
  }

  .cart_button {
    border-bottom: 1px solid #dbdbdb;
    overflow: hidden;
    margin-bottom: 0.2rem;
    button {
      width: 100%;
      margin: 0.2rem 0;
      height: 0.4rem;
      background: #005bab;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 0.18rem;
    }
  }
  .cart_button_f {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // align-items: flex-end;
    .cart_text {
      font-size: 0.16rem;
      font-weight: 600;
      margin-bottom: 0.08rem;
      color: #005bab;
      span {
        font-weight: 600;
        font-size: 0.22rem;
      }
    }
    button {
      width: 100%;
      height: 0.4rem;
      background: #005bab;
      color: white;
      border: none;
      border-radius: 4px;
      margin-top: 0.16rem;
      font-size: 0.18rem;
      margin-bottom: 0.22rem;
    }
  }

  .footer_card {
    display: none;
  }
  .footerbox_text {
    margin-top: 0.2rem;
    .footer_text {
      font-size: 0.14rem;
      line-height: 1.8;
      word-wrap: break-word;
      word-break: normal;
    }
  }
  .customer_box {
    border: 1px solid #dbdbdb;
    padding: 0.1rem 0.1rem;
    .customer {
      .title {
        font-size: 0.12rem;
        color: #331515;
        margin-bottom: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // white-space: nowrap;
        .required {
          color: red;
        }
        .horizontal {
          width: 60px;
          height: 1px;
          background-color: #bdbdbd;
          margin-left: 10px;
        }
      }
      .checked_b {
        margin: 0.1rem 0;
      }
      .demo-form-inline /deep/ {
        .el-form-item {
          width: 100%;
          display: flex;
          .el-form-item__content {
            flex: 1;
            .el-select {
              width: 100%;
            }
          }
        }
      }
    }
  }
  .checkButtom {
    margin-top: 10px;
    .buttom {
      width: 100%;
      padding: 0.12rem;
      background: #005bab;
      color: #fff;
      border: none;
      border-radius: 0.1rem;
      cursor: pointer;
    }
  }
}
</style>