<!--
 * @Descripttion: 快速探视详情页
 * @Company: 思宏科技
 * @version: v1.0
 * @Author: HJ
 * @Date: 2021-08-11 15:07:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-02-25 17:55:05
-->
<template>
  <view class="signcard-detail-box">
    <view class="cell-row g-bor-bottom">
      <view class="u-flex u-col-center">
        <view class="label">发起方</view>
        <view class="u-flex-1" />
        <view class="value">李某某(代表某某医院)</view>
      </view>
    </view>

    <view class="title">
      <view class="title-text-box">
        <view class="vertical-line" />
        <view class="title-text">黄某某手术同意书签署</view>
      </view>
      <view class="repeal" @click="openModel">撤销</view>
    </view>
    <view class="content">
      <view class="_flex-between">
        <view>
          <view class="u-flex">
            <label class="label">状态:</label>
            <view class="value status">{{ value.status }}</view>
          </view>
          <view class="u-flex">
            <label class="label">签署截止日期:</label>
            <view class="value">{{ value.expirationDate }}</view>
          </view>
          <view class="u-flex">
            <label class="label">沟通开始时间:</label>
            <view class="value">{{ value.startTime }}</view>
          </view>
          <view class="u-flex">
            <label class="label">预计沟通时长:</label>
            <view class="value">{{ value.communicationTime }}</view>
          </view>
          <view class="u-flex">
            <label class="label">发起时间:</label>
            <view class="value">{{ value.riseTime }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="title">
      <view>签署文件(2)</view>
    </view>
    <FileDetail :filelistmsg="fileListMsg" />

    <!-- // 撤销提示 -->
    <u-modal
      v-model="showModel"
      :content="content"
      :show-cancel-button="true"
      :content-style="{ color: '#323233' }"
      @confirm="confirmCancel"
    />
  </view>
</template>

<script>
import FileDetail from './compenents/fileDetail.vue'

export default {
  components: {
    FileDetail
  },
  data() {
    return {
      value: {
        status: '签署中',
        expirationDate: '2022/12/12 今天',
        startTime: '立即开始',
        communicationTime: '15分钟',
        riseTime: '2022/12/11 14:12:12'
      },
      fileListMsg: [
        {
          fileName: '文件名称1.docx',
          fileType: 'word',
          signer: [
            {
              name: '于意',
              telePhone: 1300517321,
              signerType: '个人',
              signStatus: '已签署',
              signingTime: '2021/01/21 14:29'
            },
            {
              name: '于文文',
              telePhone: 1300517321,
              signerType: '主治医生',
              signStatus: '待签署',
              signingTime: ''
            },
            {
              name: '于鱼',
              telePhone: 1300517321,
              signerType: '主任医生',
              signStatus: '待签署',
              signingTime: ''
            }
          ]
        },
        {
          fileName: '文件名称2.docx',
          fileType: 'pdf',
          signer: [
            {
              name: '于意',
              telePhone: 1300517321,
              signerType: '个人',
              signStatus: '已签署',
              signingTime: '2021/01/21 14:29'
            },
            {
              name: '于文文',
              telePhone: 1300517321,
              signerType: '主治医生',
              signStatus: '待签署',
              signingTime: ''
            }
          ]
        }
      ],
      showModel: false,
      content: '撤销后当前签署任务无法恢复,是否继续撤销'
    }
  },
  methods: {
    openModel() {
      this.showModel = true
    },
    confirmCancel() {
      console.log('确认撤销')
    }
  }
}
</script>

<style lang="scss" scoped>
.signcard-detail-box {
  .cell-row {
    padding: 30rpx;
    background-color: #ffffff;
  }
  .title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 30rpx;
    .title-text-box {
      display: flex;
      align-items: center;
      .vertical-line {
        width: 6rpx;
        height: 14px;
        background: #69a9f8;
        border-radius: 1px;
        margin-left: -10rpx;
        margin-right: 6rpx;
      }
      .title-text {
        color: #000;
        font-weight: bold;
      }
    }
    .repeal {
      font-size: 28rpx;
      color: red;
    }
  }
  .content {
    width: 100%;
    padding: 12px 0 12px 14px;
    font-size: 12px;
    line-height: 17px;
    .hospital {
      margin: 20rpx 0;
      font-size: 28rpx;
    }
    .label {
      display: inline-block;
      color: #999;
      font-size: 28rpx;
      margin: 10rpx 0;
    }
    .value {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #333;
      margin: 10rpx 0;
    }
    .status {
      color: #69a9f8;
    }
    .contact {
      font-size: 13px;
      font-weight: 400;
      line-height: 17px;
    }
    ._margin-bottom {
      margin-bottom: 6px;
    }
  }
}
</style>
