<template>
  <!-- 成员资料 -->
  <main-page header-bg="bg-transparent">
    <!-- 顶部左侧插槽 -->
    <template slot="left">
      <app-icon
        type="png"
        class-name="w-6.5 w-6.5"
        :path="require('@/assets/icons/left-arrow-white.png')"
        @click="$router.go(-1)"
      />
    </template>
    <!-- 顶部右侧插槽 -->
    <template slot="right">
      <app-icon
        type="png"
        class-name="w-6.5 h-6.5"
        :path="require('@/assets/icons/member-group.png')"
      />
    </template>
    <div class="relative w-full h-50 bg-gradient-to-r from-linear-t to-linear-b">
      <!-- 背景图 -->
      <img class="w-82 absolute top-0 right-0" src="@/assets/images/header-bg.png" alt="">
      <div class="px-4 pt-15 w-full absolute">
        <div class="">
          <div class="name font-semibold text-white">张玲玲</div>
          <div class="mt-3 flex items-start">
            <div class="avator relative h-22.5 w-22.5 flex-shrink-0" @click="editMember">
              <img src="@/assets/icons/avator.png" alt="">
              <div class="edit h-6 w-6 border absolute bg-color-primary border -right-3 -bottom-0.5 rounded-full flex items-center justify-center">
                <app-icon
                  icon-name="edit-white"
                  class-name="w-3 h-3"
                />
              </div>
            </div>
            <div class="info ml-6 text-white flex-1 overflow-hidden">
              <div class="title font-semibold">产品经理</div>
              <div class="text-sm mt-0.5">产品设计部 产品部</div>
              <div class="text-sm">杭州复杂美科技有限公司</div>
              <div
                id="copyBtn"
                class="mt-0.5 relative"
                :data-clipboard-text="code"
                data-clipboard-action="copy"
                @click="copy"
              >
                <div class="text-xs border border-border-primary-lighter text-text-light p-0.5 rounded pr-6 truncate">
                  {{ code }}
                </div>
                <div class="absolute right-0 top-1/2 transform -translate-y-1/2 z-10">
                  <app-icon
                    icon-name="copy"
                    class-name="w-8 h-8"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 px-4 pb-16">
      <c-cell dot title="查找聊天记录" />
      <c-cell dot title="聊天文件" />
      <switch-cell title="消息免打扰" :checked.sync="check1" />
      <switch-cell title="置顶聊天" :checked.sync="check2" />
      <c-cell
        title="来源"
        content="对方通过【这是群名单行高度100换行 140px这样】添加"
        class="mt-4"
      />
      <c-cell
        dot
        title="禁言"
        content="可发言"
        class="mt-4"
      />
      <div class="fixed bottom-0 left-0 w-full px-4 py-1.5 bg-common-bg">
        <c-button round class="mt-4" @click="handleClick">发消息</c-button>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'MemberInfo',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'switch-cell': () => import('@/components/common/switch-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      check1: false,
      check2: true,
      id: '',
      code: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDMYfnvWtC8Id5bPKae5yXSxQTtZpul6AnnZWfI2TtIarvjHB'
    }
  },
  mounted() {
    this.id = this.$route.params.id
  },
  methods: {
    handleClick() {
      console.log('发消息')
    },
    // 编辑成员信息
    editMember() {
      this.$router.push(`/team/edit-member/${this.id}`)
    },
    copy() {
      const clipboard = new this.$util.clipboard('#copyBtn')
      clipboard.on('success', () => {
        this.$toast('已经复制到剪切板')
      })
      clipboard.on('error', () => {
        this.$toast('复制失败')
      })
    }
  }
})
</script>

<style lang="less">

</style>
