<template>
  <div class="order">
    <el-radio-group v-model="selectedTab" class="header-radio">
      <el-radio-button label="1">预约客户</el-radio-button>
      <el-radio-button label="2">认领成果</el-radio-button>
    </el-radio-group>

    <order-customer v-if="selectedTab === '1'" />
    <claim-result v-else />
  </div>
</template>

<script>
import OrderCustomer from './components/orderCustomer.vue'
import ClaimResult from './components/claimResult.vue'
export default {
  components: { OrderCustomer, ClaimResult },
  data() {
    return {
      selectedTab: '1'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.header-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;

  .el-radio-button {
    flex: 1;

    ::v-deep .el-radio-button__inner {
      width: 100%;
      border: none;
      font-weight: 400;
      letter-spacing: 0.44px;
      line-height: 25px;
      font-size: 16px;
      color: #666666;
      padding: 11px 0 12px 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #4886f8;
      font-weight: 400;
      color: #ffffff;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:nth-child(2) {
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 21px;
        width: 1px;
        background: #ebebeb;
        z-index: 1;
      }

      &::after {
        right: 1px;
      }
    }

    &.is-active {
      &::before,
      &::after {
        content: none;
      }
    }
  }
}
</style>
