<template>
  <div class="go_page_footer" :style="footerBarStyle">
    <div class="btn_area" :style="getBtnAreaStyle">
      <Button v-show="showCancel" class="go-btn" @click="cancel">取消</Button>
      <Button
        v-show="showConfirm"
        type="primary"
        class="go-btn"
        style="margin-left: 8px;"
        @click="confirm"
        >{{ confirmLabel }}</Button
      >
    </div>
  </div>
</template>

<script>
export default {
    name: "go-page-footer-bar",
  //参数
    props: {
        confirmLabel: { type: String, default: "确认" }, //确定按钮的中文
        showConfirm: { type: Boolean, default: true }, //是否显示确定
        showCancel: { type: Boolean, default: true }, //是否显示取消
        height: { type: Number, default: 35 }, //高度
        bgColor: { type: String, default: "#FFF" }, //背景颜色
        topHeight: { type: Number }
    },
    computed: {
    //底部工具栏的样式信息
        footerBarStyle() {
            return {
                top: this.topHeight + "px",
                height: this.height + "px",
                paddingTop:'4px',
                backgroundColor: this.bgColor
            };
        },
        getBtnAreaStyle() {
      //如果确定按钮 取消按钮都显示
            if (this.showConfirm && this.showCancel) {
                return { width: 240 + "px" };
            } else {
                return { width: 90 + "px" };
            }
        }
    },
    methods: {
    //点击取消按钮
        cancel() {
            this.$emit("cancel");
        },
    //点击确定按钮
        confirm() {
            this.$emit("confirm");
        }
    }
};
</script>
