<template>
  <div v-if="permission != 'n'" class="ht-opinion">
    <ht-table
      v-if="!isMobile"
      :data="rows"
      :selectable="false"
      :show-export="false"
      :show-custom-column="false"
      :nopagination="true"
      :no-header="true"
      :custom-table-height="400"
      @loading="loadData"
    >
      <ht-table-column width="60" label="序号" type="index" align="left" />
      <ht-table-column
        label="审批节点"
        width="170"
        prop="taskName"
        show-overflow-tooltip
        align="left"
      />
      <ht-table-column
        label="待审批人"
        show-overflow-tooltip
        width="110"
        align="left"
      >
        <template #default="{ row: { status, qualfieds, qualfiedNames } }">
          <span v-if="showQualfiedsNames(status, qualfieds, qualfiedNames)">
            {{ qualfiedNames }}
          </span>
          <el-popover
            v-if="
              status == 'awaiting_check' ||
              qualfiedsName(qualfiedNames, true) > 1
            "
            placement="right"
            popper-class="right-popover"
            trigger="hover"
          >
            <div>
              <p class="qualfied_names">名称</p>
              <div v-if="isQualfiedListHasUser(qualfieds)" class="btn__wrap">
                <p v-for="(item, index) in qualfieds" :key="index">
                  <el-tooltip
                    v-if="item.users"
                    class="item"
                    effect="light"
                    placement="top"
                    :content="item.users"
                  >
                    <el-button plain size="mini">{{ item.name }}</el-button>
                  </el-tooltip>
                  <el-button v-if="!item.users" plain size="mini">
                    {{ item.name }}
                  </el-button>
                </p>
              </div>
              <div v-else class="btn__wrap">
                <p
                  v-for="(item, index) in qualfiedsName(qualfiedNames, false)"
                  :key="index"
                >
                  <el-button plain size="mini">{{ item }}</el-button>
                </p>
              </div>
            </div>
            <i
              v-if="
                isQualfiedListHasUser(qualfieds) ||
                qualfiedsName(qualfiedNames, true) > 1
              "
              slot="reference"
              class="el-icon-more qualfied-more__icon"
            ></i>
          </el-popover>
        </template>
      </ht-table-column>

      <ht-table-column
        label="处理人"
        width="110"
        prop="auditorName"
        show-overflow-tooltip
        align="left"
      />

      <ht-table-column
        label="处理情况"
        width="140"
        show-overflow-tooltip
        align="left"
      >
        <template #default="{ row: { isRead, statusVal } }">
          <span v-if="statusVal == '待审批'">
            {{ isRead == 0 ? '待阅' : '已阅' }}
          </span>
          <span v-else>
            {{ statusVal }}
          </span>
        </template>
      </ht-table-column>

      <ht-table-column label="处理意见" show-overflow-tooltip align="left">
        <template #default="{ row: { opinion, filesArray } }">
          <span
            style="white-space: pre-wrap; white-space: pre-line"
            v-html="opinion"
          ></span>
          <div v-if="filesArray && filesArray.length" class="appendix">
            <div class="title">附件：</div>
            <div class="file-content">
              <div
                v-for="(item, index) in filesArray"
                :key="index"
                class="attachment"
              >
                <el-tooltip placement="right" effect="light">
                  <div slot="content">
                    <el-button
                      icon="el-icon-download"
                      circle
                      @click="downloadAttachments(item)"
                    ></el-button>
                  </div>
                  <el-tag @click="search(item)">
                    {{ item.name || item.response.fileName }}
                  </el-tag>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </ht-table-column>

      <ht-table-column
        label="操作时间"
        prop="completeTime"
        width="170"
        show-overflow-tooltip
        align="left"
      ></ht-table-column>

      <ht-table-column
        label="停留时长"
        width="110"
        show-overflow-tooltip
        align="left"
      >
        <template #default="{ row }">
          <span>{{ formatTimeLag(row) }}</span>
        </template>
      </ht-table-column>
    </ht-table>
    <div v-if="isMobile" class="mobile-opinion">
      <ul class="ul-wrap">
        <li v-for="item in rows" :key="item.id" class="item">
          <div
            class="left-img-box"
            :class="{
              'warn-icon-box':
                !formatQualfieds(item.qualfieds).length && !avatarName(item),
            }"
          >
            <!-- 未审批 组织、用户-->
            <template
              v-if="
                formatQualfieds(item.qualfieds).length > 0 &&
                formatQualfieds(item.qualfieds)[0].type == 'group' &&
                !item.auditor
              "
            >
              <div
                class="icon"
                :class="getHeadClass(formatQualfieds(item.qualfieds))"
              />
            </template>
            <template
              v-else-if="
                formatQualfieds(item.qualfieds).length > 0 &&
                formatQualfieds(item.qualfieds)[0].type == 'user' &&
                !item.auditor &&
                avatarMap[item.qualfieds[0].id]
              "
            >
              <img
                class="image"
                :src="imgSrc(formatQualfieds(item.qualfieds)[0].id)"
              />
            </template>
            <!-- 当审批后是 group 时 -->

            <img
              v-else-if="item.auditor && avatarMap[item.auditor]"
              class="image"
              :src="imgSrc(item.auditor)"
            />
            <span v-else-if="avatarName(item)" class="text">
              {{ avatarName(item) }}
            </span>
            <ht-icon v-else name="warn"></ht-icon>
          </div>
          <div class="item-right">
            <div class="right-top">
              <span class="bottom-left-text">{{ item.taskName }}</span>
              <span
                v-if="
                  ['awaiting_check', 'awaiting_feedback'].includes(item.status)
                "
                class="top-right-text"
              >
                已停留 {{ formatTimeLag(item) }}
              </span>
              <span v-else class="top-right-text">
                {{ item.completeTime || '-' }}
              </span>
            </div>
            <div class="right-top right-bottom">
              <div class="left-text-box">
                <span
                  v-if="item.status === 'artificial_end' || item.auditor"
                  class="top-left-text"
                >
                  {{ item.auditorName }}
                </span>
                <span v-else class="top-left-text">
                  {{
                    currentShowUser(formatQualfieds(item.qualfieds)) ||
                    (item.qualfiedNames &&
                      item.qualfiedNames.replace(/,/g, '/')) ||
                    item.auditorName
                  }}
                </span>
                <template v-if="formatQualfieds(item.qualfieds).length > 2">
                  <span class="qualfiedNames-total">
                    共{{ formatQualfieds(item.qualfieds).length }}人
                  </span>
                  <van-icon
                    name="more-o"
                    class="more-icon"
                    @click="handleShowMoreUser(formatQualfieds(item.qualfieds))"
                  />
                </template>
                <div
                  v-if="!formatQualfieds(item.qualfieds) && !item.auditorName"
                  class="top-left-text warn-text"
                >
                  未获取到审批人，请与管理员联系
                </div>
              </div>
              <span
                v-if="item.agentLeaderId && item.status === 'agree'"
                class="bottom-right-text gx-bg"
              >
                <van-icon :name="'checked'" class="status-icon" />
                {{ item.statusVal }}
              </span>
              <span
                v-else
                class="bottom-right-text"
                :class="statusColorMap[item.status]"
              >
                <van-icon
                  :name="statusMap[item.status] || 'checked'"
                  class="status-icon"
                />
                {{ item.statusVal }}
              </span>
            </div>
            <div v-if="item.opinion" class="option">
              <p style="white-space: pre-line" v-html="item.opinion"></p>
            </div>
            <template v-if="item.filesArray && item.filesArray.length > 0">
              <div
                v-for="file of item.filesArray"
                :key="file.uid"
                class="cont filesArray"
              >
                <i
                  v-if="file.status == 'success'"
                  class="icon"
                  :class="
                    getIconClass(
                      file.name || (file.response && file.response.fileName)
                    )
                  "
                ></i>

                <div class="fileName" @click="preview(file)">
                  {{ file.name || (file.response && file.response.fileName) }}
                </div>
                <i class="icon-xiazai1" @click="download(file)"></i>
              </div>
            </template>
          </div>
        </li>
      </ul>

      <van-action-sheet v-model="showMoreUser">
        <div class="user-top">
          <span class="top-close" @click="handleClose">关闭</span>
          <h3 class="user-title">
            全部审批人员
            <span class="user-count">{{ userData.length }}</span>
          </h3>
        </div>
        <ul class="user-wrap">
          <li v-for="item in userData" :key="item.id" class="user-item">
            <div class="user-left">
              <img v-if="avatarMap[item.id]" :src="imgSrc(item.id)" />
              <span v-else class="name">
                {{ item.name ? item.name.substr(-2) : '' }}
              </span>
            </div>
            <div class="user-right">
              <div class="right-top">
                <span class="user-name">{{ item.name }}</span>
                <span v-if="item.account" class="user-account">
                  （{{ item.account }}）
                </span>
              </div>
              <div class="right-bottom">
                <span class="right-org">
                  <ht-icon name="org-tree2"></ht-icon>
                  {{ item.orgName || '暂无组织' }}
                </span>
                <span class="right-post">
                  <ht-icon name="post"></ht-icon>
                  {{ item.postName || '暂无岗位' }}
                </span>
              </div>
            </div>
          </li>
        </ul>
      </van-action-sheet>
    </div>
  </div>
