<template>
    <div v-if="isShow">
        <template v-if="type=='add' || type=='edit'">

            <a-modal
                v-model="isShow"
                :title="[type =='add' ? '新增球机':'编辑球机']"
                :closable="closable"
                @ok="handleOk"
                @cancel="handleCancel"
                ok-text="确认"
                cancel-text="取消"
                class="add-edit-model"
            >
                <a-form
                    :form="form"
                    :wrapper-col="formItemAcrossLayout.wrapperCol"
                >
                    <a-form-item
                        label="球机名称"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]" />
                    </a-form-item>
                    <a-form-item
                        label="设备IP"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['ip', { rules: [{ required: true, message: '请输入设备ip!' }] }]" />
                    </a-form-item>

                    <a-form-item
                        label="球机端口"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['port', { rules: [{ required: true, message: '请输入球机端口!' }] }]" />
                    </a-form-item>
                    
                    <a-form-item
                        label="视频流IP"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['rtcServer']" />
                    </a-form-item>
                    <a-form-item
                        label="rtsp端口"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['rtspPort', { rules: [{ required: true, message: '请输入rtsp端口!' }] }]" />
                    </a-form-item>
                    <a-form-item
                        label="通道"
                        :label-col="formItemVerticalLayout.labelCol"
                    >
                        <a-input v-decorator="['channel', { rules: [{ required: true, message: 'channel!' }] }]" />
                    </a-form-item>
                </a-form>
            </a-modal>
        </template>

        <template v-else-if="type=='config'">
            <a-modal
                v-model="isShow"
                @cancel="handleCancel"
                :footer="null"
                :maskClosable="false"
                width="1601px"
                :bodyStyle="{padding:0}"
                :centered="true"
                class="config-model"
            >
                
                <a-row type="flex">

                    <a-col :flex="3">
                        <cameraVue></cameraVue>
                        <div class="config-table">
                            <h2>球机配置</h2>
                            <a-table
                                :columns="columns"
                                :row-key="record => record.name"
                                :data-source="configData"
                                @change="getConfigIoList"
                                bordered
                                :pagination="false"
                                :scroll="{y:335}"
                            >
                                <span
                                    slot="name"
                                    slot-scope="text,record"
                                >
                                    <a-button
                                        type="link"
                                        @click="toPtz(record)"
                                    >{{text}}({{record.code}})</a-button>
                                </span>
                                <span
                                    slot="position"
                                    slot-scope="text, record"
                                >
                                    <div v-if="text">
                                        已写入
                                        <a-button
                                            type="link"
                                            class="plc"
                                            @click="coverage(0,record)"
                                        >
                                            覆盖
                                        </a-button>
                                    </div>
                                    <a-button
                                        type="primary"
                                        class="plc"
                                        v-else
                                        @click="coverage(0,record)"
                                    >
                                        写入
                                    </a-button>

                                </span>

                            </a-table>
                        </div>
                    </a-col>
                </a-row>

            </a-modal>
        </template>

    </div>
