<template>
  <div>
    <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"
      >
        <template slot="tableTop">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="模块">
              <el-select
                @change="changePosition"
                class="filter-item"
                style="width: 200px"
                v-model="formInline.position"
                placeholder="请选择模块"
              >
                <el-option
                  v-for="item in [
                    {
                      label: '菜市场详情页',
                      value: '2',
                    },
                    {
                      label: '摊位详情',
                      value: '3',
                    },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="storeList.length > 1 && formInline.position === '1'"
              label="摊铺"
            >
              <el-select
                class="filter-item"
                style="width: 200px"
                v-model="formInline.targetId"
                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 label="类型">
              <el-select
                class="filter-item"
                style="width: 200px"
                v-model="formInline.type"
                placeholder="请选择分类类型"
              >
                <el-option
                  v-for="item in type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应用">
              <el-select
                class="filter-item"
                style="width: 200px"
                v-model="formInline.app"
                placeholder="请选择分类类型"
              >
                <el-option
                  v-for="item in application"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="$refs.oTable.reload()"
                >查询</el-button
              >
              <el-button type="primary" @click="aa">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs> -->
          <div class="mb-2">
            <el-button type="primary" size="small" @click="addBanner"
              >新增公告</el-button
            >
            <el-button type="primary" size="small" @click="setSort"
              >排序</el-button
            >
          </div>
        </template>
      </obj-table-plus>
    </div>
    <!-- 轮播图 -->
    <addOrUpdate
      ref="addOrUpdate"
      @queryList="$refs.oTable.reload()"
    ></addOrUpdate>
    <!-- 排序 -->
    <setSorting
      @queryList="$refs.oTable.reload()"
      ref="setSorting"
    ></setSorting>
  </div>
</template>

