<template>
    <div>
        <search-layout>
            <template slot="searchItem1">
                <span class="label">场景名称</span>
                <el-input
                    v-model="searchParams.sceneName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">自车驾驶行为</span>
                <el-select
                    v-model="searchParams.selfDriving"
                    multiple
                    clearable
                >
                    <el-option
                        v-for="item in selfDrivingList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem3">
                <span class="label">目标驾驶行为</span>
                <el-select
                    v-model="searchParams.targetDriving"
                    multiple
                    clearable
                >
                    <el-option
                        v-for="item in targetDrivingList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem4">
                <span class="label">自车反应行为</span>
                <el-select
                    v-model="searchParams.selfReaction"
                    multiple
                    clearable
                >
                    <el-option
                        v-for="item in selfReactionList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem5">
                <span class="label">冲突行为</span>
                <el-select
                    v-model="searchParams.conflictBehavior"
                    multiple
                    clearable
                >
                    <el-option
                        v-for="item in conflictBehaviorList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem6">
                <span class="label">冲突类型</span>
                <el-select
                    v-model="searchParams.conflictType"
                    multiple
                    clearable
                >
                    <el-option
                        v-for="item in conflictTypeList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchBtn1">
                <el-button type="primary" @click="doSearch">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary" @click="doReset">重置</el-button>
            </template>
        </search-layout>
        <div class="isSelected">
            <el-checkbox v-model="selected" @change="selectedShow"
                >已选择</el-checkbox
            >
        </div>
        <tableList
            ref="table"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            :checkedData="checkedArr"
            :needSelectedCallBack="true"
            :selectedCallBack="selectedCallBack"
            :selectedAllCallBack="selectedAllCallBack"
            index
            selection
        >
        </tableList>
    </div>
</template>

<script>
import tool from "./common/tool.js";

export default {
    name: "trafficAccidentSimulationList", // 交通事故场景
    mixins: [tool],
    data() {
        return {
            searchParams: {
                //搜索参数
                sceneName: "", //场景名称
                selfDriving: [], //自车驾驶行为
                targetDriving: [], //目标驾驶行为
                selfReaction: [], //自车反应行为
                conflictBehavior: [], //冲突行为
                conflictType: [], //冲突类型
            },
            columns: [
                //表格列
                {
                    label: "场景名称",
                    prop: "sceneName",
                },
                {
                    label: "自车驾驶行为",
                    prop: "selfDriving",
                },
                {
                    label: "目标驾驶行为",
                    prop: "targetDriving",
                },
                {
                    label: "自车反应行为",
                    prop: "selfReaction",
                },
                {
                    label: "冲突行为",
                    prop: "conflictBehavior",
                },
                {
                    label: "冲突类型",
                    prop: "conflictType",
                },
            ],
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.querySceneAccidentList,
                param: {},
            },
        };
    },

    props: {
        selfDrivingList: {
            type: Array,
            default: [],
        },
        targetDrivingList: {
            type: Array,
            default: [],
        },
        selfReactionList: {
            type: Array,
            default: [],
        },
        conflictBehaviorList: {
            type: Array,
            default: [],
        },
        conflictTypeList: {
            type: Array,
            default: [],
        },
    },

    methods: {
        doReset() {
            this.searchParams = {
                sceneName: "",
                selfDriving: [],
                targetDriving: [],
                selfReaction: [],
                conflictBehavior: [],
                conflictType: [],
            };
            this.doSearch();
        },
    },

    mounted() {},
};
</script>

<style lang='less' scoped>
</style>