<template>
  <div :class="isMobile ? 'isMobile' : ''">
    <template v-if="!isMobile">
      <table v-for="op in opinions" :key="op.id">
        <tr v-show="op.auditor">
          <td class="label">执行人</td>
          <td class="value">{{ op.auditorName }}</td>
        </tr>
        <tr v-show="!op.auditor">
          <td class="label">
            <span>候选人</span>
            <el-tooltip
              effect="light"
              content="有资格审批的用户及用户组"
              placement="right"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </td>
          <td class="value">
            <el-tooltip
              v-if="getJsonArray(op.qualfieds).length"
              effect="light"
              :content="getUsers(op.qualfieds).users.replaceAll('/', '，')"
              placement="top"
            >
              <div class="approval-name">
                {{ getUsers(op.qualfieds).users }}
              </div>
            </el-tooltip>
            <div
              v-if="
                getUsers(op.qualfieds).userGroup &&
                getUsers(op.qualfieds).userGroup.length
              "
              class="user-group-wrap"
            >
              <template v-for="user in getUsers(op.qualfieds).userGroup">
                <el-tooltip
                  v-if="user.users"
                  :key="user.id"
                  effect="light"
                  :content="user.users.replaceAll(',', '，')"
                  placement="top"
                >
                  <el-button class="user-btn">{{ user.name }}</el-button>
                </el-tooltip>
              </template>
            </div>
          </td>
        </tr>
        <tr>
          <td class="label">审批时间</td>
          <td class="value">
            {{ op.createTime }} -
            {{ op.completeTime || '暂无结束时间' }}
            <br />
            <span v-if="op.durMs >= 1000">
              用时 ({{ op.durMs | calcDuration }})
            </span>
          </td>
        </tr>
        <tr>
          <td class="label">状态</td>
          <td
            class="value"
            :style="{
              color: statusColorMap[op.status] ? statusColorMap[op.status] : '',
            }"
          >
            {{ op.statusVal }}
          </td>
        </tr>
        <tr>
          <td class="label">意见</td>
          <td class="opinion" v-html="op.opinion"></td>
        </tr>
      </table>
    </template>

    <template v-for="(op, $index) in opinions" v-else>
      <div
        class="sign"
        :class="marginClass && $index == 0 ? 'marginClass' : ''"
      >
        <div v-show="op.auditor">
          <div class="label">执行人</div>
          <div class="value sign_name">{{ op.auditorName }}</div>
        </div>
        <div v-show="!op.auditor">
          <div class="label">
            <span>候选人</span>
          </div>
          <div class="value sign_name" @click="showAllPeople(op.qualfieds)">
            <span
              v-for="(user, i) in getJsonArray(op.qualfieds)"
              :key="user.id"
            >
              <template v-if="i < 3">
                <span v-if="0 < i">,</span>
                <span>
                  {{ user.name }}
                </span>
              </template>
              <!-- <span>
                {{ user.name }}
              </span>

              <span v-if="i + 1 < getJsonArray(op.qualfieds).length">
                ,
              </span> -->
            </span>
            <van-icon
              v-if="
                (getJsonArray(op.qualfieds) &&
                  getJsonArray(op.qualfieds).length > 3) ||
                (getJsonArray(op.qualfieds) && showOrder(op.qualfieds))
              "
              name="arrow"
            />
            <!-- getJsonArray(op.qualfieds).length == 1 &&
                    getJsonArray(op.qualfieds)[0].type != 'user' -->
          </div>
        </div>

        <div>
          <div class="label">开始时间</div>
          <div class="value sign_name">
            {{ op.createTime }}
          </div>
        </div>
        <div>
          <div class="label">结束时间</div>
          <div class="value sign_name">
            {{ op.completeTime || '暂无结束时间' }}
          </div>
        </div>
        <div>
          <div class="label">审批用时</div>
          <div v-if="op.durMs" class="value sign_name">
            <template v-if="op.durMs >= 1000">
              {{ op.durMs | calcDuration }}
            </template>
            <template v-else>0</template>
          </div>
          <div v-else class="value befValue">未产生审批用时</div>
        </div>
        <div>
          <div class="label">状态</div>
          <div
            class="value sign_name"
            :style="{
              color: statusColorMap[op.status] ? statusColorMap[op.status] : '',
            }"
          >
            {{ op.statusVal }}
          </div>
        </div>
        <div class="opinion">
          <div class="label">意见</div>
          <div v-if="op.opinion" class="opinion value sign_name">
            <div style="white-space: pre-line" v-html="op.opinion"></div>
          </div>
          <div v-else class="value befValue">未产生审批意见</div>
        </div>
        <van-divider v-if="$index + 1 !== opinions.length" />
      </div>
    </template>
    <!-- </van-popup> -->
    <!-- //显示组织人员 -->
    <peoplePopup ref="peoplePopup"></peoplePopup>
  </div>
</template>

<script>
  import peoplePopup from './peoplePopup.vue'
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'NodeDetail',
    components: {
      peoplePopup,
    },
    filters: {
      calcDuration(ts) {
        let duration = '',
          st = 1000,
          mt = 60 * st,
          ht = 60 * mt,
          dt = 24 * ht,
          days = Math.floor(ts / dt),
          hours = Math.floor((ts % dt) / ht),
          mins = Math.floor((ts % ht) / mt),
          secs = Math.floor((ts % mt) / st)
        if (days > 0) duration += days + '天'
        if (hours > 0) duration += hours + '小时'
        if (mins > 0) duration += mins + '分钟'
        if (secs > 0) duration += secs + '秒'
        return duration
      },
    },
    mixins: [mobileMode],
    props: {
      opinions: {
        type: Array,
        default: [],
      },
      statusColorMap: {
        type: Object,
        default: {},
      },
      layoutName: {
        type: String,
        default: '',
      },
      marginClass: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {}
    },
    watch: {
      opinions: {
        handler(val) {
          console.log(val)
        },
        deep: true,
        immediate: true,
      },
    },
    created() {},
    methods: {
      getUsers(data) {
        let result = {}
        const currentUserData = this.getJsonArray(data)
        if (currentUserData.length) {
          result.users = currentUserData
            .filter((item) => !item.groupType)
            .map((item) => item.name)
            .join('/')
          result.userGroup = currentUserData.filter((item) => item.groupType)
        }
        return result
      },
      getJsonArray(qualfieds, Bol = true) {
        if (!qualfieds) {
          return []
        }
        if (qualfieds.constructor == String) {
          return JSON.parse(qualfieds)
        }

        if (this.isMobile && Bol && qualfieds.length > 3) {
          qualfieds.length = 3
        }
        return qualfieds
      },
      showOrder(list) {
        let data = this.getJsonArray(list)
        return data.some((item) => {
          return item.type != 'user'
        })
      },
      //显示全部人
      showAllPeople(dataList) {
        console.log('dataList: ', dataList)

        this.$refs.peoplePopup.showDialog(this.getJsonArray(dataList, false))
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './flowChart.scss';
  ::v-deep .van-divider {
    height: 1px !important;
  }
  .approval-name {
    width: 234px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #262626;
  }
  .user-group-wrap {
    width: 234px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -8px;

    .user-btn {
      border-color: #409eff;
      color: #409eff;
      border-radius: 4px;
      padding: 8px 14px;
      margin: 0 8px 8px 0 !important;
    }
  }
</style>
