<template>
  <div :class="['ps-sidebar', sidebarClose && 'side-close']">
    <div class="ps-sider-search" v-show="!sidebarClose">
      <ps-title>
        <template slot="title">
          <i :class="searchIcon"></i>
          <label class="search-title">{{ searchTitle }}</label>
        </template>
      </ps-title>
      <div class="ps-sider-s-row">
        <ps-select
          v-if="selectArr && selectArr.length"
          class="sider-select"
          v-model="productSelect"
          :dataSource="selectArr"
          :defalutProps="defalutProps"
          :placeholder="placeholderSelect"
          @change="operaGetProductSelect"
        >
        </ps-select>
        <ps-input
          class="sider-search"
          :placeholder="placeholder"
          v-model="productName"
          @input="operaGetProductList"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </ps-input>
      </div>
    </div>
    <div
      :class="['ps-sider-body', isPagination && 'is-pagination']"
      v-show="!sidebarClose"
    >
      <el-scrollbar style="height: 100%">
        <div class="ps-sider-body--item" v-for="item in data" :key="item.id">
          <div class="sider-more--list" v-if="item.list">
            <div
              :class="['more-title', defalutActiveStr == item.id && 'open']"
              @click="operaOpen(item)"
            >
              <ps-text>{{ item.name }}</ps-text>
              <i class="el-icon-arrow-down"></i>
            </div>
            <div class="more-body" v-if="defalutActiveStr == item.id">
              <div
                :class="[
                  'sider-more--only',
                  productId == vals.id && 'is-active',
                ]"
                @click="operaClickProduct(item, vals)"
                v-for="(vals, num) in item.list"
                :key="num"
              >
                <ps-text>{{ vals.name }}</ps-text>
              </div>
            </div>
          </div>
          <div
            :class="['sider-more--only', productId == item.id && 'is-active']"
            @click="operaClickProduct(item)"
            v-else
          >
            <div class="sider-tag">
              <ps-tag v-if="item.tag" v-model="item.tag"></ps-tag>
              <ps-text>{{ item.name }}</ps-text>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="ps-sider-footer" v-if="isPagination" v-show="!sidebarClose">
      <ps-pagination
        :pageObj="pageObj"
        layout="prev, pager, next"
        :pagerCount="5"
      ></ps-pagination>
    </div>
    <div class="ps-sidebar-close" @click="operaCloseSidebar">
      <i class="el-icon-caret-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "PsSidebar",
  props: {
    searchIcon: {
      type: String,
      default: null,
    },
    searchTitle: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    defalutActive: null,
    data: {
      type: Array,
      default: () => [],
    },
    isPagination: {
      type: Boolean,
      default: false,
    },
    pageObj: {
      type: Object,
      default: () => {},
    },
    defalutProps: {
      type: Object,
      default: () => {},
    },
    placeholderSelect: {
      type: String,
      default: "请选择",
    },
    selectArr: {
      type: Array,
      default: () => [],
    },
    defalutSeletActive: null,
  },
  data() {
    return {
      productSelect: null,
      productName: null,
      productId: null,
      defalutActiveStr: null,
      sidebarClose: false,
    };
  },
  created() {},
  mounted() {},
  //处理v-model语法糖的emit事件
  model: {
    prop: "defalutActive",
    event: "handler",
  },
  watch: {
    defalutActive: {
      handler(val) {
        if (val) {
          let valArr = val.split("-");
          if (valArr.length > 1) {
            this.defalutActiveStr = valArr ? valArr[0] : null;
            this.productId = valArr ? valArr[1] : null;
          } else {
            console.log(this.defalutActiveStr);
            this.productId = val;
            this.defalutActiveStr = val;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    operaInit(vals) {
      this.productSelect = vals;
    },
    operaCloseSidebar() {
      this.sidebarClose = !this.sidebarClose;
    },
    operaGetProductList() {
      this.$emit("search", this.productName);
    },
    operaGetProductSelect() {
      this.productName = null;
      this.$emit("select", this.productSelect);
    },
    operaClickProduct(item, child) {
      if (child) {
        this.defalutActiveStr = item.id;
        this.productId = child.id;
        this.$emit("handler", item.id);
        this.$emit("change", { parentId: item.id, ...child });
      } else {
        this.productId = item.id;
        this.$emit("change", item);
      }
    },
    operaOpen(item) {
      this.defalutActiveStr = item.id;
    },
  },
};
</script>

<style></style>
