<template>
  <div>
    <setActCode :actCodeData="form" @sumbit="onSubmit" ref="setActCodePage">
      <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="memberType" @change="radioChange">
            <el-radio :label="1">全部成员</el-radio>
            <el-radio :label="2">部分成员</el-radio>
          </el-radio-group>
          <br />
          <p v-if="memberType == 1" class="tips">当前已选择 {{ hmMemberNum }} 个成员 <span>(活码名称默认为使用成员名称)</span></p>
          <select-clerk style="margin-top: 12px;" v-if="memberType == 2" :is-simple="true" :multiple="true" :data="form.clerkList" @change="onChange"></select-clerk>
        </el-form-item>
      </template>
    </setActCode>
  </div>
</template>

<script>
import setActCode from '@/views/salesleads/components/act-code-set.vue';
import SelectClerk from '../../components/select-clerk/index.vue';
import { postJsonRequest, getRequest } from '@/api/api';
export default {
  components: { setActCode, SelectClerk },
  data() {
    return {
      hmMemberNum: 0,
      form: {
        hmId: '',
        hmGroupId: '',
        passFlag: 1,
        welcomeId: '',
        hmType: 1,
        name: '',
        memberLabelId: '',
        memberLabelName: '',
        memberLabelStatus: -1,
        clerkList: [],
        welcomeType: 1,
        hmUserNum: null //多人活码人数
      },

      memberType: 1
    };
  },
  created() {
    this.getClerkNum();
  },
  methods: {
    radioChange(e) {
      if (e == 1) {
        this.form.clerkList = [];
        this.form.hmUserNum = 0;
      }
    },
    getClerkNum() {
      getRequest('/haoban-manage3-web/hm/qrcode/getAddCount', {}).then(res => {
        if (res.data.code == 0) {
          this.hmMemberNum = res.data.result || 0;
        }
      });
    },
    onChange(data) {
      this.form.clerkList = data;
      this.form.hmUserNum = data.length;
    },
    onSubmit(event) {
      if (this.memberType == 1) {
        this.form.clerkIdList = ['-1'];
        this.form.hmUserNum = this.hmMemberNum;
      }
      let obj = {
        ...event,
        ...this.form
      };
      obj.clerkIdList = obj.clerkList.map(el => el.clerkId);
      postJsonRequest('/haoban-manage3-web/hm/qrcode/addList', obj).then(res => {
        if (res.data.code == 0) {
          setTimeout(() => {
            this.$route.meta.refresh = true;
            this.$refs.setActCodePage.saveLoading = false;
            this.$router.go(-1);
          }, 1000);
        } else {
          this.$refs.setActCodePage.saveLoading = false;
          return this.$message.error(res.data.message);
        }
      });
    }
  }
};
</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;
  margin-top: 12px;
  font-size: 14px;
  span {
    color: #909399;
  }
}
</style>
