<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: Sugar.
 * @LastEditTime: 22023-11-24 13:55:00
 * @FilePath: \cattle_webui\src\views\venue\performanceHallMr\dialog\programmeAddAndEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['performanceHallMr:performanceHallMr:add']"
          >新增</el-button>
        </el-col>
      </el-row>
      <el-table ref="tables" v-loading="loading" :data="tableList" border>
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="剧目名称" align="center" prop="name" />
        <el-table-column label="票务名称" align="center" prop="theatreName" />
        <el-table-column label="座位类型" align="center" prop="theatreName" />
        <el-table-column label="座位价格" align="center" prop="theatreName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['performanceHallMr:performanceHallMr:edit']"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row,scope.index)"
              v-hasPermi="['performanceHallMr:performanceHallMr:delete']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="剧目绑定"
      :visible.sync="formOpen"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialog">
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
          <el-form-item label="选择剧目" prop="theatreId">
            <el-select
              v-model="form.theatreId"
              placeholder="选择剧目"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in seatList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择票务" prop="theatreId">
            <el-select
              v-model="form.theatreId"
              placeholder="选择票务"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in seatList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="座位类型">
            <el-select
              v-model="form.seatTypeId"
              placeholder="座位类型"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in seatList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="座位价格" prop="name">
            <el-input
              v-model="form.name"
              placeholder="座位价格"
              clearable
              style="width: 100%;"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="formOpen = false">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm"
        v-loading.fullscreen.lock="loading"
        element-loading-text="提交中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <span v-if="loading">提交中...</span>
        <span v-else>保存</span>
      </el-button>
    </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { saveAndEdit } from "@/api/performanceHallMr/performanceHallMr";
import { pageList } from '@/api/seatTypeMr/seatTypeMr'
import { getToken } from "@/utils/auth";
export default {
  name: "programmeAddAndEdit",
  data() {
    return {
      title: "编辑",
      model: "EDIT",
      activeName: '01',
      open: false,
      loading: false,
      formOpen: false,
      form: {
        id: undefined,
        type: "",
        content: "",
      },
      tableList: [],
      rules: {
        name: [{ required: true, message: "请输入所属场馆", trigger: ["change","blur"] }],
        seatImg: [{ required: true, message: "请上传票区图", trigger: ["change","blur"] }],
        theatreId: [
          { required: true, message: "请选择所属场馆", trigger: ["change","blur"] },
        ],
      },
      seatList: [],
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj) {
      this.open = true;
      this.getSeatTypeList();
      this.getList();
      this.title = "剧目管理";
      if (obj){
        this.$set(this.form, 'id', obj.id)
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.formOpen = true;
      this.form = {}
    },
    /** 座位类型列表 */
    getSeatTypeList() {
      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
        .then(response => {
            this.seatList = response.data.rows;
          }
        );
    },
    /** 查询列表 */
    getList() {
      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
        .then(response => {
            this.theatreList = response.data.rows;
          }
        );
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            const { code } = await saveAndEdit({ ...this.form });
            if (code === 200) {
              this.$message.success("操作成功!");
              this.$emit("getList");
              this.cancel();
            }
          } catch (error) {
          } finally {
            this.loading = false;
          }
        }
      });
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      this.$refs["form"].resetFields();
      this.form.id = undefined;
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.reset();
      this.open = false;
    },
    /**
     * 上传成功
     * @date 2023-11-22
     * @param {any} res
     * @returns {any}
     */
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        // this.form.mainImg = res?.data?.url;
        this.$set(this.form, 'seatImg', res?.data?.url)
      }
    },
    /**
     * 上传文件之前之前
     * @date 2023-11-22
     * @param {any} file
     * @returns {any}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是jpg或png格式!");
      }
      return isJPG;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 30px;
  max-height: 65vh;
  overflow-y: auto;
}
.dialog {
  padding: 0 30px;

  .color-class{
    width: 50px;
    height: 50px;
  }

  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}
</style>
