<template>
  <div>
    <setActCode ref="setActCodePage" @sumbit="onSubmit" :actCodeData="detailCode">
      <template #typeCode>
        <el-form-item label="活码类型" :rules="[{ required: true, message: '请选择活码类型', trigger: 'blur' }]">
          <el-radio-group v-model="form.hmType" @change="changeEvent" :disabled="$route.query.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="活码名称" :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="关联导购" :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 :multiple="multiple" :data="data" @change="onChange" :disabled="clerkDisabled"></select-clerk>
        </el-form-item>
      </template>
    </setActCode>
    <div v-if="showMark" class="mark"></div>
  </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 {
      showMark: false,
      loading: false,
      form: {
        hmType: 1,
        name: '',
        clerkIdList: [],
        hmUserNum: null //多人活码人数
      },
      multiple: false,
      data: [],
      dataArr: [],
      detailCode: [],
      clerkDisabled: false
    };
  },
  created() {
    if (this.$route.query.hmId) {
      this.getActCodeInfo();
    }
  },
  methods: {
    changeEvent(e) {
      this.data = [];
      this.dataArr = [];
      if (e == 2) {
        this.multiple = true;
        this.clerkDisabled = false;
      } else if (e == 1) {
        this.multiple = false;
      }
    },
    onChange(data) {
      this.data = data;
      this.form.hmUserNum = data.length;
      this.form.clerkIdList = data.map(item => {
        return item.clerkId;
      });
      this.dataArr = data.map(item => {
        return item.clerkName;
      });
      if (this.form.name == '') {
        this.form.name = this.dataArr.toString();
      }
    },
    async getActCodeInfo() {
      const that = this;
      that.loading = true;
      if (this.$route.query.hmId) {
        await getRequest('/haoban-manage3-web/hm/qrcode/detail', { hmId: this.$route.query.hmId }).then(res => {
          this.detailCode = res.data.result;
          this.form.hmType = this.detailCode.hmType;
          this.form.name = this.detailCode.name;
          this.form.clerkIdList = this.detailCode.clerkList.map(i => i.clerkId);
          this.form.hmUserNum = this.form.clerkIdList.length;
          this.data = this.detailCode.clerkList;
          if (this.form.hmType == 1) {
            this.clerkDisabled = true;
            this.multiple = false;
          } else if (this.form.hmType == 2) {
            this.multiple = true;
            this.clerkDisabled = false;
          }
          that.loading = false;
        });
      }
    },
    async onSubmit(event) {
      let obj = {
        ...event,
        ...this.form
      };
      obj.passFlag = obj.passFlag ? 1 : 0;
      if (this.$route.query.hmId) {
        obj = {
          ...obj,
          hmId: this.$route.query.hmId
        };
        // 编辑
        await 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.showMark = false;
              this.form = {
                hmType: 1,
                name: '',
                clerkIdList: [],
                hmUserNum: null //多人活码人数
              };
            }, 1000);
          } else {
            this.$refs.setActCodePage.btnLoading = false;
            this.showMark = false;
            return this.$message.error(res.data.message);
          }
        });
      } else {
        // 新增
        await postJsonRequest('/haoban-manage3-web/hm/qrcode/add', obj).then(res => {
          if (res.data.code == 0) {
            setTimeout(() => {
              this.$route.meta.refresh = true;
              this.showMark = false;
              this.$refs.setActCodePage.btnLoading = false;
              this.$router.go(-1);
              this.form = {
                hmType: 1,
                name: '',
                clerkIdList: [],
                hmUserNum: null //多人活码人数
              };
            }, 1000);
          } else {
            this.showMark = false;
            this.$refs.setActCodePage.btnLoading = 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;
}
.mark {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 99;
}
</style>
