<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 multiple 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="活码标签">
          <el-button plain class="ylbtn" @click="tagsDialogVisible = true"><i class="iconfont-components3 icon-cp-PlusOutlined addPic"></i>添加标签</el-button>
          <!-- <dm-memberTag-group :visiable.sync="tagsDialogVisible" @save="saveTagPop"></dm-memberTag-group> -->
        </el-form-item>
        <dm-sub-title text="欢迎语设置" type="line" class="mt40b20" />
        <el-row>
          <el-col :span="17">
            <el-form-item label="活码类型">
              <el-radio-group v-model="welcomesType">
                <el-radio :label="1">活码欢迎语</el-radio>
                <el-radio :label="2">不发送欢迎语</el-radio>
              </el-radio-group>
              <ul class="tabs" v-if="welcomesType == 1">
                <li>1.下方的欢迎语取自【设置-欢迎语设置】中的“特殊欢迎语”；</li>
                <li>2.配置“活码欢迎语”后，通过此活码添加好友后，系统自动推送此处所配置的欢迎语</li>
                <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么会推送企微后台所配置的欢迎语，不会推送此处的欢迎语）</li>
              </ul>
              <ul class="tabs" v-if="welcomesType == 2">
                <li>通过此活码添加好友后，系统不推送欢迎语，及时在【设置-欢迎语设置】中为该成员配置了欢迎语。</li>
                <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么企微后台的欢迎语会照常推送）</li>
              </ul>
            </el-form-item>
            <el-form-item label="选择欢迎语" v-if="welcomesType == 1">
              <div class="welcomeTable">
                <div class="wtabTop">
                  <el-input class="w260" placeholder="请输入标题" v-model="pageParam.search"></el-input>
                  <el-button plain class="ylbtn" @click="changeRoute">新建欢迎语</el-button>
                </div>
                <el-table :data="welcomeTableData">
                  <el-table-column width="55">
                    <template slot-scope="scope">
                      <el-radio :label="scope.$index" @change.native="getCurrentRow(scope.row)" v-model="welcome">&nbsp;</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="welcomeTitle" label="标题" width="158px"></el-table-column>
                  <el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="welcomeEnclosure" label="附件" width="212px" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      <div class="enclosureBox">
                        <el-image class="img" :src="row.welcomeEnclosure.img">
                          <div slot="error" class="image-slot img">
                            <i class="el-icon-picture-outline" style="font-size:40px;"></i>
                          </div>
                        </el-image>
                        <p>{{ row.welcomeEnclosure.imgName }}</p>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <dm-pagination class="paginationBox" background @current-change="handleCurrentChange" :current-page="welcomePage.currentPage" layout=" prev, pager, next " :page-size="4" :total="100"> </dm-pagination>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="welcomesType == 1 && welcomeContent != ''">
            <p class="welcomeTitle">欢迎语预览</p>
            <previewWelcome :welcomeContent="welcomeContent"></previewWelcome>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="saveBtn">
      <el-button type="primary" @click="sumbit">保存</el-button>
    </div>
  </div>
</template>

<script>
import previewWelcome from '../../../components/preview-welcome.vue';
// import { findActCodeGroupListApi } from '@/api/actCode.js';
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: { previewWelcome },
  props: {
    actCodeData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {
        hmType: 1, //1单人 2多人
        name: '', // 名称
        hmGroupId: null, //活码分组id
        passFlag: 1, // 1自动通过 0否
        memberLabelId: '', //会员活动标签id
        welcomeId: null, // 欢迎语id
        clerkIdList: '', // 选择导购id
        storeId: '', //门店id
        hmUserNum: null //多人活码人数
      },
      welcomesType: 1,
      rules: {
        hmType: [{ required: true, message: '请选择活码类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入活码名称', trigger: 'blur' }],
        hmGroupId: [{ required: true, message: '请选择活码分组', trigger: 'blur' }],
        clerkIdList: [{ required: true, message: '请选择使用成员', trigger: 'blur' }]
      },
      welcomeTableData: [],
      tagsDialogVisible: false,
      welcome: '',
      templateSelection: {},
      welcomeContent: '',
      welcomePage: {
        search: '',
        currentPage: 1
      },
      pageParam: {
        search: '',
        pageNum: 1,
        pageSize: 20,
        total: 1
      },
      groupList: [],
      data: ''
    };
  },
  created() {
    this.getWelcomeTable();
    this.searchGroup();
  },
  methods: {
    saveTagPop(data) {
      console.log(data);
      this.data = data;
    },
    onLoadmore() {
      if (this.pageParam.pageNum >= this.pageParam.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.pageParam.total = pages || 1;
          // console.log(this.groupList, 'list');
          if (this.pageParam.search != '') {
            this.groupList = result;
          } else if (Array.isArray(result)) {
            this.groupList = this.groupList.concat(result);
          }
          // console.log(this.groupList, 909090);
        }
      });
    },
    // 远程搜索
    remoteMethod(query) {
      if (query !== '') {
        this.pageParam.search = query;
        this.pageParam.pageNum = 1;
        this.groupList = [];
        this.searchGroup();
      } else {
        this.groupList = [];
      }
    },
    visibleChange(e) {
      if (!e) {
        this.remoteMethod();
      }
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.welcomePage.currentPage = val;
      this.getWelcomeTable();
    },
    // 选择欢迎语列表数据
    getWelcomeTable() {
      this.welcomeTableData = [
        {
          welcomeId: 1,
          welcomeTitle: '标题标题标题',
          welcomeContent: '欢迎语内容欢迎语内容欢迎语内容 欢迎语内容欢迎语内容欢迎语内容欢迎语内容欢迎语内容 欢迎语内容欢迎语内容',
          welcomeEnclosure: {
            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeId: 2,
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeId: 3,
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeId: 4,
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        }
      ];
    },
    // 新建欢迎语
    changeRoute() {
      this.$router.push({ path: '/salutatorySet' });
    },
    getCurrentRow(row) {
      // 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
      this.templateSelection = row;
      this.welcomeContent = row.welcomeContent;
      this.form.welcomeId = row.welcomeId;
    },
    // 保存按钮
    sumbit() {
      console.log(this.form, 'form保存');
      this.$emit('sumbit', this.form);
    }
  }
};
</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;
}
.w260 {
  width: 260px;
}
.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;
  }
  .welcomeTitle {
    text-align: center;
    margin-bottom: 26px;
    margin-top: 6px;
    font-weight: 500;
    color: #303133;
    font-size: 14px;
  }
  .welcomeTable {
    width: 720px;
    height: 429px;
    border: 1px solid #dcdfe6;
    padding: 12px;
    position: relative;
    .wtabTop {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .paginationBox {
      position: absolute;
      right: 7px;
      bottom: 0;
      margin-top: 46px;
      margin-right: -4px;
    }
    .enclosureBox {
      display: flex;
      align-items: center;
      .img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      p {
        width: 143px;
        max-width: 143px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.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>
