<template>
  <el-container>
    <el-main>
      <el-form
        :model="form"
        :rules="rules"
        ref="addForm"
        label-width="100px"
      > 
        <el-row>
          <el-col :span="12">
            <el-form-item label="会议名称" prop="title">
              <el-input v-model="form.title" clearable placeholder="请输入会议名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会议室" prop="mroom">
              <el-select v-model="form.mroom" placeholder="请选择会议室" @change="mRoomChange" style="width: 100%;">
                <el-option 
                  v-for="item in mRoomList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参会领导" prop="key_participants">
              <el-input v-model="form.key_participants" clearable placeholder="请输入参会领导"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会议人数" prop="participant_count">
              <el-input-number v-model="form.participant_count" clearable style="width: 100%;" :precision="0" :step="1" min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会议时间" prop="mdate">
              <el-date-picker v-model="form.mdate" type="date" value-format="YYYY-MM-DD" style="width: 100%;" placeholder="请选择会议时间" @change="mdateChange"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="form.note" clearable placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div v-for="(item,$index) in timesList" :key="item.value">
            <div v-if="item.sloted" class="timeBlock slotedTimeBlock" @click="slotMessage">{{ item.label }}</div>
            <div v-else-if="item.isSelect" class="timeBlock selectedTimeBlock" @click="selectTime($index)">{{ item.label }}</div>
            <div v-else class="timeBlock" @click="selectTime($index)">{{ item.label }}</div>
          </div>
        </el-row>
      </el-form>
      <el-footer v-show="type!=='show'">
					<ticketd_b_start 
            :workflow_key="'booking'" 
            :title="bookingTitle" 
            :t_id="form.id" 
            :ticket_="form.ticket_"
            @success="()=>{$emit('success')}" 
            :submit_b_func="submit_b_func" 
            ref="ticketd_b_start"
          ></ticketd_b_start>
				<el-button @click="$emit('closed')">取消</el-button>
			</el-footer>
    </el-main>
    <el-aside width="20%" v-if="form.ticket">
			<ticketd :ticket_="form.ticket_" @success="$emit('success')"></ticketd>
		</el-aside>
  </el-container>
</template>

