<template>
  <div class="ws-crud-filter pa-5">
    <WsLineGroup>
      <WsSearchInput
        ref="searchInput"
        v-model="C_searching"
        @submit="$_onSearchSubmit()"
        placeholder="搜尋..."
      ></WsSearchInput>
      <slot name="filterSelects"></slot>
      <!-- <WsStateSelect
        v-for="(filter,filterKey) in filters"
        :key="filterKey"
        placeholder="排序方式"
        v-model="orderBy"
        :items="orderByItems"
      ></WsStateSelect> -->
      <!-- <WsStateSelect
        placeholder="排序方式"
        v-model="orderBy"
        :items="orderByItems"
      ></WsStateSelect>
      <WsStateSelect
        placeholder="排序方式"
        v-model="orderBy"
        :items="orderByItems"
      ></WsStateSelect>
      <WsStateSelect
        placeholder="排序方式"
        v-model="orderBy"
        :items="orderByItems"
      ></WsStateSelect> -->
    </WsLineGroup>
    <WsBtn @click="$_onSearchClick()">搜尋</WsBtn>
    <WsBtn
      @click="$_onClearClick()"
      outlined
    >清除</WsBtn>
    <WsStateSelect
      placeholder="排序方式"
      :value="_orderValue"
      @input="$_onSelectChange($event)"
      :items="C_orderItems"
      round
      evevate
    ></WsStateSelect>
  </div>
</template>

<script>
export default {
  data: () => ({
    C_searching: "",
    C_orderItems: [
      {
        value: "order_by=updated_at&order_way=desc",
        text: "最近更新"
      },
      {
        value: "order_by=created_at&order_way=desc",
        text: "最新建立"
      },
      {
        value: "order_by=sequence&order_way=asc",
        text: "排序欄位"
      }
      // {
      //   value: "order_by=created_at&&order_way=desc",
      //   text: "最新上傳"
      // },
    ]
  }),
  props: {
    searching: {
      type: String,
      default: ""
    },
    orderBy: {
      type: String,
      default: "updated_at"
    },
    orderWay: {
      type: String,
      default: "desc"
    },
    // filters: {
    //   type: Array,
    //   default() {
    //     return [];
    //   }
    // },
    orderItems: {
      type: Array,
      default: null
    }
  },
  mounted() {
    if (this.searching) {
      this.C_searching = this.searching;
    }
  },
  watch: {
    searching: {
      handler() {
        this.C_searching = this.searching;
      }
    }
  },
  computed: {
    _orderValue() {
      const orderBy = this.orderBy ? this.orderBy : "updated_at";
      const orderWay = this.orderWay ? this.orderWay : "desc";
      return `order_by=${orderBy}&order_way=${orderWay}`;
    }
  },
  methods: {
    $_getOrderQuerys(order) {
      const orderQuerys = {
        order_way: "",
        order_by: ""
      };
      const orderArr = order.split("&");
      orderArr.forEach(orderItem => {
        const orderItemArr = orderItem.split("=");
        if (orderItemArr[0] in orderQuerys) {
          orderQuerys[orderItemArr[0]] = orderItemArr[1];
        }
      });
      return orderQuerys;
    },
    $_onSelectChange($event) {
      const orderQuerys = this.$_getOrderQuerys($event);
      this.$emit("update:orderBy", orderQuerys.order_by);
      this.$emit("update:orderWay", orderQuerys.order_way);
    },
    $_keyupHandler() {
    },
    $_keydownHandler() {
    },
    getValue() {
      return {
        search: this.searching,
        order: this.order
      };
    },
    $_onSearchSubmit() {
      this.$emit("update:searching", this.C_searching);
    },
    $_onClearClick() {
      this.C_searching = "";
      this.$_onSearchSubmit();
    },
    $_onSearchClick() {
      this.$emit("search", {
        search: this.searching,
        order: this.order
      });
    }
  }
  // created() {
  //   window.addEventListener("keyup", this.$_keyupHandler);
  //   window.addEventListener("keydown", this.$_keydownHandler);
  // },
  // beforeDestroy() {
  //   window.removeEventListener("keyup", this.$_keyupHandler);
  //   window.removeEventListener("keydown", this.$_keydownHandler);
  // }
};
</script>

<style>
</style>