<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">场景编号</span>
                <el-input
                    v-model="searchParams.naturalName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">道路</span>
                <el-cascader
                    v-model="searchParams.road"
                    :options="roadList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem3">
                <span class="label">基础设施</span>
                <el-cascader
                    v-model="searchParams.infrastructure"
                    :options="infrastructureList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem4">
                <span class="label">交通情况</span>
                <el-cascader
                    v-model="searchParams.trafficCondition"
                    :options="trafficConditionList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem5">
                <span class="label">自车行为</span>
                <el-cascader
                    v-model="searchParams.selfBehavior"
                    :options="selfBehaviorList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem6">
                <span class="label">目标行为</span>
                <el-cascader
                    v-model="searchParams.targetBehavior"
                    :options="targetBehaviorList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem7">
                <span class="label">自然环境</span>
                <el-cascader
                    v-model="searchParams.naturalEnvironment"
                    :options="naturalEnvironmentList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem8">
                <span class="label">临时性操纵</span>
                <el-cascader
                    v-model="searchParams.temporaryOperation"
                    :options="temporaryOperationList"
                    :props="props"
                    clearable=""
                ></el-cascader>
            </template>
            <template slot="searchItem27">
                <el-checkbox-group v-model="labels">
                    <el-checkbox-button label="1" :key="1" class="labelA"
                        >高速</el-checkbox-button
                    >
                    <el-checkbox-button label="2" :key="2" class="labelB"
                        >切入</el-checkbox-button
                    >
                    <el-checkbox-button label="3" :key="3" class="labelC"
                        >切出</el-checkbox-button
                    >
                    <el-checkbox-button label="4" :key="4" class="labelD"
                        >变道</el-checkbox-button
                    >
                    <el-checkbox-button label="5" :key="5" class="labelA"
                        >匝道</el-checkbox-button
                    >
                    <el-checkbox-button label="6" :key="6" class="labelB"
                        >隧道</el-checkbox-button
                    >
                    <el-checkbox-button label="7" :key="7" class="labelC"
                        >掉头</el-checkbox-button
                    >
                </el-checkbox-group>
            </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="btnsPanel">
            <el-button
                type="primary"
                plain
                icon="el-icon-upload"
                @click="openFileDia"
                >上传文件</el-button
            >
        </div>

        <file-dialog
            ref="fileDialog"
            type="1"
            :objectPath="objectPath"
            :api="$api.sceneLibrary.saveSceneNatural"
            @fileClose="fileClose"
        ></file-dialog>

        <tableList
            ref="table"
            style="margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <el-table-column
                label="操作"
                slot="cgInfos"
                align="center"
                width="180"
            >
                <template v-slot="scope">
                    <i
                        @click="viewRow(scope.row)"
                        class="el-icon-view elIcon cursor"
                        title="查看"
                    >
                    </i>
                    <i
                        @click="delRow(scope.row)"
                        class="el-icon-delete elIcon"
                        title="删除"
                    >
                    </i>
                </template>
            </el-table-column>
        </tableList>

        <el-dialog
            :title="videoDiaTitle"
            :visible.sync="dialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="diaClose"
        >
            <div class="videoBox">
                <video :autoplay="autoplay" :src="videoSrc"></video>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";
import fileDialog from "./components/fileDialog";
import { mapState } from "vuex";

