<template>
  <div>
    <van-popup
      v-model="showFlowChart"
      round
      :close-on-click-overlay="false"
      safe-area-inset-bottom
      position="bottom"
      style="max-height: 80%"
    >
      <van-nav-bar
        :title="title"
        left-text="关闭"
        @click-left="showFlowChart = false"
      />
      <div class="btn-group">
        <div v-for="item in btnList" :key="item.id" class="btn-item">
          <span class="icon" :style="{ background: item.bgColor }"></span>
          <span class="label">{{ item.label }}</span>
        </div>
      </div>
      <div class="flow-chart">
        <div
          :style="{
            position: 'relative',
            width: imgWidth + 'px',
            height: imgHeight + 'px',
            background: 'url(' + backGroundImg + ') no-repeat',
          }"
        >
          <template v-for="layout in listLayout">
            <el-popover
              v-if="instId"
              :key="layout.nodeId"
              trigger="hover"
              placement="bottom-start"
            >
              <div v-if="nodeOpinions[layout.nodeId]" class="options">
                <div class="title">任务审批详情</div>
                <!-- 已审批/待审批节点 -->
                <template v-if="hasOpinion(layout)">
                  <table v-for="op in getData(layout)" :key="op.id">
                    <tr>
                      <td class="label">任务名称</td>
                      <td class="value">{{ op.taskName }}</td>
                    </tr>
                    <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">
                        <span v-for="user in op.qualfieds" :key="user.id">
                          <el-button v-if="!user.users" :disabled="true">
                            <span class="textOverflow" :title="user.name">
                              {{ user.name }}
                            </span>
                          </el-button>
                          <el-tooltip
                            v-if="user.users"
                            effect="light"
                            :content="user.users"
                            placement="top"
                          >
                            <el-button>
                              <span class="textOverflow" :title="user.name">
                                {{ user.name }}
                              </span>
                            </el-button>
                          </el-tooltip>
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="label">开始时间</td>
                      <td class="value">{{ op.createTime }}</td>
                    </tr>
                    <tr>
                      <td class="label">结束时间</td>
                      <td class="value">{{ op.completeTime }}</td>
                    </tr>
                    <tr>
                      <td class="label">审批用时</td>
                      <td class="value">{{ op.durMs | calcDuration }}</td>
                    </tr>
                    <tr>
                      <td class="label">状态</td>
                      <td class="value">{{ op.statusVal }}</td>
                    </tr>
                    <tr>
                      <td class="label">意见</td>
                      <td class="opinion">{{ op.opinion }}</td>
                    </tr>
                  </table>
                </template>

                <!-- 未审批节点 -->
                <template v-else>
                  <div class="sub-title">节点设置详情</div>
                  <table>
                    <tr>
                      <td class="label">状态</td>
                      <td class="value">未产生过任务</td>
                    </tr>
                    <tr>
                      <td class="label">
                        <span>暂定候选人</span>
                        <el-tooltip
                          effect="light"
                          content="暂定的有审批资格的用户及用户组，实际候选人要在产生任务以后才能确定"
                          placement="right"
                        >
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </td>
                      <td class="value">
                        <span v-for="user in getData(layout)" :key="user.id">
                          <el-button
                            v-if="!user.users"
                            :disabled="true"
                            style="margin-right: 5px"
                          >
                            <span class="textOverflow" :title="user.name">
                              {{ user.name }}
                            </span>
                          </el-button>
                          <el-tooltip
                            v-else
                            effect="light"
                            :content="user.users"
                            placement="top"
                          >
                            <el-button>
                              <span class="textOverflow" :title="user.name">
                                {{ user.name }}
                              </span>
                            </el-button>
                          </el-tooltip>
                        </span>
                      </td>
                    </tr>
                  </table>
                </template>
              </div>

              <el-button
                v-if="showLayout(layout)"
                slot="reference"
                :style="getStyle(layout)"
              ></el-button>
            </el-popover>
          </template>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import flow from '@/api/flow'

  const btnList = [
    { id: 1, label: '待审批', bgColor: '#FF0000' },
    { id: 2, label: '提交', bgColor: '#F89800' },
    { id: 3, label: '重新提交', bgColor: '#FFE76E' },
    { id: 4, label: '同意', bgColor: '#00FF00' },
    { id: 5, label: '挂起', bgColor: '#C33A1F' },
    { id: 6, label: '反对', bgColor: '#0000FF' },
    { id: 7, label: '驳回', bgColor: '#8A0902' },
    { id: 8, label: '驳回到发起人', bgColor: '#FFA500' },
    { id: 9, label: '撤回', bgColor: '#023B62' },
    { id: 10, label: '撤回到发起人', bgColor: '#F23B62' },
    { id: 11, label: '会签通过', bgColor: '#338848' },
    { id: 12, label: '会签不通过', bgColor: '#82B7D7' },
    { id: 13, label: '人工终止', bgColor: '#EEAF97' },
    { id: 14, label: '完成', bgColor: '#4A4A4A' },
  ]
  export default {
    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
      },
    },
    props: {
      defId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
      bpmnInstId: {
        type: String,
        default: '',
      },
      customClass: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        showFlowChart: false,
        title: '',
        btnList: btnList,
        imgWidth: '',
        imgHeight: '',
        backGroundImg: '',
        listLayout: '',
        nodeOpinions: [],
      }
    },
    methods: {
      showLayout(layout) {
        const taskNames = ['USERTASK', 'SIGNTASK', 'CUSTOMSIGNTASK']
        return taskNames.includes(layout.nodeType)
      },
      hasOpinion(layout) {
        return this.nodeOpinions[layout.nodeId].hasOpinion
      },
      getData(layout) {
        return this.nodeOpinions[layout.nodeId].data
      },
      getStyle(layout) {
        return {
          position: 'absolute',
          top: layout.y + 'px',
          left: layout.x + 'px',
          width: layout.width + 'px',
          height: layout.height + 'px',
          border: 'none',
          background: 'none',
        }
      },
      handleOpen() {
        this.showFlowChart = true

        const data = {
          defId: this.defId,
          instId: this.instId,
          bpmnInstId: this.bpmnInstId,
        }
        flow.instanceFlowImage(data).then((instFlowInfo) => {
          const { defId, instanceId, bpmDefLayout } = instFlowInfo
          let myDefId = ''
          if (['', 'null', 'undefined'].includes(instanceId)) {
            myDefId = defId
          }
          this.title = bpmDefLayout.name
          flow.getBpmImage('', instanceId, myDefId).then((res) => {
            this.imgWidth = bpmDefLayout.width
            this.imgHeight = bpmDefLayout.height

            this.backGroundImg = res

            bpmDefLayout.listLayout.forEach((item) => {
              const style = {
                position: 'absolute',
                left: item.x + 'px',
                top: item.y + 'px',
                width: item.width + 'px',
                height: item.height + 'px',
              }
              item.style = style
            })
            this.listLayout = bpmDefLayout.listLayout

            const tempIds = []
            this.listLayout.forEach((layout) => {
              const { nodeId, nodeType } = layout
              if (['USERTASK', 'SIGNTASK'].includes(nodeType)) {
                tempIds.push(nodeId)
              }
            })

            let nodeIds = tempIds.join(',')
            const data = { instId: this.instId, nodeIds }
            if (this.instId) {
              flow.getNodeOpinions(data).then((options) => {
                if (options) {
                  for (const key in options) {
                    const { data, hasOpinion } = options[key]
                    if (data && hasOpinion) {
                      data.forEach((ele) => {
                        if (ele.qualfieds) {
                          ele.qualfieds = eval('(' + ele.qualfieds + ')')
                        }
                      })
                    }
                  }
                }
                if (nodeIds && tempIds.length == 1) {
                  this.nodeOpinions = {
                    [nodeIds]: options,
                  }
                } else {
                  this.nodeOpinions = options
                }
              })
            }
          })
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    margin: 16px 20px 24px;
    .btn-item {
      display: flex;
      align-items: center;
      // margin: 0 15px 5px 0;
      margin-bottom: 5px;
      width: 25%;
      .icon {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 4px;

        border-radius: 4px 4px 4px 4px;
      }
      .lable {
        color: #333333;
      }
    }
  }
  .flow-chart {
    font-size: 12px;
    overflow: auto;
    min-height: 500px;
    margin: 0 20px;
    max-height: 550px;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .sub-title {
    font-size: 12px;
  }
  .options {
    max-height: 420px;
    overflow-y: auto;

    ::v-deep table {
      margin-bottom: 10px;
      font-size: 12px;
      border-spacing: 0;
      border-bottom: 1px solid #e7eaec;
      border-left: 1px solid #e7eaec;
      td {
        padding: 8px;
        line-height: 1.42857;
        border-top: 1px solid #e7eaec;
        border-right: 1px solid #e7eaec;
        vertical-align: middle;
      }
      .label {
        width: 80px;
        font-weight: bold;
      }
      .value {
        width: 160px;
        .textOverflow {
          width: 70px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .opinion {
        max-width: 250px;
        min-width: 250px;
        word-wrap: break-word;
      }
    }
  }
  ::v-deep .start-btn__flow-chart {
    width: 60% !important;
    .flow-chart {
      min-height: unset;
    }
  }
  .van-popup {
    ::v-deep {
      .van-nav-bar__left {
        .van-nav-bar__text {
          color: #8c8c8c;
        }
      }
      .van-nav-bar__title {
        font-weight: bold;
      }
      .van-nav-bar__right {
        .van-nav-bar__text {
          color: #409eff;
        }
      }
    }
  }
</style>