<template>
  <div class="tool-bar-wrap">
    <div class="tool-bar-item" v-show="showPickerSlots">
      <slot name="picker" />
    </div>
    <div class="tool-bar-item" v-for="(field, index) in text" :key="field">
      <p class="label">{{ label[index] }}</p>
      <a-input
        v-model:value="fields[field]"
        :placeholder="placeholder[index] ? placeholder[index] : label[index]"
      />
    </div>
    <slot />
    <div class="tool-bar-item btn-item">
      <a-button type="primary" :loading="loading" @click="onConfirm">
        <template #icon>
          <search-outlined />
        </template>
        搜索
      </a-button>
      <a-button type="primary" @click="reset" style="margin-left: 10px">
        <template #icon>
          <reload-outlined />
        </template>
        重置
      </a-button>
      <slot name="exbutton" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";

// TODO 可以考虑之后通过json生成
const ToolBar = defineComponent({
  components: {
    SearchOutlined,
    ReloadOutlined,
  },
  props: {
    text: {
      type: Object as PropType<string[]>,
      default: () => ref<string[]>([]),
    },
    label: {
      type: Object as PropType<string[]>,
      default: () => ref<string[]>([]),
    },
    placeholder: {
      type: Object as PropType<string[]>,
      default: () => ref<string[]>([]),
    },
    defaultVal: {
      type: Object,
      default: () => ({}),
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:loading", "confirm", "cancel"],
  setup(props, { emit, slots }) {
    let fields = ref<{ [key: string]: string }>({});
    let loading = ref(props.loading);
    let showPickerSlots = ref(!!slots.picker);

    props.text.forEach((field) => {
      fields.value[field] = "";
    });
    for (let v in props.defaultVal) {
      fields.value[v] = props.defaultVal[v];
    }
    watchEffect(() => (loading.value = props.loading));
    const onConfirm = () => {
      loading.value = true;
      emit("update:loading", loading.value);
      emit("confirm", fields.value);
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    };
    const returnFields = () => {
      return fields.value;
    };
    const reset = () => {
      props.text.forEach((field) => {
        fields.value[field] = "";
      });
      emit("cancel");
    };
    return { fields, showPickerSlots, loading, onConfirm, reset, returnFields };
  },
});

export default ToolBar;
</script>

<style lang="scss">
.tool-bar-wrap {
  @include flex($space: flex-start, $align: flex-end);
  flex-flow: row wrap;
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: 10px;

  .tool-bar-item {
    width: 22%;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    padding: 10px 15px;
    .label {
      text-align: left;
      margin-bottom: 5px;
    }

    &.tool-bar-range-item {
      width: 30%;
    }
  }
  .btn-item {
    width: 30%;
  }
  .ant-btn {
    margin-right: 10px;
  }
}
</style>
