<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        ></el-button>
        </div>
      <div class="right-panel">
         <el-date-picker 
         v-model="query.slot_b__mdate" 
         type="date" 
         value-format="YYYY-MM-DD" />
        <el-select v-model="query.slot_b__mroom" clearable placeholder="请选择会议室">
          <el-option
            v-for="item in mRoomList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="会议室名称" prop="mroom_name"></el-table-column>
        <el-table-column label="预约日期" prop="mdate"></el-table-column>
        <el-table-column label="预约时间" prop="time_ranges">
          <template #default="scope">
            <span v-for="item in scope.row.time_ranges" :key="item">{{ item }};</span>
          </template>
        </el-table-column>
        <el-table-column label="审批信息">
          <template #default="scope">
                                <el-tag :type="actStateEnum[scope.row.ticket_?.act_state]?.type">
                        {{ actStateEnum[scope.row.ticket_?.act_state]?.text }}
                    </el-tag>
            <el-tag type="info" effect="plain">{{ scope.row.ticket_?.state_.name }}</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
             <el-button
              link
              size="small"
              type="primary"
              @click="handleShow(scope.row)"
            >查看</el-button>
            <el-button
              link
              size="small"
              type="primary"
              v-if="scope.row.ticket_.state_.type==1"
              @click="handleEidt(scope.row)"
            >编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row)">
              <template #reference>
                <el-button link size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer title="会议室预定" v-model="limitedVisible" :size="'80%'" destroy-on-close>
    <bookingDialog 
      :mode="mode" 
      :editId="editId"
      :bookingIitem="bookingIitem"
      @changeMode="(mode)=>{this.mode=mode;console.log('mode',mode)}"
      @success="handleSuccess" 
      @closed="handleCancel"
    ></bookingDialog>
  </el-drawer>
</template>

<script>
import bookingDialog from "./booking_form.vue";
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
export default {
  name: "index",
  components: { bookingDialog },
  data() {
    return {
      actStateEnum, interveneTypeEnum,
      apiObj: this.$API.ofm.mroombooking.list,
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      mode: "add",
      titleMap: {
        add: "新增会议预定",
        edit: "编辑会议预定",
        show: "查看会议预定",
      },
      mRoomList: []
    };
  },
  mounted() {
    this.getmRoomList();
  },
  methods: {
    getmRoomList(){
      let that = this;
      that.$API.ofm.mroom.list.req({page:0}).then(res=>{
        that.mRoomList  = res;
      })
    },
    //添加
    handleAdd() {
      this.mode = "add";
      this.limitedVisible = true;
    },
    handleCancel() {
      this.limitedVisible = false; 
    },
    handleSuccess(){
      this.$refs.table.refresh();
      this.limitedVisible = false;
    },
    handleEidt(row) {
      let that = this;
      that.mode = "edit";
      that.editId = row.id;
      that.bookingIitem = row;
      that.limitedVisible = true;
    },
    handleShow(row){
       let that = this;
      that.mode = "show";
      that.editId = row.id;
      that.bookingIitem = row;
      that.limitedVisible = true;
    },
    async handleDel(row) {
      var id = row.id;
      var res = await this.$API.ofm.mroombooking.delete.req(id);
      if (res.err_msg) {
        this.$message.error(res.err_msg);
      } else {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
      }
    },
    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
  }
}
</script>
<style scoped>
.left-panel-group {
  display: flex;
  align-items: center;
  gap: 6px;        
  margin-left: 0; 
}
</style>

