<template>
  <a-card :bordered="false" class="card-pd">
    <a-tabs v-model="tabPosTypeId" @change="tabPosTypeChange">
      <a-tab-pane
        :key="item.id"
        :tab="item.name"
        v-for="item in posTypeList"
      ></a-tab-pane>
    </a-tabs>

    <a-tabs v-model="tabPosRegionId" @change="tabRegionChange">
      <a-tab-pane key="1" tab="全部"></a-tab-pane>
      <a-tab-pane
        :key="item.id"
        :tab="item.name"
        v-for="item in regionList"
      ></a-tab-pane>
    </a-tabs>
    <div class="w-choose-status">
      <div
        :class="sta.check ? 'status-check' : ''"
        v-for="(sta, index) in statusColorList"
        :key="index"
        @click="statusClick(index)"
      >
        <span
          v-if="sta.status != -100"
          class="square"
          :style="{ background: sta.color }"
        ></span>
        <span class="title">{{ sta.title }}</span>
      </div>
    </div>
    <a-row :gutter="[5, 5]">
      <a-col
        v-for="item in dataSource"
        :key="item.id"
        :span="2"
        @click.stop="itemClick(item)"
      >
        <div
          class="room-item check"
          :style="{
            background: getStatusColor(item.state),
            color: item.state == 0 ? '#000' : '#fff',
          }"
        >
          <div class="select-cell"></div>
          <template v-if="item.state === 1">
            <div>{{ item.name }}</div>
            <div style="margin-top: 10px">待下单</div>
            <div
              style="
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>
                <a-icon type="user" />{{ item.userNum }}/{{ item.num }}人
              </div>
              <div>
                <a-icon type="clock-circle" />{{ hours(item.orderTime) }}
              </div>
            </div></template
          >
          <template v-else-if="item.state === 2 || item.state === 4">
            <div>{{ item.name }}</div>
            <div style="margin-top: 10px">
              ￥{{ item.posOrderGoods ? item.posOrderGoods.money : 0 }}
            </div>
            <div
              style="
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>
                <a-icon type="user" />{{ item.userNum }}/{{ item.num }}人
              </div>
              <div>
                <a-icon type="clock-circle" />{{ hours(item.orderTime) }}
              </div>
            </div></template
          >
          <template v-else>
            <div>{{ item.name }}</div>
            <div style="margin-top: 10px"></div>
            <div style="margin-top: 10px">
              <a-icon type="user" />{{ item.num }}人
            </div></template
          >
        </div>
      </a-col>
    </a-row>
    <payment-modal ref="modalPaymentForm" @ok="modalFormOk"></payment-modal>
    <goods-modal ref="modalGoodsForm" @ok="modalFormOk2"></goods-modal>
    <picking-goods-order-modal
      ref="modalPickingGoodsOrderForm"
      @ok="modalPickingGoodsOrderFormOk"
    ></picking-goods-order-modal>
    <select-check-in-room-order-modal
      ref="modalSelectCheckInRoomOrderModal"
      @ok="modalSelectCheckInRoomOrderFormOk"
    ></select-check-in-room-order-modal>
    <user-num-modal
      ref="modalUserNmumForm"
      @ok="modalUserNmumFormOk"
    ></user-num-modal>
  </a-card>
</template>
  
  <script>
// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
// import PosRegionModal from "./modules/PosRegionModal";
import { filterObj } from "@/utils/util";
import { getAction, postAction, deleteAction } from "@/api/manage";
import PaymentModal from "./modules/PaymentModal.vue";
import goodsModal from "./modules/goodStock/goodsModal.vue";
import PickingGoodsOrderModal from "./modules/PickingGoodsOrderModal.vue";
import SelectCheckInRoomOrderModal from "./modules/SelectCheckInRoomOrderModal.vue";
import UserNumModal from "./modules/UserNumModal.vue";
import { computed } from "vue";
import { tree } from "@/api/good";
const columns = [
  {
    title: "商品名称",
    dataIndex: "name",
  },
  {
    title: "数量",
    dataIndex: "num",
    scopedSlots: { customRender: "num" },
  },
  {
    title: "售价",
    dataIndex: "sellingPrice",
  },
];
export default {
  name: "memberList",
  components: {
    PaymentModal,
    goodsModal,
    PickingGoodsOrderModal,
    SelectCheckInRoomOrderModal,
    UserNumModal,
  },
  data() {
    return {
      columns,
      sellClear: 0,
      queryParam: {},
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 99999,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        list: "/pos/posSellClearGoods/list",
        delete: "/pos/posSellClearGoods/delete",
        deleteBatch: "/pos/posSellClearGoods/deleteBatch",
        exportXlsUrl: "/pos/posSellClearGoods/exportXls",
        importExcelUrl: "pos/posSellClearGoods/importExcel",
      },
      dictOptions: {},
      superFieldList: [],
      selectedRowKeys: [],
      isorter: {
        column: "createTime",
        order: "desc",
      },
      treeData: [],
      selectGoods: {},
      posTypeList: [],
      tabPosTypeId: "",
      selectGoodsList: [],
      regionList: [],
      tabPosRegionId: "1",
      dataSource: [],
      oldSelectGoodsList: [],
      selectOrderInfo: {},
      selectRoomOrder: {},
      statusColorList: [
        {
          title: "全部",
          color: "#fff",
          check: true,
          status: -100,
        },
        {
          title: "空桌",
          color: "#fff",
          check: false,
          status: 0,
        },
        {
          title: "待下单",
          color: "#00a0e9",
          check: false,
          status: 1,
        },
        {
          title: "待结账",
          color: "rgba(10, 122, 114, 1)",
          check: false,
          status: 2,
        },
        {
          title: "已预结",
          color: "rgba(172, 51, 193, 1)",
          check: false,
          status: 3,
        },
        {
          title: "待清台",
          color: "rgba(128, 128, 128, 1)",
          check: false,
          status: 4,
        },
      ],
      state: undefined,
      selectTable: {},
    };
  },
  provide() {
    return {
      treeData: computed(() => this.treeData),
    };
  },
  computed: {
    sum() {
      return this.selectGoodsList.reduce(function (total, item) {
        return total + item.num;
      }, 0);
    },
    amount() {
      return this.selectGoodsList.reduce(function (total, item) {
        return total + item.sellingPrice * item.num;
      }, 0);
    },
    btnDisabled() {
      var res = this.selectGoodsList && this.selectGoodsList.length > 0;
      return !res;
    },
  },
  created() {
    console.log("created");
    this.dataSource = [{ id: "0" }];
    getAction("/pos/posType/list", { pageNo: 1, pageSize: 99 }).then((res) => {
      if (res.success) {
        this.posTypeList = res.result.records;
        if (this.posTypeList && this.posTypeList.length > 0) {
          this.tabPosTypeId = this.posTypeList[0].id;
          this.loadRegion();
        }
      }
    });
  },
  activated() {
    console.log("activated");
    this.dataSource = [{ id: "0" }];
    getAction("/pos/posType/list", { pageNo: 1, pageSize: 99 }).then((res) => {
      if (res.success) {
        this.posTypeList = res.result.records;
        if (this.posTypeList && this.posTypeList.length > 0) {
          this.tabPosTypeId = this.posTypeList[0].id;
          this.loadRegion();
        }
      }
    });
  },
  methods: {
    hours(start) {
      var beginDate = new Date(start);
      var endDate = new Date();
      let hours = parseInt((endDate - beginDate) / (1000 * 60 * 60));
      let leave1 =
        (endDate.getTime() - beginDate.getTime()) % (24 * 3600 * 1000);
      let leave2 = leave1 % (3600 * 1000);
      let minutes = Math.floor(leave2 / (60 * 1000));
      // return minutes == 0 ? hours : hours + 1;
      return hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0");
    },
    getStatusColor(status) {
      var find = this.statusColorList.find((t) => t.status == status);
      return find ? find.color : "#fff";
    },
    loadTree() {
      var that = this;
      tree().then((res) => {
        if (res.success) {
          this.treeData = res.result;
        }
      });
    },
    modalFormOk() {},
    modalFormOk2(e) {
      console.log(e);
      var good = JSON.parse(JSON.stringify(e));
      this.$set(good, "num", 1);
      this.selectGoodsList.push(good);
    },
    modalSelectCheckInRoomOrderFormOk(e) {
      console.log(e);
      this.selectRoomOrder = e;
    },
    modalPickingGoodsOrderFormOk(e) {
      console.log(e);
      if (e && e.orderDetailList && e.orderDetailList.length > 0) {
        this.selectOrderInfo = e.orderInfo;
        e.orderDetailList.forEach((t) => {
          t.sellingPrice = t.payMoney;
          t.name = t.goodsName;
          t.id = t.goodsId;
        });
        this.selectGoodsList = e.orderDetailList;
      }
    },
    numChange(e, index) {
      console.log(e);
      if (e <= 0) {
        this.selectGoodsList.splice(index, 1);
      }
    },
    handleClear() {
      this.selectGoodsList = [];
      // this.selectOrderInfo = {};
    },
    tabPosTypeChange(e) {
      this.loadRegion();
    },
    tabRegionChange(e) {
      this.loadTables();
    },
    statusClick(index) {
      this.statusColorList.forEach((t) => {
        if (t.check) {
          t.check = false;
        }
      });
      this.statusColorList[index].check = true;
      if (index === 0) {
        this.state = undefined;
      } else {
        this.state = this.statusColorList[index].status;
      }
      this.loadTables();
    },
    loadRegion() {
      getAction("/pos/posRegion/list", {
        posTypeId: this.tabPosTypeId,
      }).then((res) => {
        if (res.success) {
          this.regionList = res.result.records;
        }
      });
      this.loadTables();
    },
    loadTables() {
      var obj = {
        pageNo: 1,
        pageSize: 99999,
        posTypeId: this.tabPosTypeId,
        state: this.state,
      };
      if (this.tabPosRegionId != "1") {
        obj.posRegionId = this.tabPosRegionId;
      }
      getAction("/pos/posTable/tableList", obj).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
        }
      });
    },
    handleDelete() {
      deleteAction("/pos/posSellClearGoods/delete", {
        goodsId: this.selectGoods.id,
      })
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
            this.sellClear = 0;
          } else {
            this.$message.warning(res.message);
          }
        })
        .finally(() => {});
    },
    handleSelectCheckInRoomOrder() {
      this.$refs.modalSelectCheckInRoomOrderModal.add();
      this.$refs.modalSelectCheckInRoomOrderModal.title = "选择转帐人";
      this.$refs.modalSelectCheckInRoomOrderModal.disableSubmit = false;
    },
    handlePickingGoodsOrder() {
      this.$refs.modalPickingGoodsOrderForm.add();
      this.$refs.modalPickingGoodsOrderForm.title = "取单";
      this.$refs.modalPickingGoodsOrderForm.disableSubmit = false;
    },
    handleAddTempGoods() {
      this.$refs.modalGoodsForm.add();
      this.$refs.modalGoodsForm.title = "新增菜品";
      this.$refs.modalGoodsForm.disableSubmit = false;
    },
    handleToRoomFeePayment() {
      this.handleAdd();
    },
    handlePayment() {
      this.handleAdd((e) => {
        var amount = this.oldSelectGoodsList.reduce(function (total, item) {
          return total + item.sellingPrice * item.num;
        }, 0);
        this.$refs.modalPaymentForm.edit({
          billAmount: amount,
          deposit: 0,
          roomFee: amount,
          subjectType: 5,
          feeType: 2,
          preferentialType: 1,
          couponFirstAmount: 0,
          discount: 9,
          orderCode: e,
        });
        this.$refs.modalPaymentForm.title = "POS结账";
        this.$refs.modalPaymentForm.disableSubmit = false;
      });
    },
    handleAdd(callback) {
      if (!this.selectGoodsList || this.selectGoodsList.length <= 0) {
        this.$message.warning("请先选择商品");
        return;
      }
      var _info = JSON.parse(localStorage.getItem("storeInfo"));
      var model = { goodsId: this.selectGoods.id };
      if (_info) {
        model.hotelId = _info.id;
      }
      model.id = this.selectOrderInfo.id;
      model.toRoomFeeOrderId = this.selectRoomOrder.id;
      model.posType = this.tabPosTypeId;
      var posOrderGoodsDetailList = [];
      this.selectGoodsList.forEach((t) => {
        posOrderGoodsDetailList.push({
          goodsId: t.id,
          num: t.num,
          money: t.sellingPrice,
        });
      });
      model.posOrderGoodsDetailList = posOrderGoodsDetailList;
      postAction("/pos/posOrderGoods/add", model)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.oldSelectGoodsList = JSON.parse(
              JSON.stringify(this.selectGoodsList)
            );
            this.selectGoodsList = [];
            this.selectOrderInfo = {};
            this.selectRoomOrder = {};
            this.loadGoods();
            if (callback) {
              callback(res.result.code);
            }
          } else {
            this.$message.warning(res.message);
          }
        })
        .finally(() => {});
    },
    modalUserNmumFormOk() {
      this.loadTables();
      this.$router.push({
        name: "pos-tablediandan",
        params: { tableId: this.selectTable.id },
      });
    },
    itemClick(row) {
      var that = this;
      console.log(row);
      this.selectTable = row;
      if (row.state === 0) {
        this.$refs.modalUserNmumForm.edit({ id: row.id, userNum: 1 });
        this.$refs.modalUserNmumForm.title = "就餐人数";
        this.$refs.modalUserNmumForm.disableSubmit = false;
      } else if (row.state === 4) {
        this.$confirm({
          content: "确定是否要清除房台?",
          onOk: function () {
            var model = JSON.parse(JSON.stringify(row));
            model.state = 0;
            model.userNum = 0;
            model.orderTime = null;
            postAction("/pos/posTable/edit", model).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadTables();
              } else {
                that.$message.warning(res.message);
              }
            });
          },
        });
      } else {
        this.$router.push({
          name: "pos-tablediandan",
          params: { tableId: row.id },
        });
      }
    },
  },
};
</script>
  <style scoped>
@import "~@assets/less/common.less";
.room-item {
  height: 110px;
  /* line-height: 200px; */
  font-size: 13px;
  padding: 0px 5px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.check {
  border: #000 solid 1px;
}
.ant-table-wrapper {
  height: calc(100vh - 500px);
}
/deep/ .card-pd .ant-card-body {
  padding: 0 !important;
}
.select-cell {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.w-choose-status {
  display: flex;
  /* justify-content: flex-end; */
  /* width: 200px; */
  margin-bottom: 20px;
}

.w-choose-status > div {
  /* width: 100%; */
  /* flex: 1; */
  display: flex;
  padding: 0 2%;
  white-space: nowrap;
  line-height: 20px;
  box-sizing: border-box;
  cursor: pointer;
  align-items: center;
}

.w-choose-status > div .square {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-sizing: border-box;
  border: #000 solid 1px;
}

.w-choose-status > div .title {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding-left: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.status-check {
  border: #000 solid 1px;
  padding: 8px;
  /* width: 80px; */
  height: 29px;
  justify-content: center;
  background-color: #ccc;
  border-radius: 4px;
}
</style>