<template>
    <div>
        <!-- <button @click="refreshView">sadsadas</button> -->
        <!-- <button @click="test">按钮</button> -->
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <el-form class="mb-[-16px]" inline>
                <el-form-item label="车牌号" prop="company_id">
                    <el-input class="w-[280px]" v-model="queryParams.license" clearable placeholder="请输入车牌号" />
                </el-form-item>
                <el-form-item label="imei编号" prop="company_id">
                    <el-input class="w-[280px]" v-model="queryParams.gps_imei" clearable placeholder="请输入imei编号" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="mt-4">
                <el-button v-perms="['vehicle.vehicle/add']" type="primary"
                    @click="(dialogVisible = true), (isAdd = true)">增加</el-button>
                <!-- <el-button
          v-perms="['vehicle.vehicle/add']"
          @click="(dialogVisible = true), (isAdd = false)"
          >车辆绑定</el-button
        > -->
                <!-- <el-button>删除</el-button> -->
                <el-table :data="pager.lists" :default-sort="{ prop: 'create_time', order: 'descending' }"
                    @selection-change="handleSelectionChange">
                    <el-table-column label="车辆牌照" width="180" align="center">
                        <template #default="{ row }">
                            <el-button type="primary" link>
                                <router-link :to="{
                                    path: '/vehicle/detail',
                                    query: {
                                        id: row.id,
                                    },
                                }">{{ row.license }}</router-link>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="GPS编号" prop="gps_imei" show-overflow-tooltip />
                    <el-table-column label="当前使用人" prop="rent_info.use_user_name" show-overflow-tooltip />
                    <el-table-column label="联系方式" prop="rent_info.use_user_phone" show-overflow-tooltip />

                    <el-table-column label="车辆使用情况" prop="status_name" show-overflow-tooltip />

                    <el-table-column label="当前运载货物" prop="create_time" show-overflow-tooltip />
                    <el-table-column label="车辆类型" prop="type_name" show-overflow-tooltip />
                    <el-table-column label="当前所属公司" prop="rent_info.company_name" show-overflow-tooltip />

                    <el-table-column label="租赁时间" prop="rent_info.create_time" show-overflow-tooltip />

                    <el-table-column label="操作" align="center" width="auto" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="bindFn(row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
    <div>
        <el-dialog v-model="dialogVisible" title="" width="30%">
            <div v-if="isAdd">
                <span>新增三轮车</span>
                <div class="col">
                    <span class="cls">车牌号:</span>
                    <el-input v-model="addFormData.license" placeholder="请输入车牌号" />
                </div>
                <div class="col">
                    <span class="cls"> GPS设备号:</span>
                    <el-input v-model="addFormData.gps_imei" placeholder="请输入GPS设备号" />
                </div>
                <div class="col">
                    <span class="cls">车辆图片:</span>
                    <el-upload :headers="{ Token: userStore.token }" :action="base_url + '/upload/image'"
                        :on-success="handleAvatarSuccess" :limit="1" class="uplode_cls">
                        <img v-if="addFormData.pic" :src="addFormData.pic" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
            <div v-else>
                <span>绑定设备号</span>
                <div class="col">
                    <span class="cls"> 车牌号:</span>
                    <el-input v-model="editFormData.license" placeholder="请输入车牌号" />
                </div>
                <div class="col">
                    <span class="cls"> GPS设备号:</span>
                    <el-input v-model="editFormData.gps_imei" placeholder="请输入GPS设备号" />
                </div>
                <div class="col">
                    <span class="cls">车辆图片:</span>
                    <el-upload :headers="{ Token: userStore.token }" :action="base_url + '/upload/image'"
                        :on-success="handleAvatarSuccess2" :limit="1" class="uplode_cls">
                        <img v-if="editFormData.pic" :src="editFormData.pic" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd"> 确定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="flowTypeLists">
import feedback from "@/utils/feedback";

import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
    vehicleList,
    addVehicle,
    delVehicle,
    goodsEditApi,
} from "@/api/vehicle";
import { ref, reactive, inject } from "vue";
import useAppStore from "@/stores/modules/app";
import useUserStore from "@/stores/modules/user";

const userStore = useUserStore();
const appStore = useAppStore();
const base_url = inject("base_url");
console.log(base_url)
// 刷新页面
const refreshView = () => {
    appStore.refreshView();
};

const lince = ref("");
const form = reactive({
    id: null,
    car_id: null,
    contract_id: null,
    company_id: null,
    company_name: null,
    company_user: null,
    company_phone: null,
    use_user_id: null,
    use_user_name: null,
    use_user_phone: null,
    create_time: null,
    status: null,
});
const addFormData = reactive({
    license: "",
    gps_imei: "",
    pic: "",
});
const editFormData = reactive({
    license: "",
    gps_imei: "",
    //   license: "",
    id: "",
    type: "",
    status: "",
    pic: "",
});
const bindFn = (row: any) => {
    for (let keys in editFormData) {
        editFormData[keys] = row[keys];
    }
    editFormData.license = row.license;
    for (let key in row.rent_info) {
        form[key] = row.rent_info[key];
    }
    dialogVisible.value = true;
    isAdd.value = false;
};

// const bindFn=(row:any)
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);
// 查询条件
const queryParams = reactive({
    license: "",
    gps_imei: "",
    status: "",
});

// 选中数据
const selectData = ref<any[]>([]);
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id);
};
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: vehicleList,
    params: queryParams,
});
// 新增
const isAdd = ref(true);

//重置对象
const clearObject = (OBJ: Object) => {
    for (const key in OBJ) {
        OBJ[key] = undefined;
    }
};
const dialogVisible = ref(false);
const handleAvatarSuccess = (res: any) => {
    addFormData.pic = res.data.uri;
    console.log(addFormData.pic);
};
const handleAvatarSuccess2 = (res: any) => {
    editFormData.pic = res.data.uri;
    console.log(editFormData.pic);
};
const handleAdd = async () => {
    isAdd.value
        ? addVehicle({ ...addFormData })
        : goodsEditApi({ ...editFormData });
    clearObject(addFormData);
    dialogVisible.value = false;
    editFormData.license = "";
    refreshView();

    //   getLists();

    //   console.log(addFormData);
};

const handleDel = async (id: number) => {
    delVehicle({ id });
};
getLists();
</script>
<style lang="scss" scoped>
.col {
    display: flex;
    margin: 30px;

    .cls {
        width: 5vw;
        line-height: 30px;
    }
}

.avatar {
    width: 100px;
    height: 100px;
}

.uplode_cls {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 100px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>
