<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">
        <el-form-item label="活码类型" prop="hmType">
          <el-radio-group v-model="form.hmType">
            <el-radio :label="1">单人活码</el-radio>
            <el-radio :label="2">多人活码</el-radio>
          </el-radio-group>
        </el-form-item>
        <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>
        <el-form-item label="活动分组" prop="actGroup">
          <el-select class="w340" filterable v-model="form.actGroup"></el-select>
        </el-form-item>
        <el-form-item label="使用成员" prop="memberList">
          <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>
        </el-form-item>
        <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" :projectName="haobao - 3"></dm-memberTag-group>
        </el-form-item>
        <dm-sub-title text="欢迎语设置" type="line" class="mt40b20" />
        <el-row>
          <el-col :span="17">
            <el-form-item label="活码类型" prop="welcomes">
              <el-radio-group v-model="form.welcomes">
                <el-radio :label="1">活码欢迎语</el-radio>
                <el-radio :label="2">不发送欢迎语</el-radio>
              </el-radio-group>
              <ul class="tabs" v-if="form.welcomes == 1">
                <li>1.下方的欢迎语取自【设置-欢迎语设置】中的“特殊欢迎语”；</li>
                <li>2.配置“活码欢迎语”后，通过此活码添加好友后，系统自动推送此处所配置的欢迎语</li>
                <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么会推送企微后台所配置的欢迎语，不会推送此处的欢迎语）</li>
              </ul>
              <ul class="tabs" v-if="form.welcomes == 2">
                <li>通过此活码添加好友后，系统不推送欢迎语，及时在【设置-欢迎语设置】中为该成员配置了欢迎语。</li>
                <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么企微后台的欢迎语会照常推送）</li>
              </ul>
            </el-form-item>
            <el-form-item label="选择欢迎语" v-if="form.welcomes == 1">
              <div class="welcomeTable">
                <div class="wtabTop">
                  <el-input class="w260" placeholder="请输入标题"></el-input>
                  <el-button plain class="ylbtn" @click="changeRoute">新建欢迎语</el-button>
                </div>
                <el-table :data="welcomeTableData" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55"> </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 background  @current-change="handleCurrentChange" :current-page="pageParam.currentPage" layout=" prev, pager, next " :total="totalCount"> </dm-pagination> -->
                <dm-pagination class="paginationBox" background layout=" prev, pager, next " :total="100"> </dm-pagination>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="form.welcomes == 1">
            <p class="welcomeTitle">欢迎语预览</p>
            <previewWelcome :welcomeContent="welcomeTableData.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';
export default {
  name: 'addActCode',
  components: { previewWelcome },
  props: {
    actCodeData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {
        hmType: 1,
        name: '',
        actGroup: null,
        memberList: [],
        passFlag: true,
        actLabel: null,
        welcomes: 1,
        chooseWelcomes: null
      },
      rules: {
        hmType: [{ required: true, message: ' ', trigger: 'blur' }],
        name: [{ required: true, message: ' ', trigger: 'blur' }],
        actGroup: [{ required: true, message: ' ', trigger: 'blur' }],
        memberList: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      welcomeTableData: [],
      tagsDialogVisible: false,
      data: '',
      multipleSelection: []
    };
  },
  created() {
    this.getWelcomeTable();
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val, 'val');
      this.multipleSelection = val;
    },
    // 选择欢迎语列表数据
    getWelcomeTable() {
      this.welcomeTableData = [
        {
          welcomeTitle: '标题标题标题',
          welcomeContent: '欢迎语内容欢迎语内容欢迎语内容 欢迎语内容欢迎语内容欢迎语内容欢迎语内容欢迎语内容 欢迎语内容欢迎语内容',
          welcomeEnclosure: {
            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        },
        {
          welcomeTitle: '标题标题标题',
          welcomeContent: '内容房价还是大家开始的房价款',
          welcomeEnclosure: {
            img: '',
            imgName: '图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称图片名称'
          }
        }
      ];
    },
    // 新建欢迎语
    changeRoute() {
      this.$router.push({ path: '/salutatorySet' });
    },
    saveTagPop(data) {
      console.log(data);
      this.data = data;
    },
    // 保存按钮
    sumbit() {
      console.log('保存');
    }
  }
};
</script>
<style lang="less" scoped>
// /deep/ .el-table__body-wrapper .el-checkbox .el-checkbox__input .el-checkbox__inner {
//   border-radius: 100%;
// }
/deep/ .el-table__body-wrapper .el-table__row .cell {
  padding-left: 10px !important;
  line-height: 14px;
}
/deep/ .el-table__header-wrapper .el-checkbox {
  display: none;
}
.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>
