<template>
  <thead class="es-data-form-head">
    <tr v-for="(items, indexs) in thead">
      <th v-if="numbers" :colspan="thead.length">序号</th>
      <th v-for="(item, index) in items" :key="index">
        <expand-dom
          v-if="item.render"
          class="cell"
          :key="index"
          :item="item"
          :render="item.render"
        ></expand-dom>
        <div
          v-else
          class="cell"
          :class="{ 'es-required': required(item.rules) }"
        >
          {{ item.title || item.label || item.text }}
        </div>
      </th>
    </tr>
  </thead>
</template>
<script>
// import rules from 'eoss-ui/src/utils/rules.js';
//import util from 'eoss-ui/src/utils/util';
export default {
  name: 'EoThead',
  components: {
    expandDom: {
      functional: true,
      props: {
        item: Object,
        render: [Function, String]
      },
      render: (h, ctx) => {
        if (typeof ctx.props.render == 'string') {
          try {
            return util.toFunction(ctx.props.render)(h, params);
          } catch (error) {
            throw error;
          }
        }
        return ctx.props.render(h, ctx.props.item);
      }
    }
  },
  props: {
    numbers: Boolean,
    thead: Array
  },
  methods: {
    required(rules) {
      if (!rules) {
        return false;
      }
      if (Array.isArray(rules)) {
        for (let i = 0; i < rules.length; i++) {
          if (rules[i].required) {
            return true;
          }
        }
      }
      return rules.required;
    }
  }
};
</script>
