<template>
  <div>
    <setActCode @sumbit="onSubmit">
      <template #typeCode>
        <el-form-item label="活码类型" :rules="[{ required: true, message: '请选择活码类型', trigger: 'blur' }]">
          <el-radio-group v-model="form.hmType">
            <el-radio :label="1">单人活码</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #member>
        <el-form-item label="使用成员" :rules="[{ required: true, message: '请选择使用成员', trigger: 'blur' }]">
          <el-radio-group v-model="form.memberType">
            <el-radio :label="1">全部成员</el-radio>
            <el-radio :label="2">部分成员</el-radio>
          </el-radio-group>
          <br />
          <select-clerk v-if="form.memberType == 2" :multiple="false" :data="data" @change="onChange"></select-clerk>
        </el-form-item>
      </template>
    </setActCode>
  </div>
</template>

<script>
import setActCode from '@/views/salesleads/components/actCodeSet.vue';
import SelectClerk from '../../components/select-clerk/index.vue';
import { postJsonRequest } from '@/api/api';
export default {
  components: { setActCode, SelectClerk },
  data() {
    return {
      form: {
        hmType: 1,
        clerkIdList: [],
        memberType: 1,
        hmUserNum: null
      },
      data: []
    };
  },
  methods: {
    onChange(data) {
      this.data = data;
      this.form.clerkIdList = data;
      this.form.hmUserNum = data.length;
    },
    async onSubmit(event) {
      let obj = {
        ...event,
        ...this.form
      };
      await postJsonRequest('/haoban-manage3-web/hm/qrcode/add', obj).then(res => {
        console.log(res);
      });
      console.log(obj, '父组件，整体表单数据');
      // this.$refs.form.clearValidate();
      this.form = {
        hmType: 1,
        clerkIdList: [],
        hmUserNum: null //多人活码人数
      };
    }
  }
};
</script>
<style lang="less" scoped>
.ylbtn {
  margin-top: 10px;
  border: 1px solid #2f54eb;
  color: #2f54eb;
}
</style>
