<template>
  <div class="details" v-if="pageShow">
    <div :class="list.approvalStatus == 1 ? 'detail_content' : 'detail_content1'">
      <!-- 顶部文件预览和查看 -->
      <div class="top" v-if="list.approvalStatus == 1">
        <p>审批通过:</p>
        <div class="save">
          <div style="display: inline">[{{ this.list.tableInfo.tableName }}]已签署完成,</div>
          <AiImage preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </AiImage>
        </div>
      </div>

      <div class="form">
        <!-- 审批表单名称 -->
        <text class="text">{{ list.processDefName }}</text>

        <div class="people">
          <!-- 左 -->
          <div class="people_msg">
            <!-- 圆形头像 -->
            <div class="avatar">
              <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
              <span v-else> {{ $formatName(list.createUserName) }}</span>
            </div>

            <text class="name">
              <!-- 姓名 -->
              <p class="name_con">{{ list.createUserName }}</p>
              <!-- 日期 -->
              <p class="name_createtime">{{ list.createTime }}</p>
            </text>
          </div>

          <!-- 右 -->
          <!-- 审批状态 -->
          <!-- 审批中 -->
          <div class="people_status_ing" v-if="list.approvalStatus == 0">
            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
          </div>

          <!-- 已通过 -->
          <div class="people_status_agree" v-if="list.approvalStatus == 1">
            <img src="./components/people_status_agree.png" alt="" />
          </div>

          <!-- 被驳回 -->
          <div class="people_status_reject" v-if="list.approvalStatus == 2">
            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
          </div>
        </div>

        <!-- 表头内容 -->
        <div class="content">
          <div class="item">
            <span class="item_info">所属类型：</span>
            <span class="zhuf"> {{ list.classificationName }}</span>
          </div>

          <div class="item">
            <span class="item_info">所属部门：</span>
            <span class="liangzhu">
              {{ $dict.getLabel('hbDepartment', list.department) }}
            </span>
          </div>

          <div class="item">
            <span class="item_info">审批编号：</span>
            <span class="liangzhu">{{ list.serialNumber }}</span>
          </div>

          <div class="item">
            <div class="item_info">
              <span class="annexs">附件资料：</span>
              <div class="img_text" v-for="(item, indexs) in list.annexs" :key="indexs">
                <AiImage :src="item.annexFile.url" preview />
                <span class="text">{{ item.annexName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- tabs栏 -->
      <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>

      <!-- 表单申请的折叠窗 -->
      <div style="background-color: #fff" v-if="current == 0">
        <div class="collapse">
          <u-collapse event-type="close" :arrow="true" :accordion="true">
            <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :open="true" :key="index">
              <div v-for="(items, indexs) in item" :key="indexs">
                <div class="item_msg">
                  <!-- 左 -->
                  <span class="msg_lef">{{ items.fieldName }}</span>
                  <!-- 右 -->
                  <!-- 字典值 items.dictionaryCode -->
                  <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
                  <span class="msg_lright" v-else>
                    <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
                      >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
                      <span v-if="indexL < items.fieldValue.length - 1">,</span>
                    </span>
                  </span>
                </div>
              </div>
            </u-collapse-item>
          </u-collapse>
        </div>
      </div>

      <!-- 流程信息 -->
      <div v-if="current == 1" class="workflow">
        <div class="step-list">
          <div class="step-item" v-for="(item, index) in stepList" :key="index">
            <div class="item-left">
              <div class="item-left-ava-icon">
                <div class="avatar" v-if="item.userName">
                  <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
                  <span v-else> {{ $formatName(item.userName) }}</span>
                </div>

                <div class="avatar" v-else-if="item.title == '抄送'">
                  <img src="./components/Profile_Picture.png" alt="" />
                </div>

                <div class="avatar" v-else>
                  <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div>
                </div>

                <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
                  <img src="./components/agree.png" alt="" />
                </div>

                <div class="" v-else-if="item.stepType == 2"></div>

                <div class="icon-no" v-else>
                  <img src="./components/clearn.png" />
                </div>
              </div>

              <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div>
            </div>

            <div class="item-right">
              <div class="time-info">
                <div>{{ item.title }}</div>
                <span>{{ item.approvalTime }}</span>
              </div>
              <div class="item-right-flex">
                <span class="title2">{{ item.title2 }}</span>

                <span class="title2Desc-ing" v-if="item.stepType == 9">{{ item.title2Desc }}</span>

                <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span>

                <span class="title2Desc" v-else>{{ item.title2Desc }}</span>

                <div class="user-list">
                  <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
                    <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
                    <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
                  </div>
                </div>

                <!-- <div v-if="item.candidateFieldInfos" v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
                  <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
                  <span>{{ item2.fieldValue }}</span>
                </div> -->

                <div v-for="(item4, indexsss) in stepList" :key="indexsss">
                  <span>{{ item4.fieldName }}&nbsp;:&nbsp;</span>
                  <span>{{ item4.fieldValue }}</span>
                </div>

                <span v-if="item.stepType == 2">审批意见:{{ item.opinion }}</span>

                <div class="examine" v-if="item.stepType == 2">
                  <div class="examine_docx1">
                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
                      <AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
                    </div>

                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
                        <AiImage :file="annex" preview>
                          <u-row justify="space-between">
                            <span class="docx-name">{{ annex.name }}</span>
                            <span>{{ annex.fileSizeStr }}</span>
                          </u-row>
                        </AiImage>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
                  <div class="examine_docx1">
                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
                      <AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
                    </div>

                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
                        <AiImage :file="annex" preview>
                          <u-row justify="space-between">
                            <span class="docx-name">{{ annex.name }}</span>
                            <span>{{ annex.fileSizeStr }}</span>
                          </u-row>
                        </AiImage>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="reject_agree" v-if="canApproval && list.approvalStatus == 0">
      <div class="reject" @click="agree(0)">拒绝</div>
      <div class="agree" @click="agree(1)">同意</div>
    </div>

    <AiBack></AiBack>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  components: {},
  computed: {
    canApproval() {
      return this.listType == 0
    },
  },
  onLoad(options) {
    this.objid = options.id
    this.listType = options.listType
    this.getDetail()
  },
  data() {
    return {
      objid: '',
      list: [],
      list_tabs: [
        {
          name: '申请表单',
        },
        {
          name: '流程信息',
        },
      ],
      current: 0,
      inforlist: [],
      stepList: [],
      dictList: ['hbDepartment'],
      pageShow: false,
      listType: 0,
      eventChannel: null,
    }
  },
  // 方法
  methods: {
    getDetail() {
      this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.objid}`).then((res) => {
        if (res.code == 0) {
          if (res.data) {
            this.list = res.data

            // if (res.data.createUserAvatar) {
            //   console.log(res.data.createUserAvatar)
            // }

            this.inforlist = [[], [], [], [], [], [], [], [], [], []]
            res.data.tableInfo.tableFieldInfos.map((item) => {
              if (item.groupIndex) {
                this.inforlist[item.groupIndex - 1].push(item)
              }

              if (item.dictionaryCode) {
                this.dictList.push(item.dictionaryCode)
              }
              if (item.fieldDataType == 5) {
                // item.fieldValue = item.fieldValue.split(',')
              }
            })

            this.$dict.load(this.dictList).then(() => {
              this.pageShow = true
            })
          }
        }
      })

      this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.objid}`).then((res) => {
        if (res.code == 0) {
          if (res.data) {
            this.stepList = res.data
            // this.getDetail()
            // console.log(this.stepList)
            // res.data.map((item) => {
            //   if (item.candidateFieldInfos) {
            //     item.candidateFieldInfos.map((items) => {
            //       console.log(items.fieldName)
            //       console.log(items.fieldValue)
            //     })
            //   }
            // })
          }
        }
      })
    },

    change(i) {
      this.current = i
    },

    agree(type) {
      this.$http
        .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.objid}`)
        .then((res) => {
          if (res.code == 0) {
            uni.navigateTo({
              url: `./Opinion?id=${this.objid}&type=${type}`,
            })
          }
        })
        .catch((e) => {
          uni.showToast({
            title: e,
            icon: 'none',
          })
        })
    },
  },
}
</script>

<style scoped lang="scss">
.details {
  .detail_content1 {
    background-color: #fff;
    padding-bottom: 348px;

    .top {
      background-color: #eff4ff;
      height: 144px;
      padding: 32px 0 0 32px;
      color: #3a7ee2;
      font-size: 28px;

      .save {
        margin-top: 8px;

        .clicksave {
          text-decoration: underline;
        }
      }
    }

    .form {
      padding: 32px;
      background-color: #fff;

      .text {
        font-size: 40px;
        font-weight: 800;
      }

      .people {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        // margin-top: 20px;
        height: 122px;
        line-height: 122px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;

        .people_msg {
          .avatar {
            display: inline-block;
            width: 84px;
            height: 84px;
            line-height: 84px;
            border-radius: 50%;
            background-color: #2266ff;
            color: #fff;
            font-size: 28px;
            vertical-align: middle;
            text-align: center;
            margin-right: 10px;
          }

          .name {
            display: inline-block;
            width: 145px;
            vertical-align: middle;

            .name_con {
              font-size: 30px;
              height: 40px;
            }

            .name_createtime {
              color: #999;
              font-size: 24px;
              height: 120px;
              width: 400px;
            }
          }
        }

        .people_status_ing {
          color: #ff8822;
          text-align: center;
        }

        .people_status_agree {
          width: 192px;
          height: 192px;

          img {
            width: 192px;
            height: 192px;
            margin-top: -60px;
          }
        }

        .people_status_reject {
          color: #f14242;
          text-align: center;
        }
      }

      .content {
        margin-top: 16px;

        .item {
          margin-top: 16px;

          .item_info {
            display: inline;
            font-size: 30px;
            font-weight: 400;
            color: #999999;

            .annexs {
              vertical-align: top;
            }

            .img_text {
              display: inline-block;
              position: relative;
              width: 180px;
              height: 175px;

              img {
                width: 180px;
                height: 100%;
              }

              .text {
                position: absolute;
                bottom: 14px;
                // text-align: center;
                left: 0;
                width: 160px;
                font-size: 12px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                background-color: #000;
                opacity: 0.4;
              }
            }
          }

          .zhuf {
            font-size: 30px;
            font-weight: 400;
            color: #1365dd;
          }

          .liangzhu {
            font-size: 30px;
            font-weight: 400;
            color: #343d65;
          }
        }
      }
    }

    .tabs {
      // margin-top: 16px;
    }

    .info {
      height: 16px;
      width: 100%;
      background-color: #eee;
    }

    // 表单申请
    .collapse {
      // margin: 0 32px;
      // padding: 0 32px;
      ::v-deep .u-collapse {
        // background-color: #fff;
      }

      ::v-deep .u-collapse-head {
        background-color: #fff;
        padding: 0 32px;
        height: 96px;
      }

      ::v-deep .u-collapse-body {
        padding: 0 32px;
        background-color: #fafafa;

        .u-collapse-content {
          .item_msg {
            display: flex;
            // align-items: center;
            justify-content: space-between;
            padding: 10px 0;

            .msg_lef {
              width: 350px;
              font-size: 30px;
              font-weight: 400;
              color: #999999;
            }

            .msg_lright {
              max-width: 420px;
              word-break: break-all;
              // word-wrap: break-word;
              margin-right: 0;
              font-size: 30px;
              font-weight: 400;
              color: #333333;
            }
          }

          .account {
            // .account_leave {
            // }
            .account_house {
              margin: 10px 0;
              color: #333;
              font-size: 30px;
            }
          }
        }
      }
    }

    // 流程信息
    .workflow {
      background-color: #fff;
      padding: 24px 32px 40px 32px;

      // 发起申请步骤

      .step-list {
        .step-item {
          display: flex;
          position: relative;
          justify-content: space-between;
          // align-items: center;
          padding-bottom: 40px;

          .item-left {
            height: 100%;
            // position: relative;
            .item-left-ava-icon {
              position: relative;

              .avatar {
                display: inline-block;
                width: 80px;
                height: 80px;
                line-height: 80px;
                border-radius: 50%;
                background-color: #2266ff;
                color: #fff;
                font-size: 28px;
                // vertical-align: middle;
                text-align: center;
                z-index: 999;

                img {
                  // margin: 16px 0 0 8px;
                  width: 48px;
                  height: 48px;
                }
              }

              .icon-yes {
                position: absolute;
                top: 50px;
                left: 50px;
                width: 36px;
                height: 36px;
                // background: #fff;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;

                img {
                  width: 36px;
                  height: 36px;
                }
              }

              .icon-no {
                position: absolute;
                top: 50px;
                left: 50px;
                width: 36px;
                height: 36px;
                background: #ff8822;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;

                img {
                  width: 36px;
                  height: 36px;
                }
              }
            }

            .solid {
              // height: 100%;
              height: calc(100%);
              border-left: 4px solid #eee;
              position: absolute;
              top: 80px;
              left: 40px;
            }

            .dashed {
              // height: 100%;
              height: calc(100%);
              border-left: 4px dashed #eee;
              position: absolute;
              top: 80px;
              left: 40px;
            }
          }

          .item-right {
            width: 590px;

            .item-right-flex {
              // display: flex;
              // justify-content: space-between;
              // align-items: center;
              .block {
                display: block;
                // margin-top: 124px;
              }

              .title2 {
                display: inline-block;
              }

              .title2Desc {
                display: inline-block;
                color: #2ea222;
                margin-left: 10px;
              }

              .title2Desc-ing {
                display: inline-block;
                color: #ff8822;
                margin-left: 10px;
              }

              .title2Desc-false {
                color: #f14242;
                display: inline-block;
                margin-left: 10px;
              }

              .user-list {
                overflow: hidden;
              }

              .item-right-flex-left-name {
                margin-top: 20px;
                float: left;
                margin-right: 16px;
                text-align: center;

                .avatar {
                  display: inline-block;
                  width: 64px;
                  height: 64px;
                  line-height: 64px;
                  border-radius: 50%;
                  background-color: #2266ff;
                  color: #fff;
                  font-size: 28px;
                  vertical-align: middle;
                  text-align: center;
                  // margin-left: 8px;
                }

                .avatar-name {
                  display: block;
                }
              }

              .examine {
                p {
                  margin: 6px 0;
                  font-size: 12px;
                }

                .examine_img {
                  //  float: left;
                  // display: flex;
                  // flex-wrap: wrap;
                  // justify-content: space-between;
                  // img {
                  //   width: 134px;
                  //   height: 136px;
                  //   margin-right: 8px;
                  // }
                  // ::v-deep.AiImage {
                  //   ::v-deep.u-image__image {
                  //     width: 60px !important;
                  //     height: 60px;
                  //   }
                  // }
                }
              }

              .examine_docx1 {
                .docx {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 556px;
                  padding: 16px;
                  background-color: #ddd;
                  margin: 6px 0;

                  .docx-name {
                    width: 440px;
                    margin: 0 8px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }

            .time-info {
              display: flex;
              justify-content: space-between;

              span {
                color: #999;
                font-size: 28px;
              }
            }
          }
        }

        .step-item:first-child {
          .item-right {
            .item-right-flex {
              .block {
                margin-top: 0 !important;
              }
            }
          }
        }

        .step-item:last-child {
          .dashed {
            border-left: 0 !important;
          }

          .solid {
            border-left: 0 !important;
          }
        }
      }
    }

    // 抄送人头像
    .recipients {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      margin: 16px 0 0 120px;

      .recipients_content {
        // display: inline-block;
        // width: 64px;
        // height: 150px;
        margin-left: 32px;

        .name_ava {
          display: inline-block;
          width: 120px;
          // text-align: center;
          margin-top: 5px;

          .avatar {
            display: inline-block;
            width: 64px;
            height: 64px;
            line-height: 64px;
            border-radius: 50%;
            background-color: #2266ff;
            color: #fff;
            font-size: 28px;
            vertical-align: middle;
            text-align: center;
            // margin-left: 8px;
          }

          .recipients_name {
            // display: inline;
            width: 100px;
            height: 34px;
            line-height: 34px;
            // text-align: center;
            // background-color: pink;
            margin-top: 8px;
          }
        }
      }

      // .recipients_content:first-child {
      //   margin-left: 0;
      // }
    }
  }

  .detail_content {
    background-color: #fff;
    padding-bottom: 170px;
    // padding-bottom: 320px;
    .top {
      background-color: #eff4ff;
      height: 144px;
      padding: 32px 0 0 32px;
      color: #3a7ee2;
      font-size: 28px;

      .save {
        margin-top: 8px;

        .clicksave {
          text-decoration: underline;
        }
      }
    }

    .form {
      padding: 32px;
      background-color: #fff;

      .text {
        font-size: 40px;
        font-weight: 800;
      }

      .people {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        // margin-top: 20px;
        height: 122px;
        line-height: 122px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;

        .people_msg {
          .avatar {
            display: inline-block;
            width: 84px;
            height: 84px;
            line-height: 84px;
            border-radius: 50%;
            background-color: #2266ff;
            color: #fff;
            font-size: 28px;
            vertical-align: middle;
            text-align: center;
            margin-right: 10px;
          }

          .name {
            display: inline-block;
            width: 145px;
            vertical-align: middle;

            .name_con {
              font-size: 30px;
              height: 40px;
            }

            .name_createtime {
              color: #999;
              font-size: 24px;
              height: 120px;
              width: 400px;
            }
          }
        }

        .people_status_ing {
          color: #ff8822;
          text-align: center;
        }

        .people_status_agree {
          width: 192px;
          height: 192px;

          img {
            width: 192px;
            height: 192px;
            margin-top: -60px;
          }
        }

        .people_status_reject {
          color: #f14242;
          text-align: center;
        }
      }

      .content {
        margin-top: 16px;

        .item {
          margin-top: 16px;

          .item_info {
            display: inline;
            font-size: 30px;
            font-weight: 400;
            color: #999999;

            .annexs {
              // display: inline;
              vertical-align: top;
            }

            .img_text {
              display: inline-block;
              position: relative;
              width: 180px;
              height: 175px;

              img {
                width: 180px;
                height: 100%;
              }

              .text {
                position: absolute;
                bottom: 14px;
                left: -12px;
                font-size: 12px;
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                background-color: #000;
                opacity: 0.4;
                margin-left: 12px;
              }
            }
          }

          .zhuf {
            font-size: 30px;
            font-weight: 400;
            color: #1365dd;
          }

          .liangzhu {
            font-size: 30px;
            font-weight: 400;
            color: #343d65;
          }
        }
      }
    }

    .tabs {
      // margin-top: 16px;
    }

    .info {
      height: 16px;
      width: 100%;
      background-color: #eee;
    }

    // 表单申请
    .collapse {
      // margin: 0 32px;
      // padding: 0 32px;
      ::v-deep .u-collapse {
        // background-color: #fff;
      }

      ::v-deep .u-collapse-head {
        background-color: #fff;
        padding: 0 32px;
        height: 96px;
      }

      ::v-deep .u-collapse-body {
        padding: 0 32px;
        background-color: #fafafa;

        .u-collapse-content {
          .item_msg {
            display: flex;
            // align-items: center;
            justify-content: space-between;
            padding: 10px 0;

            .msg_lef {
              width: 350px;
              font-size: 30px;
              font-weight: 400;
              color: #999999;
            }

            .msg_lright {
              max-width: 420px;
              word-break: break-all;
              // word-wrap: break-word;
              margin-right: 0;
              font-size: 30px;
              font-weight: 400;
              color: #333333;
            }
          }

          .account {
            // .account_leave {
            // }
            .account_house {
              margin: 10px 0;
              color: #333;
              font-size: 30px;
            }
          }
        }
      }
    }

    // 流程信息
    .workflow {
      background-color: #fff;
      padding: 24px 32px 40px 32px;

      // 发起申请步骤

      .step-list {
        .step-item {
          display: flex;
          position: relative;
          justify-content: space-between;
          // align-items: center;
          padding-bottom: 40px;

          .item-left {
            height: 100%;
            // position: relative;
            .item-left-ava-icon {
              position: relative;

              .avatar {
                display: inline-block;
                width: 80px;
                height: 80px;
                line-height: 80px;
                border-radius: 50%;
                background-color: #2266ff;
                color: #fff;
                font-size: 28px;
                // vertical-align: middle;
                text-align: center;
                z-index: 999;

                img {
                  // margin: 16px 0 0 8px;
                  width: 48px;
                  height: 48px;
                }
              }

              .icon-yes {
                position: absolute;
                top: 50px;
                left: 50px;
                width: 36px;
                height: 36px;
                // background: #fff;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;

                img {
                  width: 36px;
                  height: 36px;
                }
              }

              .icon-no {
                position: absolute;
                top: 50px;
                left: 50px;
                width: 36px;
                height: 36px;
                background: #ff8822;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;

                img {
                  width: 36px;
                  height: 36px;
                }
              }
            }

            .solid {
              // height: 100%;
              height: calc(100%);
              border-left: 4px solid #eee;
              position: absolute;
              top: 80px;
              left: 40px;
            }

            .dashed {
              // height: 100%;
              height: calc(100%);
              border-left: 4px dashed #eee;
              position: absolute;
              top: 80px;
              left: 40px;
            }
          }

          .item-right {
            width: 590px;

            .item-right-flex {
              // display: flex;
              // justify-content: space-between;
              // align-items: center;
              .block {
                display: block;
                // margin-top: 124px;
              }

              .title2 {
                display: inline-block;
              }

              .title2Desc {
                display: inline-block;
                color: #2ea222;
                margin-left: 10px;
              }

              .title2Desc-ing {
                display: inline-block;
                color: #ff8822;
                margin-left: 10px;
              }

              .title2Desc-false {
                color: #f14242;
                display: inline-block;
                margin-left: 10px;
              }

              .user-list {
                overflow: hidden;
              }

              .item-right-flex-left-name {
                margin-top: 20px;
                float: left;
                margin-right: 16px;
                text-align: center;

                .avatar {
                  display: inline-block;
                  width: 64px;
                  height: 64px;
                  line-height: 64px;
                  border-radius: 50%;
                  background-color: #2266ff;
                  color: #fff;
                  font-size: 28px;
                  vertical-align: middle;
                  text-align: center;
                  // margin-left: 8px;
                }

                .avatar-name {
                  display: block;
                }
              }

              .examine {
                p {
                  margin: 6px 0;
                  font-size: 12px;
                }

                .examine_img {
                  // display: flex;
                  // flex-wrap: wrap;
                  // justify-content: space-between;
                  // float: left;
                  // img {
                  //   width: 134px;
                  //   height: 136px;
                  //   margin-right: 8px;
                  // }
                  // ::v-deep.AiImage {
                  //   ::v-deep.u-image__image {
                  //     width: 60px !important;
                  //     height: 60px;
                  //   }
                  // }
                }
              }

              .examine_docx1 {
                .docx {
                  display: flex;
                  justify-content: space-between;
                  width: 556px;
                  padding: 16px;
                  background-color: #ddd;
                  margin: 6px 0;

                  .docx-name {
                    width: 440px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }

            .time-info {
              display: flex;
              justify-content: space-between;

              span {
                color: #999;
                font-size: 28px;
              }
            }
          }
        }

        .step-item:first-child {
          .item-right {
            .item-right-flex {
              .block {
                margin-top: 0 !important;
              }
            }
          }
        }

        .step-item:last-child {
          .dashed {
            border-left: 0 !important;
          }

          .solid {
            border-left: 0 !important;
          }
        }
      }
    }

    // 抄送人头像
    .recipients {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      margin: 16px 0 0 120px;

      .recipients_content {
        // display: inline-block;
        // width: 64px;
        // height: 150px;
        margin-left: 32px;

        .name_ava {
          display: inline-block;
          width: 120px;
          // text-align: center;
          margin-top: 5px;

          .avatar {
            display: inline-block;
            width: 64px;
            height: 64px;
            line-height: 64px;
            border-radius: 50%;
            background-color: #2266ff;
            color: #fff;
            font-size: 28px;
            vertical-align: middle;
            text-align: center;
            // margin-left: 8px;
          }

          .recipients_name {
            // display: inline;
            width: 100px;
            height: 34px;
            line-height: 34px;
            // text-align: center;
            // background-color: pink;
            margin-top: 8px;
          }
        }
      }

      // .recipients_content:first-child {
      //   margin-left: 0;
      // }
    }
  }
}

.reject_agree {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  line-height: 112px;
  text-align: center;
  border-top: 1px solid #ddd;
  z-index: 999;
  background: #fff;

  .reject {
    background-color: #fff;
    width: 50%;
    color: red;
  }

  .agree {
    height: 112px;
    width: 50%;
    background-color: #1365dd;
    color: #fff;
  }
}
</style>
