<template>
  <v-dialog
    v-model="dialog"
    max-width="720"
  >
    <v-card>
      <v-card-title v-if="title">{{title}}</v-card-title>
      <v-card-text v-if="description">{{description}}</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <WsBtn
          color="textSecondary"
          outlined
          @click="$_onCancel()"
        >取消</WsBtn>
        <WsBtn
          @click="$_onSubmit()"
          :loading="loading"
        >確認完成</WsBtn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    item: null,
    loading: false
  }),
  methods: {
    $_onCancel() {
      this.close();
    },
    startLoading() {
      this.loading = true;
    },
    stopLoading() {
      this.loading = false;
    },
    $_onSubmit() {
      this.$emit("submit", this.item);
    },
    open(item) {
      this.loading = false;
      this.item = item;
      this.dialog = true;
    },
    close() {
      this.dialog = false;
      this.loading = false;
    }
  },
  props: {
    title: {
      type: String,
      default: null
    },
    description: {
      type: String,
      default: null
    }
  }
};
</script>

<style>
</style>