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

export default {
  props: {
    /* 不使用接口请求, 使用此数据 */
    propDataList: {
      type: Array,
      default: () => []
    },
    /* 如果为true则不再使用接口请求 */
    noRequest: {
      type: Boolean,
      default: false
    },
    /* 搜索条件: 模板的uuid */
    templateId: {
      type: String,
      default: ''
    },
    /* 搜索条件: 企业的uuid */
    companyId: {
      type: String,
      default: ''
    },
    /* 是否为展示状态的列表样式 */
    showStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      promiseList: [],
      loading: false,
      finished: true,
      /* 只允许加载一次 */
      initLoadFlag: true,
      current: 0,
    };
  },
  mounted() {
    if (this.noRequest) {
      this.finished = true;
      this.loading = false;
    }
  },
  watch: {
    propDataList: {
      handler(val) {
        if (this.noRequest) {
          this.promiseList = val
        }
      },
      deep: true,
      immediate: true
    },
    watchList: {
      async handler(val) {
        if ((val[0] || val[1]) && !this.noRequest) {
          this.promiseList = []
          this.current = 0
          await this.initLoad()
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    /* 这里面的值有变化,则触发获取承诺 */
    watchList() {
      return [this.templateId, this.companyId]
    }
  },
  methods: {
    async initLoad() {
      await this.handleGetPromiseList()
      this.initLoadFlag = false
    },
    async handleVanLoadPromise() {
      if (!this.initLoadFlag) {
        await this.handleGetPromiseList()
      }
    },
    /* 获取承诺列表 */
    async handleGetPromiseList() {
      try {
        this.loading = true;  // 开始加载
        const res = await getPromiseList({
          current: this.current + 1,
          size: 10,
          templateId: this.templateId ? this.templateId : undefined,
          companyId: this.companyId ? this.companyId : 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
      }
    },
    handlePromiseClick(item) {
      this.$router.push({
        path: '/subPages/pages/commitment/commitmentDetail/index',
        query: {
          uuid: item.uuid,
//          不需要下载pdf
          noDownload: true
        }
      })
    },
    handleParseBody(body) {
      if (!body) return []
      try {
        return JSON.parse(body).components.filter(item => item.base.moduleName === "InstructionsText" && item.inputValue).map(item => item.inputValue)
      } catch (e) {
        return []
      }
    }
  },
};
</script>

<template>
  <van-list v-model="loading" @load="handleVanLoadPromise" :finished="finished"
            finished-text="没有更多数据了">
    <van-cell v-for="(item,index) in promiseList" :key="index" class="box" @click="handlePromiseClick(item)">
      <template #default>
        <view v-if="!showStatus">
          <view class="top">
            <view class="title">{{ item.template_name }}</view>
            <view class="time">{{ item.create_time | date("MM-DD HH:mm:ss") }}</view>
          </view>
          <view class="content">承诺企业 : {{ item.company_name }}</view>
        </view>
        <view v-else>
          <view class="top">
            <view class="title">{{ item.template_name }}</view>
            <view class="status">
              <span v-if="item.is_audit === '0'" style="color: #1492FF">待核查</span>
              <span v-if="item.is_audit === '1'" style="color: #FF6B00">已核查</span>
            </view>
          </view>
          <view class="content">
            <view v-for="(item,index) in handleParseBody(item.promise_body)" :key="index">
              {{ item }}
            </view>
            <view class="content-item">
              <view class="content-key">签署时间</view>
              <view class="content-value">{{ item.create_time | date }}</view>
            </view>
          </view>
        </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;
}

.status {
  font-size: 14px;
  color: #999;
  width: 60px
}

.content {
  padding: 0 20px;
  font-size: 14px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-item {
  display: flex;
  margin-bottom: 10px;
}
.content-key {
  font-size: 14px;
  width: 60px;
  color: #999;
}
.content-value {
  font-size: 14px;
  margin-left: 10px;
}

</style>