<template>
  <el-drawer
    title="订单发货"
    :visible.sync="drawer"
    :direction="direction"
    size="40%">
    <div class="content">
      <!-- <deliveryGoodsInfo />
      <deliveryPrice /> -->
    </div>
    <div class="space"></div>
    <div class="deli-footer">
      <div class="d-left">
        <div class="estimate-total">
          预计总价<span class="total">￥16.00</span> <span class="detail" @click="jump">明细></span>
        </div>
        <div class="agreement">
          <el-checkbox v-model="checked">已读并同意《XXX电子运单协议》</el-checkbox>
        </div>
      </div>
      <div class="send-btn" @click="btn">确认发货</div>
    </div>
    <deliveryDetail ref="deliveryDetail" />
  </el-drawer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
import DeliveryPrice from "./deliveryPrice.vue";
import deliveryDetail from './deliveryDetail.vue'
@Component({components:{DeliveryGoodsInfo,DeliveryPrice,deliveryDetail}})
export default class DeliveryModal extends Vue {
  drawer=false;
  direction='rtl'
  checked=false;
  value:any={}
  setShow(v:boolean){
    this.drawer=v;
  }
  btn(){
    this.drawer = false;
    this.$emit('sendHandle')
  }
  jump(){
    if(this.$refs.deliveryDetail){
      (this.$refs.deliveryDetail as any).setShow(true);
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  background-color: #FFF;
  
}
.deli-footer{
  height: 60px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  background-color: #FFF;
  left: 0;
  bottom: 0;
  z-index: 10;
  .d-left{
    width: 70%;
    .estimate-total{
      font-size: 14px;
      padding-bottom: 4px;
      .total{
        font-size: 16px;
        color: #F00;
      }
      .detail{
        color: #1684FC;
        padding-left: 16px;
        cursor: pointer;
      }
    }
  }
  .send-btn{
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
    cursor: pointer;
  }
}
.space{
  height: 60px;
  width: 100%;
  margin-top: 16px;
}
</style>