<template>
  <div>
    <setActCode @submit="submit">
      <template #typeCode>
        <el-form-item label="活码类型" prop="hmType">
          <el-radio-group v-model="form.hmType" @change="changeEvent">
            <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">
          <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="clerkIdList">
          <p class="tabs" v-if="form.hmType == 1">单人活码仅可选择一名成员</p>
          <p class="tabs" v-if="form.hmType == 2">若选择多名成员，则随机分配企微员工</p>
          <!-- <el-button plain class="ylbtn"><i class="iconfont-components3 icon-cp-PlusOutlined addPic"></i>添加成员</el-button> -->
          <select-clerk :multiple="multiple" :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 { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  components: { setActCode, SelectClerk },
  data() {
    return {
      loading: false,
      form: {
        hmType: 1,
        name: '',
        clerkIdList: []
      },
      multiple: false
    };
  },
  created() {
    if (this.$route.query.hmId) {
      this.getActCodeInfo();
    }
  },
  methods: {
    onChange(data) {
      console.log(data);
      this.data = data.map(item => {
        return item.clerkName;
      });
      if (this.form.name == '') {
        this.form.name = this.data.toString();
      }
      console.log(this.data, 909);
    },
    async getActCodeInfo() {
      const that = this;
      if (this.$route.query.hmId) return;
      that.loading = true;
      await getRequest('/hm/qrcode/detail', { hmId: this.$route.query.hmId }).then(res => {
        console.log(res, 'detail');
        // let res = {
        //   data: {
        //     errorCode: 1,
        //     result: {
        //       name: '测试活码好的可以',
        //       hmId: '727363646474849483332',
        //       statusFlag: 1,
        //       overFlag: 1,
        //       hmType: 2,
        //       creatorName: '少见多怪',
        //       createTime: 182736347383,
        //       passFlag: 0,
        //       welcomeId: 'b680a2cf18b742cc9f4560f6195c9ec6',
        //       enterpriseId: '5bd929fd3b2c49deaa1184bcb0d669b3'
        //     }
        //   }
        // };
        let resData = res.data;
        that.loading = false;
        // if (resData.errorCode == 1) {
        //   that.statusIndex = resData.result.statusFlag == 1 && resData.result.overFlag == 1 ? 4 : resData.result.statusFlag;
        //   that.codeInfo = resData.result;
        //   return;
        // }
        errMsg.errorMsg(resData);
        // })
        // .catch(function(error) {
        //   that.$message.error({
        //     duration: 1000,
        //     message: error.message
        //   });
      });
    },
    submit(a) {
      console.log(a);
    },
    changeEvent(e) {
      if (e == 2) {
        this.multiple = true;
      } else if (e == 1) {
        this.multiple = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.ylbtn {
  border: 1px solid #2f54eb;
  color: #2f54eb;
}
.w340 {
  width: 340px;
}
</style>
