<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="100px" ref="form" :model="form">
          <el-form-item label="欢迎语标题"><el-input show-word-limit placeholder="请输入欢迎语标题" type="text" v-model="form.appName" maxlength="20"></el-input> </el-form-item>
          <el-form-item label="文本内容">
            <p>建议以文本+其他类型内容组合创建欢迎语</p>
            <el-input show-word-limit placeholder="请输入文本内容" type="textarea" v-model="form.appName2" maxlength="1000"></el-input>
            <div class="text-bottom flex">
              <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>
                <img class="emoji-img cursor-pointer" slot="reference" src="https://pic01-10001430.image.myqcloud.com/b0d3c14f-69e7-4753-8fbc-3bffcff9f8ce" alt="" />
              </el-popover>
              <div class="put">插入&lt; 微信昵称 &gt;</div>
            </div>
          </el-form-item>
          <el-button type="primary">保存</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: {
        appName: '121sdc',
        appName2: 'zxkjhckzxjhckjxzhkc'
      },
      emojiList: emojiArr
    };
  },
  methods: {
    changeRoute() {
      this.$router.push('/contactsList');
    },
    selectEmoji(item) {
      const that = this;
      that.form.appName2 = that.form.appName2 + item.key;
    },
    getData(val) {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/admin-list', 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
          });
        });
    }
  },
  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>
.daily-set-wrap {
  height: 100%;
  .daily-set-content {
    padding: 20px;
    .table-condition-left {
      font-size: 0;
    }
  }
}
.salutatory-set-wrap {
  .text-bottom {
  }
}
</style>
