<template>
  <j-modal
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="title">
      <div
        style="
          display: flex;
          background-color: rgba(255, 141, 26, 1);
          height: 80px;
        "
      >
        <div class="menu">
          <a-icon
            type="account-book"
            style="color: #fff; font-size: 30px"
          /><a-button type="link"> 调价 </a-button>
        </div>
        <div class="menu" @click="handleLeaseGoods">
          <a-icon type="block" style="color: #fff; font-size: 30px" /><a-button
            type="link"
          >
            物品借用
          </a-button>
        </div>
        <div class="menu" @click="handleMessage">
          <a-icon
            type="message"
            style="color: #fff; font-size: 30px"
          /><a-button type="link"> 客户留言 </a-button>
        </div>
        <div class="menu" @click="handleUnion">
          <a-icon
            type="retweet"
            style="color: #fff; font-size: 30px"
          /><a-button type="link"> 联房 </a-button>
        </div>
        <div class="menu" @click="handleLeaveNotSettle">
          <a-icon type="euro" style="color: #fff; font-size: 30px" /><a-button
            type="link"
          >
            先走不结
          </a-button>
        </div>
        <div class="menu">
          <a-icon
            type="printer"
            style="color: #fff; font-size: 30px"
          /><a-button type="link"> 打印账单 </a-button>
        </div>
        <div class="menu">
          <a-icon
            type="container"
            style="color: #fff; font-size: 30px"
          /><a-button type="link"> 自定义账单 </a-button>
        </div>
      </div></template
    >
    <bill-room-info ref="realForm" @ok="submitCallback"></bill-room-info>
  </j-modal>
</template>

<script>
import BillRoomInfo from "./BillRoomInfo";

export default {
  name: "BillRoomInfoModal",
  components: {
    BillRoomInfo,
  },
  data() {
    return {
      title: "",
      width: 1400,
      visible: false,
      disableSubmit: false,
    };
  },
  methods: {
    add(id, key, roomId) {
      console.log("id", id);
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.add(id, key, roomId);
      });
    },
    edit(record) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.realForm.edit(record);
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      this.$refs.realForm.submitForm();
    },
    handleUnion() {
      this.$refs.realForm.addUnion();
    },
    handleMessage() {
      this.$refs.realForm.addMessage();
    },
    handleLeaseGoods() {
      this.$refs.realForm.addLeaseGoods();
    },
    handleLeaveNotSettle() {
      this.$refs.realForm.handleLeaveNotSettle();
    },
    submitCallback() {
      this.$emit("ok");
      // this.visible = false;
    },
    handleCancel() {
      this.$emit("close");
      this.close();
    },
  },
};
</script>
<style scoped>
/deep/ .ant-btn-link {
  flex: 1;
  color: #fff;
}
.menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
  margin-top: 12px;
}
/deep/.ant-modal-header {
  padding: 0;
  background-color: rgb(255, 141, 26);
}
/deep/.ant-modal-close {
  color: #fff;
}

/deep/.ant-modal-body {
  padding: 12px;
  max-height: calc(80vh - 150px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}
</style>