</template>
<script>
  import mobileMode from '@/mixins/mobileMode.js'
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import moment from 'moment'
  import _ from 'lodash'
  const { saveAs } = require('file-saver')

  import utils from '@/utils.js'
  export default {
    name: 'HtOpinion',
    mixins: [permission, inputName, form, mobileMode],
    props: {
      flowData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        rows: [], // 表格数据
        statusMap: {
          awaiting_check: 'clock', //待阅
          awaiting_feedback: 'clock', //待阅
          retracted: 'clear',
          reject: 'clear',
          backToStart: 'clear',
        },
        statusColorMap: {
          awaiting_check: 'blue-bg',
          awaiting_feedback: 'blue-bg',
          retracted: 'yellow-bg',
          reject: 'red-bg',
          backToStart: 'red-bg',
          transforming: 'sky-bg',
          inqu: 'purple-bg',
          deliverto: 'zb-bg',
          addsign: 'hqjq-bg',
          revoker_to_start: 'yellow-bg',
          agent: 'agent-bg',
          revoker: 'yellow-bg',
        },
        avatarMap: {},
        showMoreUser: false,
        userData: [],
      }
    },
    computed: {
      imgSrc() {
        return (userId) => {
          return this.$requestConfig.getImgSrc(this.avatarMap[userId])
        }
      },
      avatarName() {
        return (item) => {
          const userName = item.auditorName || item.qualfiedNames
          return userName && userName.replace(/,/g, '/').substr(0, 1)
        }
      },
    },
    mounted() {
      if (this.isMobile) {
        this.addMobileTopLabelClass('mobile-opinion-form-item')
        this.addMobileBorderBottom()
        this.loadData()
      }
    },
    methods: {
      getHeadClass(value) {
        let groupType = value[0].groupType
        if (groupType == 'position') {
          return 'ht-icon-gangwei'
        }
        if (groupType == 'job') {
          return 'ht-icon-zhiwu'
        }
        if (groupType == 'org') {
          return 'ht-icon-zuzhi'
        }
        if (groupType == 'role') {
          return 'ht-icon-jiaose'
        }
      },
      getIconClass(fileName) {
        if (!fileName) {
          return ''
        }
        let fileNameArr = fileName.split('.')
        let fileType = fileNameArr.length && fileNameArr[1]
        if (fileType === 'docx' || fileType === 'doc') {
          return 'ht-icon-doc'
        }
        if (fileType === 'xls' || fileType === 'xlsx') {
          return 'ht-icon-xls'
        }
        if (fileType === 'ppt') {
          return 'ht-icon-ppt'
        }
        if (fileType === 'pdf') {
          return 'ht-icon-pdf'
        }
        if (fileType === 'rar') {
          return 'ht-icon-rar'
        }
        if (fileType === 'zip') {
          return 'ht-icon-zip'
        }
        if (fileType === 'txt') {
          return 'ht-icon-txt'
        }
        if (fileType === 'mp4') {
          return 'ht-icon-mp4'
        }
        let imgArr = ['jpeg', 'png', 'gif', 'psd', 'dds', 'webp', 'svg', 'jpg']
        if (imgArr.includes(fileType)) {
          return 'ht-icon-img'
        }
        let FileType = [
          'jpeg',
          'png',
          'gif',
          'psd',
          'dds',
          'webp',
          'svg',
          'jpg',
          'mp4',
          'txt',
          'zip',
          'rar',
          'pdf',
          'ppt',
          'xls',
          'xlsx',
          'docx',
          'doc',
        ]
        if (!FileType.includes(fileType)) {
          return 'ht-icon-qita'
        }
      },
      handleClose() {
        this.showMoreUser = false
      },
      handleShowMoreUser(users) {
        this.getOrgAndPost(users)
        this.showMoreUser = true
      },
      getOrgAndPost(users) {
        const userIds = users.map((it) => it.id).join(',')
        this.$requestConfig.getOrgAndPostByUserId(userIds).then((res) => {
          if (res && res.value && Object.keys(res.value).length) {
            const { value } = res
            this.userData = users.map((item) => {
              const userInfo = value[item.id] || {}
              return {
                ...item,
                orgName: userInfo.org && userInfo.org.orgName,
                account: userInfo.account,
                postName:
                  userInfo.post &&
                  userInfo.post.map((it) => it.postName).join('/'),
              }
            })
          } else {
            this.userData = users
          }
        })
      },
      formatQualfieds(data) {
        let qualfieds = data || []
        if (typeof qualfieds === 'string') {
          qualfieds = JSON.parse(qualfieds)
        }
        return qualfieds
      },
      currentShowUser(data) {
        let users = ''
        if (data.length > 2) {
          users = data
            .slice(0, 2)
            .map((item) => item.name)
            .join('/')
        } else {
          users = data.map((item) => item.name).join('/')
        }

        return users
      },
      search(item) {
        window.open(
          this.$requestConfig.filePreview(item.response && item.response.fileId)
        )
      },
      getAvatars(ids) {
        return this.$requestConfig.getAvatarsByUserId(ids.join(','))
      },
      downloadAttachments(item) {
        this.$requestConfig
          .download(item.response && item.response.fileId)
          .then(({ data, headers }) => {
            // 附件下载
            const fileName = decodeURIComponent(
              headers['content-disposition'].split(';')[1].split('filename=')[1]
            )
            const blob = new Blob([data])
            saveAs(blob, fileName)
          })
          .catch((err) => {
            this.showMessage(`附件下载失败：${err}`, 'danger')
          })
      },
      isQualfiedListHasUser(data) {
        if (Array.isArray(data)) {
          for (let i = 0; i < data.length; i++) {
            if (data[i].users) {
              return true
            }
          }
          return false
        }
      },
      showQualfiedsNames(status, qualfieds, qualfiedNames) {
        let result = this.qualfiedsName(qualfiedNames, true)
        let length = result && result.length ? result.length : ''
        return (
          (length < 2 && status != 'awaiting_check') ||
          (status == 'awaiting_check' &&
            qualfieds &&
            qualfieds.length == 1 &&
            !qualfieds[0].users)
        )
      },
      qualfiedsName(names, isLength) {
        if (names && isLength) {
          return names.split(',').length
        }
        if (names && !isLength) {
          return names.split(',')
        }
      },
      loadData(param, cb) {
        const params = {
          ...this.flowData,
        }

        this.$requestConfig
          .getOpinionsById(params)
          .then((response) => {
            response.map((e) => {
              //有可能出现e.files是"\"\""的情况
              e.filesArray = []
              // if (e.files && utils.isJSON(e.files)) {
              //   e.filesArray = JSON.parse(e.files) || []
              // }
              if (e.files) {
                e.files = JSON.parse(e.files)
                e.filesArray = eval(e.files)
              }
            })
            this.rows = response

            if (response && response.length) {
              const ids = response
                .map((item) => {
                  const qualfiedList = this.formatQualfieds(item.qualfieds)
                  if (item.auditor) {
                    return item.auditor
                  }
                  return qualfiedList.map((it) => it.id).join(',')
                })
                .filter(Boolean)
              this.getAvatars(_.union(ids)).then((res) => {
                this.avatarMap = res
                if (res && Object.keys(res).length) {
                  this.rows = response
                    .map((item) => {
                      const firstQualfieds = this.formatQualfieds(
                        item.qualfieds
                      )[0]
                      const manualEndUserId =
                        !item.qualfieds && item.auditor ? item.auditor : ''
                      return {
                        ...item,
                        imgSrc:
                          firstQualfieds && res[firstQualfieds.id]
                            ? this.$requestConfig.getImgSrc(
                                res[firstQualfieds.id]
                              )
                            : manualEndUserId && res[manualEndUserId]
                            ? this.$requestConfig.getImgSrc(
                                res[manualEndUserId]
                              )
                            : '',
                      }
                    })
                    .reverse()
                  this.filterOpinions()
                }
              })
            } else {
              this.filterOpinions()
            }
          })
          .finally(() => {
            cb && cb()
          })
      },
      filterOpinions() {
        if (!this.rows || this.rows == undefined) {
          return
        }
        this.rows = this.rows.filter((r) => r.status != 'modify_opinion')
      },
      //持续时间
      formatTimeLag(row) {
        let endTimes = new moment()
        if (!row.completeTime) {
          endTimes = new moment(new Date())
        } else {
          endTimes = new moment(new Date(row.completeTime))
        }

        let createTime = new moment(new Date(row.createTime))
        let duration = moment.duration(endTimes.diff(createTime))
        let { _data } = duration
        if (_data.days > 0) return _data.days + '天'
        if (_data.hours > 0) return _data.hours + '小时'
        if (_data.minutes > 0) return _data.minutes + '分钟'
        if (_data.minutes == 0 && _data.seconds >= 0) return '小于1分钟'
      },
      preview(file) {
        if (file.status !== 'success') {
          this.$message.warning(this.t('ht.file.forbiddenPreview'))
          return
        }

        window.open(
          this.$requestConfig.filePreview(file.response && file.response.fileId)
        )
      },
      download(file) {
        this.$requestConfig
          .download(file.response.fileId)
          .then(({ data, headers }) => {
            if (data && headers) {
              // 附件下载
              const fileName = decodeURIComponent(
                headers['content-disposition']
                  .split(';')[1]
                  .split('filename=')[1]
              )
              const blob = new Blob([data])
              saveAs(blob, fileName)
            }
          })
          .catch((err) => {
            this.$toast.fail(`附件下载失败：${err}`)
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-opinion {
    .mobile-opinion {
      // margin-top: 44px;
      .ul-wrap {
        .item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          position: relative;
          &:not(:last-child) {
            &::after {
              content: '';
              position: absolute;
              width: 1px;
              background: #acd5ff;
              left: 16px;
              top: 36px;
              height: calc(100% - 40px);
            }
          }
          .left-img-box {
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 4px;
            background: #409eff;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon {
              font-size: 22px;
              width: 28px;
              height: 28px;
              line-height: 28px;
              border-radius: 4px;

              background-size: 100% 100%;
              padding-top: 0;

              &.ht-icon-gangwei {
                background: url(../../../src/assets/file/gangwei.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-zuzhi {
                background: url(../../../src/assets/file/zuzhi.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-jiaose {
                background: url(../../../src/assets/file/jiaose.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-zhiwu {
                background: url(../../../src/assets/file/zhiwu.svg);
                background-size: 100% 100%;
              }
            }
            .text {
              color: #fff;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .warn-icon-box {
            background: #e55555;
            svg {
              color: #fff;
              width: 20px !important;
              height: 20px !important;
            }
          }

          .item-right {
            flex: 1;
            width: calc(100% - 32px - 16px);
            margin-left: 16px;
            margin-bottom: 24px;
            .right-top,
            .right-bottom {
              display: flex;
              justify-content: space-between !important;
            }
            .right-top {
              line-height: 20px;

              .bottom-left-text {
                font-size: 14px;
                color: #262626;
              }
              .left-text-box {
                display: flex;
                align-items: center;
                .qualfiedNames-total {
                  font-size: 12px;
                  color: #8c8c8c;
                  padding: 0 4px;
                }
                .more-icon {
                  color: #409eff;
                  font-size: 16px;
                  margin-top: 1px;
                }
                .top-left-text.warn-text {
                  color: #e55555;
                }
              }
              .top-right-text {
                color: #8c8c8c;
                font-size: 12px;
              }
            }
            .option {
              margin: 0;
              padding: 8px;
              background: #f9f9f9;
              font-size: 12px;
              color: #8c8c8c;
              border-radius: 4px 4px 4px 4px;
              line-height: 1.5;
              word-break: break-all;
              white-space: pre-line;
            }
            .icon {
              font-size: 22px;
              margin-right: 4px;
              width: 22px;
              height: 22px;
              border-radius: 4px;
              background: url(../../../src/assets/file/unknow.svg);
              background-size: 100% 100%;
              padding-top: 0;

              &.ht-icon-doc {
                background: url(../../../src/assets/file/doc.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-img {
                background: url(../../../src/assets/file/img.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-pdf {
                background: url(../../../src/assets/file/pdf.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-ppt {
                background: url(../../../src/assets/file/ppt.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-rar {
                background: url(../../../src/assets/file/rar.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-txt {
                background: url(../../../src/assets/file/txt.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-xls {
                background: url(../../../src/assets/file/xls.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-zip {
                background: url(../../../src/assets/file/zip.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-mp4 {
                background: url(../../../src/assets/file/mp4.svg);
                background-size: 100% 100%;
              }
              &.ht-icon-qita {
                background: url(../../../src/assets/file/qita.svg);
                background-size: 100% 100%;
              }
            }
            .fileName {
              width: calc(100% - 47px);

              color: #262626;
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .cont {
              padding: 8px;
              margin: 8px 0;
              background: #f9f9f9;
              color: #262626;
              border-radius: 4px 4px 4px 4px;
              display: flex;
              align-items: center;
            }
            .icon-xiazai1 {
              font-size: 22px;
              position: absolute;
              right: 8px;
              color: #8c8c8c;
            }
            .right-bottom {
              margin: 8px 0;
              height: 17px;
              line-height: 17px;
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              .top-left-text {
                font-size: 14px;
                font-weight: 500;
                color: #262626;
              }
              .bottom-right-text {
                font-size: 12px;
                color: #07c160;
                .status-icon {
                  top: 1.5px;
                  font-size: 16px;
                }
              }
              .blue-bg {
                color: #409eff;
              }
              .red-bg {
                color: #e55555;
              }
              .sky-bg {
                color: #3ac3df;
              }
              .purple-bg {
                color: #4053ff;
              }
              .zb-bg {
                color: #73c0d4;
              }
              .hqjq-bg {
                color: #8550e1;
              }
              .wt-bg {
                color: #51519a;
              }
              .gx-bg {
                color: #e57a52;
              }
              .yellow-bg {
                color: #ffae44;
              }
            }
          }
          .image {
            width: 32px;
            height: 32px;
            border-radius: 4px;
          }
        }
      }
    }
    .user-top {
      display: flex;
      justify-content: center;
      padding: 12px 16px;
      width: calc(100% - 32px);
      position: relative;
      .top-close {
        font-size: 14px;
        color: #8c8c8c;
        position: absolute;
        left: 16px;
      }
      .user-title {
        margin: 0;
        font-size: 17px;
        color: #1a1a1a;
        font-weight: 800;
        .user-count {
          padding-left: 4px;
          color: #409eff;
        }
      }
    }
    .user-wrap {
      padding: 8px 16px;
      .user-item {
        display: flex;
        width: 100%;
        padding: 12px 0;
        .user-left {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #409eff;
          text-align: center;
          line-height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
          .name {
            font-size: 12px;
            color: #fff;
          }
        }
        .user-right {
          flex: 1;
          padding-left: 8px;
          .right-top {
            height: 21px;
            line-height: 21px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .user-name {
              font-size: 15px;
              color: #212121;
              font-weight: 500;
            }
            .user-account {
              font-size: 12px;
              color: #8c8c8c;
            }
          }

          .right-bottom {
            margin-top: 4px;
            height: 17px;
            line-height: 17px;
            .right-org,
            .right-post {
              color: #8c8c8c;
              font-size: 12px;
            }
            .right-org {
              padding-right: 32px;
            }
          }
        }
      }
    }
  }
</style>
