<template>
  <div class="honjo-form-render-selectbox_container">
    <span class="honjo-form-render-selectbox_label">{{def.label}}</span>
    <el-col :span="6" v-for="data in value" :key="data._seq_key || (data._seq_key = genKey())" class="honjo-form-render-selectbox__row">
      <el-form-item  label-width="0">
        <el-checkbox v-model="data.checked" :label="data.label" name="type"></el-checkbox>
      </el-form-item>
      <span style="">/</span>
      <el-form-item label-width="0" style="width:78px">
        <el-select  v-model="data.autoSign"  placeholder="请选择签署类型">
          <el-option label="手动签" value="0"></el-option>
          <el-option label="自动签" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <div v-if="options.itemTips" class="itemTips">{{options.itemTips}}</div>
  </div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FormDef, FormOptions, SelectboxDef, SelectboxOptions } from '../../type'
import FieldMixins from './FieldMixins'

let index = 1

@Component({
  components: {
    'form-control': () => import('../index.vue')
  }
})
export default class TableControl extends mixins(FieldMixins) {
  @Inject() exists!: (row: any, rowForm?: Record<string, any>) => boolean

  get options () {
    return Object.assign(new SelectboxOptions(), this.def?.options)
  }

  genKey () {
    return Date.now() + '_' + index++
  }

  def!: SelectboxDef
}
</script>
