<template>
  <el-dialog
    title="Associate DCC"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <div>
      <p class="ads-version">ADS Version: {{adsVersion}}</p>
      <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
        <el-table-column property="apiForm" label="Source API" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column property="subscription" label="Subscription" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column property="dccDetail" label="Configuration" show-overflow-tooltip></el-table-column>
        <el-table-column property="eventList" label="Event List" show-overflow-tooltip></el-table-column>
        <el-table-column property="creationDate" label="Create Time" show-overflow-tooltip></el-table-column>
        <el-table-column property="description" label="Commonts" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" size="small" @click="confirm">Confirm</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {UpdateGroupConfiguration, GetPolicyByVersion} from '@/api/group'
export default {
  props: ["groupId", "adsVersion"],
  data() {
    return {
      dialogVisible: false,
      curRow: {},
      tableData: [],
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
      this.getTableData();
    },
    getTableData() {
      let { adsVersion } = this;
      this.tableData = [];
      GetPolicyByVersion({ adsVersion }).then((res) => {
        this.tableData = res;
      });
    },
    confirm() {
      if(this.curRow.id) {
        UpdateGroupConfiguration({
          groupId: this.groupId,
          dccId: this.curRow.id
        }).then(() => {
          this.dialogVisible = false;
          this.$emit('getDetail');
        })
      } else {
        this.$message('Please select subscription.');
      }
     
    },
    handleCurrentChange(val) {
      this.curRow = val;
    },
  },
};
</script>

<style>
.ads-version {
  margin-bottom: 10px;
  font-size: 14px;
}
</style>
