<template>
  <div class="dcs_details_dialog">
    <RCSDialog
      :title="title"
      :visible="dialogVisible"
      :before-close="rcsDialogbeforeClose['details']"
      :destroy-on-close="true"
      :paddingempty="true"
    >
      <template #default>
        <DcsDetails
          v-if="dialogVisible"
          :deal-id="dealId"
          :product="product"
          :instrument="instrument"
        />
      </template>
      <template #footer>
        <div class="footer">
          <el-button
            @click="rcsDialogBtnEvent['detailsClose']"
          >{{ $t('button.close') }}</el-button>
        </div>
      </template>
    </RCSDialog>
  </div>
</template>
<script>
import RCSDialog from '@/components/RCSDialog';
import DcsDetails from '../DcsDetails';
export default {
  name: 'DcsDetailsDialog',
  components: {
    RCSDialog,
    DcsDetails,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    dealId: {
      type: String || Number,
      default: '',
    },
    product: {
      type: String || Number,
      default: '',
    },
    instrument: {
      type: String || Number,
      default: '',
    },
    onClose: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: false,
      rcsDialogbeforeClose: {
        'details': (done) => {
          console.log('before-close');
          this.close();
        },
      },
      rcsDialogBtnEvent: {
        'detailsClose': () => {
          this.close();
        },
      },
    };
  },
  watch: {
    visible(newVal) {
      // console.log('DcsDetailsDialog->prop->visible', newVal);
      this.dialogVisible = newVal;
    },
  },
  methods: {
    close() {
      this.dialogVisible = false;
      this.$emit('close');
      if (this.onClose) {
        this.onClose();
      }
    },
    show() {
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>

</style>
