<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" @change="radioChange">
            <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,
        // name: '',
        clerkIdList: [],
        memberType: 1,
        hmUserNum: null
      },
      data: [],
      storeClerkList: [],
      dataArr: []
    };
  },
  created() {
    this.getStoreClerkList();
  },
  methods: {
    radioChange(e) {
      if (e == 1) {
        this.form.clerkIdList = ['-1'];
        this.data = [];
      }
    },
    // 获取全部成员个数
    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;
        });
        let sum = 0;
        this.storeClerkList.forEach(item => {
          sum = sum + item;
        });
        this.hmMemberNum = sum;
      });
    },
    onChange(data) {
      this.data = data;
      this.form.clerkIdList = data;
      this.form.hmUserNum = data.length;
      // this.dataArr = data.map(item => {
      //   return item.clerkName;
      // });
      // if (this.form.name == '') {
      //   this.form.name = this.dataArr.toString();
      // }
    },
    async onSubmit(event) {
      let obj = {
        ...event,
        ...this.form
      };
      await postJsonRequest('/haoban-manage3-web/hm/qrcode/addList', obj).then(res => {
        if (res.data.code == 0) {
          this.form = {
            hmType: 1,
            clerkIdList: [],
            hmUserNum: null //多人活码人数
          };
          this.$router.go(-1);
        } else {
          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;
  span {
    color: #909399;
  }
}
</style>
