<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-tree-select
              v-model="queryParam.goodType"
              :tree-data="treeData"
              :replaceFields="{
                children: 'children',
                title: 'name',
                key: 'id',
                value: 'id',
              }"
              placeholder="商品分类"
            />
          </a-col>
          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button v-if="sellClear == 1" @click="handleAdd">立即沽清</a-button>
      <a-button v-if="sellClear == 2" @click="handleDelete">取消沽清</a-button>
    </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"
            :class="item.sort == 888888 ? 'check' : ''"
            :style="{
              background: item.isSellClear ? 'grey' : 'goldenrod',
            }"
          >
            <div>{{ item.name }}</div>
            <div style="margin-top: 20px">
              ￥{{ item.sellingPrice.toFixed(2) }}
            </div>
            <div
              v-if="item.isSellClear"
              style="display: flex; justify-content: right"
            >
              <a-tag color="#f50"> 沽清 </a-tag>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <pos-region-modal ref="modalForm" @ok="modalFormOk"></pos-region-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 { tree } from "@/api/good";
export default {
  name: "memberList",
  mixins: [JeecgListMixin],
  components: {
    PosRegionModal,
  },
  data() {
    return {
      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,
      },
      // 表头
      columns: [
        {
          title: "pos类型",
          align: "center",
          dataIndex: "typeName",
        },
        {
          title: "区域名称",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: "action" },
        },
      ],
      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: {},
    };
  },
  created() {
    this.loadTree();
  },
  methods: {
    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(() => {});
    },
    handleAdd() {
      var _info = JSON.parse(localStorage.getItem("storeInfo"));
      var model = { goodsId: this.selectGoods.id };
      if (_info) {
        model.hotelId = _info.id;
      }
      postAction("/pos/posSellClearGoods/add", model)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
            this.sellClear = 0;
          } else {
            this.$message.warning(res.message);
          }
        })
        .finally(() => {});
    },
    itemClick(row) {
      console.log(row);
      if (row.sort != 888888) {
        this.selectGoods = row;
        var list = this.dataSource.filter((t) => (t) => t.sort == 888888);
        list.forEach((t) => {
          t.sort = 0;
        });
        row.sort = 888888;
        if (row.isSellClear) {
          this.sellClear = 2;
        } else {
          this.sellClear = 1;
        }
      } else {
        row.sort = 0;
        this.sellClear = 0;
      }
    },
    loadTree() {
      var that = this;
      tree().then((res) => {
        if (res.success) {
          this.treeData = res.result;
        }
      });
    },
  },
};
</script>
  <style scoped>
@import "~@assets/less/common.less";
.room-item {
  height: 110px;
  /* line-height: 200px; */
  font-size: 13px;
  color: #f9f9f9;
  padding: 20px 10px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.check {
  border: #000 solid 3px;
}
</style>