<template>
  <view>
    <Loading :type="3" :loadStatus="loadStatus" :showText="errorText" />

    <zj-page-layout v-if="detail" :hasFooter="true" :isScroll="true" :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh">

      <view class="app-container">
        <view class="status-container" v-if="detail.orderStatus == 'DQR'">订单待确认，请等待服务网点工作人员联系！</view>
        <view class="status-container" v-if="detail.orderStatus == 'NOPAY'">待付款，30分钟内未付款将会关闭订单</view>
        <view class="status-container" v-if="detail.orderStatus == 'DFH'">订单已支付，请等待服务网点工作人员联系！</view>
        <view class="status-container" v-if="detail.orderStatus == 'YFH'">订单已支付，请等待服务网点工作人员联系！</view>
        <view class="status-container" v-if="detail.orderStatus == 'OVER'">已服务完成，{{ getDay(detail.overTime, 7) }}关闭退款
        </view>
        <view class="status-container" v-if="detail.orderStatus == 'CLOSE'">订单已关闭</view>
        <view class="status-container" v-if="detail.orderStatus == 'REFUND'">订单售后中</view>
        <view class="status-container" v-if="detail.orderStatus == 'TIMEOUT'">订单超时未支付</view>

        <view class="main-container">
          <view class="logistics-container card" v-if="detail.orderStatus == 'YFH' || detail.orderStatus == 'OVER'"
            @tap="toLogistics">
            <view class="icon"><text class="iconfont icon-wuliu"></text></view>
            <view class="main" v-if="hasLogistics">
              <view>{{ logisticsData[0].context }}</view>
              <view>{{ logisticsData[0].time }}</view>
            </view>
            <view class="main" v-else>
              <view class="noData">暂无物流信息</view>
            </view>
            <view class="right"><text class="iconfont icon-jinru"></text></view>
          </view>

          <view class="address-container card">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="right">
              <view class="name">{{ detail.receUserName }}<text>{{ detail.recePhone }}</text></view>
              <view class="address ellipsis-2">
                {{ detail.province }}{{ detail.city }}{{ detail.area }}{{ detail.street }}{{ detail.receAddress }}{{ detail.houseNo ?
                  detail.houseNo : '' }}</view>
            </view>
          </view>

          <view class="goods-container card">
            <view class="title">商品信息</view>
            <block v-for="(item, index) in detail.orderDetails" :key='index'>
              <view class="item" @tap="toGoodsDetail(item.goodsId)">
                <image :src="item.imgUrl" mode="aspectFill"></image>
                <view class="main">
                  <view class="left">
                    <view class="name ellipsis-2">{{ item.goodsName }}</view>
                    <view class="des">{{ item.goodsSpecValue }}</view>
                    <view class="tags" v-if="item.promotionFullPieceId">
                      <view class="it">满件打折</view>
                    </view>
                  </view>
                  <view class="right">
                    <view class="price">¥{{ item.price | priceFilter }}</view>
                    <view class="num">x{{ item.num }}</view>
                  </view>
                </view>
              </view>
            </block>
          </view>

          <view class="card trade-container" v-if="detail.orderOldProductDTOList && detail.orderOldProductDTOList.length > 0">
            <view class="title">旧机信息</view>
            <block v-for="(item, index) in detail.orderOldProductDTOList" :key="index">
              <view class="main">
                <image :src="item.smallImg"></image>
                <view class="right">
                  <view class="name">{{item.smallName}}</view>
                  <view class="attr">{{item.itemList.map(o => o.dictName).join('、')}}</view>
                </view>
              </view>
              <view class="bottom">
                <view class="left">旧机费用：<text>¥{{item.payAmount | priceFilter}}</text></view>
                <view class="right">{{{1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值'}[item.yjhxDkFlag]}}</view>
              </view>
            </block>
          </view>

          <view class="peisong-container card">
            <view class="top" v-if="detail.expectVisitTime">
              <view class="left">期望上门时间</view>
              <view class="right">{{ detail.expectVisitTime.slice(0, 10) }} {{ detail.expectDayFlag === 1 ? '上午' : '下午' }}
              </view>
            </view>
            <view class="bottom">
              <view class="left">订单备注</view>
              <view class="right">{{ detail.buyerMsg }}</view>
            </view>
          </view>

          <view class="total-container card">
            <view class="top">
              <view class="item">
                <view class="label">商品金额</view>
                <view class="value">¥{{ detail.totalProductAmount | priceFilter }}</view>
              </view>
              <view class="item last">
                <view class="label">
                  <view>优惠</view>
                  <view v-if="detail.promotionFullPieceRemark" class="text">{{ detail.promotionFullPieceRemark }}</view>
                  <block v-if="detail.orderCouponList && detail.orderCouponList.length > 0">
                    <view v-for="(item, index) in detail.orderCouponList" :key="index" class="text">
                      {{ item.couponName }}: 减免¥{{ item.couponValue }}
                    </view>
                  </block>
                </view>
                <view class="value" :class="detail.discountAmount > 0 ? 'red' : ''">¥{{ detail.discountAmount | priceFilter }}
                </view>
              </view>
              <view class="item" v-if="detail.orderOldProductDTOList && detail.orderOldProductDTOList.length > 0">
                <view class="label">旧机费用抵扣</view>
                <view class="value">¥{{ detail.orderOldProductDTOList[0].payAmount | priceFilter }}</view>
              </view>
            </view>
            <view class="total">订单总额:<text>¥{{ detail.payAmount | priceFilter }}</text></view>
          </view>

          <view class="order-container card">
            <view class="title">订单信息</view>
            <view class="item1">
              <view class="left">
                <view class="label">订单编号</view>
                <view class="value">{{ detail.orderId }}</view>
              </view>
              <view class="copy" @tap="copy(detail.orderId)">复制</view>
            </view>
            <view class="item2">
              <view class="label">创建时间</view>
              <view class="value">{{ detail.createTime }}</view>
            </view>
            <view class="item2" v-if="detail.payTime">
              <view class="label">支付时间</view>
              <view class="value">{{ detail.payTime }}</view>
            </view>
            <view class="item2" v-if="detail.payTime">
              <view class="label">支付方式</view>
              <view class="value">{{ detail.payType }}</view>
            </view>
            <view class="item2" v-if="detail.deliverTime">
              <view class="label">发货时间</view>
              <view class="value">{{ detail.deliverTime }}</view>
            </view>
            <view class="item2" v-if="detail.overTime">
              <view class="label">完成时间</view>
              <view class="value">{{ detail.overTime }}</view>
            </view>
            <view class="item2" v-if="detail.exchangeCode">
              <view class="label">优惠金额</view>
              <view class="value">{{ detail.exchangeSubAmount | priceFilter }}</view>
            </view>
            <view class="item2" v-if="detail.exchangeCode">
              <view class="label">优惠码</view>
              <view class="value">{{ detail.exchangeCode }}</view>
            </view>
          </view>

        </view>
      </view>

      <template slot="footer">
        <block v-if="!detail.isShareOrder">
          <!-- 底部按钮：待付款 -->
          <view class="bottom-container" v-if="detail.orderStatus == 'NOPAY'">
            <!-- <view class="button gray" @tap="cancelOrder">取消订单</view> -->
            <div class="button white" v-if="!detail.isChangeAddress"
              @tap.stop="navToPage(`/packageMine/pages/order/changeAddress?orderId=${detail.orderId}`)">修改地址</div>
            <view class="button red" @tap="payOrder">立即付款</view>
          </view>
          <!-- 底部按钮：待发货 -->
          <view class="bottom-container" v-if="detail.orderStatus == 'DFH'">
            <div class="button white" v-if="!detail.isChangeAddress"
              @tap.stop="navToPage(`/packageMine/pages/order/changeAddress?orderId=${detail.orderId}`)">修改地址</div>
            <view class="button white" @tap="remindShipment">提醒发货</view>
            <view class="button white" v-if="checkCanReturn()" @tap="toApplyReturn">申请售后</view>
          </view>
          <!-- 底部按钮：待收货 -->
          <view class="bottom-container" v-if="detail.orderStatus == 'YFH'">
            <!-- <view class="button gray" @tap="toLogistics">查看物流</view> -->
            <div class="button white" v-if="!detail.isChangeAddress"
              @tap.stop="navToPage(`/packageMine/pages/order/changeAddress?orderId=${detail.orderId}`)">修改地址</div>
            <view class="button red" @tap="confirmOrder">服务完成</view>
            <view class="button white" v-if="checkCanReturn()" @tap="toApplyReturn">申请售后</view>
          </view>
          <!-- 底部按钮：已完成 -->
          <view class="bottom-container" v-if="detail.orderStatus == 'OVER'">
            <!-- <view class="button gray" @tap="toLogistics">查看物流</view> -->
            <view class="button gray" v-if="detail.orderTaxId" @tap="toInvoiceDetail">查看发票</view>
            <view class="button white" v-else @tap="toInvoiceForm">开发票</view>
            <view class="button gray" @tap="toWorkerOrder">服务详情</view>
            <view class="button white" v-if="checkCanReturn()" @tap="toApplyReturn">申请售后</view>
            <view class="button red" v-if="!detail.commentService" @tap="navToPage(`/packageMine/pages/order/evaluate?orderId=${detail.orderId}`)">评价</view>
          </view>
          <!-- 底部按钮：售后中 -->
          <view class="bottom-container" v-if="isReturnOrder">
            <view class="button gray" @tap="toReturnDetail">售后详情</view>
          </view>
        </block>
        <block v-else>
          <view class="bottom-container">
            <view class="button gray" @tap="toWorkerOrder">服务详情</view>
          </view>
        </block>
      </template>
    </zj-page-layout>
  </view>
</template>

<script>
import { formatterDate, weixinPay, mini_env } from '@/common/utils/util.js'
export default {
  data() {
    return {
      loadStatus: 1,
      errorText: '',
      refresherTriggered: false,
      orderId: null, // 订单id
      orderRefundId: null, // 售后订单id
      isReturnOrder: false, // 是否售后订单
      detail: {}, // 订单详情
      logisticsData: [], // 物流信息
      hasLogistics: true, // 是否有物流信息
      canRemindShipment: true, // 能否点击提醒发货
    }
  },

  watch: {

  },

  onLoad({ orderId, orderRefundId }) {
    this.orderId = orderId;
    if (orderRefundId && orderRefundId != 'undefined') {
      this.isReturnOrder = true;
      this.orderRefundId = orderRefundId;
    }
    this.getOrderDetail();

    this.crossPage.$on('refreshOrderDetail', (data) => {
      if (data && (typeof data !== 'boolean')) {
        this.isReturnOrder = true;
        this.orderRefundId = data;
      } else {
        this.isReturnOrder = false;
        this.orderRefundId = null;
      }
      this.getOrderDetail();
    })
  },

  onUnload() {
    this.crossPage.$off('refreshOrderDetail');
  },

  methods: {
    getOrderDetail() {
      let url = '', params = {};
      if (this.isReturnOrder) {
        url = '/order/refund/detail';
        params = {
          orderRefundId: this.orderRefundId
        }
      } else {
        url = '/order/detail';
        params = {
          orderId: this.orderId
        }
      }
      this.$api.get(url, {
        ...params
      }).then(res => {
        this.noData = false;
        this.isLoading = false;
        if (res.data.promotionFullPieceRemark) {
          let str = res.data.promotionFullPieceRemark;
          let str1 = str.substring(0, str.indexOf('打') + 1);
          let str2 = str.substring(str.indexOf('折') + 1, str.indexOf('折'));
          let num = str.substring(str.indexOf('打') + 1, str.indexOf('折'));
          res.data.promotionFullPieceRemark = str1 + Number(num) + str2;
        }
        this.detail = res.data;
        this.loadStatus = 0;
        this.getLogisticsData();
      }).catch(res => {
        this.errorText = res.message;
        this.loadStatus = 2;
      }).finally(res => {
        this.refresherTriggered = false;
      })
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true;
      this.getOrderDetail();
    },

    // 检查是否可以申请售后（根据orderShareStatus, payTypeId）
    checkCanReturn() {
      const hasRefund = this.detail.orderDetails.some(o => o.refund);

      if (!this.detail.orderShareStatus || this.detail.orderShareStatus === 'OVER' || this.detail.orderShareStatus === 'CANCEL' || this.detail.payTypeId == 'STORE' || hasRefund) {
        return false;
      } else {
        return true;
      }
    },

    // 获取物流信息
    getLogisticsData() {
      this.$api.get('/common/express', {
        companyCode: this.detail.companyCode ? this.detail.companyCode : 'shunfeng',
        logisticsNo: this.detail.logisticsNo,
      }).then(res => {
        if (res.code == 200 && res.data.length >= 1) {
          this.logisticsData = res.data;
        } else if (res.code == 1100 || res.data.length < 1) {
          this.hasLogistics = false;
        }
      })
    },

    // 去商品详情
    toGoodsDetail(id) {
      uni.navigateTo({
        url: '/packageGoods/pages/detail?id=' + id
      })
    },

    // 确认取消订单
    cancelOrder() {
      this.$modal({
        content: '确定要取消订单吗？'
      }).then(() => {
        this.$api.post('/order/cancel', {
          orderId: this.orderId
        }).then(res => {
          this.getOrderDetail();
          this.$successToast('取消订单成功');
          this.crossPage.$emit('refreshOrderList');
        })
      }).catch(() => { })
    },

    // 服务完成
    confirmOrder() {
      this.$modal({
        content: '请确认是否已完成服务？'
      }).then(() => {
        this.$api.post('/order/ack', {
          orderId: this.orderId
        }).then(res => {
          this.getOrderDetail();
          this.$successToast();
          this.crossPage.$emit('refreshOrderList');
        })
      }).catch(() => { })
    },

    // 立即付款
    payOrder() {
      mini_env((bool) => {
        let that = this;
        this.$api.post('/order/wait/pay', {
          userId: this.$store.state.user.userId,
          orderId: this.orderId,
          ...(() => {
            if (bool) {
              return {
                miniPay: true,
                openId: this.$store.state.user.miniOpenId
              }
            }
            return {}
          })()
        }).then(res => {
          if (bool) {
            uniWebview.navigateTo({
              url: `/pages/pay/pay?${Object.entries({
                ...res.data,
                payPackage: res.data.payPackage.split("=")[0] || "",
                payPackageVal: res.data.payPackage.split("=")[1] || ""
              }).map(item => item.join("=")).join("&")}`
            })
          } else {
            weixinPay(res.data, function (res) {
              that.getOrderDetail();
              that.$successToast('支付成功');
              that.crossPage.$emit('refreshOrderList');
            })
          }
        })
      })
    },

    // 复制
    copy(val) {
      uni.setClipboardData({
        data: val,
        success: () => {
          this.$successToast('复制成功');
        }
      });
    },

    // 开发票
    toInvoiceForm() {
      this.navToPage('/packageMine/pages/invoice/form?orderType=ORDER&orderId=' + this.detail.orderId);
    },

    // 发票详情
    toInvoiceDetail() {
      this.navToPage('/packageMine/pages/invoice/detail?orderTaxId=' + this.detail.orderTaxId);
    },

    // 申请退款
    toApplyReturn() {
      this.navToPage('/packageMine/pages/order/return/apply?orderId=' + this.orderId);
    },

    // 去售后详情
    toReturnDetail() {
      this.navToPage('/packageMine/pages/order/return/detail?orderRefundId=' + this.orderRefundId);
    },

    // 去查看物流
    toLogistics() {
      this.navToPage('/packageMine/pages/order/logistics?companyCode=' + this.detail.companyCode + '&logisticsNo=' + this.detail.logisticsNo);
    },

    // 去工单列表
    toWorkerOrder() {
      this.navToPage('/packageWorkorder/pages/userWorkorderList');
    },

    // 提醒发货
    remindShipment() {
      if (!this.canRemindShipment) {
        return this.$toast('请勿频繁操作');
      };
      this.canRemindShipment = false;
      setTimeout(() => { this.canRemindShipment = true }, 3000)

      this.$api.post('/order/notice', {
        orderId: this.orderId,
        userId: this.$store.state.user.userId
      }).then(res => {
        this.$successToast('提醒发货成功');
      })
    },

    getDay(date, num) {
      let dateStr = date.slice(0, 10).replace(/\-/g, '/');
      let dayStr = date.slice(10, 19);
      let oneDay = 24 * 60 * 60 * 1000;
      let result = new Date(new Date(dateStr).getTime() + num * oneDay);
      result = formatterDate(result, "yyyy-MM-dd");
      return result + dayStr;
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.status-container {
  background: $theme-color;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #FFFFFF;
}

.card {
  @include zj-card;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.main-container {
  padding: 20rpx 20rpx 120rpx;
}

.logistics-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;

  .icon {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    background: $theme-color;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;

    .iconfont {
      font-size: 36rpx;
      color: #ffffff;
    }
  }

  .main {
    width: 560rpx;
    font-size: 24rpx;
    line-height: 32rpx;
  }

  .noData {
    font-size: 28rpx;
    color: #666666;
  }

  .right {
    margin-left: 20rpx;
    flex-shrink: 0;
    font-size: 32rpx;
  }
}

.address-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 20rpx;

  .icon {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    background: $theme-color;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;

    .iconfont {
      font-size: 36rpx;
      color: #ffffff;
    }
  }

  .right {
    width: 600rpx;

    .name {
      font-size: 32rpx;
      color: #333333;

      text {
        font-size: 28rpx;
        color: #999999;
        margin-left: 16rpx;
      }
    }

    .address {
      font-size: 28rpx;
      color: #666666;
      line-height: 34rpx;
      margin-top: 10rpx;
    }
  }
}

.goods-container {
  padding: 0 20rpx;

  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-top: 20rpx;
  }

  .item {
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;

    &:last-child {
      border: none;
    }

    image {
      width: 180rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }

    .main {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .left {
        .name {
          font-size: 28rpx;
          color: #333333;
          line-height: 36rpx;
        }

        .des {
          font-size: 28rpx;
          color: #999999;
          margin-top: 10rpx;
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          margin-top: 14rpx;

          .it {
            font-size: 20rpx;
            line-height: 20rpx;
            padding: 4rpx 6rpx;
            margin-right: 10rpx;
            border: 1px solid #FE781F;
            color: #FE781F;
            box-sizing: border-box;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;
            border-radius: 10rpx;
          }
        }
      }

      .right {
        flex-shrink: 0;
        margin-left: 20rpx;
        text-align: right;

        .price {
          font-size: 28rpx;
          color: #333333;
          line-height: 28rpx;
          font-weight: 600;
          margin-top: 6rpx;
        }

        .num {
          font-size: 28rpx;
          color: #999999;
          line-height: 28rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
}

.trade-container {
  padding: 20rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
  }
  .text {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
  .main {
    display: flex;
    margin-top: 20rpx;
    image {
      width: 80rpx;
      height: 80rpx;
    }
    .right {
      margin-left: 20rpx;
      .name {
        font-weight: 500;
      }
      .attr {
        font-size: 28rpx;
        color: $sec-font;
        margin-top: 12rpx;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    .left {
      font-size: 28rpx;
      text {
        color: $minor-color;
        font-weight: 500;
      }
    }
    .right {
      padding: 10rpx 16rpx;
      font-size: 24rpx;
      color: $theme-color;
      background: #E6F0FF;
      border-radius: 5rpx;
    }
  }
}

.peisong-container {
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333333;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    border-bottom: 1px solid #eaeaea;
  }

  .bottom {
    display: flex;
    align-items: center;
    min-height: 88rpx;

    .left {
      margin-right: 40rpx;
      flex-shrink: 0;
    }

    .right {
      padding: 10rpx 0;
      line-height: 32rpx;
    }
  }
}

.total-container {
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333333;

  .top {
    padding: 10rpx 0;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 0;

    &.last {
      align-items: unset;

      .text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }

      .red {
        color: $minor-color;
      }
    }

    .value {
      font-weight: 600;
    }
  }

  .total {
    display: flex;
    justify-content: flex-end;
    height: 80rpx;
    align-items: center;
    border-top: 1px solid #eaeaea;

    text {
      font-size: 32rpx;
      color: $minor-color;
      font-weight: 600;
      margin-left: 8rpx;
    }
  }
}

.order-container {
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-bottom: 20rpx;
  }

  .item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60rpx;

    .left {
      display: flex;

      .label {
        margin-right: 40rpx;
        flex-shrink: 0;
        color: #666666;
      }
    }

    .copy {
      color: $theme-color;
    }
  }

  .item2 {
    display: flex;
    align-items: center;
    height: 60rpx;

    .label {
      margin-right: 40rpx;
      flex-shrink: 0;
      color: #666666;
    }
  }
}

.bottom-container {
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #FFFFFF;

  .button {
    width: 150rpx;
    height: 56rpx;
    border-radius: 56rpx;
    text-align: center;
    line-height: 56rpx;
    font-size: 28rpx;
    margin-left: 15rpx;

    &:first-child {
      margin-left: 0;
    }

    &.gray {
      color: #999999;
      border: 1px solid #999999;
    }

    &.white {
      color: $theme-color;
      border: 1px solid $theme-color;
    }

    &.red {
      color: #FFFFFF;
      border: 1px solid $theme-color;
      background: $theme-color;
    }
  }
}

.invoice-dialog {
  padding: 0 20rpx;
  max-height: 90vh;
  overflow-y: scroll;

  .type-c {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      line-height: 88rpx;
    }

    .list {
      display: flex;

      .item {
        padding: 0 16rpx;
        border: 1px solid #C0C0C0;
        font-size: 24rpx;
        color: #666666;
        border-radius: 6rpx;
        line-height: 48rpx;
        margin-right: 20rpx;

        &.current {
          border: 1px solid $theme-color;
          background: rgba($color: $theme-color, $alpha: 0.3);
          color: $theme-color;
        }
      }
    }
  }

  .header-c {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      height: 88rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .button {
        font-size: 24rpx;
        color: $theme-color;
        border: 1px solid $theme-color;
        border-radius: 6rpx;
        line-height: 48rpx;
        height: 48rpx;
        padding: 0 16rpx;
        font-weight: normal;
      }
    }

    .list {
      display: flex;
      padding-bottom: 20rpx;

      .item {
        width: 120rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 6rpx;
        text-align: center;
        border: 1px solid #C0C0C0;
        font-size: 24rpx;
        color: #666666;
        margin-right: 20rpx;

        &.current {
          border: 1px solid $theme-color;
          background: $theme-color;
          color: #FFFFFF;
        }
      }
    }

    .form {
      .row {
        display: flex;
        height: 60rpx;
        align-items: center;

        .label {
          width: 200rpx;
        }

        .input {
          width: 510rpx;
          position: relative;

          input {
            width: 100%;
          }

          .companyList {
            position: absolute;
            top: 60rpx;
            left: -20rpx;
            background: #FFFFFF;
            width: 530rpx;
            z-index: 11;
            border: 1px solid #eaeaea;
            max-height: 400rpx;
            overflow-y: scroll;
            box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.2);
            ;

            .item {
              color: #666666;
              padding: 16rpx 20rpx;
            }
          }
        }
      }

      .more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60rpx;

        .right {
          display: flex;
          align-items: center;

          image {
            width: 20rpx;
            height: 20rpx;
            display: block;
            margin-left: 10rpx;
          }
        }
      }
    }
  }

  .content-c {
    padding-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
      line-height: 84rpx;

      text {
        font-size: 22rpx;
        color: #999999;
        margin-left: 10rpx;
        font-weight: normal;
      }
    }

    .list {
      display: flex;

      .item {
        padding: 0 16rpx;
        background: rgba($color: $theme-color, $alpha: 0.3);
        font-size: 24rpx;
        color: $theme-color;
        border-radius: 6rpx;
        line-height: 48rpx;
      }
    }

    .tips {
      font-size: 22rpx;
      color: #999999;
      margin-top: 20rpx;
    }

    .button {
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 70rpx;
      background: $theme-color;
      text-align: center;
      font-size: 28rpx;
      color: #FFFFFF;
      margin-top: 20rpx;
    }
  }
}</style>
