<template>
  <el-dialog
    class="dialog-car-payload"
    :visible="dialogVisible"
    @close="handleClose"
    :destroy-on-close="false"
    :close-on-click-modal="configs.clickModalToClose ?? true"
  >
    <!-- main content  -->
    <!-- footer  -->
    <div slot="footer">
      <!-- <template v-for="(operate, index) in configs.form.operations">
        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
          operate.label
        }}</el-button>
      </template> -->
      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
    </div></el-dialog
  >
</template>

<script>
export default {
  name: "DialogCarPayload",
  props: {
    configs: {
      type: Object,
      default: () => ({
        clickModalToClose: true,
        forms: null,
      }),
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // extraParams: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  inject: ["urls"],
  data() {
    return {
      loadingStatus: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleBtnClick(payload) {
      console.log("btn click payload: ", payload);

      if ("name" in payload) {
        switch (payload.name) {
          case "cancel":
            this.handleClose();
            break;
          // case "reset":
          //   this.resetForm(true, true); // true means exclude id, immediate execution
          //   break;
          // case "add":
          // case "update":
          //   this.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
          //   break;
        }
      } else {
        console.log("[x] 不是这么用的! 缺少name属性");
      }
    },

    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style scoped></style>
