<!--
 * @Descripttion: 签署文件详情页面
 * @Company: 思宏科技
 * @version: v1.0
 * @Author: ZZB
 * @Date: 2021-2-23 16:28:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-02-26 18:14:43
-->
<template>
  <view class="filelist-msg-box">
    <view
      v-for="(item1, index1) in filelistmsg"
      :key="index1"
      class="filelist-msg"
    >
      <view class="filelist-item-box">
        <view class="u-flex filelist-top">
          <view class="u-flex filelist-top-item">
            <image
              v-if="item1.fileType === 'pdf'"
              :src="PdfIcon"
              class="filetype-img"
            />
            <image
              v-if="item1.fileType === 'word'"
              :src="WordIcon"
              class="filetype-img"
            />
            <view>{{ item1.fileName }}</view>
          </view>
          <view class="look-over font-28" @click="lookFile">查看</view>
        </view>
        <view class="font-28 sign-order">签署顺序</view>

        <view
          v-for="(item2, index) in item1.signer"
          :key="index"
          class="filelist-doctor-box"
        >
          <view class="filelist-doctor-item u-flex">
            <view class="u-flex">
              <image class="userimg" :src="UserIcon" />
              <view class="item-left">
                <view class="u-flex">
                  <view class="font-type-two">{{ item2.name }}</view>
                  <view class="signertype-box">{{ item2.signerType }}</view>
                </view>
                <view class="u-flex phone-box">
                  <view class="font-type-one">{{ item2.telePhone }}</view>
                </view>
              </view>
            </view>
            <view class="item-right">
              <view class="font-type-one">{{ item2.signStatus }}</view>
              <view class="font-type-one signingtime-box">{{
                item2.signingTime
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <Footer />
  </view>
</template>

<script>
import PdfIcon from '../../../../mainWeixinMp/images/pdf-icon.png'
import WordIcon from '../../../../mainWeixinMp/images/word-icon.png'
import UserIcon from '../../../../mainWeixinMp/images/user-icon.png'
import Footer from './footer.vue'

export default {
  components: {
    Footer
  },
  props: {
    filelistmsg: {
      type: [Array],
      default: null
    }
  },
  data() {
    return {
      PdfIcon,
      WordIcon,
      UserIcon
    }
  },
  methods: {
    lookFile() {
      uni.navigateTo({
        url: '/pages/viewFile/viewFile'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filelist-msg-box {
  padding: 20rpx 30rpx;
  .font-28 {
    font-size: 28rpx;
  }
  .filelist-msg {
    padding-bottom: 30rpx;
    .filelist-item-box {
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 30rpx;

      .filelist-top {
        justify-content: space-between;
        align-items: center;
        color: #333333;
        .filetype-img {
          width: 38rpx;
          height: 46rpx;
          margin-right: 15rpx;
        }
        .look-over {
          color: #69a9f8;
        }
      }
      .sign-order {
        color: #999;
        margin-top: 30rpx;
      }
    }
  }
  .filelist-doctor-box {
    .font-type-one {
      font-size: 28rpx;
      color: #666;
    }
    .font-type-two {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }
    .filelist-doctor-item {
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      .userimg {
        width: 58rpx;
        height: 56rpx;
      }
      .item-right {
        text-align: right;
        .signingtime-box {
          margin-top: 20rpx;
        }
      }
      .item-left {
        margin-left: 20rpx;
        .phone-box {
          margin-top: 10rpx;
          .phone {
            width: 32rpx;
            height: 32rpx;
            margin-left: 10rpx;
          }
        }
        .signertype-box {
          padding: 4rpx 6rpx;
          font-size: 26rpx;
          border-radius: 4px;
          border: 1px solid #666;
          color: #666;
          text-align: center;
          margin-left: 14rpx;
        }
      }
    }
  }
}
</style>
