<template>
  <div class="container">
    <NavBar title="关联项目" left-arrow @click-left="goBack" />

    <Notice detail="关联项目后，您即可使用 APP 中项目查询，还款计划等功能" />

    <section class="list">
      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
          <ListItem v-for="item in listValue" :other_title="item.other_title" :title="item.title" :values="item.values"
            isSwiper @clickRight="unbind(item.associationId)">
            <template #rightTxt>
              <span>取消解绑</span>
            </template>
          </ListItem>
        </List>
      </PullRefresh>
    </section>

    <Plus @click="jump" />
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import Notice from "@/components/Notice.vue"
import { NavBar, List, PullRefresh, Dialog } from "vant";
import ListItem from '@/components/ListItem.vue'
import Plus from '@/components/Plus.vue'
import api from "../api";
import { useRouter } from "vue-router";

let listValue = $ref([])

let pager = { page: 1, pageSize: 10 }
let refreshing = $ref(true);
let finished = $ref(true);

const queryList = async () => {
  refreshing = true
  let res = await api.contractQueryAll({ receivets: + new Date() + '', ...pager })

  if (res.success && res.rows.length > 0) {
    res.rows.forEach(item => {
      let temp = {
        ...item,
        title: item.contractNumber + '' || '',
        other_title: item.acceptDate?.split(' ')[0] || '',
        // values: [["机型", "机号", "代理店"], [item.model, item.machineNumber, item.agencyName]]
        values: [["机型", "机号", "状态", "代理店"], [item.model, item.machineNumber, item.contractStatus?item.contractStatus:'', item.agencyName]]
      }
      listValue.push(temp)
    })
    if(res.rows.length >=10 ){
      finished = false
    }
  } else {
    finished = true
  }
  refreshing = false
}
queryList()


const onRefresh = () => {
  // 下拉重置参数，重新加载
  listValue = [];
  pager.page = 1;
  pager.pageSize = 10;
  finished = false
  queryList()
};

const loadApproval = () => {
  pager.page++;
  queryList()
}

const router = useRouter();
const jump = () => {
  router.push({ name: "relatedProject-views-relatedFlow" })
}

const unbind = async (associationId) => {
  Dialog.confirm({
    title: '是否对该项目取消解绑',
    message: '',
  })
    .then(async () => {
      // on confirm
      let res = await api.contractDelete({
        associationId: associationId + '',
        receivets: +new Date() + '',
      })
      if (res.success) {
        onRefresh()
      }
    })
    .catch(() => {
      // on cancel
    });
}
</script>

<style scoped lang="less">
.list {
  box-sizing: border-box;
  height: calc(100vh - var(--van-nav-bar-height) - 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 10px;
}

.scroll {
  box-sizing: border-box;

  overflow-y: auto;
}
</style>

<route>
{
  meta: {
    title: '关联项目'
  }
}
</route>