<template>
  <div>
    <setActCode ref="setActCodePage" :actCodeData="form" @sumbit="onSubmit">
      <template #typeCode>
        <el-form-item label="活码类型" :rules="[{ required: true, message: '请选择活码类型', trigger: 'blur' }]">
          <el-radio-group v-model="form.hmType" @change="onTypeChange" :disabled="!!form.hmId">
            <el-radio :label="1">单人活码</el-radio>
            <el-radio :label="2">多人活码</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #codeName>
        <el-form-item label="活码名称" prop="name" :rules="[{ required: true, message: '请输入活码名称', trigger: 'blur' }]">
          <el-input class="w340" v-model="form.name" placeholder="请输入活码名称，默认使用成员名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
      </template>
      <template #member>
        <el-form-item label="关联导购" prop="clerkList" :rules="[{ required: true, message: '请选择使用成员', trigger: 'blur' }]">
          <p class="tabs" v-if="form.hmType == 1">单人活码仅可选择一名成员</p>
          <p class="tabs" v-if="form.hmType == 2">若选择多名成员，则随机分配企微员工</p>
          <select-clerk :is-simple="form.hmType == 1" :multiple="form.hmType == 2" :data="form.clerkList" @change="onChange" :disabled="form.hmType == 1 && !!form.hmId"></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 { getRequest, postJsonRequest } from '@/api/api';
export default {
  components: { setActCode, SelectClerk },
  data() {
    return {
      loading: false,
      form: {
        hmId: '',
        hmGroupId: '',
        passFlag: 1,
        welcomeId: '',
        hmType: 1,
        name: '',
        memberLabelId: '',
        memberLabelName: '',
        memberLabelStatus: -1,
        clerkList: [],
        welcomeType: 1,
        hmUserNum: null //多人活码人数
      }
    };
  },
  created() {
    if (this.$route.query.hmId) {
      this.form.hmId = this.$route.query.hmId;
      this.getActCodeInfo();
    }
  },
  methods: {
    onTypeChange() {
      this.form.name = '';
      this.form.clerkList = [];
      this.form.hmUserNum = 0;
    },
    onChange(data) {
      this.form.hmUserNum = data.length;
      this.form.clerkList = data;
      if (this.form.name == '') {
        this.form.name = data
          .map(el => el.clerkName)
          .toString()
          .slice(0, 20);
      }
      this.$nextTick(() => {
        this.$refs.setActCodePage.getForm().validateField(['name', 'clerkList']);
      });
    },
    getActCodeInfo() {
      this.loading = true;
      getRequest('/haoban-manage3-web/hm/qrcode/detail', { hmId: this.form.hmId })
        .then(res => {
          this.form = res.data.result;
          if (this.form.welcomeId) {
            this.form.welcomeType = 1;
          } else {
            this.form.welcomeType = 2;
          }
          this.form.hmUserNum = this.form.clerkList.length;
        })
        .finally(() => (this.loading = false));
    },
    onSubmit(event) {
      let obj = {
        ...event,
        ...this.form
      };
      obj.clerkIdList = obj.clerkList.map(el => el.clerkId);
      if (this.form.hmId) {
        // 编辑
        postJsonRequest('/haoban-manage3-web/hm/qrcode/update', obj).then(res => {
          if (res.data.code == 0) {
            setTimeout(() => {
              this.$router.go(-1);
              this.$refs.setActCodePage.btnLoading = false;
              this.$refs.setActCodePage.saveLoading = false;
            }, 1000);
          } else {
            this.$refs.setActCodePage.btnLoading = false;
            this.$refs.setActCodePage.saveLoading = false;
            return this.$message.error(res.data.message);
          }
        });
      } else {
        // 新增
        postJsonRequest('/haoban-manage3-web/hm/qrcode/add', obj).then(res => {
          if (res.data.code == 0) {
            setTimeout(() => {
              this.$route.meta.refresh = true;
              this.$refs.setActCodePage.btnLoading = false;
              this.$refs.setActCodePage.saveLoading = false;
              this.$router.go(-1);
            }, 1000);
          } else {
            this.$refs.setActCodePage.btnLoading = false;
            this.$refs.setActCodePage.saveLoading = false;
            return this.$message.error(res.data.message);
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.ylbtn {
  border: 1px solid #2f54eb;
  color: #2f54eb;
}
.w340 {
  width: 340px;
}
.tabs {
  font-size: 12px;
  color: #909399;
}
</style>
