<template>
  <Dialog
    :is-dialog-exist="isDetail"
    :title="checkDialogTitle"
    :dialog-style="checkDialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <div class="title-div">明细</div>
        <el-row :gutter="0">
          <el-form label-width="auto" size="mini" :model="itemChoseData" inline>
            <el-col :span="12">
              <el-form-item label="ID" prop="id">
                <span style="color: #999999">{{ itemChoseData.id }}</span>
                <FNButton
                  v-clipboard:copy="itemChoseData.id"
                  v-clipboard:success="clipboardSuccess"
                  v-clipboard:error="clipboardError"
                  size="mini"
                  class="copy-btn"
                >
                  <template slot="icon">
                    <svg-icon icon-class="copy" />
                    <span>复制</span>
                  </template>
                </FNButton>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <span style="color: #999999">{{ itemChoseData.phone }}</span>
                <FNButton
                  v-clipboard:copy="itemChoseData.phone"
                  v-clipboard:success="clipboardSuccess"
                  v-clipboard:error="clipboardError"
                  size="mini"
                  class="copy-btn"
                >
                  <template slot="icon">
                    <svg-icon icon-class="copy" />
                    <span>复制</span>
                  </template>
                </FNButton>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限分组" prop="roleName">
                <span style="color: #999999">{{ itemChoseData.roleName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="name">
                <span style="color: #999999">{{ itemChoseData.name }}</span>
                <FNButton
                  v-clipboard:copy="itemChoseData.name"
                  v-clipboard:success="clipboardSuccess"
                  v-clipboard:error="clipboardError"
                  size="mini"
                  class="copy-btn"
                >
                  <template slot="icon">
                    <svg-icon icon-class="copy" />
                    <span>复制</span>
                  </template>
                </FNButton>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信号" prop="id">
                <span style="color: #999999">{{
                  itemChoseData.wechatNum
                }}</span>
                <FNButton
                  v-clipboard:copy="itemChoseData.wechatNum"
                  v-clipboard:success="clipboardSuccess"
                  v-clipboard:error="clipboardError"
                  size="mini"
                  class="copy-btn"
                >
                  <template slot="icon">
                    <svg-icon icon-class="copy" />
                    <span>复制</span>
                  </template>
                </FNButton>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户数" prop="id">
                <span style="color: #3CA1FE">{{
                  itemChoseData.userCount
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="微信二维码" prop="id">
                <div style="display: flex">
                  <div class="img-div">
                    <el-image
                      :src="itemChoseData.qrcodeImgUrl"
                      :preview-src-list="[itemChoseData.qrcodeImgUrl]"
                      style="width: 113px;height: 111px"
                    ></el-image>
                  </div>
                  <div style="margin-top: 92px">
                    <el-image src="/pic/master-info-icon/download-icon.png" style="width: 30px;height: 30px" @click="downloadIamge(itemChoseData.qrcodeImgUrl)"></el-image>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-main>
    </el-container>
  </Dialog>
</template>

<script>
/**
 * 客户经理管理-明细
 */
import Dialog from '@/components/Dialog/index'
import FNButton from '@/components/FNButton/index'
// 复制
import clipboard from '@/directive/clipboard'

export default {
  components: { Dialog, FNButton },
  directives: { clipboard },
  props: {
    // 每行选中的数据
    itemChoseData: {
      type: Object,
      require: true,
      default: () => {}
    },
    isDetail: {
      type: Boolean,
      default: () => {}
    }
  },
  data() {
    return {
      // 弹窗
      checkDialogTitle: '明细',
      checkDialogStyle: {
        '--dialog-width': '891px',
        '--dialog-height': '422px',
        '--title-height': '51px'
      },
      formData: {
        id: ''
      }
    }
  },
  watch: {
    isDetail(val) {
      if (val) {
        console.log(JSON.stringify(this.itemChoseData), '选中的数据(明细)')
      }
    }
  },
  methods: {
    // 图片下载
    downloadIamge(imgsrc, name) {
      //  下载图片地址和图片名
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') //  得到图片的base64编码数据
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
    // 复制操作
    clipboardSuccess() {
      this.$message.success('复制成功')
    },
    clipboardError() {
      this.$message.error('复制失败')
    },
    handleClose() {
      this.$emit('handle-close')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-main {
    height: 90%;
    width: 100%;
    padding: 2% 5% 0 20%;
    .title-div {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .title-div::before {
      content: '▎';
      color: #3da2ff;
    }
    .content-div {
      margin-top: 10px;
    }
    .img-div {
      width: 122px;
      height: 122px;
      border: 1px dashed #dddddd;
      padding: 0.9%;
      margin-right: 2%;
    }
    .copy-btn {
      color: #67ca5e;
      margin-left: 15px;
      padding: 7px;
      width: 68px;
      height: 28px;
      background: #e7faf0;
      border-radius: 4px;
      border: 1px solid #d0f5e0;
    }
  }
}
</style>
