<template>
  <a-card style="width: 100%; height: 100%">
    <a-tabs type="card" default-active-key="0" @tabClick="tabClick">
      <a-tab-pane key="">
        <span slot="tab"> 全部 </span>
        <!-- <member-list></member-list> -->
      </a-tab-pane>
      <a-tab-pane v-for="(item, index) in mealCouponTypeList" :key="item.id">
        <span slot="tab">
          {{ item.name }}
        </span>
        <!-- <market-recharge-list></market-recharge-list> -->
      </a-tab-pane>
    </a-tabs>
    <div style="position: absolute; right: 50px; bottom: 120px; z-index: 99999">
      <a-button
        type="danger"
        shape="circle"
        icon="plus"
        size="large"
        @click="handleAdd"
      />
    </div>
    <a-row type="flex">
      <a-col :span="6" :order="1">
        <div class="height-100">
          <p class="header_num">{{ stat.dayCount || 0 }}</p>
          <span class="header_name">今日总数</span>
        </div>
      </a-col>
      <a-col :span="6" :order="2">
        <div class="height-100">
          <p class="header_num">{{ stat.dayUsedCount || 0 }}</p>
          <span class="header_name">今日已核销</span>
        </div>
      </a-col>
      <a-col :span="6" :order="3">
        <div class="height-100">
          <p class="header_num">{{ stat.dayReceivedCount || 0 }}</p>
          <span class="header_name">今日待核销</span>
        </div>
      </a-col>
      <a-col :span="6" :order="4">
        <div class="height-100">
          <p class="header_num">{{ stat.dayVoidedCount || 0 }}</p>
          <span class="header_name">今日作废</span>
        </div>
      </a-col>
    </a-row>
    <div style="margin-top: 15px">
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="avatar" slot-scope="text">
          <a-avatar v-if="text" :src="text" />
          <a-avatar v-else icon="user" />
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无图片</span
          >
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无文件</span
          >
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)"
          >
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handlePointEdit(record)">积分调整</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <bus-market-meal-coupons-used-verify-modal
      ref="modalMarketMealCouponsUsedVerifyModal"
      @fatherLoadData="fatherLoadData"
    ></bus-market-meal-coupons-used-verify-modal>
  </a-card>
</template>

<script>
import BusMarketMealCouponsUsedVerifyModal from "./modules/mealCoupons/BusMarketMealCouponsUsedVerifyModal.vue";
import { httpAction, getAction } from "@/api/manage";
import { mixinDevice } from "@/utils/mixin";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
const hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    BusMarketMealCouponsUsedVerifyModal,
  },
  data() {
    return {
      mealCouponTypeList: [],
      description: "餐券核销页面",
      // 表头
      columns: [
        {
          title: "餐券名称",
          align: "center",
          dataIndex: "couponsName",
        },
        {
          title: "餐券类型",
          align: "center",
          dataIndex: "typeName",
        },
        {
          title: "券号",
          align: "center",
          dataIndex: "code",
        },
        {
          title: "房间号",
          align: "center",
          dataIndex: "roomNumber",
        },
        {
          title: "核销人",
          align: "center",
          dataIndex: "usedUserName",
        },
        {
          title: "核销时间",
          align: "center",
          dataIndex: "usedTime",
        },
      ],
      url: {
        list: "/business/busMarketMealCouponsUsed/verifyList",
        delete: "/business/busMarketMealCouponsUsed/delete",
        deleteBatch: "/business/busMarketMealCouponsUsed/deleteBatch",
        exportXlsUrl: "/business/busMarketMealCouponsUsed/exportXls",
        importExcelUrl: "business/busMarketMealCouponsUsed/importExcel",
      },
      dictOptions: {},
      superFieldList: [],
      stat: {},
    };
  },
  created() {
    // httpAction(
    //   "/rooms/cesMealCoupon/fetch",
    //   { hotelId: hotelInfo.id },
    //   "get"
    // ).then((res) => {
    //   if (res.success) {
    //     this.mealCouponTypeList = res.result;
    //   }
    // });
    httpAction(
            "/business/busMealCoupon/queryList",
            { },
            "get"
    ).then((res) => {
      if (res.success) {
        this.mealCouponTypeList = res.result;
      }
    });
    this.getStat();
  },
  methods: {
    getStat() {
      console.log("this.queryParam.type",this.queryParam.type)
      getAction(
        "/business/busMarketMealCouponsUsed/stat",
        { hotelId: hotelInfo.id, type: this.queryParam.type }
      ).then((res) => {
        if (res.success) {
          this.stat = res.result;
        }
      });
    },
    tabClick(e) {
      console.log(e);
      this.queryParam.type = e;
      this.loadData();
      this.getStat();
    },
    handleAdd() {
      this.$refs.modalMarketMealCouponsUsedVerifyModal.visible = true;
      this.$refs.modalMarketMealCouponsUsedVerifyModal.title = "详情";
      this.$refs.modalMarketMealCouponsUsedVerifyModal.disableSubmit = true;
      this.$refs.modalMarketMealCouponsUsedVerifyModal.add();
    },
    fatherLoadData() {
      console.log(2);
      this.loadData();
    },
  },
};
</script>

<style scoped>
.main {
  height: 70% !important;
}
.height-100 {
  padding: 2px;
  border: 1px solid #d8d8d8;
  text-align: center;
}
.header_num {
  font-size: 24px;
  color: #5197ee;
  font-weight: bold;
}
.header_name {
  font-size: 17px;
}
</style>
