<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 />
          <p v-if="form.memberType == 1" class="tips">当前已选择 {{ hmMemberNum }} 个成员 <span>(活码名称默认为使用成员名称)</span></p>
          <select-clerk v-if="form.memberType == 2" :multiple="true" :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, getRequest } from '@/api/api';
export default {
  components: { setActCode, SelectClerk },
  data() {
    return {
      hmMemberNum: 103,
      form: {
        hmType: 1,
        clerkIdList: [],
        memberType: 1,
        hmUserNum: null
      },
      data: [],
      storeClerkList: []
    };
  },
  created() {
    this.getStoreClerkList();
  },
  methods: {
    getStoreClerkList() {
      getRequest('/haoban-manage3-web/hm/store-clerk-list', { pageNum: 1, pageSize: 20 }).then(res => {
        const { code, message, result } = res.data || {};
        if (code != 0) {
          return this.$message.error(message);
        }
        result.result = Array.isArray(result.result) ? result.result : [];
        this.storeClerkList = result.result.map(el => {
          el.clerkList = Array.isArray(el.clerkList) ? el.clerkList : [];
          // 设置导购的禁用状态和选中状态
          return el.clerkList.length;
        });
        console.log(this.storeClerkList, 'this.storeClerkList');
      });
    },
    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;
}
.damolish .el-form-item__content {
  line-height: 30px;
}
.tips {
  color: #303133;
  span {
    color: #909399;
  }
}
</style>
