<template>
  <section class="user-info-wrapper">
    <div class="user-avt">
      <img
        :src="userInfo.avatarImageUrl"
        alt
      >
    </div>
    <p class="user-name">
      {{ userInfo.name }}
    </p>
    <p class="user-mb">
      {{ userInfo.mobilePhone }}
    </p>
    <p>
      <el-button
        class="footer"
        style="width: 100px;"
        type="primary"
        size="small"
        @click="clipboardAction"
      >
        复制手机号
      </el-button>
    </p>
    <section class="other-info-wrapper">
      <article class="other-info">
        <div class="icon">
          <img
            src="../../assets/image/IM/icon-contacts.png"
            alt
          >
        </div>
        <span class="desc">{{ userInfo.userTypeValue }}</span>
      </article>
      <article class="other-info">
        <div class="icon">
          <img
            src="../../assets/image/IM/icon-id-card.png"
            alt
          >
        </div>
        <div class="icon-s">
          <img
            v-if="userInfo.certifyStatus"
            src="../../assets/image/IM/check-yes.png"
            alt
          >
          <img
            v-else
            src="../../assets/image/IM/check-no.png"
            alt
          >
        </div>
        <span class="desc mr12">实名认证</span>
        <div class="icon-s">
          <img
            v-if="userInfo.status"
            src="../../assets/image/IM/check-yes.png"
            alt
          >
          <img
            v-else
            src="../../assets/image/IM/check-no.png"
            alt
          >
        </div>
        <span class="desc">执业认证</span>
      </article>
      <article class="other-info">
        <div class="icon">
          <img
            src="../../assets/image/IM/icon-org.png"
            alt
          >
        </div>
        <span class="desc">{{ userInfo.hospitalName ? userInfo.hospitalName : '无机构' }}</span>
      </article>
    </section>
    <section class="qt-wrapper">
      <p class="title">
        问题归类
      </p>
      <el-select
        v-model="stickerIdList"
        style="width:100%;"
        multiple
        size="mini"
        placeholder="请选择问题归类"
        @remove-tag="removeTag"
        @visible-change="stickerSave"
      >
        <el-option
          v-for="(item, index) in stickerList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </section>
  </section>
</template>
<script>
  let clipboard = null;
  import { stickerSave, getStickerList, stickerInfo } from '@/api/diagnosis';

  export default {
    props: {
      userInfo: {
        type: Object,
        default: () => {
          return {
            name: ' ',
            mobilePhone: ' ',
            isShowCopyBtn: true
          };
        }
      },
      taskLogId: {
        type: String | Number,
        default: ''
      }
    },
    data() {
      return {
        stickerList: [],
        stickerIdList: []
      };
    },
    computed: {
    },
    watch: {
      taskLogId(newVal) {
        this.getStikerInfo(newVal);
      }
    },
    created() {
      this.getStickerList();
    },
    methods: {
      // 查询所有的问题分类
      getStickerList() {
        getStickerList().then(res => {
          if (res.code === '000000') {
            console.log('in getStickerList', res);
            this.stickerList = res.data || [];
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        });
      },

      // 根据tasklogid查询问题分类
      getStikerInfo(taskLogId) {
        stickerInfo({
          taskLogId:taskLogId
        }).then(res => {
          if (res.code === '000000') {
            const stickerIdList = [], stickerList = res.data || [];
            stickerList.forEach( item => {
              stickerIdList.push(item.id);
            });
            this.stickerIdList = stickerIdList;
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            });
          }
        });
      },

      // 删除时，也要保存
      removeTag() {
        console.log(this.stickerIdList);
        this.stickerSave(false);
      },

      // 保存用户问题分类
      stickerSave(status) {
        // 下拉框出现(status==true)，直接退出
        if(status) return;
        const params = {
          stickerIdList: this.stickerIdList,
          taskLogId: this.taskLogId,
        };
        stickerSave(params).then(res => {
          if (res.code === '000000') {
            console.log('in getStickerSave', res);
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        });
      },

      // 粘帖文本
      clipboardAction() {
        const _this = this;
        clipboard && clipboard.destroy(); //  不是单例的，所以每次都要销毁
        clipboard = new this.ClipboardJS('.footer', {
          // .footer：文档的CSS类名
          text: function(trigger) {
            console.log(_this.userInfo.mobilePhoneCopy);
            _this.$message.success('复制成功');
            return _this.userInfo.mobilePhoneCopy; // 要粘贴的文案
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
.user-info-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  .user-avt {
    margin: 24px 0 10px;
    & > img {
      display: inline-block;
      width: 64px;
      height: 64px;
      border-radius: 32px;
    }
  }
  .user-name {
    height: 28px;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
  }
  .user-mb {
    height: 20px;
    line-height: 1;
    margin: 4px 0;
    font-size: 14px;
    color: #666666;
  }
  .other-info-wrapper {
    // margin: 20px 24px 50px;
    padding: 10px 0 20px;
    margin: 0 20px;
    border-bottom: 1px dashed #F0F0F0;
    .other-info {
      display: flex;
      flex-direction: row;
      margin: 12px 0;
      align-items: center;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        & > img {
          width: 16px;
          height: 16px;
        }
      }
      .icon-s {
        width: 12px;
        height: 12px;
        margin-right: 4px;
        & > img {
          width: 12px;
          height: 12px;
        }
      }
      .desc {
        height: 14px;
        line-height: 1;
        color: #000000;
        opacity: 0.65;
        &.mr12 {
          margin-right: 12px;
        }
      }
    }
  }
  .qt-wrapper {
    margin: 0 25px;
    .title {
      margin-top: 25px;
      text-align: left;
      font-weight: 700;
      margin-bottom: 10px;
      color: #333333;
    }
  }
}
</style>

