<template>
  <audit-advanced-group :group-label="groupLabel" :count-label="countLabel">
    <template>
      <table v-show="show" style="width:100%">
        <tr v-for="n in parseInt(keyOptions.length / cols + (keyOptions.length % cols))" :key="n">
          <td class="ant-form-item-label ant-form-item-label">
            <label :title="getLabel(keyOptions[(n - 1) * cols])">
              {{ getLabel(keyOptions[(n - 1) * cols]) }}
            </label>
          </td>
          <td class="ant-form-item-control-wrapper">
            <template v-if="!readOnly">
              <a-input
                v-model="keyOptions[(n - 1) * cols][optValue]"
                @change="formatInputVal1(n, cols, optValue)"
              ></a-input>
            </template>
            <template v-if="readOnly">
              {{ keyOptions[(n - 1) * cols][optValue] }}
            </template>
          </td>
          <template v-if="keyOptions[(n - 1) * cols + 1]">
            <td class="ant-form-item-label ant-form-item-label">
              <label :title="getLabel(keyOptions[(n - 1) * cols + 1])">
                {{ getLabel(keyOptions[(n - 1) * cols + 1]) }}
              </label>
            </td>
            <td class="ant-form-item-control-wrapper">
              <template v-if="!readOnly">
                <a-input
                  v-model="keyOptions[(n - 1) * cols + 1][optValue]"
                  @change="formatInputVal2(n, cols, optValue)"
                ></a-input>
              </template>
              <template v-if="readOnly">
                {{ keyOptions[(n - 1) * cols + 1][optValue] }}
              </template>
            </td>
          </template>
        </tr>
      </table>
    </template>
  </audit-advanced-group>
</template>

<script>
import auditAdvancedGroup from '../../../../components/audit-advanced-group.vue'
export default {
  name: 'ChildTableInput',
  components: {
    auditAdvancedGroup,
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    keyOptions: {
      type: Array,
      default: function() {
        return []
      },
    },
    keyDic: {
      type: Array,
      default: function() {
        return []
      },
    },
    cols: {
      type: Number,
      default: 2,
    },
    optTitle: {
      type: String,
      default: 'name',
    },
    optLabel: {
      type: String,
      default: 'name',
    },
    groupLabel: {
      type: String,
      default: '',
    },
    optValue: {
      type: String,
      default: 'value',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    groupSumTemplate: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  amount() {},
  computed: {
    countLabel: function() {
      if (this.groupSumTemplate) {
        let count = 0
        this.keyOptions.forEach((item) => {
          if (item[this.optValue]) count = count + parseFloat(item[this.optValue], 10)
        })
        if (!isNaN(count)) {
          return this.groupSumTemplate.replace('{{sum}}', count.toString())
        }
        return ''
      } else {
        return ''
      }
    },
  },
  methods: {
    getLabel(item) {
      if (this.keyDic.length !== 0) {
        const keyItem = this.keyDic.find((dicItem) => {
          return dicItem.value === item[this.optLabel]
        })
        if (keyItem) return keyItem.label
      }
    },
    formatInputVal1(n, cols, optValue) {
      const val = this.keyOptions[(n - 1) * cols][optValue]
      // 校验是否输入数字
      if (val && !isNaN(val)) {
        this.keyOptions[(n - 1) * cols][optValue] = parseFloat(val) + ''
      } else {
        this.keyOptions[(n - 1) * cols][optValue] = ''
      }
    },
    formatInputVal2(n, cols, optValue) {
      const val = this.keyOptions[(n - 1) * cols + 1][optValue]
      // 校验是否输入数字
      if (val && !isNaN(val)) {
        this.keyOptions[(n - 1) * cols + 1][optValue] = parseFloat(val) + ''
      } else {
        this.keyOptions[(n - 1) * cols + 1][optValue] = ''
      }
    },
  },
}
</script>
