<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2023-01-29 17:32:44
 * *复消专区
-->
<template>
	<div>
		<!-- 用户头 -->
		<personInfo></personInfo>
		<div class="rt dis_flex">
			<div class="rti dis_flex" v-if="specialArea==33">{{ $t("APP_ADD_28") }}</div>
			<div class="rti dis_flex" v-else>{{ $t("w_0244") }}</div>
		</div>
		<!-- 表单 -->
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" status-icon class="demo-ruleForm">
			<el-row :gutter="40" class="padRow">
				<!-- <el-col :span="6">
          <el-form-item :label="$t('ENU_REG_AU_2')"
                        prop="fwzx">
            <el-input v-model="ruleForm.fwzx"
                      disabled></el-input>
          </el-form-item>
        </el-col> -->
				<el-col :span="6">
					<el-form-item v-if="specialArea == 33" :label="$t('APP_ADD_29')" prop="upgradeMemberCode">
						<el-input v-model="ruleForm.upgradeMemberCode" :disabled="toShow"
							:placeholder="$t('APP_ADD_29')"></el-input>
					</el-form-item>
					<el-form-item v-else :label="$t('w_0245')" prop="upgradeMemberCode">
						<el-input v-model="ruleForm.upgradeMemberCode" :disabled="toShow"
							:placeholder="$t('w_0280')"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item v-if="specialArea == 33" :label="$t('APP_ADD_30')" prop="upgradeMemberName">
						<el-input v-model="ruleForm.upgradeMemberName" :placeholder="$t('APP_ADD_30')"
							disabled></el-input>
					</el-form-item>
					<el-form-item v-else :label="$t('w_0246')" prop="upgradeMemberName">
						<el-input v-model="ruleForm.upgradeMemberName" :placeholder="$t('w_0281')" disabled></el-input>
					</el-form-item>

				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('w_0061')" prop="deliveryWay">
						<el-select v-model="ruleForm.deliveryWay" @change="selDelivery"
							:disabled="this.userInfo.pkSettleCountry == 1" :placeholder="$t('w_0062')">
							<el-option v-for="item in deliList" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="6">
					<el-form-item :label="$t('w_0063')" prop="transType">
						<el-select v-model="ruleForm.transType" :disabled="this.userInfo.pkSettleCountry == 1" :placeholder="$t('w_0064')">
							<el-option v-for="item in transList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
				<el-col :span="6" v-if="userInfo.pkSettleCountry != 1 && ruleForm.deliveryWay != 2">
					<!-- <el-form-item :label="$t('w_0100')" prop="pkMemberStore">
            <el-select
              filterable
              v-model="ruleForm.pkMemberStore"
              :placeholder="$t('w_0101')"
            >
              <el-option
                v-for="item in storeList"
                :key="item.pkId"
                :label="item.storeName"
                :value="item.pkId"
              ></el-option>
            </el-select>
          </el-form-item> -->
					<div @click="handleInputClick">
						<el-form-item :label="$t('w_0100')" prop="selectedStoreName">
							<el-input v-model="ruleForm.selectedStoreName" :placeholder="$t('w_0101')"
								readonly></el-input>
						</el-form-item>
					</div>
					<el-dialog :title="$t('w_0100')" :visible.sync="dialogVisible" width="80%" class="titles-dialog">
						<div class="topbox">
							<el-form label-width="80px" :model="queryParams" inline>
								<el-row>
									<el-col :span="6">
										<el-form-item :label="$t('MN_F_T_1206')">
											<el-input v-model="queryParams.storeCode"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item :label="$t('S_C_27')" class="dizhi">
											<el-cascader clearable v-model="queryParams.address" :options="areaData"
												:props="regionParams" @change="handleChange1"></el-cascader>
										</el-form-item>
									</el-col>
									<el-col :span="4">
										<div class="searchbox"
											:style="userInfo.pkCountry == 1 ? 'margin-left:10px' : ''">
											<el-button class="btn2" @click="research">{{
                        $t("N_I_183")
                      }}</el-button>
											<el-button class="btn1" @click="reChongzhi()">{{
                        $t("CK_KS_6")
                      }}</el-button>
										</div>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div>
							<el-table :data="storeLists" @row-click="handleRowClick" highlight-current-row
								style="width: 100%">
								<el-table-column prop="storeName" :label="$t('MN_F_T_1207')"></el-table-column>
								<el-table-column prop="storeCode" :label="$t('MN_F_T_1206')"></el-table-column>
								<el-table-column prop="storePerson" :label="$t('S_C_86')"></el-table-column>
								<el-table-column prop="storePhone" :label="$t('w_0052')"></el-table-column>
								<el-table-column prop="address" :label="$t('S_C_27')"></el-table-column>
							</el-table>
						</div>
						<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
							:limit.sync="queryParams.pageSize" @pagination="getStoreLists" />
						<div slot="footer">
							<el-button @click="dialogVisible = false">{{
                $t("MY_ORD_24")
              }}</el-button>
							<el-button type="primary" @click="handleConfirm">{{
                $t("MN_F_32")
              }}</el-button>
						</div>
					</el-dialog>
				</el-col>
			</el-row>
			<el-row :gutter="40" class="padRow">
				<!-- <el-col :span="6" v-if="userInfo.pkSettleCountry != 1 && ruleForm.deliveryWay != 2">
					<el-form-item :label="$t('w_0100')" prop="pkMemberStore">
						<el-select v-model="ruleForm.pkMemberStore" :placeholder="$t('w_0101')">
							<el-option v-for="item in storeList" :key="item.pkId" :label="item.storeName" :value="item.pkId"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
				<!-- 仓库隐藏 -->
				<!-- <el-col :span="6" v-if="userInfo.pkSettleCountry != 1">
          <el-form-item :label="$t('w_0102')">
            <el-select
              v-model="ruleForm.pkStorehouse"
              :placeholder="$t('w_0103')"
            >
              <el-option
                v-for="item in storehouseList"
                :key="item.pkId"
                :label="item.name"
                :value="item.pkId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
			</el-row>
			<!-- 收货人信息 -->
			<!-- <div v-show="isDeliveryWay">
        <div class="xian">
          <div class="title">{{ $t('w_0065') }}</div>
          <div class="lan"
               @click="openAddress">{{ $t('w_0066') }}</div>
        </div>
      </div> -->
			<!-- 收货人信息 -->
			<div v-if="isDeliveryWay">
				<div class="xian">
					<div class="title">{{ $t("w_0065") }}</div>
					<div class="lan" @click="openAddress">{{ $t("w_0066") }}</div>
				</div>
				<el-row :gutter="40" class="padRow">
					<el-col :span="6">
						<el-form-item :label="$t('MY_ORD_10')" prop="recName"><el-input v-model="ruleForm.recName"
								:placeholder="$t('w_0067')"></el-input></el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('w_0052')" prop="recPhone"><el-input v-model="ruleForm.recPhone"
								:placeholder="$t('w_0053')"></el-input></el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('w_0068')" class="dizhi" prop="dizhi">
							<el-cascader v-model="ruleForm.dizhi" @change="setDizhi" :options="areaData"
								:props="regionParams" :placeholder="$t('w_0069')"></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('S_C_27')" prop="recAddress">
							<el-input v-model="ruleForm.recAddress" maxlength="200"
								:placeholder="$t('w_0070')"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="40" class="padRow">
					<!-- <el-col :span="6">
						<el-form-item :label="$t('w_0071')"><el-input v-model="ruleForm.postage" disabled></el-input></el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item :label="$t('MY_WAL_22')"><el-input v-model="ruleForm.remark"
								:placeholder="$t('w_0072')"></el-input></el-form-item>
					</el-col>
				</el-row>
			</div>
		</el-form>
		<div class="nox" v-if="isDeliveryWay">
			<div class="title">{{ $t("w_0073") }}</div>
		</div>
		<div class="local" v-if="isDeliveryWay">
			<div :class="['local_i', item.pkId == moren ? 'local_a' : '']" v-for="item in addressList" :key="item.pkId">
				<el-radio v-model="moren" @input="checkRadio" :label="item.pkId">{{ }}</el-radio>
				<div class="local1">
					{{ item.recArea }}{{ item.recAddress }}({{ item.recName }} 收)
				</div>
				<div class="local2" v-show="item.isDefault == 1">
					{{ $t("w_0074") }}
				</div>
				<div class="local2 local3" v-show="item.isDefault == 0" @click="setDefaultAds(item.pkId)">
					{{ $t("w_0075") }}
				</div>
				<div class="local2" @click="changeAds(item.pkId)">
					{{ $t("w_0076") }}
				</div>
				<div class="local3" @click="delAds(item.pkId)">
					{{ $t("ENU_CONTROL_TYPE_3") }}
				</div>
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="nox">
			<div class="title">{{ $t("w_0077") }}</div>
		</div>
		<el-table :data="allData" :row-style="{ height: '60px', fontSize: '15px', color: '#333333' }"
			:cell-style="{ padding: '0' }" :fit="true" :header-cell-style="{
        background: '#C8161D',
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '15px',
      }" :row-class-name="tableRowClassName">
			<el-table-column align="center" prop="waresName" width="400" :label="$t('w_0078')">
				<template slot-scope="scope">
					<!-- <span>{{ scope.row.goodsPrice | numberToCurrency}}</span> -->
					<div class="goods">
						<div class="goods_t">
							<img :src="scope.row.cover1" alt="" />
							<div>{{ scope.row.waresName }}</div>
						</div>
						<div class="goods_tit" v-for="item in scope.row.waresItemsParamList"
							:key="item.pkWaresSpecsSku">
							<div class="goods_tit_l">
								<img :src="item.specCover" alt="" />
								<div class="goods_tit_lr">
									<div>{{ item.productName }}</div>
									<div>x {{ item.quantity }}</div>
								</div>
							</div>
							<div class="goods_tit_r">{{ item.skuInfo }}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="goodsPrice" :label="$t('w_0079')">
				<template slot-scope="scope">
					<span>{{ scope.row.price | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="goodsAchive" :label="$t('w_0080') + '(PV)'" v-if="specialArea !=30">
				<template slot-scope="scope">
					<span>{{ scope.row.achieve | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="quantity" :label="$t('w_0081')"></el-table-column>
			<el-table-column align="center" prop="spyjxj" :label="$t('w_0082') + 'PV'" v-if="specialArea !=30">
				<template slot-scope="scope">
					<span>{{ scope.row.achieveAmount | numberToCurrency }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="pvxj" :label="$t('w_0093')">
				<template slot-scope="scope">
					<span>{{ scope.row.priceAmount | numberToCurrency }}</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="tab_b">
			<div>
				{{ $t("w_0083") }}:{{ userInfo.currencyIcon
        }}{{ allGoodsData.priceAmount | numberToCurrency }}
			</div>
			<div>
				{{ $t("w_0071") }}:{{ userInfo.currencyIcon
        }}{{ ruleForm.postage | numberToCurrency }}
			</div>
		</div>
		<AddAddress ref="addAddress" @getAdList="getAddressList"></AddAddress>
		<div class="zhan"></div>
		<!-- 购买 -->
		<div class="tfooter">
			<div class="footer_t">
				<div class="footer_tt">
					<div class="dis_flex">
						<div class="f1">{{ $t("w_0325") }}:</div>
						<div class="f2">
							{{ userInfo.currencyIcon }}{{ totalAmont | numberToCurrency }}
						</div>
					</div>
					<div class="dis_flex" v-if="specialArea!=30">
						<div class="f1">{{ $t("ENU_TOTAL_V_1") }}:</div>
						<div class="f3">
							{{ allGoodsData.achieveAmount | numberToCurrency }}
						</div>
					</div>
				</div>
				<div class="footer_tt" v-show="
            ruleForm.recAddress &&
            ruleForm.recName &&
            ruleForm.recPhone &&
            ruleForm.nameList
          ">
					<div class="f2 f4">
						{{ $t("w_0084") }}：{{ ruleForm.nameList }}{{ ruleForm.recAddress }}
					</div>
					<div class="f4">
						{{ $t("MY_ORD_10") }}：{{ ruleForm.recName }}
						{{ ruleForm.recPhone }}
					</div>
				</div>
			</div>
			<div class="footer_b">
				<!-- 协议 -->
				<agreement :isShow="agreementShow" ref="agree" @agree="agree"></agreement>
				<div class="btn" @click="submitRegister('ruleForm')">
					{{ $t("w_0085") }}
				</div>
			</div>
		</div>
		<!-- 强制阅读协议 -->
		<mustAgreeMent :waresCodeList="waresCodeList"></mustAgreeMent>
		<Pay :isPay="isPay" @closePay="closePay" :paramsPost="paramsPost"></Pay>
	</div>
</template>

<script>
	import personInfo from "@/components/personInfo.vue";
	import AddAddress from "@/components/AddAddress.vue";
	import agreement from "@/components/agreement.vue";
	import {
		mapGetters
	} from "vuex";
	import * as api from "@/api/register.js";
	import {
		setTokenMi
	} from "@/util/auth";
	import Pay from "@/components/Pay.vue";
	import {
		Loading
	} from 'element-ui';
	import mustAgreeMent from "@/components/mustAgreeMent.vue";
	export default {
		components: {
			personInfo,
			AddAddress,
			agreement,
			Pay,
			mustAgreeMent,
		},
		data() {
			let validateRecTransType = (rule, value, callback) => {
				if (this.ruleForm.transType == "" && this.isDeliveryWay) {
					callback(new Error(this.$t("w_0064")));
				} else {
					callback();
				}
			};
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 50,
					storeCode: "",
					address: ["", "", ""],
				},
				selectedStoreId: "",
				dialogVisible: false,
				storeLists: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				waresCodeList: [],
				isPay: false,
				paramsPost: "",
				isClick: 0,
				ruleForm: {
					upgradeMemberCode: "",
					dizhi: [],
					fwzx: "",
					upgradeMemberName: "",
					postage: "",
					recName: "",
					recPhone: "",
					recAddress: "",
					deliveryWay: "",
					transType: "",
					pkMemberStore: "",
					selectedStoreName: "",
				},
				rules: {
					upgradeMemberCode: [{
						required: true,
						validator: this.upgradeMemberCodePass,
						trigger: "blur",
					}, ],
					fwzx: [{
						required: true,
						message: "请输入活动名称",
						trigger: "change",
					}, ],
					gradeName: [{
						required: true,
						message: this.$t("w_0086"),
						trigger: "change",
					}, ],
					upgradeMemberName: [{
						required: true,
						message: this.$t("w_0097"),
						trigger: "blur",
					}, ],
					recName: [{
						required: true,
						message: this.$t("w_0087"),
						trigger: "blur",
					}, ],
					recPhone: [{
						required: true,
						message: this.$t("w_0053"),
						trigger: "blur",
					}, ],
					recAddress: [{
						required: true,
						message: this.$t("w_0070"),
						trigger: "blur",
					}, ],
					deliveryWay: [{
						required: true,
						message: this.$t("w_0062"),
						trigger: "change",
					}, ],
					pkMemberStore: [{
						required: true,
						message: this.$t("w_0101"),
						trigger: "change",
					}, ],
					selectedStoreName: [{
						required: true,
						message: this.$t("w_0101"),
						trigger: "change",
					}, ],
					// transType: [
					//   {
					//     required: true,
					//     message: '请选择运输方式',
					//     trigger: 'change',
					//   },
					// ],
					transType: [{
						validator: validateRecTransType,
					}, ],
				},
				addressList: [],
				moren: "",
				allGoodsData: [],
				allData: [],
				agreementShow: false,
				countryList: [],
				transList: [{
						value: 1,
						label: "陆运",
					},
					{
						value: 2,
						label: "空运",
					},
					{
						value: 3,
						label: "海运",
					},
				],
				deliList: [],
				bankLists: [],
				areaData: [],
				regionParams: {
					label: "name",
					value: "id",
					children: "children",
					expandTrigger: "hover",
				},
				totalPrice: 0,
				totalAchive: 0,
				isLoading: "",
				isDeliveryWay: false,
				shoppingArr: "",
				totalAmont: 0,
				specialArea: "",
				storeList: [],
				storehouseList: [],
				toShow: false,
			};
		},
		computed: {
			...mapGetters(["userInfo"]),
			filteredStoreList() {
				// 使用分页计算开始索引和结束索引
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = this.currentPage * this.pageSize;
				// 过滤 storeList 并返回分页数据
				return this.storeLists.filter(
					(store, index) => index >= startIndex && index < endIndex
				);
			},
		},
		mounted() {
			// // 数据源
			// this.allGoodsData = JSON.parse(localStorage.getItem('allGoods'))
			// this.allGoodsData[0].orderItemsParams.forEach((item) => {
			//   item.goodsPrice = 0
			//   item.goodsAchive = 0
			//   item.waresItemsParamList.forEach((ctem) => {
			//     item.goodsPrice += parseFloat(ctem.priceTotal)
			//     item.goodsAchive += parseFloat(ctem.achieveTotal)
			//   })
			// })
			// let totalPrice = 0
			// let totalAchive = 0
			// this.allGoodsData[0].orderItemsParams.forEach((item) => {
			//   totalPrice += parseFloat(item.goodsPrice * item.quantity)
			//   totalAchive += parseFloat(item.goodsAchive * item.quantity)
			// })
			// this.totalPrice = totalPrice
			// this.totalAchive = totalAchive
			// this.allData = this.allGoodsData[0].orderItemsParams
			this.specialArea = this.$route.query.specialArea;
			if (
				this.specialArea == 12 ||
				this.specialArea == 22 ||
				this.specialArea == 14 ||
				this.specialArea == 33
			) {
				this.toShow = true;
				this.$forceUpdate();
			}
			// // 服务中心赋值
			this.ruleForm.upgradeMemberCode = this.userInfo.memberCode;
			this.getUserName();
			if (this.userInfo.pkSettleCountry != 1) {
				//获取会员店铺
				this.getStoreList();
				//获取仓库
				this.getStorehouseList();
			}
			// // 获取地址
			// this.getAddressList()
			// // 获取运输方式
			// this.getTransList()
			// // 获取发货方式
			// this.getDeliveryList()
			// this.getAllArea()
			// // 获取会员等级
			// // this.getMember()
			// 数据源
			this.shoppingArr = JSON.parse(localStorage.getItem("allGoods"));
			// 获取购物车详情
			this.getCatDetail();
			// 幂等性
			api.generate().then((res) => {
				setTokenMi(res.msg);
			});
			if (this.userInfo.pkSettleCountry == 1) {
				this.ruleForm.transType = 1;
				this.ruleForm.deliveryWay = 1;
			}
			if (this.userInfo.buyAgreementFlag == 1) {
				this.agreementShow = true
			}
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			},
			handleInputClick(event) {
				// 检查点击的目标元素是否是输入框
				if (event.target.tagName.toLowerCase() === "input") {
					this.showDialog();
				}
			},
			showDialog() {
				this.dialogVisible = true;
				this.getStoreLists();
			},
			handleRowClick(row) {
				if (row.address && row.storeCode) {
					this.ruleForm.selectedStoreName = row.storeName + '(' + row.storeCode + ')';
					this.ruleForm.pkMemberStore = row.pkId;
				} else {
					row.storeCode == null ? this.$message.warning(this.$t("该店铺未设置编号")) : this.$message.warning(this.$t(
						"该店铺未设置地址"));
				}
				this.selectedStoreId = row.pkId;
			},
			handleConfirm() {
				this.dialogVisible = false;
			},
			handleChange1(val) {
				this.queryParams.province = val[0];
				this.queryParams.city = val[1];
				this.queryParams.county = val[2] || "";
			},
			research() {
				const loading = Loading.service({
					lock: true,
					text: 'Loading',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				setTimeout(() => {
					loading.close()
					this.getStoreLists()
				}, 1000)
			},
			reChongzhi() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 50,

				};
				this.queryParams.province = "";
				this.queryParams.city = "";
				this.queryParams.address = "";
				this.getStoreLists()
			},
			getStoreLists() {
				this.queryParams.pkCountry = this.pkCountry;
				// this.queryParams.province = this.areaData.address[0];
				// this.queryParams.city = this.areaData.address[1];
				// delete this.queryParams.address;
				api
					.storeLists(this.queryParams)
					.then((res) => {
						this.storeLists = res.rows;
						this.total = res.total;
					});
			},
			getStoreList() {
				api.storeList().then((res) => {
					this.storeList = res.rows;
				});
			},
			getStorehouseList() {
				api.storehouseList().then((res) => {
					this.storehouseList = res.rows;
				});
			},
			// 升级编号获取name
			upgradeMemberCodePass(rule, value, callback) {
				if (!value) {
					callback(new Error("请输入复购编号"));
				} else {
					api
						.upgRel({
							upgradeMemberCode: value,
						})
						.then((res) => {
							if (res.code == 200) {
								this.ruleForm.upgradeMemberName = res.data.upgradeMemberName;
								// this.getMember()
								this.$forceUpdate();
								callback();
							}
						})
						.catch((err) => {
							callback(new Error(err));
						});
				}
			},
			getCatDetail() {
				api
					.shoppingWaresDetail({
						shoppingIds: this.shoppingArr,
						specialArea: this.specialArea,
					})
					.then((res) => {
						this.allGoodsData = res.data;
						this.waresCodeList = res.data.orderItemsParams.map((item) => {
							return item.waresCode;
						});
						this.allGoodsData.specialArea = this.specialArea;
						this.allData = this.allGoodsData.orderItemsParams;
						this.totalAmont = this.allGoodsData.priceAmount;
						// 服务中心赋值
						this.ruleForm.fwzx = this.userInfo.memberCode;

						// 获取地址
						this.getAddressList();
						// 获取运输方式
						this.getTransList();
						// 获取发货方式
						this.getDeliveryList();
						// 获取省市县
						this.getAllArea();
						// 获取会员等级
						// this.getMember()
					});
			},
			getUserName() {
				api
					.upgRel({
						upgradeMemberCode: this.ruleForm.upgradeMemberCode,
					})
					.then((res) => {
						if (res.code == 200) {
							this.ruleForm.upgradeMemberName = res.data.upgradeMemberName;
							this.$forceUpdate();
						}
					});
			},
			selDelivery(e) {
				if (e == 2 || e == 3) {
					this.isDeliveryWay = false;
				} else {
					this.isDeliveryWay = true;
				}
			},
			openLoading() {
				this.isLoading = this.$loading({
					lock: true,
					text: "Loading",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
			},
			resetAll() {
				this.ruleForm.parent = "";
				this.ruleForm.upgradeMemberName = "";
				this.ruleForm.deliveryWay = "";
				this.ruleForm.transType = "";
				this.$nextTick(() => {
					this.$refs.ruleForm.clearValidate();
				});
			},
			setDizhi(e, val) {
				let arr = this.flatten(this.areaData);
				let nameList = "";
				arr.forEach((item) => {
					this.ruleForm.dizhi.forEach((ctem) => {
						if (ctem == item.id) {
							nameList += item.name;
						}
					});
				});
				this.ruleForm.nameList = nameList;
				this.allGoodsData.recProvince = this.ruleForm.dizhi[0];
				this.allGoodsData.recCity = this.ruleForm.dizhi[1];
				this.allGoodsData.recCounty = this.ruleForm.dizhi[2] || "";
				this.getPostAge();
			},
			closePay(val) {
				if (val) {
					this.isPay = false;
					this.$router.push({
						path: "/vipCenter",
						query: {
							id: 1,
						},
					});
				} else {
					this.$confirm(this.$t("w_0090"), "", {
							confirmButtonText: this.$t("w_0035"),
							cancelButtonText: this.$t("ENU_P_TYPE0"),
							type: "warning",
						})
						.then((_) => {
							this.isPay = false;
							this.$router.push({
								path: "/vipCenter",
								query: {
									id: 1,
								},
							});
						})
						.catch((_) => {});
				}
			},
			// 注册
			submitRegister(formName) {
				let deleteList = [];
				this.shoppingArr.forEach((item) => {
					deleteList.push({
						shoppingId: item,
					});
				});
				if (!this.agreementShow) {
					this.$message({
						message: this.$t("w_0091"),
						type: "warning",
					});
					return;
				}
				if (this.isDeliveryWay && !this.ruleForm.recPhone) {
					this.$message({
						message: this.$t("w_0092"),
						type: "warning",
					});
					return;
				}

				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.openLoading();
						let obj = Object.assign({}, this.allGoodsData, this.ruleForm, {
							deleteList: deleteList,
						});
						if (!this.isDeliveryWay) {
							delete obj.recName;
							delete obj.recPhone;
							delete obj.recAddress;
							delete obj.recProvince;
							delete obj.recCity;
						}
						api
							.confirmOthOrder(obj)
							.then((res) => {
								this.isLoading.close();
								if (res.code == 200) {
									this.isPay = true;
									this.paramsPost = res.data;
								}
							})
							.catch((err) => {
								this.isLoading.close();
							});
					} else {
						return false;
					}
				});
				// let obj = Object.assign({}, this.allGoodsData[0], this.ruleForm)
				// console.log(
				//   '%c [ obj ]-498',
				//   'font-size:13px; background:#88187e; color:#cc5cc2;',
				//   obj
				// )
			},
			flatten(arr) {
				return arr.reduce((result, item) => {
					return result.concat(
						item,
						Array.isArray(item.children) ? this.flatten(item.children) : []
					);
				}, []);
			},
			checkRadio() {
				this.$set(this.ruleForm, "dizhi", []);
				let arr = [];
				this.addressList.forEach((item) => {
					if (item.pkId == this.moren) {
						this.ruleForm.recName = item.recName;
						this.ruleForm.nameList = item.recArea;
						this.ruleForm.recPhone = item.recPhone;
						this.ruleForm.recAddress = item.recAddress;
						arr = [
							item.recProvince + "",
							item.recCity + "",
							(item.recCounty || "") + "",
						];
					}
				});
				arr = arr.filter((s) => {
					return s && s.trim();
				});

				this.$set(this.ruleForm, "dizhi", arr);
				this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay;
				this.allGoodsData.transType = this.ruleForm.transType;
				this.allGoodsData.recProvince = this.ruleForm.dizhi[0];
				this.allGoodsData.recCity = this.ruleForm.dizhi[1];
				this.allGoodsData.recCounty = this.ruleForm.dizhi[2];
				this.getPostAge();
				this.$forceUpdate();
			},
			getPostAge() {
				let deleteList = [];
				this.shoppingArr.forEach((item) => {
					deleteList.push({
						shoppingId: item,
					});
				});
				this.allGoodsData.deliveryWay = this.ruleForm.deliveryWay;
				this.allGoodsData.transType = this.ruleForm.transType;
				this.allGoodsData.deleteList = deleteList;
				api.queryPostage(this.allGoodsData).then((res) => {
					this.ruleForm.postage = Number(res.data.postage).toFixed(2);
					this.totalAmont =
						parseFloat(this.allGoodsData.priceAmount) +
						parseFloat(res.data.postage);
				});
			},
			// getMember() {
			//   this.allGoodsData.upgradeMemberCode = this.ruleForm.upgradeMemberCode
			//   api.memLevel(this.allGoodsData).then((res) => {
			//     if (res.data.isEnough) {
			//       this.ruleForm.gradeName = res.data.gradeName
			//     } else {
			//       this.isLoading.close()
			//     }
			//   })
			// },
			getTransList() {
				api.transportList().then((res) => {
					this.transList = res.data;
				});
			},
			getDeliveryList() {
				api.deliveryList().then((res) => {
					this.deliList = res.data;
					/* 暂时  默认店铺自提 */
					if (this.deliList) {
						this.ruleForm.deliveryWay = this.deliList[0].value;
						this.isDeliveryWay = false;
					}
				});
			},
			delAds(id) {
				this.$confirm(this.$t("w_0088") + "?", "", {
					confirmButtonText: this.$t("w_0035"),
					cancelButtonText: this.$t("ENU_P_TYPE0"),
					type: "warning",
				}).then(() => {
					api.delAddress(id).then((res) => {
						this.$message({
							type: "success",
							message: this.$t("w_0089") + "!",
						});
						this.getAddressList();
					});
				});
			},
			getAllArea() {
				api.allArea().then((res) => {
					this.areaData = res.data;
				});
			},
			changeAds(id) {
				this.$refs.addAddress.isShowAddress(true, this.areaData, id);
			},
			setDefaultAds(id) {
				api.addressDefault(id).then((res) => {
					this.getAddressList();
				});
			},
			// 同意协议
			agree(val) {
				this.agreementShow = val;
			},
			openAddress() {
				this.$refs.addAddress.isShowAddress(true, this.areaData);
			},
			getAddressList() {
				api.addressList({}).then((res) => {
					this.addressList = res.data;
					this.addressList.forEach((item) => {
						if (item.isDefault == 1) {
							this.moren = item.pkId;
							this.checkRadio();
						}
					});
					// this.moren = this.addressList[0].pkId
				});
			},
			// 斑马线
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 0) {
					return "warning-row";
				} else if (rowIndex % 2 == 1) {
					return "success-row";
				}
				return "";
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-table__body tr.current-row>td.el-table__cell {
		background-color: red;
	}

	.titles-dialog ::v-deep .el-dialog__body {
		height: 500px;
		overflow: auto;
	}

	.dis_flex {
		display: flex;
		align-items: center;
	}

	.rt {
		border-bottom: 5px solid rgba(7, 7, 7, 0.05);
		padding: 45px 60px 15px 60px;

		.rti {
			margin-right: 80px;
		}

		.zc {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
			margin-right: 20px;
		}

		.zca {
			font-size: 18px;
			font-weight: bold;
			color: #b42b2a;
		}
	}

	.demo-ruleForm {
		margin-top: 20px;
		overflow: hidden;
	}

	.padRow {
		padding: 0 60px;
	}

	::v-deep .el-input__suffix {
		right: auto;

		.el-input__validateIcon {
			position: absolute;
		}
	}

	::v-deep .el-select {
		width: 100%;
	}

	::v-deep .el-select .el-input__suffix {
		right: 0;
	}

	::v-deep .el-icon-circle-check {
		color: #009900;
	}

	::v-deep .el-form-item__label {
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28px;
	}

	.xian {
		padding: 10px 60px;
		border-bottom: 5px solid rgba(7, 7, 7, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.nox {
		padding: 10px 60px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
	}

	.lan {
		font-size: 18px;
		font-weight: 400;
		color: #3499ff;
		cursor: pointer;
	}

	.local {
		padding: 0px 60px;

		.local_i {
			display: flex;
			align-items: center;
			padding: 30px 90px;
		}

		.local_a {
			background: #eeeeee;
			border-radius: 8px 8px 8px 8px;
		}

		.local1 {
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			margin-right: 50px;
		}

		.local2 {
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			margin-right: 70px;
			cursor: pointer;
		}

		.local3 {
			font-size: 14px;
			font-weight: 400;
			color: #f92a28;
			cursor: pointer;
		}
	}

	::v-deep .el-radio {
		margin-right: 0;
	}

	.guoqi {
		.el-select-dropdown__item {
			height: 26px;
			// text-align: center;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
		}

		.shortName {
			margin-left: 10px;
		}
	}

	.guoqikang {
		::v-deep input {
			// height: 100px;
		}
	}

	.imgSize {
		height: 20px;
	}

	.dizhi {
		::v-deep .el-cascader {
			width: 100%;
		}
	}

	::v-deep .el-cascader .el-input__suffix {
		right: 0;
	}

	.zhan {
		height: 250px;
	}

	.tfooter {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 10;

		.footer_t {
			padding: 5px 60px 15px 60px;
			background: #ededed;

			.footer_tt {
				justify-content: right;
				display: flex;
				margin-top: 10px;
			}
		}

		.footer_b {
			text-align: right;
			padding: 10px 60px 10px 60px;
			background: #fff;
		}
	}

	.f1 {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}

	.f2 {
		font-size: 18px;
		font-weight: 500;
		color: #f43c3a;
		margin-right: 40px;
	}

	.f3 {
		font-size: 14px;
		font-weight: 400;
		color: #384a8a;
	}

	.f4 {
		font-size: 14px;
		font-weight: 400;
		color: #666;
	}

	.btn {
		background: #d61820;
		border-radius: 8px 8px 8px 8px;
		padding: 12px 40px;
		display: inline-block;
		color: #fff;
		font-size: 18px;
		margin-top: 10px;
		cursor: pointer;
	}

	.goods {
		text-align: left;
		padding-top: 20px;
		padding-left: 50px;
	}

	.goods_t {
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #333333;

		// justify-content: center;
		img {
			width: 88px;
			height: 88px;
			margin-right: 10px;
		}
	}

	.goods_tit {
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 10px;
		display: flex;

		img {
			width: 35px;
			height: 35px;
			margin-right: 10px;
		}

		.goods_tit_l {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.goods_tit_r {
			width: 200px;
		}
	}

	.tab_b {
		text-align: right;
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		padding: 20px 60px 0 0;
	}
</style>