<template>
  <div class="daily-set-wrap ">
    <div class="daily-set-content border-box">
      <div class="salutatory-set-wrap m-t-20">
        <el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form">
          <el-form-item label="欢迎语标题" prop="title">
            <el-input show-word-limit placeholder="请输入欢迎语标题" type="text" v-model="form.title" maxlength="20" class="w-384"></el-input>
          </el-form-item>
          <el-form-item label="欢迎语内容" prop="welcomeContent" class="welcomeContentItem">
            <el-input placeholder="请输入文本内容" type="textarea" v-model="form.welcomeContent" class="w-384 welcomeContent"></el-input>
            <div class="text-bottom flex w-384">
              <div class="flex flex-wrap flex-align-center">
                <div class="put" @click="putName">插入&lt; 微信昵称 &gt;</div>
                <div class="line"></div>
                <div class="put" @click="addLinkDialogShow">插入#公众号</div>
              </div>
              <el-popover placement="top" width="388" trigger="click">
                <ul class="flex flex-wrap">
                  <li v-for="(item, index) in emojiList" :key="index + 'emoji'">
                    <img :src="item.gifUrl" alt="" @click="selectEmoji(item)" />
                  </li>
                </ul>
                <p slot="reference" style="cursor:pointer;height:24px;">
                  <svg-icon iconname="iconbiaoqing" size="20"> </svg-icon>
                </p>
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item>
            <mult-upload :limit="1" :imgList.sync="imglist" />
          </el-form-item>
          <el-button type="primary" style="margin-left:117px;" @click="submit">保存</el-button>
        </el-form>
      </div>
      <el-dialog title="添加公众号" width="585px" class="replay-link-dialog" :visible.sync="addReplayDialog" @closed="onClosed">
        <el-form label-position="right" ref="form" :model="{}" label-width="100px">
          <el-form-item label="公众号名称">
            <el-input v-model="url" @keyup.enter.native="addReplyBtn"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addReplayDialog = false">取 消</el-button>
          <el-button type="primary" @click="addReplyBtn">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import limitTextarea from '@/components/limit-textarea.vue';
import errMsg from '@/common/js/error';
import { emojiArr } from '@/utils/emoji';
import multUpload from '@/components/mult-upload-img.vue';
import singleUpload from '@/components/single-upload.vue';
export default {
  props: {},
  data() {
    return {
      form: {
        title: '系统默认',
        welcomeContent: '你好，<微信昵称>',
        welcomeImg: ''
      },
      imglist: [],
      url: '',
      rules: {
        title: [{ required: true, message: '请输入欢迎语标题', trigger: 'blur' }],
        welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
      },
      emojiList: emojiArr,
      addReplayDialog: false
    };
  },
  methods: {
    onClosed() {
      this.url = '';
    },
    addReplyBtn() {
      // 文本链接
      if (this.url == '') {
        this.$message({
          message: '请输入公众号名称',
          type: 'error'
        });
        return;
      } else {
        if (this.url.indexOf('#公众号：') != -1) {
          console.log('');
        } else {
          this.url = '#公众号：' + this.url;
        }
        this.addReplayDialog = false;
        this.form.welcomeContent = this.form.welcomeContent + this.url;
      }
    },
    addLinkDialogShow() {
      // 是否显示添加回复链接的dialog
      // console.log(this.cancelLink);
      this.addReplayDialog = true;
    },
    changeRoute() {
      this.$router.push('/contactsList');
    },
    selectEmoji(item) {
      const that = this;
      const str = that.form.welcomeContent + item.key;
      if (str.length > 1000) {
        this.$message('添加该表情后文本内容将超过字数限制，无法添加！');
      } else {
        that.form.welcomeContent = str;
      }
    },
    putName() {
      const that = this;
      that.form.welcomeContent = that.form.welcomeContent + '<微信昵称>';
    },
    getData() {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/get-welcome', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1 && resData.result) {
            that.form = resData.result;
            this.imglist = resData.result.welcomeImg ? [{ url: resData.result.welcomeImg }] : [];
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    submit() {
      const that = this;
      that.$refs.form.validate(value => {
        console.log(value);
        if (value) {
          this.$confirm('确认保存此欢迎语？', '提示')
            .then(() => {
              this.form.welcomeImg = this.imglist.length ? this.imglist[0].url : '';
              const para = { ...that.form };
              getRequest('/haoban-manage3-web/save-welcome', para)
                .then(res => {
                  let resData = res.data;
                  if (resData.errorCode == 1) {
                    this.$message({
                      type: 'success',
                      message: '保存成功!'
                    });
                    window.location.reload();
                  }
                  errMsg.errorMsg(resData);
                })
                .catch(function(error) {
                  that.$message.error({
                    duration: 1000,
                    message: error.message
                  });
                });
            })
            .catch();
        }
      });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.$emit('showTab', 4);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    limitTextarea,
    singleUpload,
    multUpload
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.w-384 {
  width: 384px;
  box-sizing: border-box;
}
.welcomeContent {
  height: 220px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  >>> .el-textarea__inner {
    height: 181px;
    border: none;
    &:focus {
      box-shadow: none;
    }
  }
  >>> .el-input__count {
    bottom: 44px;
  }
}
.daily-set-wrap {
  height: 100%;
  .daily-set-content {
    padding: 20px;
    .table-condition-left {
      font-size: 0;
    }
  }
}
.salutatory-set-wrap {
  >>> .el-input__inner:focus {
    box-shadow: none;
  }
  .welcomeContentItem >>> .el-form-item__content {
    position: relative;
    width: 384px;
    box-sizing: border-box;
    .text-bottom {
      position: absolute;
      bottom: 1px;
      left: 1px;
      justify-content: space-between;
      align-items: center;
      height: 38px;
      width: 382px;
      box-sizing: border-box;
      padding: 0 9px;
      // background: #f5f7fa;

      .put {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: #606266;
        cursor: pointer;
      }
      .line {
        width: 1px;
        height: 9px;
        background: #c0c4cc;
        margin: 0 10px;
      }
    }
  }
}
</style>
