<script>
import { getReminderList } from "@/api/commitment";

export default {
  props: {
    /* 是系统提醒(1)还是整改提醒(0) */
    type: {
      type: Number
    },
    companyId: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      remindList: [],
      current: 0
    };
  },
  methods: {
    async handleGetRemindList() {
      try {
        this.loading = true;
        const res = await getReminderList({
          company: this.companyId,
          type: this.type,
          current: this.current + 1,
          size: 10
        });
        if (res.code === 0) {
          this.remindList = this.remindList.concat(res.data.records || []);
          this.current++;
          this.finished = res.data.records.length < 10;
        }
        this.loading = false;
      } catch (e) {
        console.log(e);
        this.finished = true;
        this.$toast('获取提醒列表失败');
        this.loading = false;
      }
    },
    /* 跳转提醒详情 */
    handleRemindClick(item) {
      this.$router.push({
        path: '/pages/commitment/remindDetail/index',
        query: {
          uuid: item.uuid
        }
      })
    }
  }
};
</script>

<template>
  <van-list
      v-model="loading"
      @load="handleGetRemindList"
      :finished="finished"
      finished-text="没有更多数据了"
  >
    <van-cell
        v-for="(item, index) in remindList"
        :key="index"
        class="box"
        @click="handleRemindClick(item)"
    >
      <template #default>
        <view class="top">
          <view class="title">{{ type ? '承诺条款提醒' : '整改提醒' }}</view>
          <view class="status">
            <span v-if="type === 0" style="color: #D9001B">红灯提醒</span>
            <span v-if="type === 0" style="color: #F59A23">黄灯提醒</span>
          </view>
        </view>
        <view class="content">
          <view class="form-item">
            <view class="form-label">提醒时间:</view>
            <view class="form-value">{{ item.time | date('YYYY-MM-DD HH:mm:ss') }}</view>
          </view>
          <view class="form-item">
            <view class="form-label">关联承诺:</view>
            <view class="form-value">{{ item.name}}</view>
          </view>
        </view>
      </template>
    </van-cell>
  </van-list>
</template>

<style scoped lang="scss">
.top {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status {
  font-size: 14px;
  color: #999;
  width: 60px;
  text-align: right;
}

.content {
  padding: 10px 20px;
  border-top: 1px solid #f1f1f1;
}
.form-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.form-label {
  font-size: 14px;
  color: #666;
  width: 100px;
}
.form-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}
.box {
  margin-bottom: 10px;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}
</style>
