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

const props = defineProps({
  rowInfo: {
    type: Object,
    default: null,
  }
})
const previousDetailDlg = defineModel('previousDetailDlg', { type: Boolean, default: false })

const dataList = ref([])

function handleClose() {
  previousDetailDlg.value = false
}

async function getrenewalReasonList() {
  const res = await dataMainInterface.mergeCompanyPreviousDetail({
    CompanyContractId: props.rowInfo.CompanyContractId,
  });
  if (res.Ret == 200) {
    dataList.value = [res.Data.Detail];
  }
}

watch(()=>previousDetailDlg.value,(n)=>{
  if(n){
    getrenewalReasonList()
  }else{
    dataList.value=[]
  }
})


</script>

<template>
  <el-dialog
    draggable
    v-model="previousDetailDlg"
    @close="handleClose"
    :modal-append-to-body="false"
    center
    title="维持套餐"
  >
    <p>上一份合同信息</p>
    <el-table :data="dataList" border max-height="250" style="margin: 20px 0">
      <el-table-column
        label="合同期限"
        prop="StartDate"
        align="center"
        width="220"
      >
        <template #default="{ row }">
          <span> {{ row.StartDate }} ~ {{ row.EndDate }} </span>
        </template>
      </el-table-column>
      <el-table-column label="合同金额" prop="Money" align="center" />
      <el-table-column label="签约套餐" prop="PermissionName" align="center">
        <template #default="{ row }">
          <template v-if="row.PermissionName.length">
            <el-tag
              size="mini"
              style="margin: 0 10px 10px 0"
              v-for="key in row.PermissionName.split(',')"
              :key="key"
              >{{ key }}</el-tag
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>