<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        ></el-button>
        <ExportBtn :getTableRef="() => $refs.table" :columns="exportCols" fileName="用车申请台账" />
        </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_vehicle__vehreg" clearable placeholder="请选择车辆">
          <el-option
            v-for="item in vehicleList"
            :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="create_time"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="用车部门"
          prop="belong_dept_name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="用车人"
          prop="create_by_name"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="用车事由"
          prop="reason"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="接待人员"
          prop="reception"
          min-width="120">
        </el-table-column>
        <el-table-column label="市内用车" prop="is_city" mim-width="100">
          <template #default="scope">
            <span :style="{color: scope.row.is_city ? '#67C23A' : '#F56C6C'}">
            {{ scope.row.is_city ? '是' : '否'}}
              </span>
          </template>
        </el-table-column>
        <el-table-column
          label="发车地点"
          prop="location"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="途经地点"
          prop="via"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="到达地点"
          prop="destination"
          min-width="100"
        ></el-table-column>
        <!-- <el-table-column
          label="收车时间"
          prop="end_time"
          min-width="100"
        ></el-table-column> -->
        <el-table-column
          label="出发公里(km)"
          prop="start_km"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="结束公里(km)"
          prop="end_km"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="使用公里(km)"
          prop="actual_km"
          min-width="100"
        ></el-table-column>
        <el-table-column label="审批信息" width="200">
          <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-popconfirm
              title="确定删除吗？"
              @confirm="vehicleDel(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"
      :destroy-on-close="true"
      direction="rtl"
      size="70%">
      <div style="display: flex; height: calc(100% - 60px);"> 
        <div style="flex: 1; padding-right: 20px; overflow-y: auto;">
          <VehicleForm
            :mode="type"
            :t_id="t_id"
            @success="()=>{handleQuery(); limitedVisible = false}"
            @closed="limitedVisible = false"
      />
      </div>
  </div>
  </el-drawer>
</template>
<script>

import VehicleForm from "./vehicle_form.vue";
import ExportBtn from "./exportBtn.vue";
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
export default {
  components: {
    VehicleForm, ExportBtn
  },
  name: "index",
  data() {
    return {
      actStateEnum, interveneTypeEnum,
      apiObj: this.$API.ofm.vehicleUse.list,
      query: {},
      limitedVisible: false,
      type: "show",
      t_id: null,
      vehicleList: [],
      exportCols: [
        { header: "日期", key: "create_time", wch: 20 },
        { header: "用车部门", key: "belong_dept_name", wch: 15 },
        { header: "用车人", key: "create_by_name", wch: 12 },
        { header: "用车事由", key: "reason", wch: 20 },
        { header: "接待人员", key: "reception", wch: 12 },
        { header: "市内用车", key: "_is_city_text", wch: 10 },
        { header: "发车地点", key: "location", wch: 15 },
        { header: "途经地点", key: "via", wch: 15 },
        { header: "到达地点", key: "destination", wch: 15 },
        { header: "出发公里(km)", key: "start_km", wch: 14 },
        { header: "结束公里(km)", key: "end_km", wch: 14 },
        { header: "使用公里(km)", key: "actual_km", wch: 14 },
        { header: "审批状态", key: "_act_state_text", wch: 12 },
      ],
    };
  },
  mounted(){
    this.getVehicle();
  },
  methods: {
    handleAdd() {
      this.type = "add";
      this.t_id = null;
      this.limitedVisible = true;
    },
    getVehicle(){
    this.$API.ofm.vehicle.list.req().then(res => {
      this.vehicleList = res.data;
    });
  },
    // 审批流结束之后才可以编辑
    handleShow(row) {
      this.type = "show";
      this.t_id = row.id;
      this.limitedVisible = true;
    },
    vehicleDel(row) {
        var id = row.id;
        this.$API.ofm.vehicleUse.delete.req(id);
        this.$refs.table.refresh();
        this.$message.success("删除成功");   
    },
  //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
      },
    }
};
</script>


