<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 show-word-limit placeholder="请输入文本内容" type="textarea" v-model="form.welcomeContent" maxlength="1000" class="w-384 welcomeContent"></el-input>
            <div class="text-bottom flex w-384">
              <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 class="put" @click="putName">插入&lt; 微信昵称 &gt;</div>
            </div>
          </el-form-item>
          <el-button type="primary" style="margin-left:117px;" @click="submit">保存</el-button>
        </el-form>
      </div>
    </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';
export default {
  props: {},
  data() {
    return {
      form: {
        title: '系统默认',
        welcomeContent: '你好，<微信昵称>'
      },
      rules: {
        title: [{ required: true, message: '请输入欢迎语标题', trigger: 'blur' }]
      },
      emojiList: emojiArr
    };
  },
  methods: {
    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;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    submit() {
      const that = this;
      that.$refs.form.validate(value => {
        if (value) {
          this.$confirm('是否保存此欢迎语？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              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
  }
};
</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;
        color: #606266;
        line-height: 17px;
        cursor: pointer;
      }
    }
  }
}
</style>
