<template>
  <div class="orderDetail">
    <div class="content">
      <!-- 面包屑 -->
      <div class="bread">
        <router-link :to="linkTo">
          <div class="mar-right-10">我的订单</div>
        </router-link>
        <div class="arrow"></div>
        <div class="mar-right-10">订单详情</div>
      </div>
      <!-- 条件渲染 -->
      <OrderId
        class="commInfo" :data="orderIdInfo" :type="orderType" @closeOrder="closeOrder"
        @cancel="cancelOrder"
        @revoke="revokeOrder" @invite="inviteFriends" @pin="again"
      />
      <!-- 条件渲染 -->
      <OrderStatus class="commInfo" :data="orderStatusInfo" />
      <!-- 拼单信息 -->
      <div v-if="orderDetail.collageId != 0 && orderDetail.state != 1 && $route.query.type !== '3'" class="groupBuying">
        <div class="groupBuyTit">拼团信息</div>
        <div class="groupBuyBox">
          <div v-if="groupData.state == 0" class="result">付款成功，待成团</div>
          <div v-if="groupData.state == 1" class="result">恭喜您拼团成功</div>
          <div v-if="groupData.state == 2" class="result0 mar-bot-20 fs18">未能按时成团，拼团失败</div>
          <p v-if="groupData.state === 0 || groupData.state === 2">
            {{ groupData.person }}人团，离拼团成功还差<span>{{ groupData.people }}</span>人
          </p>
          <p v-if="groupData.state === 2">
            拼团失败后，已付金额会原路退回！
          </p>
          <div v-if="groupData.state == 0" class="surplusTime">
            剩余时间：<span class="day time">{{ groupData.time | formatHours }}</span>时<span class="time">
              {{ groupData.time |
                formatMinutes }}
            </span>分<span class="time">{{ groupData.time | formatSeconds }}</span>秒
          </div>
          <div class="userList">
            <span v-for="(item, index) in groupData.personList" :key="item.id">
              <i v-if="index === 0">团长</i>
              <img :src="item.headImage" alt="">
            </span>
            <span v-for="index in groupData.people" :key="index + 'n'" class="noPeople iconfont" @click="inviteFriends">
              &#xe64b;
            </span>
          </div>
        </div>
      </div>
      <!-- 录入退货物流 -->
      <RebackExpress
        v-if="orderType === 3 && orderDetail.afterState === 10 && orderDetail.afterType === 2"
        @submit="submitRebackExpress"
      />
      <div v-if="orderDetail.afterType === 1" class="failAfter">
        <div class="top">
          <h1>拒绝原因：</h1>
          <p>{{ orderDetail.reason }}</p>
        </div>
        <div v-if="orderDetail.afterState != 7" class="btn">
          <el-button @click="platReq(orderDetail.afterId, orderDetail.orderId)">申请平台介入</el-button>
        </div>
      </div>
      <ExpressInfo class="commInfo" :data="orderExpressInfo" />
      <OrderInfo class="commInfo" :data="orderInfos" />
      <!-- 售后原因 -->
      <ReasonInfo v-if="orderDetail.afterId" :data="orderASInfo" />

      <!-- 商品列表 -->
      <div class="desc">
        <!-- 商品信息 -->
        <div class="productInfo">
          <div class="top">
            <p class="big"><span>宝贝</span></p>
            <p>宝贝属性</p>
            <p>状态</p>
            <p>数量</p>
            <p>单价</p>
          </div>
          <div v-for="(pro, idx) in orderDetail.skus" :key="idx" class="bottom">
            <div class="big">
              <img :src="pro.image" alt="">
              <p>{{ pro.productName }}</p>
            </div>
            <div style="flex-direction: column;">
              <p v-for="(text, ins) in pro.values" :key="ins">{{ text }}</p>
            </div>
            <div v-if="orderDetail.state == 1" class="colorRed">待付款</div>
            <div v-if="orderDetail.state == 2" class="colorRed">待发货</div>
            <div v-if="orderDetail.state == 3" class="colorRed">待收货</div>
            <div v-if="orderDetail.state == 4" class="colorRed">已完成</div>
            <div v-if="orderDetail.state == 5" class="colorRed">已关闭</div>
            <div v-if="orderDetail.state == 6" class="colorRed">待成团</div>
            <div>{{ pro.number }}</div>
            <div class="fs-bold">¥{{ pro.price }}</div>
          </div>
        </div>
      </div>
      <!-- 条件渲染 -->
      <OrderPay class="commInfo" :data="orderPayInfo" :type="orderType" />
      <!-- 物流信息 -->
      <div v-if="orderDetail.state >= 3 && orderDetail.express && orderDetail.deliverFormid" class="logistics">
        <p class="fs16 font-color-333"></p>
        <div class="content">
          <div class="top">
            <p class="title">物流信息</p>
            <p class="com">发货方式：快递</p>
            <p class="com">物流公司：{{ orderDetail.express || '查询失败' }}</p>
            <p class="com">运单号码：{{ orderDetail.deliverFormid || '暂无物流单号' }}</p>
          </div>
          <div class="bottom">
            <div class="title">物流跟踪：</div>
            <div class="dilevery">
              <el-steps direction="vertical" :active="1" space="100">
                <el-step v-for="(item, index) in dilevery" :key="index" :title="item.time + '：' + item.reason">
                  <template #icon>
                    {{ dilevery.length - index }}
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 取消订单 -->
    <el-dialog title="提示" :visible.sync="closeOrderDialog" width="30%" :before-close="closeOrderBtn">
      <span>是否取消该订单?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOrderDialog = false">取 消</el-button>
        <el-button type="primary" @click="cancelOrder">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 邀请好友 -->
    <el-dialog :visible.sync="inviteDialog" width="30%" :before-close="inviteDialogClose">
      <div class="inviteDialog">
        <div class="inviteTit">邀请好友</div>
        <div class="imgCode">
          <img :src="share.qrcode" alt="">
        </div>
        <!-- <p>扫描下方二维码或复制链接分享给好友吧</p>
          <div class="linkBox">
          <span class="linkAddress">www.1234567.com</span>
          <span class="copyBtn">复制</span>
          </div> -->
      </div>
    </el-dialog>
    <!-- 微信支付 -->
    <el-dialog
      class="weChat" :title="`请使用微信扫一扫支付￥${payInfo.money}`" :visible.sync="weChatDialog"
      :before-close="handleClose" center width="30%"
    >
      <div class="weChatBox">
        <div class="qCode">
          <img :src="payInfo.url" alt="">
          <img src="../../assets/images/weiXintit.png" alt="">
        </div>
        <div class="weChatInfo">
          <img src="../../assets/images/imgPay.png" alt="">
        </div>
      </div>
    </el-dialog>
    <el-dialog title="申请平台介入" :visible.sync="interventionShow" width="37%" center>
      <el-input v-model="reason" type="textarea" :rows="7" placeholder="请输入内容" maxlength="200">
      </el-input>
      <el-upload
        :action="action" list-type="picture-card" :limit="3" :on-success="handleSuccess"
        :on-remove="handleRemove"
      >
        <i class="el-icon-camera"></i>
        <span
          style="
                display: block;
                height: 0px;
                line-height: 0px;
                margin-top: -30px;
            "
        >
          最多上传3张
        </span>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="interventionFn">确 定</el-button>
        <el-button @click="closeIntervention">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

