<script setup>
import { ref, watch } from 'vue'
import { dataMainInterface } from '@/api/api.js'

const props = defineProps({
  rowInfo: {
    type: Object,
    default: null
  },
})

const isShow = defineModel('isShow', { type: Boolean, default: false })
const renewalList = ref([])

async function getrenewalReasonList() {
  try {
    const res = await dataMainInterface.moreRenewReason(props.rowInfo)
    if (res.Ret == 200) renewalList.value = res.Data || []
  } catch (err) {
    console.log(err);
  }
}

watch(
  () => isShow.value,
  (val) => {
    if (val) {
      getrenewalReasonList()
    } else {
      renewalList.value = []
    }
  }
)
</script>

<template>
  <el-dialog
    draggable
    v-model="isShow"
    @close="isShow = false"
    :modal-append-to-body="false"
    center
    title="未续约说明"
  >
    <el-table :data="renewalList" border max-height="250">
      <el-table-column label="最新情况" prop="RenewalReason" align="center" />
      <el-table-column label="To Do 事项" prop="RenewalTodo" align="center" />
      <el-table-column label="添加时间" prop="CreateTime" align="center" />
      <el-table-column
        label="超出到期时间(天)"
        prop="ExpirationTimeExceeded"
        align="center"
      />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false" type="primary">知道了</el-button>
      </span>
    </template>
  </el-dialog>
</template>