<template>
  <el-dialog :title="(formState ? '添加':'编辑' )+ '日程'" :visible.sync="show" width="600px">
    <el-form ref="form" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="场次名称" prop="scheduleName">
        <el-input v-model="form.scheduleName" placeholder="请输入场次名称"></el-input>
      </el-form-item>
      <el-form-item label="场次时间" prop="scheduleTime">
        <!-- <el-input v-model="form.scheduleTime"></el-input> -->
        <SelectDateTime v-model="form.scheduleTime" placeholder="请选择场次时间"></SelectDateTime>

      </el-form-item>

      <el-form-item label="总座位数" prop="seatsTotal" min='0'>
        <el-input-number v-model="form.seatsTotal" placeholder='请输入总座位数'></el-input-number>
      </el-form-item>
      <el-form-item label="可用座位数" prop="seatsAvailable" min='0'>
        <el-input-number v-model="form.seatsAvailable" placeholder='请输入可用座位数'></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="saveHandler">{{
        btn_title
      }}</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * Created on 2024-11-27
 * @description 演出场次关联表
 * @author yxz
 */
import { addObj, putObj } from "@/api/zshow/zShowSchedule";
import customSelect from "@/components/CustomSelect";
import SelectDateTime from "@/components/SelectDateTime/SelectDateTime.vue";

export default {
  components: { customSelect , SelectDateTime},
  name: "zShowScheduleForm",
  data() {
    return {
      form: {},
      show: false,
      loading: false,
      rules: {
        // example :
        // field: [{ required: true, trigger: "blur" }],
      },
    };
  },
  computed: {
    formState() {
      return !this.form.scheduleId;
    },
    btn_title() {
      return this.formState ? "新建" : "保存";
    },
  },
  methods: {
    open(origin) {
      if (origin.edit) {
        // 编辑初始化
      console.log("编辑");
      console.log(origin);

        let form = Object.assign({}, origin.row);
        this.form = form;
      } else {
        // 新建初始化
        this.form = {};
        this.showId = origin.showId
      }
      this.show = true;
    },
    close() {
      this.show = false;
    },
    saveHandler() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.loading = true;
        if (this.formState) this.createHandler();
        else this.editHandler();
      });
    },
    createHandler() {
      addObj(this.form)
        .then((res) => {
          if (res.code === "success") {
            this.finish();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    editHandler() {
      putObj(this.form)
        .then((res) => {
          if (res.code === "success") {
            this.finish();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    finish() {
      this.close();
      this.$emit("reloadTable");
    },
  },
};
</script>
