<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" custom-class="custom-dialog" width="75%"
    :before-close="handleClose">
    <div class="dialog-content">
      <div>
        <span class="demonstration">选择月份：</span>
        <el-date-picker v-model="performMonth" type="month" value-format="yyyy-MM" placeholder="选择月"
          @change="hanldeChange">
        </el-date-picker>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;">
        <el-button type="primary" icon="el-icon-finished" @click="handleCheckAllChange">{{ checkAll ?
          '取消全选' : '全选' }}</el-button>
      </div>
      <div v-loading="loading" style="margin: 0 20px;height: 430px;overflow-y: auto;">
        <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                @change="handleCheckAllChange">全选</el-checkbox> -->
        <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
          <el-checkbox v-for="item in performTimeList" :label="item.id" :key="item.id" :value="item.id">
            <span>{{ item.performDate + ' (' +
              item.performTimeStart + '-' + item.performTimeEnd + ')' }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div v-loading="loading" style="margin-top: 20px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="锁定原因" prop="remark">
            <el-input type="textarea" :rows="4" placeholder="请输入锁定原因" maxlength="250" v-model="ruleForm.remark"
              style="width: 80%;"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="lockOrUnLockFun">提交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  batchLockApi,
  merchantPerformTimeListNew
} from "@/api/windowTicketSales/ticketingSales"
import moment from "moment"

export default {
  name: "LockSeat",
  data() {
    return {
      loading: false,
      dialogVisible: false,
      list: [],
      title: '',
      auditoriumId: '',
      timeId: '',
      ruleForm: {
        remark: null
      },
      rules: {
        remark: [
          { required: true, message: '请输入锁定原因', trigger: ['blur', 'change'] },
        ]
      },
      checkAll: false,
      checkedList: [],
      performTimeList: [], // 场次
      isIndeterminate: true,
      performMonth: '',
    }
  },
  methods: {
    /**
     * @param list 解锁列表
     * @param list1 上锁列表
     */
    async openDialog(list = [], list1 = [], auditoriumId = null, timeId = null) {
      this.auditoriumId = auditoriumId
      // this.timeId = timeId
      this.performMonth = moment().format("yyyy-MM")
      this.merchantPerformTimeListFun();
      this.list = list.length > 0 ? list : list1
      this.title = '批量锁定座位'
      this.dialogVisible = true
      this.$nextTick(() => {
        if (list.length == 0) {
          this.$refs.ruleForm.clearValidate()
        }
      })
    },
    // 全选
    handleCheckAllChange() {
      this.checkAll = !this.checkAll
      let ids = this.performTimeList.map(ele => ele.id)
      this.isIndeterminate = false;
      this.checkedList = this.checkAll ? ids : [];
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.performTimeList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.performTimeList.length;
    },
    // 选月份
    hanldeChange() {
      if (!this.performMonth) {
        this.$message.info(`请选择月份查询场次！`);
        return
      }
      this.merchantPerformTimeListFun();
    },
    /**  获取场次  */
    async merchantPerformTimeListFun() {
      try {
        let param = {
          auditoriumId: this.auditoriumId,
          performMonth: this.performMonth,
          status: 1,
        };
        let res = await merchantPerformTimeListNew(param)
        if (res.code == 200) {
          this.performTimeList = res.data.list

        }
      } catch (error) {

      }
    },
    handleClose() {
      this.ruleForm = {}
      this.dialogVisible = false
      this.checkAll = false
      this.isIndeterminate = false;
      this.checkedList = []
    },
    /**  批量座位锁定  */
    async lockOrUnLockFun(type) {
      try {
        if (this.checkedList.length <= 0) {
          this.$message.info(`请勾选需要批量锁定座位的场次`);
          return
        }
        if (!this.ruleForm.remark) {
          this.$message.info(`请输入锁定原因`);
          return
        }
        this.loading = true
        let list = []
        this.list.forEach((item, index) => {
          list.push({
            "auditoriumId": this.auditoriumId,
            "seatId": item.id,
          })
        })
        let res = await batchLockApi({
          type: 0, // 类型 0锁定，1解锁
          seatList: list,
          remark: this.ruleForm.remark,
          timeIds: this.checkedList
        })
        this.loading = false
        if (res.code) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          });
          this.$emit('querySeatListFun', true)
          this.handleClose()
        }

      } catch (error) {
        this.loading = false
        this.$message({
          showClose: true,
          message: "操作失败!!!",
          type: 'error'
        });
        console.error('error===', error)
      }

    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 20px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #dcdada;
  border-radius: 6px;
}

.dialog-content {
  height: 660px;
  overflow-y: auto;
}
</style>
