<!--
 * @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\seatTemplateEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="90%"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
    :fullscreen="dialogFull"
    class="ygh-dialog"
  >
    <template slot="title">
        <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
            <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              座位配置
            </span>
          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
            <i class="el-icon-full-screen"></i>
          </div>
        </div>
      </template>
    <div class="dialog">
      <seatManagementTable
      ref="seatManagementTable"
      @saveSeat="saveSeat"
       />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="submitFormCopy"
        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>
</template>

<script>
import { pageList } from '@/api/seatTypeMr/seatTypeMr'
import { seatSaveAndEdit, saveAndEdit, getSelectById } from "@/api/performanceHallMr/performanceHallMr";
import { getToken } from "@/utils/auth";
import seatManagementTable from "../model/seatManagementTable"
export default {
  name: "seatTemplateEdit",
  that: this,
  components: {
    seatManagementTable
  },
  data() {
    return {
      title: "编辑",
      model: "EDIT",
      activeName: '01',
      open: false,
      seatType: false,
      loading: false,
      seatWidth: null,
      seatMap: {
        row: 0,
        col: 0,
      },
      seatMapRow: '',
      seatMapCol: '',
      seatSetMap: {},
      seatTemplateMap: [],
      colSeatMap: {},
      form: {
        id: undefined,
        status: "1",
        content: "",
      },
      seatList: [],
      auditoriumId: '',
      zoom: 10,
      boxWidth: '',
      initWidth: '',
      moveStatus: false,
      mouseMap: {},
      mousemoveMap: {},
      scrollTop: 0,
      scrollLeft: 0,
      scrollEvenTop: 0,
      scrollEvenLeft: 0,
      dragStatus: true,
      canNum: [],
      unCanNum: [],

      drawForm: {
        status: '1'
      },
      drawDialogType: false,
      drawRules: {
        status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
        seatTypeId: [{ required: true, message: "请选择座位类型", trigger: ["change","blur"] }]
      },

      dialogFull: false,
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj) {
      this.open = true;
      this.seatType = false;
      this.getSeatTypeList();
      this.colSeatMap = {}
      this.drawForm = {};
      this.$set(this.drawForm, 'status', '1')
      this.boxWidth = 0;
      this.dragStatus = true;
      this.$set(this.form, 'status', '1')
      if (obj){ // 编辑模式
        this.title = "座位模板";
        this.auditoriumId = obj.id;
        this.$set(this.seatMap, 'row', obj.rows);
        this.$set(this.seatMap, 'col', obj.cols);
        this.$set(this, 'seatMapRow', obj.rows);
        this.$set(this, 'seatMapCol', obj.cols);

        this.getSelectByIdApi(obj)
      }else{ // 新增模式
        this.seatType = true;
        this.title = "座位模板";
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    /** 获取详情 */
    getSelectByIdApi(row) {
      const id = row.id
      getSelectById(id).then(response => {
        const dataList = response.data;
        this.$nextTick(() =>{
          dataList.forEach(item => {
            if(item.status == 2){
              item.color = '#7d7d7e';
            }
            this.$set(this.colSeatMap, item.sortId + '_', item);
          })
          this.seatType = true;
          this.$refs.seatManagementTable.initData(dataList,'edit')
        })
      });
    },
    /** 座位类型列表 */
    getSeatTypeList() {
      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
        .then(response => {
            this.seatList = response.data.rows;
          }
        );
    },
    saveSeat(list,style){
      this.submitForm(list,style)
    },
    submitFormCopy(){
      this.$refs.seatManagementTable.saveSeat()
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm(list,style) {
      let that = this;
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let postList = []
          for (const codeKey in this.colSeatMap) {
            postList.push(this.colSeatMap[codeKey])
          }
          try {
            this.loading = true;
            /**  保存行号  */
            const { code } = await saveAndEdit({ 
              id: this.auditoriumId, 
              rows: this.seatMap.row, 
              cols: this.seatMap.col,
              style: style
            });
            if (code === 200) {
              let postList = []
              for (const codeKey in this.colSeatMap) {
                postList.push(this.colSeatMap[codeKey])
              }
              /**  保存座位  */
              //const { code } = await seatSaveAndEdit(postList);
              const { code } = await seatSaveAndEdit(list);
              if (code === 200) {
                that.$message.success("操作成功!");
                that.$emit("getList");
                that.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, 'mainImg', 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: 75vh;
  overflow-y: auto;
}
.draw-dialog-class{
  border-radius: 10px;
  height: 240px;
  width: 220px;
  background-color: #fff;
  position: absolute;
  z-index: 55;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.dialog {
  padding: 0 30px;

  .title-class{
    text-align: center;
    color: #6e6e6e;
    margin: 10px auto;
  }
  .box-top-class{
    .stage-class{
      margin: 10px auto;
      width: 160px;
      height: 80px;
      border: 2px solid #7d7d7e;
      text-align: center;
      line-height: 80px;
    }
  }
  .box-class ::-webkit-scrollbar{ /*滚动条基本样式，高度*/
    width:10px;height:10px;
  }
  .box-class{
    width: 100%;
    height: 500px;
    border: 2px solid #7d7d7e;
    border-radius: 4px;
    padding: 10px;

    .box-bottom-class{
      //border: 2px solid #5656c2;
      //margin-top: 15px;
      //padding-left: 4px;

      .seat-tag{
        display: inline-block;
        border: 1px solid #7d7d7e;
        margin-right: 2px;
        cursor: pointer;
        background: url("../../../../assets/images/seat-icon.png") no-repeat;
        background-size: 100% 100%;
        position: relative;

        &:hover{
          opacity: 0.8;
        }
      }
      .seat-p-class{
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 18px;
        display: inline-block;
        color: white;
      }
    }
  }

  .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;
  }
}

//这里注意：我当前将css样式加载全局上，如果单页添加样式需要每个样式前添加 ‘/deep/’ 修饰符

/*  dialog*/
.ygh-dialog ::v-deep .el-dialog__header {
  padding: 16px 20px 15px;
}
.el-dialog__headerbtn{
  top: 15px;
}

/*dialog header*/
.el-dialog__header{
  background: #e3eaed;
}
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0,0,0,.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
.avue-crud__dialog__menu i {
  color: #909399;
  font-size: 15px;
}
.el-icon-full-screen{
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}

</style>