<script>
import setSorting from "./popup/set-sorting.vue";
import addOrUpdate from "./popup/add-or-update.vue";
import { mapState } from "vuex";
export default {
  components: { addOrUpdate, setSorting },
  data() {
    return {
      activeName: "5",
      advanceSellStatus: "",
      dataList: [],
      formInline: {
        type: 0,
        targetId: "",
        position: "3",
      },
      tableProp: {
        "auto-resize": true,
        border: true,
        height: "auto",
        "row-id": "id",
        "show-overflow": false,
      },
      selectList: [],
      type: [
        {
          value: 0,
          label: "菜市场分类",
        },
        {
          value: 1,
          label: "云店分类",
        },
      ],
      application: [
        { label: "用户端", value: 1 },
        {
          label: "商家端",
          value: 2,
        },
        {
          label: "专员端",
          value: 3,
        },
      ],
    };
  },
  created() {
    this.formInline = {
      type: 0,
      targetId: this.shopId,
      position: "3",
      app: 1,
    };
    this.$nextTick(() => {
      this.$refs.oTable.reload();
    });
  },
  methods: {
    // getData() {
    //   this.$api.mer_admin
    //     .storeList({ marketId: this.formInline.marketId })
    //     .then((res) => {
    //       this.storeList = res.data.data;
    //       this.formInline.shopId = res.data.data[0].shopId;
    //       this.$nextTick(() => {
    //         this.$refs.oTable.reload();
    //       });
    //     });
    // },
    addBanner() {
      this.$refs.addOrUpdate.toggle().add(this.formInline);
    },
    changePosition(e) {
      if (e === "shop") {
        this.formInline.targetId = this.shopId;
      } else {
        this.formInline.targetId = this.marketId;
      }
      console.log(e);
    },
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .noticePage({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.formInline,
        })
        .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);
        });
    },
    Reset() {
      this.formInline = {
        type: 0,
        targetId: this.shopId,
        position: "3",
        app: 1,
      };
      this.$refs.oTable.reload();
    },
    //排序
    setSort() {
      this.$refs.setSorting.init(this.dataList);
    },
    aa() {
      let data = [
        {
          menuId: "998ba4f8-0b23-47ca-8956-be7c746d87a3",
          parentId: 0,
          parentName: null,
          name: "运营管理",
          url: "operation-management",
          perms: "",
          type: 0,
          elIcon: "el-icon-s-help",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "2eb90a13-6243-4c8b-89e7-b5e6d0208e44",
              parentId: 0,
              parentName: null,
              name: "店铺列表",
              url: "operation-management/shop-list/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "11ecb135-505a-468c-80bb-b4e272d3a756",
              parentId: 0,
              parentName: null,
              name: "分销商列表",
              url: "operation-management/distributor/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "43215946-2079-45d0-873f-40fcbc4dd33d",
              parentId: 0,
              parentName: null,
              name: "商品管理",
              url: "operation-management/commodity/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-menu",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "5eaa875e-95b4-43ec-8bc1-1d625f863110",
              parentId: 0,
              parentName: null,
              name: "订单管理",
              url: "operation-management/order/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-menu",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "034e58a5-40a2-4589-882f-a56826276e06",
              parentId: 0,
              parentName: null,
              name: "轮播图管理",
              url: "operation-management/banner/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-menu",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "aa7f6bbc-a4aa-4c78-8584-45c0bb0e872d",
              parentId: 0,
              parentName: null,
              name: "公告管理",
              url: "operation-management/notice/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-menu",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "a2c485f1-32d5-4f4c-8be0-a12162dd5436",
          parentId: 0,
          parentName: null,
          name: "数据中心",
          url: "datacenter",
          perms: "",
          type: 0,
          elIcon: "el-icon-tickets",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "cd70b17e-5575-47fc-8b1f-6650a8dc9b8f",
              parentId: 0,
              parentName: null,
              name: "客户分析",
              url: "datacenter/customer-analysis/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-user",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "648011fd-af43-48d8-8c23-8b47305d5072",
              parentId: 0,
              parentName: null,
              name: "商品分析",
              url: "datacenter/product-analysis/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-data-analysis",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "6328522d-6cfe-40b0-8684-89444787deb8",
              parentId: 0,
              parentName: null,
              name: "订单统计分析",
              url: "datacenter/order-analysis/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "76407da3-a79c-46a7-8863-96f801454916",
          parentId: 0,
          parentName: null,
          name: "银行卡管理",
          url: "bank-card/index",
          perms: "",
          type: 0,
          elIcon: "el-icon-picture-outline",
          orderNum: 0,
          open: null,
          list: [],
          hideInMenu: true,
        },
        {
          menuId: "36d2c779-eb4c-407c-8ce8-d6c8ba55bc2c",
          parentId: 0,
          parentName: null,
          name: "品牌管理",
          url: "brand",
          perms: "",
          type: 0,
          elIcon: "el-icon-money",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "734f0870-abff-4161-8c3c-067cad0e08f4",
              parentId: 0,
              parentName: null,
              name: "品牌管理",
              url: "brand/config/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-postcard",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "2d18c56d-d138-48a6-8737-e97db41d7429",
          parentId: 0,
          parentName: null,
          name: "优惠卷营销工具管理",
          url: "coupon/index",
          perms: "",
          type: 0,
          elIcon: "el-icon-document-remove",
          orderNum: 0,
          open: null,
          list: [],
        },
        {
          menuId: "d534a9eb-6098-48f7-8c66-8ebcea19c322",
          parentId: 0,
          parentName: null,
          name: "预售营销工具管理",
          url: "presale",
          perms: "",
          type: 0,
          elIcon: "el-icon-data-analysis",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "33631936-6730-4f1b-8268-8951852b3437",
              parentId: 0,
              parentName: null,
              name: "预售商品",
              url: "presale/products/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-postcard",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "c749756c-e7f5-4644-80d8-2247697dba64",
              parentId: 0,
              parentName: null,
              name: "预售订单",
              url: "presale/order/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-postcard",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "497db1fe-22a0-4cf2-8dcf-00e5849532b9",
          parentId: 0,
          parentName: null,
          name: "会员营销工具管理",
          url: "marketing",
          perms: "",
          type: 0,
          elIcon: "el-icon-tickets",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "f9372326-3f15-46aa-8bbe-aa4abe270c6d",
              parentId: 0,
              parentName: null,
              name: "会员等级管理",
              url: "marketing/level/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-user",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "12a8aaa0-2519-4915-80fe-2f920b995b84",
              parentId: 0,
              parentName: null,
              name: "用户管理",
              url: "marketing/user/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-data-analysis",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "6558805d-760f-4c7e-87b7-8cf508b30303",
              parentId: 0,
              parentName: null,
              name: "积分设置",
              url: "marketing/points-setting/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "ce2aa962-280e-4f33-86e1-5ba26c5dc8d2",
              parentId: 0,
              parentName: null,
              name: "积分商城",
              url: "marketing/points-mall/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "d0d06944-0761-47ef-8a7d-cf4dfcb21ee1",
              parentId: 0,
              parentName: null,
              name: "积分订单",
              url: "marketing/points-order/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "6162944a-89d0-4c9c-8a51-53b92bc65249",
          parentId: 0,
          parentName: null,
          name: "代理商",
          url: "agent",
          perms: "",
          type: 0,
          elIcon: "el-icon-tickets",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "cd780317-72fa-4f22-8d25-0e4343dcedad",
              parentId: 0,
              parentName: null,
              name: "数据面板",
              url: "agent/data-panel/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-user",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "1d061eb1-45e7-4449-86bc-33517e499669",
              parentId: 0,
              parentName: null,
              name: "品牌管理",
              url: "agent/brand/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-data-analysis",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "d2635108-9b4e-460f-88ec-17eebf0ff267",
              parentId: 0,
              parentName: null,
              name: "报表",
              url: "agent/report-form/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "7790df17-67e1-404e-8672-8b9a58e3650b",
              parentId: 0,
              parentName: null,
              name: "市场列表",
              url: "agent/market-list/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
            {
              menuId: "11827f68-ae24-4da4-8a45-bfd4e006fb04",
              parentId: 0,
              parentName: null,
              name: "权限管理",
              url: "agent/jurisdiction/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-shopping-cart-full",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
          hideInMenu: true,
        },
        {
          menuId: "b8622bc2-02d5-47b8-8711-6cededdc8471",
          parentId: 0,
          parentName: null,
          name: "钱包管理",
          url: "local-course/resources",
          perms: "wallet",
          type: 0,
          elIcon: "el-icon-menu",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "1e962058-9aef-4309-8e2b-3e77e3465720",
              parentId: 0,
              parentName: null,
              name: "我的钱包",
              url: "wallet/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-menu",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
        {
          menuId: "8de628eb-5f3b-4ea4-8c35-2a224e457517",
          parentId: 0,
          parentName: null,
          name: "运费管理",
          url: "ogistics-fare",
          perms: "",
          type: 0,
          elIcon: "el-icon-money",
          orderNum: 0,
          open: null,
          list: [
            {
              menuId: "7f020420-7bb2-4c95-8eb5-b8b14c8abeff",
              parentId: 0,
              parentName: null,
              name: "运费模板",
              url: "logistics-fare/logistics-template/index",
              perms: "",
              type: 1,
              elIcon: "el-icon-postcard",
              orderNum: 0,
              open: null,
              list: [],
            },
          ],
        },
      ];
      let permissions = [
        "operation-management",
        "operation-management/shop-list/index",
      ];
      const filterTreeData = (data, permissions) => {
        return data.reduce((filtered, node) => {
          console.log(node.url);
          // 如果节点的权限在权限数组中
          if (permissions.includes(node.url)) {
            // 递归过滤子节点
            const list = filterTreeData(node.list || [], permissions);
            // 创建一个新的节点，包含过滤后的子节点
            filtered.push({
              ...node,
              list,
            });
          }
          return filtered;
        }, []);
      };
      console.log(filterTreeData(data, permissions));
    },
  },
  computed: {
    tableCols() {
      return [
        // { type: "checkbox", width: "60px", fixed: "left" },
        { type: "seq", width: "60px", align: "center", title: "序号" },
        {
          title: "公告通知",
          align: "center",
          field: "title",
        },
        {
          title: "位置",
          align: "center",
          field: "startTime",
          type: "jsx",
          width: "120px",
          render: ({ row }) => {
            let getPosition = (row) => {
              if (row == "1") {
                return "首页";
              } else if (row == "2") {
                return "菜市场详情页";
              } else if (row == "3") {
                return "摊位详情";
              }
            };
            return <span>{getPosition(row.position)}</span>;
          },
        },
        {
          title: "状态",
          align: "center",
          field: "status",
          type: "jsx",
          width: "120px",
          render: ({ row }) => {
            return <span>{row.status ? "已启用" : "已禁用"}</span>;
          },
        },
        {
          title: "操作",
          fixed: "right",
          type: "jsx",
          align: "center",
          width: "220px",
          render: ({ row }) => {
            let updateBanner = () => {
              this.$refs.addOrUpdate.toggle(row).update();
            };
            let deleteBanner = () => {
              this.$api.mer_admin
                .noticeDelete({ id: row.id })
                .then((res) => {
                  this.$refs.oTable.reload();
                })
                .catch((err) => {
                  this.$refs.oTable.reload();
                });
            };
            let onCancel = () => {};
            return (
              <div>
                <el-button
                  style="margin-right:10px"
                  size="mini"
                  type="primary"
                  onClick={updateBanner}
                >
                  编辑
                </el-button>
                <el-popconfirm
                  onConfirm={deleteBanner}
                  onCancel={onCancel}
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                >
                  <el-button size="mini" type="danger" slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </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>