<template>
  <div class="card">
    <div class="card-time">
      <cr-checkbox
        v-model="orders.checked"
        shape="round"
        checked-color="#ec1500"
        :disabled="orders.disabled"
        @change="changeChecked"
      >
        订单时间：{{ orders.orderCreateAt }}
      </cr-checkbox>
    </div>
    <shop-card :orders="orders" />
    <div class="card-bottom">
      <span class="card-bottom__label">实付款</span>
      <span class="card-bottom__price">￥{{ orders.totalFee }}</span>
    </div>
    <div v-if="orders.warnMessage" class="card-tip">
      <div class="card-tip__message">
        <cr-icon custom-class="card-tip__icon" size="16px" type="warning-o" color="#ee0a24" />
        {{ orders.warnMessage }}
      </div>
      <cr-button v-if="orders.customer" shape="circle" size="small" @click="goCustomer">
        联系客服
      </cr-button>
    </div>
    <div v-else-if="orders.canCombineInvoice" class="card-tip">
      <div class="card-tip__success">
        <cr-icon custom-class="card-tip__icon" size="16px" type="warning-o" color="#07c160" />
        本订单支持合并开票
      </div>
    </div>
  </div>
</template>

<script>
import shopCard from './shopCard.vue';
const EMIT_CUSTOMER = 'customer';
export default {
  components: {
    shopCard
  },
  props: {
    orders: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      account: ''
    };
  },
  methods: {
    changeChecked() {
      this.$emit('change');
    },
    goCustomer() {
      this.$emit(EMIT_CUSTOMER);
    }
  }
};
</script>
<style lang="less" scoped>
.border-bottom(@b: 0, @t: inherit, @bColor: @grey-border) {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: @bColor;
    transform: scaleY(0.5);
    left: 0;
    bottom: @b;
    top: @t;
  }
}

.card {
  background-color: @white;
  border-radius: 10px;
  border: 1px solid @white;
  width: 352px;
  margin: 0 auto;
  margin-bottom: 12px;
  &-time {
    padding: 15px 13px;
    .border-bottom(0, inherit);

    @{deep} .cr-checkbox__icon--disabled .cr-icon {
      border-color: #dcdee0;
    }

    @{deep} .cr-checkbox__label {
      .text-size(12);
      color: @gray-4;
    }
  }

  &-bottom {
    color: @black;
    padding: 10px 8px 13px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    &__label {
      .text-size(13);
    }
    &__price {
      .text-size(15);
      font-weight: bold;
    }
  }
  &-tip {
    .text-size(11);
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    .border-bottom(inherit, 0);
    &__message {
      color: @red-dark;
    }
    &__success {
      color: #07c160;
    }
    &__icon {
      transform: translateY(3px);
    }
  }
}
</style>
