<template>
  <div class="agree-wrapper">
    <Agree :desc="desc" :value="buyAgree" @input="changeAgree"></Agree>
  <div class="order-footer-wrapper">
    <div class="btn1">
      <div>实付金额：<span class="red">￥{{amount}}</span></div>
      <div class="desc">本次交易由闲鱼x有货提供服务</div>
    </div>
    <YohoButton class="btn2" txt="去支付" @click="onClick" :disable="!buyAgree"></YohoButton>
  </div>
  </div>
</template>

<script>

import Agree from './agree';
import { createNamespacedHelpers } from 'vuex';
import { Types } from 'store/order/order-confirm';

const { mapState: mapOrderState, mapMutations: mapOrderMutations } = createNamespacedHelpers('order/orderConfirm');

export default {
  name: 'BuyerOrderFooter',
  props: ['amount'],
  components: {
    Agree
  },
  data() {
    return {
      desc: '有货买家协议'
    };
  },
  computed: {
    ...mapOrderState(['buyAgree'])
  },
  methods: {
    ...mapOrderMutations([Types.CHANGE_BUY_AGREE]),
    onClick() {
      this.$emit('click');
    },
    changeAgree(val) {
      this[Types.CHANGE_BUY_AGREE](val);
    }
  }
};
</script>

<style lang="scss" scoped>
.order-footer-wrapper {
  width: 100%;
  border-top: 1px solid #eee;
  padding: 0 40px;
  height: 120px;
  display: flex;
  align-items: center;
}

.agree-wrapper {
  border-top: 1px solid #eee;
}

.btn1 {
  flex: 1;
  font-size: 24px;
  text-align: left;
}

.btn2 {
  width: 220px;
  height: 80px;
  line-height: 80px;
  font-size: 24px;
}

.red {
  font-size: 28px;
  color: #d0021b;
  font-weight: bolder;
}

.desc {
  margin-top: 8px;
  font-size: 20px;
  color: #999;
}

</style>