<template lang="">
  <div>
    <!-- <v-btn @click="open({ templateId: 6635862 })">双子星模板</v-btn>
    <v-btn @click="open({ templateId: 6634867 })">唔即云模板</v-btn> -->
  </div>
</template>
<script>
import qs from 'qs';

export default {
  head() {
    return {
      script: [
        {
          src:
            'https://qiyukf.com/script/98112bcf552907c28ee450c6a58269c3.js' +
            qs.stringify(
              {
                hidden: 0,
                sdkTemplateId:
                  this.$route.query?.templateId ??
                  process.env.QIYUKF_TEMPLATE_ID,
              },
              {
                addQueryPrefix: true,
              },
            ),
          async: true,
          callback: () => {
            // console.log(window.ysf);
            this.init(window.ysf);
          },
        },
      ],
    };
  },
  computed: {
    isAutoOpen() {
      return this.$route.query.autoopen === 'true';
    },
    isOnunread() {
      return this.$route.query.onunread === 'true';
    },
  },
  mounted() {},
  methods: {
    async init(ysf) {
      this.ysf = ysf;
      // console.log(ysf);

      await new Promise((resolve, reject) => {
        ysf('onready', resolve);
      });

      await new Promise((resolve, reject) => {
        ysf('config', {
          // welcomeTemplateId: 6635862,
          uid: String(this.$auth.user.id),
          name: this.$auth.user.userName,
          mobile: this.$auth.user.phone,
          email: this.$auth.user.email,
          data: JSON.stringify([
            { key: 'real_name', value: this.$auth.user.userName },
            { key: 'mobile_phone', hidden: true, value: this.$auth.user.phone },
            { key: 'email', value: this.$auth.user.email },
            // {
            //   key: 'avatar',
            //   label: '头像',
            //   value:
            //     'https://ysf.qiyukf.net/operation/080659b993a45dd546fbd71efd5ef000',
            // }, // 访客头像
            {
              index: 0,
              key: 'account',
              label: '账号',
              value: this.$auth.user.phone,
              // href: 'http://example.domain/user/zhangsan',
            },
            // { index: 1, key: 'sex', label: '性别', value: '先生' },
            // {
            //   index: 5,
            //   key: 'reg_date',
            //   label: '注册日期',
            //   value: '2015-11-16',
            // },
            // {
            //   index: 6,
            //   key: 'last_login',
            //   label: '上次登录时间',
            //   value: '2015-12-22 15:38:54',
            // },
          ]),
          language: 'zh-cn',
          success: resolve,
          error: reject,
        });
      });
      if (this.isAutoOpen) {
        this.open({
          // templateId: 6635862,
        });
      }
      if (this.isOnunread) {
        this.onunread();
      }
    },
    open(data) {
      this.ysf('open', data);
    },
    getUnreadMsg() {
      const result = this.ysf('getUnreadMsg');
      console.log(result.total, result.type, result.message);
    },
    onunread() {
      this.ysf('onunread', (result) => {
        console.log(result.total, result.type, result.message);
      });
    },
  },
};
</script>
