<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="reason">
              <el-input v-model="form.reason" clearable placeholder="请输入用车事由" :readonly="localMode === 'show'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆" prop="vehreg">
              <el-select v-model="form.vehreg" placeholder="请选择车辆" @change="vehChange" style="width: 100%;" :readonly="localMode === 'show'">
                <el-option 
                  v-for="item in vehRegList"
                  :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="is_city">
              <el-radio-group v-model="form.is_city" :readonly="localMode ==='show'">
                <el-radio :label="true">市内</el-radio>
                <el-radio :label="false">市外</el-radio>
              </el-radio-group>
        </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发地点" prop="location">
              <el-input v-model="form.location" clearable :readonly="localMode ==='show'"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发公里数" prop="start_km">
              <el-input v-model="form.start_km" clearable :readonly="localMode ==='show'" type="number">
                <template #append>km</template>
              </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还公里数" prop="end_km" v-if="form.ticket_?.state_?.name=='用车中'">
              <el-input v-model="form.end_km" clearable  type="number">
                <template #append>km</template>
              </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="途经地点" prop="via">
              <el-input v-model="form.via" clearable :readonly="localMode ==='show'" >
              </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到达地点" prop="destination">
              <el-input v-model="form.destination" clearable :readonly="localMode ==='show'" >
              </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接待人员" prop="reception">
              <el-input v-model="form.reception" clearable :readonly="localMode ==='show'">
              </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用日期" prop="vdate">
              <el-date-picker v-model="form.vdate" type="date" value-format="YYYY-MM-DD" style="width: 100%;" placeholder="请选择使用日期" :readonly="localMode === 'show'" @change="mdateChange"></el-date-picker>
            </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>
         <el-button @click="$emit('closed')" style="margin-right: 4px">取消</el-button>
					<ticketd_b 
            :workflow_key="'wf_vehicle'" 
            title='车辆预定'
            :t_id="form.id" 
            :ticket_="form.ticket_"
            :ticket_data="ticket_data"
            @success="$emit('success', localMode)"
            :submit_b_func="submit_b_func" 
            ref="ticketd_b"
          />
			</el-footer>
    </el-main>
    <el-aside width="20%" v-if="form.ticket_">
			<ticketd 
        :ticket_="form.ticket_" 
        :ticket_data="ticket_data"
        @success="$emit('success')"
        ></ticketd>
		</el-aside>
  </el-container>
</template>

<script>
import ticketd_b from "@/views/wf/ticketd_b.vue";
import ticketd from '@/views/wf/ticketd.vue'
export default {
  name: "index",
  components: {
		ticketd_b, ticketd
	},
  props: {
    mode: {
      type: String,
      default: "show",
    },
		t_id: {
		    type: String,
			  default: ""
		},
	},
  data() {
    return {
      bookingTitle: "车辆预定",
      mroomName:'',
      form: {},
      ticket_data: {},
      ticket_:null,
      //验证规则
      rules: {
        vehreg: [{ required: true, message: "请输入车辆名称", trigger: "blur" }],
        vdate: [{ 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}
      ],
      vehRegList: [],
      timeselectList: [],
      localMode: this.mode,
    };
  },
  mounted() {
    let that = this;
    that.getmRoomList();
    if (that.t_id){
      that.getTid();
    }
    else {
      that.localMode = "add";
      that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
    }
  },
  watch: {
    'form.end_km'(val) {
      this.ticket_data.end_km = val
    },
    deep:true
  },
  methods: {
    getmRoomList(){
      let that = this;
      that.$API.ofm.vehicle.list.req({page:0}).then(res=>{
        that.vehRegList  = res;
      })
    },
    getTid (){
			var that = this;
      that.$API.ofm.vehicleUse.item.req(that.t_id).then(res=>{
        that.form = res;
        that.handleEidt(that.t_id);
        if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
          that.localMode = "edit";
        }else{
          that.localMode = "show";
        }
      })
		},
    getmRoomSlot(){
      let that = this;
      let form = {};
      form.page = 0;
      form.vehreg = that.form.vehreg;
      form.vdate = that.form.vdate;
      that.timesList.forEach(slot=>{
        slot.sloted = false;
      })
      that.$API.ofm.vehicleslot.list.req(form).then(res=>{
          res.forEach(item=>{
           that.timesList[item.slot].sloted = true;
          })
      })
    },
     mdateChange(){
      let that = this;
      if(that.form.vehreg!==''&&that.form.vehreg!==null){
        that.getmRoomSlot();
      }
    },
    vehChange(){
      let that = this;
      that.vehRegList.forEach(item=>{
        if(item.id == that.form.vehreg){
          that.mroomName = item.name;
          that.bookingTitle = item.name+"预定";
           if(that.form.vdate!==''&&that.form.vdate!==null){
            that.getmRoomSlot();
          }
        }
      })
    },
    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);
        }
      })
    },
    async submit_b_func() {
      let that = this;
			if(that.localMode == "add") {
        that.form.belong_dept = that.$TOOL.data.get("USER_INFO").belong_dept;
				let res = await that.$API.ofm.vehicleUse.create.req(that.form);
				that.form.id = res.id;
			} else if (that.localMode == "edit") {
        await that.$API.ofm.vehicleUse.update.req(that.form.id, that.form);
			}
		},
    handleEidt(id) {
      let that = this;
      that.$API.ofm.vehicleslot.list.req({vehicle_use: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>

