import { defineComponent, ref } from 'vue'
import styles from './index.module.less'
import iconUs from './image/iconUs.png'
import kefu1 from './image/kefu1.png'
import kefu2 from './image/kefu2.png'
import { Button, Toast } from 'vant'
import { promisefiyPostMessage } from '@/helpers/native-message'
import { state } from '@/state'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'contactus',
  setup(props, ctx) {
    const users = [
      { name: '客服人员 1', src: kefu1 },
      { name: '客服人员 2', src: kefu2 }
    ]
    const onSaveImg = (src: string) => {
      fetch(src)
        .then(response => response.blob())
        .then(res => {
          try {
            const fileReader = new FileReader()
            fileReader.readAsDataURL(res)
            fileReader.onload = async () => {
              await download(fileReader.result as string)
            }
          } catch (error) {}
        })
    }

    const download = async (base64: string) => {
      const result = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64
        }
      })
      if (result?.content?.status === 'success') {
        Toast.success('已保存到相册')
      } else {
        Toast.fail('保存失败')
      }
    }

    return () => (
      <div class={styles.container}>
        <ColHeader />
        <div class={styles.topWrap}>
          <div class={styles.title}>
            如您在使用
            {state.platformType === 'TEACHER' ? '酷乐秀学院' : '酷乐秀'}
            时有任何问题或意见，可添加以下企业微信账号与我们取得联系，我们将竭诚为您服务。
          </div>
          <img class={styles.img} src={iconUs} />
        </div>

        <div class={styles.centerWrap}>
          {users.map(n => (
            <div class={styles.item}>
              <div class={styles.name}>{n.name}</div>
              <img src={n.src} />
              <div class={styles.btn}>
                <Button
                  block
                  round
                  type="primary"
                  size="small"
                  onClick={() => onSaveImg(n.src)}
                >
                  保存二维码
                </Button>
              </div>
            </div>
          ))}
        </div>
        <div class={styles.tips}>
          提示：点击保存二维码后会自动下载到相册，打开企业微信扫一扫即可添加企业微信联系客服喔～
        </div>
      </div>
    )
  }
})
