<template>
  <div>
    <!-- Read Dialog -->
    <WsDialog
      ref="WsDialog"
      :title="_title"
    >
      <template v-slot:content>
        <WsEasyTable
          :fields="fields"
          :modelData="item"
        />
      </template>
      <template v-slot:leftActions>
        <WsBtn
          @click="$_onReadDeleteClick()"
          minWidth="100px"
          color="deleteBtn white--text"
        >刪除</WsBtn>
      </template>
      <template v-slot:rightActions>
        <WsBtn
          @click="$_onUpdateClick()"
          minWidth="100px"
          color="textSecondary"
          outlined
        >編輯</WsBtn>
        <WsBtn
          minWidth="100px"
          color="textSecondary"
          outlined
        >詳細內容</WsBtn>
      </template>
    </WsDialog>
    <!-- Delete Dialog -->
    <WsAlertDialog
      title="確定要刪除嗎？"
      description="刪除後資料將無法回覆"
      ref="deleteDialog"
      @submit="$_onAlertSubmit($event)"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    item: null
  }),
  methods: {
    $_onUpdateClick() {
      this.$emit("update", this.item);
    },
    deleteLoadingStart() {
      this.$refs.deleteDialog.startLoading();
    },
    $_onAlertSubmit($event) {
      this.$emit("delete-submit", $event);
    },
    $_onReadDeleteClick() {
      this.$refs.deleteDialog.open(this.item);
    },
    open(item) {
      this.item = item;
      this.$refs.WsDialog.open();
    },
    close() {
      this.$refs.WsDialog.close();
      this.$refs.deleteDialog.close();
    }
  },
  computed: {
    _title() {
      if (!this.item) {
        return null;
      } else {
        return this.item[this.titleKey];
      }
    }
  },
  props: {
    titleKey: String,
    fields: Object
  }
};
</script>

<style>
</style>