<template>
  <div class="es-data-form" :class="{ 'es-data-form-haspage': page }">
    <el-scrollbar class="es-scrollbar" :style="{ height: height }">
      <table
        class="es-data-table-form"
        border="1"
        cellspacing="0"
        cellpadding="0"
      >
        <eo-colgroup :cols="cols" :numbers="numbers"></eo-colgroup>
        <eo-thead :thead="thead" :numbers="numbers"></eo-thead>
        <eo-tbody
          :readonly="readonly"
          :numbers="numbers"
          :cols="cols"
          :data="data"
          :options="options"
        ></eo-tbody>
      </table>
    </el-scrollbar>
    <es-pagination
      v-if="page"
      v-bind="config"
      class="es-table-page"
      @change="sizeChange"
      @current="currentChange"
      @prev="preClick"
      @next="nextClick"
    ></es-pagination>
    <template v-if="types && options">
      <template v-for="(item, index) in types">
        <es-dialog
          v-if="item.type === 'selector' && selectorShow"
          :title="item.title || '公用选择器'"
          :visible.sync="selectorShow"
          :css="false"
          :append-to-body="true"
          :close-on-click-modal="false"
          class="es-selector-dialog"
        >
          <es-selector-panel
            v-model="selectorValue"
            v-bind="exclAttribute({ data: item, attrs: 'type' })"
            width="100%"
            height="100%"
            @confirm="handleConfirm"
          ></es-selector-panel>
        </es-dialog>
        <es-select
          v-else-if="item.type === 'select' && selectShow"
          class="es-data-table-form-handle"
          :suffix="false"
          v-bind="exclAttribute({ data: item, attrs: 'width' })"
          v-model="selectValue"
          ref="tableSelect"
          :style="styles"
          :data="options[item.field || item.prop]"
          @hide-menu="selectShow = false"
          @change="
            (value) => {
              handleChange('select', value);
            }
          "
        ></es-select>
        <es-date-picker
          v-else-if="
            (item.date ||
              item.type == 'date' ||
              item.type == 'year' ||
              item.type == 'month' ||
              item.type == 'date' ||
              item.type == 'dates' ||
              item.type == 'week' ||
              item.type == 'datetime' ||
              item.type == 'datetimerange' ||
              item.type == 'daterange' ||
              item.type == 'monthrange' ||
              item.type == 'quarter' ||
              item.type == 'halfyear') &&
            dateShow
          "
          class="es-data-table-form-handle"
          v-bind="exclAttribute({ data: item, attrs: 'width' })"
          v-model="dateValue"
          ref="tableDate"
          :style="styles"
          @hidePicker="dateShow = false"
          @change="
            (value) => {
              handleChange('date', value);
            }
          "
        ></es-date-picker>
      </template>
    </template>
  </div>
</template>
<script>
import util from 'eoss-ui/src/utils/util';
//import rules from 'eoss-ui/src/utils/rules.js';
import eoColgroup from './colgroup.vue';
import eoThead from './thead.vue';
import eoTbody from './tbody.vue';
export default {
  name: 'EoTable',
  inheritAttrs: false,
  components: {
    [eoColgroup.name]: eoColgroup,
    [eoThead.name]: eoThead,
    [eoTbody.name]: eoTbody
  },
  provide() {
    return {
      eoTable: this
    };
  },
  inject: {
    esDialog: {
      default: ''
    }
  },
  props: {
    height: String,
    readonly: Boolean,
    numbers: Boolean,
    data: Array,
    cols: Array,
    thead: Array,
    types: Array,
    options: Object,
    page: [Boolean, Object]
  },
  computed: {
    config() {
      let config = {
        pageNum: 1,
        pageSize: 20,
        totalCount: 0
      };
      return this.page && typeof this.page === 'boolean'
        ? config
        : { ...config, ...this.page };
    }
  },
  data() {
    return {
      selectValue: '',
      selectShow: false,
      target: null,
      field: null,
      styles: {},
      dateValue: '',
      dateShow: false,
      selectorShow: false,
      selectorValue: ''
    };
  },
  watch: {
    selectShow(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.tableSelect[0].toggleMenu();
        });
      }
    },
    dateShow(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.tableDate[0].showPicker();
        });
      }
    }
  },
  methods: {
    exclAttribute({ data, attrs }) {
      return util.exclAttribute({ data, attrs });
    },
    changeData(type, value) {
      switch (type) {
        case 'select':
          this.selectValue = value;
          this.selectShow = true;
          break;
        case 'date':
          this.dateValue = value;
          this.dateShow = true;
          break;
        case 'selector':
          this.selectorValue = value;
          this.selectorShow = true;
          break;
      }
    },
    setStyle(res, data, field) {
      let left = 0;
      let top = 0;
      if (this.esDialog) {
        let style = this.esDialog.getDialog().getBoundingClientRect();
        left = style.left;
        top = style.top;
      }
      this.styles.left = res ? res.left - left + 'px' : '';
      this.styles.top = res ? res.top - top + 'px' : '';
      this.styles.width = res ? res.width + 'px' : '';
      this.target = data;
      this.field = field;
    },
    handleBlur() {},
    handleChange(type, res) {
      this.target[this.field] = res;
      switch (type) {
        case 'select':
          this.selectShow = false;
          this.selectValue = '';
          break;
        case 'date':
          this.dateShow = false;
          this.dateValue = '';
          break;
      }
    },
    handleConfirm(res) {
      this.selectorValue = '';
      this.selectorShow = false;
      this.target[this.field] = res;
    },
    sizeChange() {},
    currentChange() {},
    preClick() {},
    nextClick() {}
  }
};
</script>