<script>
import ticketd_b_start from "@/views/wf/ticketd_b_start.vue";
import ticketd from '@/views/wf/ticketd.vue'
export default {
  emits: ["success", "closed"],
  name: "index",
  components: {
		ticketd_b_start, ticketd
	},
  props: {
    type: {
      type: String,
      default: "add",
    },
    editId: {
      type: String,
      default: "add",
    },
    bookingIitem: {
      type: String,
      default: "add",
    },
		t_id: {
		    type: String,
			default: null
		},
    
	},
  data() {
    return {
      apiObj: this.$API.ofm.mroombooking.list,
      bookingTitle: "会议预定",
      query: {},
      mroomName:'',
      isSaving: false,
      limitedVisible: false,
      titleMap: {
        add: "新增会议预定",
        edit: "编辑会议预定",
        show: "查看会议预定",
      },
      //表单数据
      form: {
        note: "",
        mroom: "",
        mdate: "",
        title: "",
        slots: [],
        ticket_: null,
        belong_dept: "",
        participant_count: 0,
        key_participants: "",
      },
      //验证规则
      rules: {
        mroom: [{ required: true, message: "请输入会议室名称", trigger: "blur" }],
        mdate: [{ required: true, message: "请输入地点", trigger: "blur" }],
        title: [{ required: true, message: "请输入容纳人数", trigger: "blur" }],
      },
      timesList:[
        {value:0,label:'00:00-00:30',isSelect:false,sloted:false},
        {value:1,label:'00:30-01:00',isSelect:false,sloted:false},
        {value:2,label:'01:00-01:30',isSelect:false,sloted:false},
        {value:3,label:'01:30-02:00',isSelect:false,sloted:false},
        {value:4,label:'02:00-02:30',isSelect:false,sloted:false},
        {value:5,label:'02:30-03:00',isSelect:false,sloted:false},
        {value:6,label:'03:00-03:30',isSelect:false,sloted:false},
        {value:7,label:'03:30-04:00',isSelect:false,sloted:false},
        {value:8,label:'04:00-04:30',isSelect:false,sloted:false},
        {value:9,label:'04:30-05:00',isSelect:false,sloted:false},
        {value:10,label:'05:00-05:30',isSelect:false,sloted:false},
        {value:11,label:'05:30-06:00',isSelect:false,sloted:false},
        {value:12,label:'06:00-06:30',isSelect:false,sloted:false},
        {value:13,label:'06:30-07:00',isSelect:false,sloted:false},
        {value:14,label:'07:00-07:30',isSelect:false,sloted:false},
        {value:15,label:'07:30-08:00',isSelect:false,sloted:false},
        {value:16,label:'08:00-08:30',isSelect:false,sloted:false},
        {value:17,label:'08:30-09:00',isSelect:false,sloted:false},
        {value:18,label:'09:00-09:30',isSelect:false,sloted:false},
        {value:19,label:'09:30-10:00',isSelect:false,sloted:false},
        {value:20,label:'10:00-10:30',isSelect:false,sloted:false},
        {value:21,label:'10:30-11:00',isSelect:false,sloted:false},
        {value:22,label:'11:00-11:30',isSelect:false,sloted:false},
        {value:23,label:'11:30-12:00',isSelect:false,sloted:false},
        {value:24,label:'12:00-12:30',isSelect:false,sloted:false},
        {value:25,label:'12:30-13:00',isSelect:false,sloted:false},
        {value:26,label:'13:00-13:30',isSelect:false,sloted:false},
        {value:27,label:'13:30-14:00',isSelect:false,sloted:false},
        {value:28,label:'14:00-14:30',isSelect:false,sloted:false},
        {value:29,label:'14:30-15:00',isSelect:false,sloted:false},
        {value:30,label:'15:00-15:30',isSelect:false,sloted:false},
        {value:31,label:'15:30-16:00',isSelect:false,sloted:false},
        {value:32,label:'16:00-16:30',isSelect:false,sloted:false},
        {value:33,label:'16:30-17:00',isSelect:false,sloted:false},
        {value:34,label:'17:00-17:30',isSelect:false,sloted:false},
        {value:35,label:'17:30-18:00',isSelect:false,sloted:false},
        {value:36,label:'18:00-18:30',isSelect:false,sloted:false},
        {value:37,label:'18:30-19:00',isSelect:false,sloted:false},
        {value:38,label:'19:00-19:30',isSelect:false,sloted:false},
        {value:39,label:'19:30-20:00',isSelect:false,sloted:false},
        {value:40,label:'20:00-20:30',isSelect:false,sloted:false},
        {value:41,label:'20:30-21:00',isSelect:false,sloted:false},
        {value:42,label:'21:00-21:30',isSelect:false,sloted:false},
        {value:43,label:'21:30-22:00',isSelect:false,sloted:false},
        {value:44,label:'22:00-22:30',isSelect:false,sloted:false},
        {value:45,label:'22:30-23:00',isSelect:false,sloted:false},
        {value:46,label:'23:00-23:30',isSelect:false,sloted:false},
        {value:47,label:'23:30-24:00',isSelect:false,sloted:false}
      ],
      mRoomList: [],
      timeselectList: [],
    };
  },
  mounted() {
    let that = this;
    that.getmRoomList();
    that.getTid();
    if(that.type=='add'){
      that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
    }
    if(that.type=='edit'||that.type=='show'){
      that.form = that.bookingIitem;
      that.mroomName = that.bookingIitem.mroom_name;
      that.bookingTitle = that.mroomName+"预定";
      that.handleEidt(that.editId);
    }
  },
  methods: {
    getmRoomList(){
      let that = this;
      that.$API.ofm.mroom.list.req({page:0}).then(res=>{
        that.mRoomList  = res;
      })
    },
    getTid (){
			var that = this;
		    if (that.t_id) {
				that.$API.wpm.handover.item.req(that.t_id).then(res=>{
					that.setData(res);
					if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
						that.type = "edit";
					}else{
						that.type = "show";
					}
          that.$nextTick(()=>{
            that.$refs.ticketd_b_start.init();
          })
        })
			}
		},
    mRoomChange(){
      let that = this;
      that.mRoomList.forEach(item=>{
        if(item.id == that.form.mroom){
          that.mroomName = item.name;
          that.bookingTitle = item.name+"预定";
          if(that.form.mdate!==''&&that.form.mdate!==null){
            that.getmRoomSlot();
          }
        }
      })
    },
    mdateChange(){
      let that = this;
      if(that.form.mroom!==''&&that.form.mroom!==null){
        that.getmRoomSlot();
      }
    },
    getmRoomSlot(){
      let that = this;
      let form = {};
      form.page = 0;
      form.mroom = that.form.mroom;
      form.mdate = that.form.mdate;
      that.timesList.forEach(slot=>{
        slot.sloted = false;
      })
      that.$API.ofm.mroomslot.list.req(form).then(res=>{
        console.log('getmRoomSlot',res);
          res.forEach(item=>{
           that.timesList[item.slot].sloted = true;
          })
      })
    },
    selectTime(index){
      let that = this;
      that.form.slots = [];
      that.timesList[index].isSelect = !that.timesList[index].isSelect;
      that.timesList.forEach(item=>{
        if(item.isSelect){
          that.form.slots.push(item.value);
        }
      })
    },
    submitHandle() {
      let that = this;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          that.isSaving = true;
          that.submit();
        }
      });
    },
    async submit_b_func() {
      let that = this;
			if(that.type == "add") {
				let res = await that.$API.ofm.mroombooking.create.req(that.form);
				that.form.id = res.id;
			} else if (that.type == "edit") {
        await that.$API.ofm.mroombooking.update.req(that.form.id, that.form);
			}
		},
    async submit() {
      let that = this,res = null;
      console.log('that.form',that.form);
      try {
        if (that.type === "add") {
          res = await that.$API.ofm.mroombooking.create.req(that.form);
        } else {
          res = await that.$API.ofm.mroombooking.update.req(that.form.id,that.form);
        }
        that.isSaving = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaving = false;
      }
    },
    handleEidt(id) {
      let that = this;
      that.$API.ofm.mroomslot.list.req({booking:id,page:0}).then(res=>{
        res.forEach(item=>{
          that.timesList[item.slot].isSelect = true;
        })
      })
    },
    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
    slotMessage(){
      this.$message.warning("该时间段已被预约，不可选择");
    },
  },
    
};
</script>
<style scoped>
.left-panel-group {
  display: flex;
  align-items: center;
  gap: 6px;        
  margin-left: 0; 
}
.timeBlock{
    width: 100px;
    height: 40px;
    cursor: pointer;
    margin-top: 10px;
    line-height: 40px;
    margin-right: 10px;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #b9f0cb;
}
.selectedTimeBlock{
    background-color: #00a870;
    color: #fff;
}
.slotedTimeBlock{
  background-color: #fac275;
  color: #fff;
}
</style>

