<!--
descript: 单选组件
author: jankergg
param: props
methods:
seledcheck: 用于选择默认值 传入一个索引数即可
-->
<template>
  <div class="za-sex">
    <div class="root-select-mask" v-if="isReadOnly"></div>
    <div class="za-sex-box" :class="{dis: isReadOnly}">
      <div class="male" :class="{seled: innerValue === options[0].value}" @click="onClick(options[0].value)">{{options[0].name}}</div>
      <div class="famale" :class="{seled: innerValue === options[1].value}" @click="onClick(options[1].value)">{{options[1].name}}</div>
    </div>
  </div>
</template>
<script>
import rootSelectMx from '../mixin/check-mixin'

export default {
  name: 'za-sex',
  mixins: [rootSelectMx],
  props: ["formModel", "name", "index"],
  watch: {
    innerValue: {
      deep: true,
      handler (v) {
        this.onChange(v)
      }
    }
  },
  data(){
    return {
      options: [{value: 'M', name: '男'}, {value: 'F', name: '女'}]
    }
  },
  created(){
    this.options = this.$optionList
  },
  computed: {
    $optionList: {
      get(){
        let rules = this.formModel.rules
        const defaultOpt = [{value: 'M', name: '男'}, {value: 'F', name: '女'}]
        if (!rules.options) {
          return defaultOpt
        }
        if (!Array.isArray(rules.options)){
          console.error('rule.options 应该是一个数组')
          return defaultOpt
        }
        if (Array.isArray(rules.options[0])){
          if (rules.options[0].length !== 2) {
            console.error('性别rule.options长度必须为2')
            return defaultOpt
          }
          return rules.options[0]
        }
        if (rules.options.length !== 2) {
          console.error('性别rule.options长度必须为2')
          return defaultOpt
        }
        return rules.options
      }
    }
  },
  methods: {
    onClick (v) {
      this.onCheck(v)
      this.innerValue = v
    }
  }
}
</script>
<style lang='less'>
  @import '../../../../assets/styles/form.less';
</style>
