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

export default {
  props:{
    propDataList: {
      type: Array,
      default: () => []
    },
    /* 如果为true则不再使用接口请求 */
    noRequest: {
      type: Boolean,
      default: false
    },
    /* 模板的uuid */
    templateId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      promiseList: [],
      loading:false,
      finished:false,
      current:0
    };
  },
  mounted() {
    if(this.noRequest) {
      this.finished = true;
      this.loading = false;
    }
  },
  watch: {
    propDataList: {
      handler(val) {
        if(this.noRequest) {
          this.promiseList = val
        }
      },
      deep:true
    },
    templateId: {
      handler(val) {
        if(val) {
          this.promiseList = []
          this.current = 0
          this.handleGetPromiseList()
        }
      },
      immediate:true
    }
  },
  methods: {
    /* 获取承诺列表 */
    async handleGetPromiseList() {
      try {
        this.loading = true;  // 开始加载
        const res = await getPromiseList({
          current:this.current + 1,
          size:10,
          templateId:this.templateId ? this.templateId : undefined //暂时隐藏掉,以便看到数据
        })
       if(res.code === 0) {
         this.promiseList = this.promiseList.concat(res.data.records || [])
         this.current++;
         this.finished = res.data.records.length < 10;
       }
       this.loading = false;  // 加载结束
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    handleParseTitle(title) {
      if (!title) return ''
      try {
        return JSON.parse(title).title
      } catch (e) {
        return ''
      }
    },
    handlePromiseClick(item) {
      this.$router.push({
        path: '/subPages/pages/commitment/commitmentDetail/index',
        query: {
          uuid: item.uuid
        }
      })
    }
  },
};
</script>

<template>
  <van-list v-model="loading" @load="handleGetPromiseList" :finished="finished" finished-text="没有更多数据了">
    <van-cell v-for="(item,index) in promiseList" :key="index" class="box" @click="handlePromiseClick(item)">
      <template #default>
        <view class="top">
          <view class="title">{{ handleParseTitle(item.remark) }}</view>
          <view class="time">{{ item.create_time | date("MM-DD HH:mm:ss") }}</view>
        </view>
        <view class="content">承诺企业 : {{ item.company_name }}</view>
      </template>
    </van-cell>
  </van-list>
</template>

<style scoped lang="scss">
.box {
  min-height: 78px;
  background: #FFFFFF;
  border-radius: 6px;
  margin: 12px auto;

  view:first-child {
    margin-top: 0;
  }
}

.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;
}

.time {
  font-size: 12px;
  color: #999999;
  width: 100px;
}

.content {
  padding: 0 20px;
  font-size: 14px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>