<template>
  <div>
    <Modal v-model="showModal">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Radio-group v-model="formType" size="large" vertical @on-change="_radioChange">
          <Radio v-for="(item,index) in formTypeList" :key="index" :label="item" label-in-value>{{item.name}}</Radio>
        </Radio-group>
      </div>
      <div slot="footer" class="btn-width">
        <Button type="default" @click="_cancel">取消</Button>
        <Button type="primary" @click="_ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
/*
* 查看该按钮是否有表单（一个按钮可以绑定多个表单）
* */
export default {
  data() {
    return {
      modalTitle: '选择表单类型',
      showModal: false,
      formType: '',
      formTypeList: [], // 表单数组
      btnName: '' // 按钮名称
    }
  },
  methods: {
    _open(btnName, formList) {
      this.showModal = true
      this.btnName = btnName
      this.formTypeList = formList
      this.$nextTick(() => {
        // 这样能回显上数据
        this.formType = formList[0]
      })
    },
    _cancel() {
      this.showModal = false
    },
    _ok() {
      this.$emit('on-result-change', {
        name: this.btnName,
        formType: this.formType
      })
      this._cancel()
    },
    _radioChange(data) {
      this.formType = data
    }
  }
}
</script>
