<template>
  <view class="content">
    <view class="card">
      <view class="title">{{ info.TYPE === '0' ? '安全生产承诺书' : '安全生产责任状' }}</view>
      <view v-if="info.TYPE === '0'">{{ info.COVERPEOPLE }}：</view>
      <view class="text">{{ info.TEXT }}</view>
      <view class="collateral">
        <view v-for="(item,index) in info.DETAIL" :key="index" class="item">
          {{ item.value }}
        </view>
      </view>
      <view class="text">
        <view v-if="info.TYPE === '0'">
          若违反上述承诺和未履行安全生产职责，或发生责任事故的，接受政府或公司事故调查组做出的处罚决定。
        </view>
<!--        <view v-if="info.TYPE === '0'">-->
<!--          承诺期限自{{ info.PROMISE_TERM_START }}至{{ info.PROMISE_TERM_END }}。-->
<!--        </view>-->
        <view v-if="info.TYPE === '1'">
          若未履行安全生产职责，或发生生产安全事故的，接受公司或政府事故调查组做出的处罚。
        </view>
<!--        <view v-if="info.TYPE === '1'">-->
<!--          责任期限自{{ info.PROMISE_TERM_START }}至{{ info.PROMISE_TERM_END }}。-->
<!--        </view>-->
      </view>
      <view class="footer">
<!--        <view v-if="info.TYPE === '0'" class="hairdresser">承诺单位(盖章)：</view>-->
        <view v-if="info.TYPE === '1'" class="hairdresser">
          <view class="promiser">发状人：{{ info.COVERPEOPLE }}</view>
<!--          <view class="time">{{ info.CREATTIME.substring(0,10) }}</view>-->
        </view>
        <view v-if="info.SIGNTIME != null" class="respondent">
          <view class="promiser">
            <text>
              {{ info.TYPE === '0' ? '主要负责人签字' : '受状人' }}：
            </text>
            <u--image :showLoading="true" :src="$store.state.filePath + info.FILEPATH"
                      width="200rpx" height="100px" mode="scaleToFill"></u--image>
          </view>
<!--          <view class="time">-->
<!--            {{ info.SIGNTIME && info.SIGNTIME.substring(0,10) }}-->
<!--          </view>-->
        </view>
        <view v-else class="respondent">
          <view class="promiser">
            <text>
              {{ info.TYPE === '0' ? '主要负责人未签字' : '受状人未签字' }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getPromiseView, setPromiseIsRead} from "../../../api";

export default {
  data() {
    return {
      info: {},
    }
  },
  onLoad(option) {
    this.getData(option.PROMISE_ID, option.PROMISEPEOPLE_ID, option.TYPE)
  },
  methods:{
    async getData(PROMISE_ID, PROMISEPEOPLE_ID, TYPE) {
      if(TYPE === '2') await setPromiseIsRead({PROMISEPEOPLE_ID})
      let resData = await getPromiseView({
        PROMISE_ID,
        PROMISEPEOPLE_ID,
      })
      const DETAIL = resData.promistDetail.map(item => ({ value: item.COLLATERAL, id: item.PROMISEDETAIL_ID }))
      this.info = {
        ...resData.varList,
        ...resData.people,
        DETAIL,
        COVERPEOPLE: resData.coverpeople[0].USERNAME,
      }
    },
  }
}
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
}

.text {
  text-indent: 60rpx;
  letter-spacing: 4rpx;
  text-align: justify;
}

.collateral {
  text-indent: 60rpx;
  letter-spacing: 4rpx;
  text-align: justify;
}

.respondent, .hairdresser {
  margin-top: 60rpx;
  text-align: right;
  .promiser {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .time {
    text-align: right;
    margin-top: 30rpx;
    margin-left: 110rpx;
  }
}
</style>