<template>
  <div style="height: calc(100vh - 200px)">
    <obj-table-plus
      ref="oTable"
      style="height: 100%"
      :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 label="菜市场名称">
            <el-input
              v-model="formInline.marketName"
              placeholder="菜市场名称搜索"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$refs.oTable.reload()"
              >查询</el-button
            >
            <el-button type="primary" @click="Reset">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="mb-2"></div>
      </template>
    </obj-table-plus>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      dataList: [],
      formInline: {
        name: "",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      productFilterType: "SALE",
      selectList: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  methods: {
    Reset() {
      this.formInline = {
        name: "",
      };
      this.$refs.oTable.reload();
    },
    queryList(pageNo, pageSize) {
      this.$api.agent
        .agentMarketPage({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.formInline,
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(
            res.data.data.content,
            Number(res.data.data.totalElements)
          );
        })
        .catch((err) => {
          this.$refs.oTable.complete(false);
        });
    },
  },
  computed: {
    tableCols() {
      return [
        { type: "checkbox", width: "60px", fixed: "left" },
        // { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "菜市场名称",
          align: "center",
          field: "name",
        },
        {
          title: "地址",
          align: "center",
          field: "address",
        },
        {
          title: "经纬度",
          align: "center",
          field: "category",
          type: "jsx",
          render: ({ row }) => {
            return (
              <span>
                经度：{row.longitude}; 维度：{row.latitude}
              </span>
            );
          },
        },
        {
          title: "营业执照",
          align: "center",
          field: "couponType",
          type: "jsx",
          render: ({ row }) => {
            return (
              <el-image
                preview-src-list={[row.license]}
                src={row.license}
              ></el-image>
            );
          },
        },
        {
          title: "评分",
          align: "center",
          field: "score",
        },
        {
          title: "收藏数量",
          align: "center",
          field: "collectCount",
        },
        {
          title: "点赞数量",
          align: "center",
          field: "likeItCount",
        },
        {
          title: "平台结算比例",
          align: "center",
          field: "platformSettleRatio",
        },
        {
          title: "代理商结算比例",
          align: "center",
          field: "agentSettleRatio",
        },
        {
          title: "加入时间",
          align: "center",
          field: "createTime",
        },
        {
          title: "状态",
          align: "center",
          field: "status",
          type: "jsx",
          width: "120px",
          render: ({ row }) => {
            let changeState = () => {};
            return (
              <el-switch
                onchange={changeState}
                v-model={row.status}
                active-text="开"
                inactive-text="关"
                active-value={1}
                inactive-value={0}
              ></el-switch>
            );
          },
        },
        // {
        //   title: "操作",
        //   fixed: "right",
        //   type: "jsx",
        //   align: "center",
        //   width: "140px",
        //   render: (row) => {
        //     let edit = () => {
        //       //   this.$refs.viewDetails.toggle(row).update();
        //     };
        //     return (
        //       <div>
        //         <el-button size="mini" type="primary" onClick={edit}>
        //           详情
        //         </el-button>
        //       </div>
        //     );
        //   },
        // },
      ];
    },
    tableEvent() {
      return {
        "checkbox-all": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
        "checkbox-change": ({ records, reserves }) => {
          this.selectList = [...records, ...reserves];
        },
      };
    },
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

<style lang="scss" scoped></style>
