<template>
  <div>
    <div class="dialog-wrapper">
      <div class="title">
        {{ '告知函('+(currentIndex + 1)+'/'+ list.length+')' }}
      </div>
      <h3 class="top">{{currentItem?.title?currentItem?.title:(currentItem?.type==1 ? '质量不合格整改' : '质量不合格调整告知')}}</h3>
      <div class="center">
        <div v-html="formattedContent(currentItem)"></div>
      </div>
      <div class="end">
        <div>中道汽车救援股份有限公司</div>
        <div>区域管理部</div>
        <div>{{formatDate(currentItem)}}</div>
      </div>
      <div class="iptWrap">
        <div class="tip">请仔细阅读告知函内容，并在下方输入"我已阅读”以表明您已充分理解函件中的各项信息。</div>
        <el-input style="width: 50%" v-model.trim="content" placeholder="请输入我已阅读"></el-input>
      </div>
      <div class="dialog-footer">
        <el-button type="info" size="small" v-if="num > 0">还需阅读{{num}}秒</el-button>
        <el-button type="primary" size="small"  v-if="num==0" @click="confirmHandle(currentItem)">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {myMixins} from "@/utils/myMixins"
  import {selectUnReadNotifyBySupplier, correctionHandle} from "@/api/order"
  export default {
    name: "notificationList",
    mixins: [myMixins],
    data() {
      return {
        list: [],
        currentIndex: 0,
        num:10,
        timer: null,
        content: '',
      }
    },
    computed: {
      currentItem() {
        return this.list[this.currentIndex];
      }
    },
    watch: {
      currentIndex() {
        this.content = '';
        this.num = 10;
        this.startCountdown();
      },
    },
    async mounted() {
      await this.getLetterList();
      this.timer && clearInterval(this.timer)
      this.startCountdown();
    },
    methods: {
      async confirmHandle(item){
        if (this.content === '我已阅读') {
          console.log('item', item)
          let res = await correctionHandle({
            handleType:4,
            operationType:'modify',
            recordId:item.recordId,
            planId:item.planId,
            notifyId:item.id,
          });
          console.log('阅读res', res)
          // 确认成功后处理下一个告知函
          this.currentIndex++;
          if (this.currentIndex < this.list.length) {
            this.content = '';
            this.num = 10;
            this.startCountdown();
          } else {
            this.closeHandle();
          }
        } else {
          this.$message.error('请输入"我已阅读"以确认');
        }
      },
      async getLetterList(){
        let res = await selectUnReadNotifyBySupplier();
        let result = res?.data || []
        if(result && result.length>0){
          this.list = result
        }
      },
      formatDate(val){
        /** 日期格式化
         * */
        if(!val?.updateTime){
          return
        }
        const date = new Date(val.updateTime);
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份从 0 开始，需要加 1
        const day = date.getDate();
        const formattedDate = `${year}年${month}月${day}日`;
        return formattedDate
      },
      formattedContent(val) {
        /** 转换文本，能被 v-html 识别
         * */
        return val?.content?.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>');
      },
      startCountdown() {
        this.stopCountdown()
        this.timer = setInterval(() => {
          if (this.num > 0) {
            this.num--;
          }
        }, 1000);
      },
      closeHandle() {
        this.stopCountdown();
        // 调用 app 的方法
        this.goBack();
      },
      stopCountdown() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
.dialog-wrapper {
  padding: 10px 20px;
}
.title {

}
  .top {
    text-align: center;
  }
  .center {
    margin: 20px 0;
    line-height: 24px;
    .hight{
      color: #0B99E4;
    }
  }
.end{
  text-align: right;
  line-height: 24px;
}
.tip{
  margin-top: 40px;
  margin-bottom: 10px;
}
  .dialog-footer {
    text-align: right;
  }
</style>
