<template>
    <div class="info">
        <el-form v-loading="loading" :model="formData" :rules="rules" ref="ruleForm" label-width="150px" class="custom-form">
            <form-option title="基本信息" :rightButton="rightButton"></form-option>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="记录编号">
                        <el-input v-model="infoData.media_id" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="记录时间">
                        <el-input v-model="infoData.beginTime" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="视频名称" prop="video_name">
                        <el-input v-model="formData.video_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="视频分类" prop="video_type">
                        <el-select v-model="formData.video_type" placeholder="请选择">
                            <el-option
                                v-for="(item, index) in videoTypes"
                                :key="index"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="执法地点">
                        <el-input v-model="infoData.address" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="拍摄时长">
                        <el-input v-model="infoData.videoPeriod" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="执法设备">
                        <el-input v-model="infoData.device_name" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="唯一标识">
                        <el-input v-model="infoData.device_index_code" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="执法机构">
                        <el-input v-model="infoData.org_name" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="使用人员">
                        <el-input v-model="infoData.use_person_name" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <form-option title="任务信息"></form-option>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="关联任务">
                        <el-button v-if="infoData.enforce_job" type="primary" icon="el-icon-edit" @click="showTask=true">切换任务</el-button>
                        <el-button v-else type="primary" icon="el-icon-plus" @click="showTask=true">新增任务</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="infoData.enforce_job">
                <el-col :span="10">
                    <el-form-item label="任务编号">
                        <el-input v-model="infoData.enforce_job.job_no" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="被检查单位">
                        <el-input v-model="infoData.enforce_job.enforce_obj_name" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleCommit">提交</el-button>
            </el-form-item>
        </el-form>

        <el-dialog title="选择任务" :visible.sync="showTask" class="custom-dialog1">
            <choose-task @choose="handleChooseTask"></choose-task>
        </el-dialog>
    </div>
</template>

<script>
import FormOption from '@/component/FormOption.vue'
import ChooseTask from './component/ChooseTask.vue'

import { getVideoDetail, updateVideo } from '@/api/device'
import { formatDate } from '@/utils/tool';

export default {
    components: {
        FormOption,
        ChooseTask
    },
    data () {
        return {
            loading: false,
            rightButton: {},
            videoTypes: ['监督检查', '行政许可', '行政处罚', '行政强制'],
            showTask: false,
            formData: {
                video_name: '',
                video_type: null,
                enfore_job_id: null,
            },
            infoData: {},
            rules: {
                video_name: [
                    { required: true, message: '请输入视频名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '请输入1-50位字符', trigger: 'blur' }
                ],
                video_type: [
                    { required: true, message: '请选择视频分类', trigger: 'change' },
                ],
            },
        }
    },
    computed: {
        resourceId () {
            return this.$route.params.id
        }
    },
    mounted () {
        this.getResourceDetail()
    },
    methods: {
        getResourceDetail () {
            if (this.resourceId) {
                this.loading = true;
                getVideoDetail(this.resourceId).then(res => {
                    if (res.video_begin_time) {
                        res.beginTime = formatDate(res.video_begin_time, true);
                    }
                    if (res.video_period) {
                        let count = parseInt(res.video_period);
                        let str = [];
                        const h = parseInt(count / 3600);
                        if (h > 9) {
                            str.push('' + h);
                        }
                        if (h > 0) {
                            str.push('0' + h);
                        }
                        count = count % 3600;
                        const m = parseInt(count / 60);
                        str.push(m > 9 ? String(m) : '0' + String(m));
                        const s = count % 60;
                        str.push(s > 9 ? String(s) : '0' + String(s));
                        res.videoPeriod = str.join(':');
                    }
                    this.infoData = res;
                    if (res) {
                        this.formData.video_name = res.video_name;
                        this.formData.video_type = res.video_type;
                        this.formData.enfore_job_id = res.enfore_job_id;
                    }
                    this.loading = false;
                })
            }
        },
        handleChooseTask(data) {
            if (data) {
                this.formData.enfore_job_id = data.id;
                this.infoData.enforce_job = data;
                this.showTask = false;
            }
        },
        handleCommit () {
            const vm = this
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    const info = Object.assign({}, this.formData)
                    info.id = parseInt(vm.resourceId);
                    updateVideo(info).then(() => {
                        vm.$message.success('修改成功')
                        vm.handleCancel()
                    })
                }
            })
        },
        handleCancel() {
            this.$router.back();
        },
        resetForm () {
            this.$refs['ruleForm'].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.info {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0;
    background-color: #FFFFFF;
    border-radius: 10px;
}
</style>