<template>
    <el-container>
      <el-main>
        <el-form
          :model="addForm"
          :rules="rules"
          ref="addForm"
          label-width="100px"
          label-position="left"
        > 
          <el-form-item label="用车事由" prop="reason">
            <el-input v-model="addForm.reason" clearable :disabled="mode==='view'"></el-input>
          </el-form-item>
        <el-form-item label="用车范围" prop="is_city">
          <el-select v-model="addForm.is_city" placeholder="请选择" :disabled="mode==='view'">
            <el-option
            v-for="item in vehicle_scope"
            :key="item.is_city"
            :label="item.name"
            :value="item.is_city"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="出发地点" prop="location">
            <el-input v-model="addForm.location" clearable :disabled="mode==='view'"></el-input>
          </el-form-item>
          <el-form-item label="途经地点" prop="via">
            <el-input v-model="addForm.via" clearable :disabled="mode==='view'"></el-input>
          </el-form-item>
          <el-form-item label="到达地点" prop="destination">
            <el-input v-model="addForm.destination" clearable :disabled="mode==='view'"></el-input>
          </el-form-item>
          <el-form-item label="出发公里数" prop="start_km">
            <el-input-number v-model="addForm.start_km" clearable :disabled="mode==='view'"></el-input-number>
          </el-form-item>
          <el-form-item label="归还公里数" prop="end_km">
            <el-input-number v-model="addForm.end_km" clearable></el-input-number>
          </el-form-item>
            <el-form-item label="出车时间">
              <el-date-picker
                v-model="addForm.start_time"
                type="date"
                align="right"
                value-format="YYYY-MM-DD"
                unlink-panels
                placeholder="选择日期"
                :disabled="mode==='view'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="还车时间" v-auth="'vehicle.return'">
              <el-date-picker
                v-model="addForm.end_time"
                type="date"
                align="right"
                value-format="YYYY-MM-DD"
                unlink-panels
                placeholder="选择日期"
                :disabled="mode==='view'"
                >
                </el-date-picker>
            </el-form-item>
       </el-form>
        <el-footer v-show="mode!=='show'">
            <ticketd_b_start
            :workflow_key="'vehicle'"
            :title="ticketTitle"
            :t_id="addForm.id"
            :ticket_="addForm.ticket_"
            :submit_b_func="submit_b_func"
            :ticket_data="ticket_data"
            ref="ticketd_b_start"
            @success="$emit('success')"
            @colsed="$emit('closed')"
            />
          <el-button  type='primary' @click="$emit('submit')">保存</el-button>
        </el-footer>
      </el-main>
        <el-aside v-if="addForm.ticket_">
           <ticketd
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            @success="$emit('success')"
            style="margin-top: 20px;"
        />
    </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 {
    props: {
        mode: { type: String, default: "view" }, // add / edit / view
        lending_type: { type: String, default: "outer" }, // inner / outer
        modelValue: { type: Object, default: () => ({}) },
        transitions: { type: Array, default: () => [] },
        },
    components: {ticketd, ticketd_b_start},
    emits: ["update:modelValue", "submit", "cancel"],
  data() {
    return {
      addForm: { ...this.modelValue },
      ticketTitle: "用车申请",
      ticket_data: {},
      rules:{
        filename: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
      },
      workflow_key: "vehicle_in",
      vehicle_scope:[{name: '市内', is_city: true},{name: '市外', is_city: false}],
        }
    },
    // mounted() {
    //   console.log(this.transitions)
    // },
    watch: {
                // 父组件数据变动 -> 同步到本地
        modelValue: {
            handler(val) {
                this.addForm = { ...val };
            },
            deep: true,
            },
            // 本地数据变动 -> 同步回父组件
            addForm: {
                handler(val) {
                    this.$emit("update:modelValue", val);
                },
                deep: true,
            }
    },
    methods: {
        async submit_b_func() {
		    let that = this;
        if (this.addForm.is_city === true){
          that.workflow_key = "vehicle"
          }else{
            that.workflow_key = "vehicle_out"
        }
            this.ticketTitle = `${this.addForm.reason}-用车申请`
                if(that.mode == "add") {
                    let res = await that.$API.ofm.vehicle.create.req(that.addForm);
                    that.addForm.id = res.id;
                } else if (that.mode == "edit") {
                  console.log(that.transitions)
                    await that.$API.ofm.vehicle.update.req(that.addForm.id, that.addForm);
                }
            }, 
    },
};
</script>