export default {
    name: "naturalDrivingScenarioList", // 自然驾驶场景
    components: { searchLayout, tableList, fileDialog },
    data() {
        return {
            searchParams: {
                //搜索参数
                naturalName: "", // 场景编号
                road: [], // 道路
                infrastructure: [], // 基础设施
                trafficCondition: [], // 交通情况
                selfBehavior: [], // 自车行为
                targetBehavior: [], // 目标行为
                naturalEnvironment: [], // 自然环境

                highSpeed: [], // 高速
                ramp: [], // 匝道
                tunnel: [], // 隧道
                cutIn: [], // 切入
                cutOut: [], // 切出
                laneChange: [], // 变道
                turnAround: [], // 掉头
            },
            labels: [],
            list: [],
            roadList: [],
            infrastructureList: [],
            trafficConditionList: [],
            selfBehaviorList: [],
            targetBehaviorList: [],
            naturalEnvironmentList: [],
            temporaryOperationList: [],
            props: {
                multiple: true,
                label: "dictName",
                value: "dictCode",
            },
            columns: [
                //表格列
                {
                    label: "场景编号",
                    prop: "naturalName",
                },
                {
                    label: "天气",
                    prop: "weather",
                },
                {
                    label: "自车行为",
                    prop: "selfBehavior",
                },
                {
                    label: "目标行为",
                    prop: "targetBehavior",
                },
                {
                    label: "标签",
                    prop: "label",
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.querySceneNaturalList,
                param: {},
            },
            dialogVisible: false,
            autoplay: false,
            videoSrc: "",
            objectPath: "",
            videoDiaTitle: "",
        };
    },

    computed: {
        ...mapState(["fileHost", "fileUrl"]),
    },

    methods: {
        doSearch() {
            this.searchParams.highSpeed = this.labels.includes("1")
                ? [["roadType", "高速"]]
                : [];
            this.searchParams.cutIn = this.labels.includes("2")
                ? [
                      [
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "机动车从左侧切入成功",
                      ],
                      [
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "机动车从右侧切入成功",
                      ],
                  ]
                : [];
            this.searchParams.cutOut = this.labels.includes("3")
                ? [
                      [
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "机动车向左侧切出成功",
                      ],
                      [
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "targetBehavior",
                          "机动车向右侧切出成功",
                      ],
                  ]
                : [];
            this.searchParams.laneChange = this.labels.includes("4")
                ? [
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向左变道成功",
                      ],
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向右变道成功",
                      ],
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向左连续变道",
                      ],
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向右连续变道",
                      ],
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向左变道超车",
                      ],
                      [
                          "selfBehavior",
                          "selfBehavior",
                          "selfBehavior",
                          "向右变道超车",
                      ],
                  ]
                : [];
            this.searchParams.ramp = this.labels.includes("5")
                ? [["ramp", "是"]]
                : [];
            this.searchParams.tunnel = this.labels.includes("6")
                ? [["tunnel", "是"]]
                : [];
            this.searchParams.turnAround = this.labels.includes("7")
                ? [
                      ["selfBehavior", "直路掉头"],
                      ["selfBehavior", "selfBehavior", "路口掉头"],
                  ]
                : [];
            this.refreshList(this.searchParams);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                naturalName: "",
                road: [],
                infrastructure: [],
                trafficCondition: [],
                selfBehavior: [],
                targetBehavior: [],
                naturalEnvironment: [],
                temporaryOperation: [],
                highSpeed: [],
                ramp: [],
                tunnel: [],
                cutIn: [],
                cutOut: [],
                laneChange: [],
                turnAround: [],
            };
            this.labels = [];
            this.doSearch();
        },
        viewRow(row) {
            this.dialogVisible = true;
            this.videoDiaTitle = row.naturalName;

            let url = "";
            if (process.env.VUE_APP_IS_DEV == "true") {
                url = this.fileHost + this.fileUrl;
            } else {
                url = this.fileUrl;
            }

            let token = localStorage.getItem("Authorization").split(" ")[1];
            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
            this.autoplay = true;
        },
        delRow(row) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.deleteSceneNatural,
                    data: {
                        naturalId: row.naturalId,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
        diaClose(done) {
            this.autoplay = false;
            this.videoSrc = "";
            done();
        },
        openFileDia() {
            this.objectPath = Math.random().toString();
            this.$refs.fileDialog.fileVisible = true;
        },
        fileClose() {
            this.objectPath = "";
            this.doSearch();
        },
    },

    async mounted() {
        await this.$dicsTreesInit({
            roadList: "road",
            infrastructureList: "infrastructure",
            trafficConditionList: "trafficCondition",
            selfBehaviorList: "selfBehavior",
            targetBehaviorList: "targetBehavior",
            naturalEnvironmentList: "naturalEnvironment",
            temporaryOperationList: "temporaryOperation",
        });
    },
};
</script>

<style lang='less' scoped>
@import "./common/util.less";
.inputBox {
    .label {
        min-width: 75px;
    }
}

.btnsPanel {
    text-align: right;
}
</style>