<template>
  <el-dialog v-dialogDrag :visible.sync="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 slot-scope="{ 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 slot-scope="{ 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>

<script>
import { dataMainInterface } from "@/api/api.js";
export default {
  props: {
    rowInfo: {
      type: Object,
      default: null,
    },
    previousDetailDlg: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    handleClose() {
      this.$emit("update:previousDetailDlg", false);
    },
    async getrenewalReasonList() {
      console.log(this.rowInfo);
      const res = await dataMainInterface.mergeCompanyPreviousDetail({
        CompanyContractId: this.rowInfo.CompanyContractId,
      });
      if (res.Ret == 200) {
        this.dataList = [res.Data.Detail];
        console.log(this.dataList);
      }
    },
  },
  watch: {
    previousDetailDlg(val) {
      if (val) {
        this.getrenewalReasonList();
      } else {
        this.renewalList = [];
      }
    },
  },
};
</script>

<style></style>
