<template>
  <el-button @click="tabs = !tabs">转化</el-button><br /><br />
  <avue-form
    @tab-click="handleTabClick"
    :option="option"
    v-model="form"
    @submit="handleSubmit"
  >
    <template #group1Header>
      <h4>自定义表头</h4>
    </template>
  </avue-form>
</template>
<script>
export default {
  data() {
    return {
      tabs: true,
      form: {
        text: "文本",
        text1: "文本1",
        text2: "文本2",
        text3: "文本3"
      }
    };
  },
  computed: {
    option() {
      return {
        tabs: this.tabs,
        tabsActive: 1,
        column: [
          {
            label: "类型",
            prop: "type",
            dataType: "string",
            type: "radio",
            display: false,
            value: "1",
            dicData: [
              {
                label: "类型0",
                value: "0"
              },
              {
                label: "类型1",
                value: "1"
              },
              {
                label: "类型2",
                value: "2"
              }
            ],
            rules: [
              {
                required: true,
                message: "请选择类型",
                trigger: "blur"
              }
            ],
            control: val => {
              if (val == "0") {
                return {
                  type1: {
                    display: false
                  },
                  type2: {
                    display: false
                  }
                };
              } else if (val == "1") {
                return {
                  type1: {
                    display: true
                  },
                  type2: {
                    display: false
                  }
                };
              } else if (val == "2") {
                return {
                  type1: {
                    display: false
                  },
                  type2: {
                    display: true
                  }
                };
              }
            }
          },
          {
            label: "类型1",
            prop: "type1",
            dataType: "number",
            display: false,
            rules: [
              {
                required: true,
                message: "请选择类型1",
                trigger: "blur"
              }
            ]
          },
          {
            label: "类型 2",
            prop: "type2",
            dataType: "number",
            display: false,
            rules: [
              {
                required: true,
                message: "请选择类型2",
                trigger: "blur"
              }
            ]
          }
        ],
        group: [
          {
            icon: "el-icon-info",
            label: "分组1",
            prop: "group1",
            column: [
              {
                label: "类型",
                type: "radio",
                prop: "type"
              },
              {
                label: "类型1",
                prop: "type1"
              },
              {
                label: "类型2",
                prop: "type2"
              }
            ]
          },
          {
            icon: "el-icon-info",
            label: "分组2",
            prop: "group2",
            column: [
              {
                label: "选项卡2",
                prop: "text2"
              },
              {
                label: "选项卡3",
                prop: "text3"
              }
            ]
          }
        ]
      };
    }
  },
  methods: {
    handleSubmit(form) {
      this.$message.success(JSON.stringify(this.form));
      setTimeout(() => {
        done();
      }, 2000);
    },
    handleTabClick(tabs, event) {
      console.log(tabs);
      console.log(event);
      this.$message.success("序号为:" + tabs.index);
    }
  }
};
</script>