import OrderId from '@/views/orderDetail/components/orderid.vue'
import OrderStatus from '@/views/orderDetail/components/status.vue'
import ExpressInfo from '@/views/orderDetail/components/expressInfo.vue'
import OrderInfo from '@/views/orderDetail/components/orderInfo.vue'
import ReasonInfo from '@/views/orderDetail/components/reasonInfo.vue'
import RebackExpress from '@/views/orderDetail/components/rebackExpress.vue'
// import ProductList from '@/views/orderDetail/components/prodcutlist.vue'
import OrderPay from '@/views/orderDetail/components/payInfo.vue'

// 格式化响应数据为组件所需数据
import {
  formateIdInfo,
  formateStatusInfo,
  formateOrderInfo,
  formatePayInfo,
  formateExpressInfo,
  formateASInfo
} from '@/views/orderDetail/data-formate.js'

import {
  getUserInfo
} from '@/api/user/user.js'
import {
  getOrderDetail,
  orderCancel,
  // orderPayPut,
  orderPayCode,
  checkOrderResult
} from '@/api/user/order.js'
import {
  getAfterSaleDetail,
  postRefund,
  postReGoods,
  requestPlatform
} from '@/api/user/afterSale.js'
import {
  getExpressData,
  postExpress,
  getExpressCompany
} from '@/api/user/express.js'
import {
  inviteGroup
} from '@/api/Activity/ActivityGroup.js'
import {
  upload
} from '@/api/upload.js'

