<template>
  <div>
    <div class="m20 formBox">
      <dm-sub-title text="基础信息" type="line" />
      <el-form class="mt20" ref="form" :model="form" :rules="rules" label-width="110px">
        <slot name="typeCode"></slot>
        <slot name="codeName"></slot>
        <el-form-item label="活码分组" prop="hmGroupId">
          <el-select class="w340" v-model="form.hmGroupId" v-loadmore="onLoadmore" clearable remote filterable :remote-method="remoteMethod">
            <el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId"></el-option>
          </el-select>
        </el-form-item>
        <slot name="member"></slot>
        <el-form-item label="自动通过好友">
          <el-switch v-model="form.passFlag" class="mr15"></el-switch>
          <span class="tabs">开启后，客户添加该企业微信时，无需好友验证，将会自动添加成功</span>
        </el-form-item>
        <el-form-item label="活码标签" prop="memberLabelId">
          <el-button v-if="!form.memberLabelId" plain class="ylbtn" @click="tagsDialogVisible = true"><i class="iconfont-components3 icon-cp-PlusOutlined addPic"></i>添加标签</el-button>
          <el-tag v-else closable @close="handleTagCloseTag">{{ form.memberLabelName }}</el-tag>
          <dm-memberTag-group :visiable.sync="tagsDialogVisible" projectName="haobao-3" @save="saveTagPop"></dm-memberTag-group>
        </el-form-item>
        <dm-sub-title text="欢迎语设置" type="line" class="mt40b20" />
        <welcomeItem @getWelcomeId="getWelcomeId" :welcomeIdP="form.welcomeId" ref="welcomeItem"></welcomeItem>
      </el-form>
    </div>
    <div class="saveBtn">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import welcomeItem from '@/views/salesleads/components/welcomesItem.vue';
import { getRequest } from '@/api/api';
export default {
  name: 'setActCode',
  directives: {
    loadmore: {
      inserted(el, binding) {
        const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTDOWN_DOM.addEventListener('scroll', function() {
          const CONDITION = this.scrollHeight + this.scrollTop >= this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        });
      }
    }
  },
  components: { welcomeItem },
  props: {
    actCodeData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {
        // hmType: 1, //1单人 2多人
        // name: '', // 名称
        hmGroupId: '', //活码分组id
        passFlag: true, // 1自动通过 0否
        memberLabelId: '', //会员活动标签id
        memberLabelName: '',
        welcomeId: '' // 欢迎语id
        // clerkIdList: '', // 选择导购id
        // storeId: '' //门店id
        // hmUserNum: null //多人活码人数
      },
      rules: {
        hmGroupId: [{ required: true, message: '请选择活码分组', trigger: 'blur' }]
      },
      tagsDialogVisible: false,
      // 分组参数
      pageParam: {
        groupName: '',
        pageNum: 1,
        pageSize: 20
      },

      total: 1,
      groupList: []
    };
  },
  created() {
    this.searchGroup();
    console.log(this.form, 400);
  },
  methods: {
    handleTagCloseTag() {
      this.form.memberLabelName = '';
      this.form.memberLabelId = '';
    },
    saveTagPop(data) {
      console.log(data, 'tagItemId');
      const { tagItemId, tagItemName } = data;
      this.form.memberLabelId = tagItemId;
      this.form.memberLabelName = tagItemName;
    },
    onLoadmore() {
      if (this.pageParam.pageNum >= this.total) return;
      this.pageParam.pageNum++;
      this.searchGroup();
    },
    async searchGroup() {
      if (this.pageParam.pageNum == 1) {
        this.groupList = [];
      }
      await getRequest('/haoban-manage3-web/hm/group/list', this.pageParam).then(res => {
        if (res.data.code == 0) {
          const { result, pages } = res.data.result || {};
          this.total = pages || 1;
          if (this.pageParam.groupName != '') {
            this.groupList = result;
          } else if (Array.isArray(result)) {
            this.groupList = this.groupList.concat(result);
          }
        }
      });
    },
    // 远程搜索
    remoteMethod(query) {
      if (query !== '') {
        this.pageParam.groupName = query;
        this.pageParam.pageNum = 1;
        this.groupList = [];
        this.searchGroup();
      } else {
        this.groupList = [];
      }
    },
    visibleChange(e) {
      if (!e) {
        this.remoteMethod();
      }
    },
    getWelcomeId(e) {
      this.form.welcomeId = e;
    },
    // 保存按钮
    save() {
      if (!this.$refs.welcomeItem.submit()) {
        return;
      }
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.form.passFlag = this.form.passFlag ? 1 : 0;
          this.$emit('sumbit', this.form);
        }
      });
    }
  },
  watch: {
    actCodeData: {
      handler: function(val) {
        if (val) {
          this.form.hmGroupId = val.hmGroupId;
          // this.form.passFlag = val.passFlag == 1 ? true : false;
          this.form.memberLabelId = val.memberLabelId ? val.memberLabelId : '';
          this.form.memberLabelName = val.memberLabelName ? val.memberLabelName : '';
          this.form.welcomeId = val.welcomeId;
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-table__body-wrapper .el-table__row .cell {
  padding-left: 10px !important;
  line-height: 14px;
}
.m20 {
  margin: 20px;
}
.w340 {
  width: 340px;
}
.mt20 {
  margin-top: 20px;
}
.mt40b20 {
  margin-top: 40px;
  margin-bottom: 20px;
}
.mr15 {
  margin-right: 15px;
}
.formBox {
  margin-bottom: 86px;
  .tabs {
    font-size: 12px;
    color: #909399;
    li {
      line-height: 19px;
    }
  }
  .ylbtn {
    border: 1px solid #2f54eb;
    color: #2f54eb;
  }
  .addPic {
    font-size: 14px;
    padding-right: 4px;
  }
}

.saveBtn {
  position: fixed;
  bottom: 0;
  width: calc(100% - 206px);
  height: 56px;
  line-height: 56px;
  text-align: center;
  background: #ffffff;
  box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
}
</style>
