<template>
  <div class="f-select">
    <Poptip
      title="Title"
      @on-popper-show="onShow"
      @on-popper-hide="onHide"
      style="width: 100%"
      transfer
      ref="pop"
      placement="bottom"
    >
      <div
        class="ivu-select ivu-select-single ivu-select-default"
        :class="{ 'ivu-select-visible': show }"
        style="width: 100%;"
      >
        <div tabindex="0" class="ivu-select-selection">
          <input type="hidden" />
          <div class="">
            <span class="ivu-select-selected-value" v-if="str">{{ str }}</span>
            <span class="ivu-select-placeholder" v-else>{{ placeholder }}</span>
            <Icon type="md-close" @click.stop="onClear" v-if="str"></Icon>
            <i class="ivu-icon ivu-icon-ios-arrow-down ivu-select-arrow"></i>
          </div>
        </div>
      </div>

      <div slot="content" :style="{ width: width }">
        <Table
          size="small"
          :data="list"
          :loading="loading"
          :columns="columns"
          :height="300"
          @on-row-dblclick="onSelect"
        ></Table>
        <div style="text-align: center;padding: 5px;">
          <Page
            @on-change="onPageChange"
            :current.sync="query.page"
            :total="total"
            size="small"
          ></Page>
        </div>
      </div>
      <div slot="title">
        <Input
          ref="input"
          clearable
          :placeholder="`请输入${filterName}查询`"
          v-model="search"
        />
      </div>
    </Poptip>
  </div>
</template>

<script>
import emitter from "../mixins/emitter";
export default {
  name: "f-select",
  mixins: [emitter],
  props: {
    placeholder: {
      type: String,
      default: "请选择"
    },
    value: {
      type: String
    },
    service: {
      type: Object
    },
    name: {
      type: String
    },
    client: {
      type: String,
      default: "iot"
    },
    columns: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: "100%"
    },
    field: {
      type: String
    },
    label: {
      type: String,
      default: null
    },
    filterName: {
      type: String
    },
    filterField: {
      type: String
    },
    where: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false,
      loading: false,
      list: [],
      total: 0,
      query: {
        limit: 10,
        page: 1,
        count: true
      },
      str: this.label,
      search: null
    };
  },
  watch: {
    search(v) {
      this.query[this.filterField] = v;
      this.getData();
    },
    label() {
      this.str = this.label;
    },
    value() {
      if (typeof value != "number" && !this.value) {
        this.str = "";
      }
    }
  },
  methods: {
    getData() {
      this.loading = true;
      this.$apollo
        .query({
          query: this.service,
          variables: {
            query: Object.assign(this.query, this.where)
          },
          client: this.client
        })
        .then(({ data }) => {
          this.list = this.transData(data[`${this.name.toLowerCase()}s`].data);
          this.total = data[`${this.name.toLowerCase()}s`].total;
          this.loading = false;
          this.$emit("update:data", this.list);
        });
    },
    onPageChange(page) {
      this.query.page = page;
      this.getData();
    },
    transData(data) {
      const list = [];
      data.forEach(row => {
        const item = JSON.parse(JSON.stringify(row));
        this.columns.forEach(column => {
          if (column.key) {
            if (column.transform) {
              item[column.key] = column.transform.call(this, row);
            } else {
              item[column.key] = row[column.key];
            }
          }
        });
        item._origin = row;
        list.push(item);
      });
      return list;
    },
    onShow() {
      this.show = true;
      this.getData();
      setTimeout(() => {
        this.$refs.input.focus();
      }, 400);
    },
    onHide() {
      this.show = false;
    },
    onSelect(row) {
      this.$emit("input", row.id);
      this.str = row[this.field];
      this.$refs.pop.visible = false;
      this.dispatch("FormItem", "on-form-change", row.id);
      this.$emit("on-change", row.id, row);
    },
    onClear() {
      this.$emit("input", null);
      this.str = null;
      this.dispatch("FormItem", "on-form-change", null);
      this.$emit("on-change", null, null);
    }
  }
};
</script>

<style lang="less">
.f-select {
  .ivu-poptip-rel,
  .ivu-poptip-popper {
    width: 100%;
  }

  .ivu-icon-md-close {
    position: absolute;
    right: 25px;
    top: 9px;
    font-size: 14px;
    cursor: pointer;
    color: #808695;
  }
}
</style>
