<template>
  <obj-modal
    ref="modal"
    labelWidth="150px"
    :modalConfig="modalConfig"
    :modalData="modalData"
    :modalHandles="modalHandles"
  >
    <template slot="dialog__content">
      <obj-table-plus
        ref="oTable"
        style="height: 70vh"
        :tableCols="tableCols"
        :tableProp="tableProp"
        @query="queryList"
        v-model="dataList"
        :tableEvent="tableEvent"
        :enableAutoQuery="false"
      >
        <!-- <template slot="tableTop">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item v-if="marketList.length > 0" label="菜市场">
            <el-select
              @change="getData"
              v-model="formInline.marketId"
              placeholder="请选择菜市场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.marketId"
                :label="item.marketName"
                :value="item.marketId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="marketList.length > 0" label="店铺">
            <el-select v-model="formInline.shopId" placeholder="请选择店铺">
              <el-option
                v-for="item in storeList"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$refs.oTable.reload()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template> -->
      </obj-table-plus>
    </template>
  </obj-modal>
</template>

<script>
import { debounce, cloneDeep } from "lodash";
export default {
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "请点击选择商品",
        show: false,
        width: "1000px",
      },
      modalData: {},
      dataList: [], //表格数据
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      selectList: {},
      tableEvent: {
        "current-change": async (e) => {
          console.log(e.row);
          this.selectList = e.row;
        },
      },
      formInline: {},
    };
  },
  methods: {
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .getProductPage({
          p: {
            pageNumber: pageNo,
            pageSize: pageSize,
          },
          ...this.formInline,
          productFilterType: "SALE",
          merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          productQuerySortParam: [],
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(
            res.data.data.data,
            Number(res.data.data.total)
          );
        })
        .catch((err) => {
          this.$refs.oTable.complete(false);
        });
    },
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          this.formInline = row;
          this.isAdd = true;
          this.$nextTick(() => {
            this.$refs.oTable.reload();
          });
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
  },
  computed: {
    tableCols() {
      return [
        { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "商品图",
          field: "productPhotoList",
          align: "center",
          width: "100px",
          type: "jsx",
          render: ({ row }) => {
            if (row.productPhotoList.length > 0) {
              return (
                <el-image
                  preview-src-list={row.productPhotoList.map((item) => {
                    return item.url;
                  })}
                  src={row.productPhotoList[0].url}
                ></el-image>
              );
            } else {
              return <span>暂无商品图</span>;
            }
          },
        },
        {
          title: "商品名称",
          align: "center",
          field: "name",
        },
        {
          title: "商品售价",
          align: "center",
          field: "minSalePrice",
          type: "jsx",
          render: ({ row }) => {
            if (row.minSalePrice == row.maxSalePrice) {
              return <span>￥{row.minSalePrice}</span>;
            } else {
              return (
                <span>
                  ￥{row.minSalePrice}~￥{row.maxSalePrice}
                </span>
              );
            }
          },
        },
        {
          title: "折扣",
          align: "center",
          field: "discountActivity",
          type: "jsx",
          render: ({ row }) => {
            if (row.discountActivity) {
              return <span>{row.discountActivity.ruleObject.discount}折</span>;
            }
          },
        },
        {
          title: "销量",
          align: "center",
          field: "saleNum",
        },
        {
          title: "库存",
          align: "center",
          field: "stockNum",
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          handle: () => {
            this.$emit("getProduct", this.selectList);
            this.toggle();
          },
        },
      ];
    },
  },
};
</script>

<style>
</style>