export default {
  components: {
    OrderId,
    OrderStatus,
    RebackExpress,
    ExpressInfo,
    OrderInfo,
    ReasonInfo,
    // ProductList,
    OrderPay
  },
  filters: {
    formatHours(value) {
      const hours = Math.floor(value / (1000 * 60 * 60))
      if (hours < 10 && hours > 0) {
        return '0' + hours
      } else if (hours > 10) {
        return hours
      }
      return '00'
    },
    formatMinutes(value) {
      const minutes = Math.floor((value % (1000 * 60 * 60)) / (1000 * 60))
      if (minutes < 10 && minutes > 0) {
        return '0' + minutes
      } else if (minutes > 10) {
        return minutes
      }
      return '00'
    },
    formatSeconds(value) {
      const seconds = Math.round((value % (1000 * 60)) / 1000)
      if (seconds < 10 && seconds > 0) {
        return '0' + seconds
      } else if (seconds > 10) {
        return seconds
      }
      return '00'
    }
  },
  data() {
    return {
      linkTo: '/myOrder',
      orderDetail: {},
      value: '',
      values: '',
      textarea: '',
      textarea1: '',
      text: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      orderId: '',
      afterId: '',
      dilevery: [],
      endTime: '',
      closeOrderDialog: false,
      inviteDialog: false,
      interventionShow: false,
      share: {},
      groupData: {},
      setTime: null,
      endTime1: '',
      noticeId: '',
      weChatDialog: false,
      payInfo: {},
      chatTimer: null,
      orderType: 0, // 订单类型
      orderState: null,
      isPay: false,
      orderIdInfo: {},
      orderStatusInfo: {},
      orderPinInfo: {},
      orderExpressInfo: {},
      orderExpressStatus: {}, // 物流进度
      orderAddressInfo: {},
      orderInfos: {},
      reason: '',
      images: '',
      urls: [],
      action: upload,
      productTitle: [
        {
          value: 0,
          prop: '',
          label: '宝贝'
        },
        {
          value: 0,
          prop: '',
          label: '宝贝属性'
        },
        {
          value: 0,
          prop: '',
          label: '状态'
        },
        {
          value: 0,
          prop: '',
          label: '数量'
        },
        {
          value: 0,
          prop: '',
          label: '单价'
        }
      ],
      orderProductInfo: {},
      orderPayInfo: {},
      orderASInfo: {},
      orderASReasonInfo: {},
      orderASExpress: {}
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    if (this.$route.query.noticeId) {
      this.noticeId = this.$route.query.noticeId
    }
  },
  mounted() {
    if (this.$route.query.type === '3') {
      this.getAfterSaleDetail()
    } else {
      this.getOrderDetail()
    }
  },
  destroyed() {
    clearInterval(this.setTime)
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'SET_USERINFO'
    }),
    // 获取用户信息
    async getUserInfoData() {
      const response = await getUserInfo()
      const res = response.data
      if (res.code === '200') {
        this.setUserInfo(res.data)
      }
    },
    // 倒计时
    countDown() {
      clearInterval(this.setTime)
      this.setTime = setInterval(() => {
        if (this.groupData.time >= 1000) {
          this.groupData.time -= 1000
        } else {
          this.groupData.time = 0
          clearInterval(this.setTime)
          window.location.reload()
        }
      }, 1000)
    },
    // 时间戳转分秒
    toHHmmss(date) {
      var timer = ''
      var minutes = parseInt((date % (1000 * 60 * 60)) / (1000 * 60))
      // var seconds = (date % (1000 * 60)) / 1000
      timer = (minutes < 10 ? '0' + minutes : minutes) + '分'
      return timer
    },
    // 获取订单详情
    async getOrderDetail() {
      this.linkTo = '/myOrder'
      const rLoading = this.openLoading()
      const response = await getOrderDetail({
        orderId: this.orderId,
        noticeId: this.noticeId
      })
      const res = response.data
      if (res.code === '200') {
        this.orderState = res.data.state
        if (res.data.collageId) {
          this.orderType = 1 // 拼团
          this.orderState = res.data.collageDetail.state
        }
        if (res.data.afterState) {
          this.orderType = 3 // 售后
          this.orderState = res.data.afterState
        }
        this.formateData(res)
        this.orderDetail = res.data
        this.groupData = res.data.collageDetail
        this.endTime = res.data.time
        this.getDilevery()
        if (this.groupData.time) {
          this.endTime1 = this.groupData.time
        }
        if (this.groupData.time >= 1000 && res.data.state === 6 && this.groupData.state === 0) {
          this.countDown()
        }
        this.getUserInfoData()
        rLoading.close()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 获取售后订单详情
    async getAfterSaleDetail() {
      this.linkTo = '/orderAfterSale'
      const rLoading = this.openLoading()
      const response = await getAfterSaleDetail({
        afterId: this.$route.query.afterId,
        orderId: this.$route.query.orderId
      })
      const res = response.data
      if (res.code === '200') {
        this.orderType = 3 // 设置订单详情类型
        this.formateData(res)
        this.orderDetail = res.data
        if (res.data.orderState) {
          this.orderDetail.state = res.data.orderState
        }
        this.getDilevery()
        this.getExpressCom()
        this.image = res.data.image.split(',')
        rLoading.close()
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
    },
    // 提交退货物流信息
    async submitRebackExpress(data) {
      const response = await postExpress({
        orderId: this.orderDetail.orderId,
        afterId: this.orderDetail.afterId,
        deliverFormid: data.deliverFormid,
        express: data.express
      })
      const res = response.data
      if (res.code === '200') {
        this.$message.success('提交成功！')
        location.reload()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 查询物流信息
    async getDilevery() {
      if (!this.orderDetail.express || !this.orderDetail.deliverFormid) {
        return
      }
      const response = await getExpressData({
        express: this.orderDetail.express,
        deliverFormid: this.orderDetail.deliverFormid
      })
      const res = response.data
      if (res.code === '200') {
        this.dilevery = res.data
      } else {
        this.$message.warning(res.message)
      }
    },
    // 查询物流公司字典
    async getExpressCom() {
      if (!this.orderDetail.express || !this.orderDetail.deliverFormid) {
        return
      }
      const response = await getExpressCompany()
      const res = response.data
      res.data.forEach((item) => {
        if (item.dictId === this.orderDetail.express) {
          this.orderDetail.expressCompany = item.dictName
        }
      })
      console.log(res, this.orderDetail)
    },
    // 取消订单
    async cancelOrder() {
      const response = await orderCancel({
        orderId: this.orderDetail.orderId
      })
      const res = response.data
      if (res.code === '200') {
        this.closeOrderDialog = false
        this.getOrderDetail()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 去付款
    // async pay () {
    //   const response = await orderPayPut({
    //     orderId: this.orderDetail.orderId,
    //     type: 2,
    //     money: this.orderDetail.price
    //   })
    //   const res = response.data
    //   if (res.code === '200') {
    //     this.getOrderDetail()
    //   } else {
    //     this.$message.warning(res.message)
    //   }
    // },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 取消订单
    closeOrder() {
      this.closeOrderDialog = true
    },
    // 邀请好友
    async inviteFriends() {
      const response = await inviteGroup({
        collageId: this.orderDetail.collageId,
        orderId: this.orderDetail.orderId,
        productId: this.orderDetail.skus[0].productId,
        skuId: this.orderDetail.skus[0].skuId,
        shopGroupWorkId: this.orderDetail.shopGroupWorkId,
        type: 0
      })
      const res = response.data
      if (res.code === '200') {
        this.share = res.data
      }
      this.inviteDialog = true
    },
    closeOrderBtn() {
      this.closeOrderDialog = false
    },
    inviteDialogClose() {
      this.inviteDialog = false
    },
    // 再次开团
    again() {
      const data = {
        shopId: this.orderDetail.shopId,
        productId: this.orderDetail.skus[0].productId,
        skuId: this.orderDetail.skus[0].skuId
      }
      this.$router.push({
        path: '/productDetail',
        query: {
          proData: JSON.stringify(data)
        }
      })
    },
    // 撤销申请
    async revokeOrder() {
      if (!this.orderDetail.afterType) {
        return
      }
      const params = {
        afterId: this.orderDetail.afterId,
        orderId: this.orderDetail.orderId
      }
      let response
      if (this.orderDetail.afterType === 1) {
        response = await postRefund(params)
      }
      if (this.orderDetail.afterType === 2) {
        response = await postReGoods(params)
      }
      const res = response.data
      if (res.code === '200') {
        this.$message.success('撤销成功！')
        location.reload()
      } else {
        this.$message.error(res.message)
      }
    },
    // 申请平台介入
    async platReq(afterId, orderId) {
      this.afterId = afterId
      this.orderId = orderId
      this.interventionShow = true
      // console.log('申请平台介入')
      // this.$message.warning('暂未接入')
      // const response = await requestPlatform({
      //   afterId: 0,
      //   image: '',
      //   orderId: 0,
      //   reason: ''
      // })
    },
    // 付款
    async getUrl() {
      // 获取支付二维码
      const response = await orderPayCode({ orderId: this.orderDetail.orderId })
      const res = response.data
      if (res.code === '200') {
        this.payInfo = res.data
        this.weChatDialog = true
        this.chatTimer = setInterval(() => {
          this.checkPay(res.data)
        }, 3000)
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    },
    // 取消支付
    handleClose() {
      this.$confirm('确认取消支付？')
        .then((_) => {
          clearInterval(this.chatTimer)
          this.weChatDialog = false
        })
        .catch((_) => { })
    },
    // 确认支付结果
    checkPay(data) {
      setTimeout(() => {
        // 确认支付结果
        checkOrderResult({
          collageId: data.collageId,
          money: data.money,
          orderId: data.orderId,
          type: 2
        }).then((response) => {
          const res = response.data
          if (res.code === '200') {
            if (res.data.code === 'SUCCESS') {
              this.$message({
                message: '支付成功！',
                type: 'success'
              })
              clearInterval(this.chatTimer)
              this.weChatDialog = false
              this.getOrderDetail()
            }
          } else {
            clearInterval(this.chatTimer)
            this.$message({
              message: res.message,
              type: 'error'
            })
            this.weChatDialog = false
          }
        })
      }, 0)
    },
    // 格式化数据
    formateData(res) {
      this.orderIdInfo = formateIdInfo(res.data) // 订单号
      this.orderStatusInfo = formateStatusInfo(res.data) // 订单状态
      this.orderInfos = formateOrderInfo(res.data) // 订单信息
      this.orderPayInfo = formatePayInfo(res.data) // 结算信息
      console.log(this.orderInfos, 'order')
      this.orderExpressInfo = formateExpressInfo(res.data) // 收货信息
      if (res.data.afterId) {
        this.orderASInfo = formateASInfo(res.data)
      }
    },
    // 平台介入
    platform(afterId, orderId) {
      this.afterId = afterId
      this.orderId = orderId
      this.interventionShow = true
    },
    closeIntervention() {
      this.afterId = ''
      this.orderId = ''
      this.reason = ''
      this.interventionShow = false
    },
    // 申请平台介入
    async interventionFn() {
      const response = await requestPlatform({
        afterId: this.afterId,
        orderId: this.orderId,
        image: this.urls.join(','),
        reason: this.reason
      })
      const res = response.data
      if (res.code === '200') {
        this.$message.success('申请平台介入成功')
        this.interventionShow = false
        window.location.reload()
      } else {
        this.$message.warning(res.message)
        this.interventionShow = false
      }
    },
    handleSuccess(res) {
      this.urls.push(res.data.url)
    },
    handleRemove(file, fileList) {
      this.urls = []
      for (var i in fileList) {
        this.urls.push(fileList[i].response.data.url)
      }
    }
  }
}
</script>

<style lang="scss">
.orderDetail {
	width: 100%;

	.content {
		width: 1252px;
		margin: 0 auto;

		.bread {
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size: 16px;
			display: flex;
			align-items: center;

			.arrow {
				background-image: url('../../../static/image/xiangyou@2x.png');
				width: 5px;
				height: 10px;
				margin-right: 10px;
			}
		}

		.commInfo {
			margin: 10px 0;
		}

		.failAfter {
			width: 100%;
			min-height: 200px;
			margin: 20px 0;

			.top {
				min-height: 110px;
				padding: 20px 30px;
				background-color: #F5F5F5;

				h1 {
					font-size: 16px;
					color: #C83732;
				}

				p {
					font-size: 14px;
					color: #333333;
					margin-top: 20px;
				}
			}

			.el-button {
				display: block;
				width: 200px;
				height: 50px;
				margin: 20px auto 0;
				color: #FFEBC4;
				background-color: #333333;
				border-radius: 0px;
			}
		}

		.status {
			width: 100%;
			height: 325px;
			border: 1px solid #E5E5E5;
			box-sizing: border-box;
			padding: 15px;
			display: flex;
			margin-bottom: 20px;
		}

		// 物流快递
		.logistics {
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
			background-color: #FAFAFA;

			.content {
				.top {
					height: 80px;
					padding: 0 30px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #E5E5E5;

					.title {
						flex: 1;
					}

					.com {
						margin: 0 8px;
					}

					p {
						font-size: 16px;
						color: #666666;
					}
				}

				.bottom {
					padding: 25px 30px;
					box-sizing: border-box;
					display: flex;

					.dilevery {
						flex: 1;
						height: 280px;
						overflow-x: auto;
						padding: 20px;
						box-sizing: border-box;

						.el-step {
							.el-step__head {
								height: 100%;
							}
						}
					}
				}
			}
		}

		// 商品
		.desc {
			width: 100%;
			border: 1px solid #E5E5E5;
			margin: 20px 0;

			.receivingInfo,
			.storeInfo,
			.orderInfo {
				padding: 25px;
				border-bottom: 1px solid #E5E5E5;

				.title {
					font-size: 16px;
					margin-bottom: 25px;
				}

				.info {
					display: flex;
					margin-left: 75px;
					flex-wrap: wrap;

					p {
						line-height: 30px;
						width: 50%;
						font-size: 14px;
					}
				}
			}

			.orderInfo,
			.receivingInfo {
				.info {
					p {
						width: 33.33%;
					}
				}
			}

			.productInfo {
				width: 100%;

				.top {
					height: 40px;
					width: 100%;
					color: #FFFFFF;
					background-color: #333333;
					display: flex;
					align-items: center;
					text-align: center;

					p {
						flex: 1;
						font-size: 12px;
					}

					.big {
						flex: 2;
						text-align: left;

						span {
							margin-left: 20px;
						}
					}
				}

				.bottom {
					width: 100%;
					padding: 20px 0;
					box-sizing: border-box;
					text-align: center;
					display: flex;
					border-bottom: 1px solid #E5E5E5;

					div {
						flex: 1;
						font-size: 14px;
						display: flex;
						align-items: center;
						justify-content: center;

						p {
							font-size: 14px;
							line-height: 20px;
						}
					}

					.colorRed {
						color: #C83732;
					}

					.big {
						text-align: left;
						flex: 2;
						display: flex;
						box-sizing: border-box;
						justify-content: flex-start;
						align-items: center;

						img {
							width: 80px;
							height: 80px;
							margin: 0 20px;
						}

						p {
							width: 50%;
						}
					}
				}
			}
		}
	}

	.groupBuying {
		border: 1px solid #F3F4F5;
		height: 325px;
		padding: 20px;
		margin-bottom: 20px;

		.groupBuyTit {
			font-size: 16px;
			color: #333333;
			font-weight: bold;
		}

		.groupBuyBox {
			text-align: center;
			margin-top: 30px;

			.result {
				font-size: 18px;
				margin-bottom: 20px;
			}

			.result0 {
				color: #C83732;
			}

			p {
				font-size: 14px;
				color: #333333;
				margin-bottom: 20px;

				span {
					color: $mainGlod;
					font-size: 14px;
					font-weight: normal;
				}
			}

			.surplusTime {
				margin-bottom: 30px;
				font-size: 16px;
				color: #666666;
				display: flex;
				justify-content: center;
				align-items: center;

				.day {
					margin-left: 10px;
				}

				.time {
					color: $mainGlod;
					background-color: #333;
				}

				span {
					border: 1px solid #E5E5E5;
					border-radius: 2px;
					display: block;
					width: 24px;
					height: 24px;
					text-align: center;
					line-height: 24px;
					margin: 0 8px;
				}
			}

			.userList {
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					display: block;
					width: 76px;
					height: 76px;
					position: relative;
					margin: 0 13px;
					border-radius: 50%;
					box-sizing: border-box;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					i {
						position: absolute;
						left: 8px;
						bottom: -10px;
						width: 60px;
						height: 24px;
						background: linear-gradient(88deg, #C5AA7B 0%, #FFEBC4 100%);
						border-radius: 12px;
						font-style: normal;
						text-align: center;
						line-height: 24px;
						color: #FFFFFF;
						font-size: 14px;
					}
				}

				.noPeople {
					border: 1px dashed #E5E5E5;
					color: #DBDBDB;
					font-size: 28px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}

				span:first-child {
					border: 1px solid $mainGlod;
				}
			}
		}
	}

	.inviteDialog {
		text-align: center;

		.inviteTit {
			font-size: 22px;
			color: #444444;
		}

		.imgCode {
			width: 200px;
			height: 200px;
			margin: 0 auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		p {
			margin: 25px 0;
		}

		.linkBox {
			display: flex;
			justify-content: center;

			.linkAddress {
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
				display: block;
				width: 220px;
				text-align: left;
				border: 1px solid #E5E5E5;
			}

			.copyBtn {
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #FFFFFF;
				border: 1px solid $mainGlod;
				color: $mainGlod;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.weChatBox {
		display: flex;

		img {
			width: 100%;
		}

		.qCode {
			width: 50%;
			text-align: center;

			img {
				width: 80%;
			}
		}

		.weChatInfo {
			width: 50%;
		}
	}

	.weChat {
		>>>.el-dialog__body {
			background: #FFFFFF;
		}
	}

	.el-textarea {
		margin-bottom: 7px;
	}

	.upload {
		margin-top: 5px;
		display: flex;

		.title {
			line-height: 40px;
		}

		>>>.el-upload--picture-card {
			height: 140px;
			background-color: #FFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			i {
				font-size: 32px;
			}

			&:hover {
				i {
					color: $mainGlod;
				}
			}
		}
	}
}
</style>