</template>
<script>
var formItemAcrossLayout = {
    //formItemAcrossLayout当表单内item横向排列时用
    labelCol: { span: 8 }, //lable长度
    wrapperCol: { span: 14 }, //input长度
};
var formItemVerticalLayout = {
    //formItemVerticalLayout当表单内item纵向排列时用
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
};
const columns = [
    {
        title: "PLC IO指令",
        dataIndex: "name",
        scopedSlots: { customRender: "name" },
    },
    {
        title: "配置",
        dataIndex: "position",
        scopedSlots: { customRender: "position" },
    },
];
import WebRtcPlayer from "../../../public/static/webrtcplayer";
import cameraVue from "../camera.vue";
export default {
    name: "model",
    props: ["visible", "modelType", "modelData"],
    components: { cameraVue },
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        visible: function (newVal) {
            this.isShow = newVal; //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
        modelType: function (newVal) {
            this.type = newVal;
        },
        modelData: function (newVal) {
            // console.log(newVal)
            this.mdata = newVal;
            console.log(this.type);
            if (newVal.id && this.type == "edit") {
                this.id = newVal.id;
                // console.log('触发了watch，重新赋值')
                this.$nextTick(() => {
                    //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                    this.form.setFieldsValue({
                        //setFieldsValue 表示对form表单重新设置值
                        name: newVal.name,
                        ip: newVal.ip,
                        rtsp: newVal.rtsp,
                        rtcServer: newVal.rtcServer,
                        rtcServerPort: newVal.rtcServerPort,
                    });
                });
            } else if (newVal.id && this.type == "config") {
                this.id = newVal.id;
                this.mdata = newVal;
                console.log(newVal);
            }
        },
    },
    data() {
        return {
            isShow: false,
            player: null,
            type: "",
            title: "",
            closable: false, //取消model模态框右上角的X号
            formItemAcrossLayout,
            formItemVerticalLayout,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: "dynamic_rule" }),
            id: "",
            mdata: [],
            // //测试相关
            // zoomSubUrl: require("@/assets/sub-icon.png"),
            // zoomAddUrl: require("@/assets/add-icon.png"),
            // focusSubUrl: require("@/assets/sub-icon.png"),
            // focusAddUrl: require("@/assets/add-icon.png"),
            // irisSubUrl: require("@/assets/sub-icon.png"),
            // irisAddUrl: require("@/assets/add-icon.png"),
            // leftUpUrl: require("@/assets/left-up-icon.png"),
            // upUrl: require("@/assets/up-icon.png"),
            // rightUpUrl: require("@/assets/right-up-icon.png"),
            // leftUrl: require("@/assets/left-icon.png"),
            // rightUrl: require("@/assets/right-icon.png"),
            // leftDownUrl: require("@/assets/left-down-icon.png"),
            // downUrl: require("@/assets/down-icon.png"),
            // rightDownUrl: require("@/assets/right-down-icon.png"),
            columns,
            configData: [],
        };
    },
    mounted() {
        if (this.$route.query.modelType == "test") {
            this.isShow = true;
            this.id = this.$route.query.modelData.id;
            this.type = this.$route.query.modelType;
            this.mdata = this.$route.query.modelData;
            this.$nextTick(() => {
                this.autoPlay(this.id);
            });
        } else if (this.$route.query.modelType == "config") {
            this.isShow = true;
            this.id = this.$route.query.modelData.id;
            this.getConfigIoList();
            this.type = this.$route.query.modelType;
            this.mdata = this.$route.query.modelData;
            this.$nextTick(() => {
                this.autoPlay(this.id);
            });
        }
    },
    computed: {
        // 按钮列表
        buttonList() {
            return this.buttons.map((button) => {
                return {
                    id: button1.id,
                    text: button1.text,
                };
            });
        },
    },
    destroy() {
        if (this.player != null) {
            this.player.destroy();
        }
    },
    methods: {
        addButton() {
            // 新增一个按钮
            const newButton = {
                id: Date.now(),
                text: "New Button",
            };
            this.buttons1.push(newButton);
        },
        deleteButton(button) {
            // 删除按钮
            this.buttons = this.buttons.filter((b) => b !== button);
        },
        handleOk() {
            this.confirmLoading = true;
            setTimeout(() => {
                this.form.validateFields((err, values) => {
                    console.log(values);
                    if (!err) {
                        console.log(this.title);
                        if (this.type == "add") {
                            this.$api.httpApi
                                .addCamera({
                                    data: values,
                                })
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$emit("sure", false);
                                        this.$message.success("新增球机成功");
                                    }
                                })
                                .catch((err) => {});
                        } else if (this.type == "edit") {
                            values.id = this.id;
                            this.$api.httpApi
                                .editCamera({
                                    data: values,
                                })
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$emit("sure", false);
                                        this.$message.success("编辑球机成功");
                                    }
                                })
                                .catch((err) => {});
                        }
                    }
                });
                this.confirmLoading = false;
            }, 500);
        },

        handleCancel() {
            console.log("Clicked cancel button");
            this.$emit("close", false, {});
            if (this.type == "test") {
                this.$router.go(-1);
            } else if (this.type == "config") {
                console.log(this.$router.history);
                
                this.$router.go(-1);
                if (this.player != null) {
                    this.player.destroy();
                }
            }
        },

        autoPlay(id) {
            let video = document.getElementById("config-camera" + id);
            if (video) {
                
                let server ;
                if(this.mdata.rtcServerPort != null){
                    server=  this.mdata.rtcServer+":"+this.mdata.rtcServerPort ;
                }else{
                    server= this.mdata.rtcServer
                }
                
                let player = new WebRtcPlayer(server, video, "camera" + id);
                console.log("okkkkkk");
                //player.load('camera'+id);
                this.player = player;
            }
        },
        getConfigIoList() {
            this.$axios
                .post("/camera/" + this.id + "/io/list", {
                    data: {},
                })
                .then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.configData = res.data;
                    }
                })
                .catch((err) => {});
        },

        coverage(type, data) {
            this.$api.httpApi
                .writeInCameraIoptz({
                    data: {
                        cameraId: this.id,
                        cameraIOId: data.id,
                        name: data.name,
                        code: data.code,
                        type: type,
                    },
                })
                .then((res) => {
                    this.getConfigIoList();
                })
                .catch((err) => {});
        },
        toPtz(data) {
            this.$api.httpApi
                .cameraIoToPtz({
                    data: {
                        cameraId: this.id,
                        cameraIOId: data.id,
                        name: data.name,
                    },
                })
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {});
        },
    },
};
</script>
<style lang="scss" scoped>
.add-edit-model {
    .across-layout {
        display: flex;
    }
    .ant-divider-horizontal {
        margin: 6px 0;
    }
}
.test-model {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    #video-test {
        width: 100%;
        height: 100%;
    }
    .video-close {
        position: absolute;
        right: 20px;
        top: 20px;
        color: #ffffff;
        font-size: 24px;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }
    .config-model-header {
        height: "90px";
    }
    .operation-list {
        position: absolute;
        right: 200px;
        bottom: 20px;
        /*width: 150px;*/
        /*border: solid 1px blue;*/
        z-index: 10;
        .operation-item {
            img {
                width: 42px;
                -webkit-user-select: none;
                -ms-user-select: none;
                -webkit-user-drag: none;
                user-select: none;
            }
            span {
                padding: 5px 10px;
                background: rgba(0, 0, 0, 0.5);
                font-size: 18px;
                color: #ffffff;
            }
        }
    }
    .direction-list {
        position: absolute;
        right: 30px;
        bottom: 20px;
        width: 150px;
        z-index: 10;
        /*border: solid 1px blue;*/
        .direction-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                width: 42px;
                -webkit-user-select: none;
                -ms-user-select: none;
                -webkit-user-drag: none;
                user-select: none;
            }
        }
    }
    img {
        cursor: pointer;
    }
}
.config-model {
    display: flex;
    align-items: center;
    justify-content: center;
    .operation-list {
        position: absolute;
        right: 1000px;
        bottom: 20px;
        /*width: 150px;*/
        /*border: solid 1px blue;*/
        z-index: 10;
        .operation-item {
            img {
                width: 32px;
                -webkit-user-select: none;
                -ms-user-select: none;
                -webkit-user-drag: none;
                user-select: none;
            }
            span {
                padding: 3px 6px;
                background: rgba(0, 0, 0, 0.5);
                font-size: 16px;
                color: #ffffff;
            }
        }
    }
    .direction-list {
        position: absolute;
        right: 830px;
        bottom: 20px;
        width: 150px;
        z-index: 10;
        /*border: solid 1px blue;*/
        .direction-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                width: 32px;
                -webkit-user-select: none;
                -ms-user-select: none;
                -webkit-user-drag: none;
                user-select: none;
            }
        }
    }
    img {
        cursor: pointer;
    }
    .config-table {
        width: 800px;
        height: 400px;
        overflow: hidden;

        h2 {
            padding: 15px;
            font-size: 20px;
            background: #fafafa;
            margin: 0;
        }
    }
}
.vxgplayer {
    border: none;
    margin: 0;
    display: block;
}
.ant-btn {
    white-space: inherit;
    text-align: left;
}
</style>
