<template>
    <div class="smart_fire_risk_point_detail">
        <md-scroll-view
                ref="scrollView"
                :scrolling-x="false"
                :bouncing="false"
                :auto-reflow="true">

            <div class="smart_fire_risk_point" v-for="(data,index) in list" :key="index">
                <div class="top">
                    <h4 class="title">{{data.deviceName}}</h4>
                    <div class="status status-danger" v-if="data.handleState  == 0">
                        未处理
                    </div>
                    <div class="status" v-else-if="data.handleState  == 1">
                        已处理
                    </div>
                    <div class="status" v-else-if="data.handleState  == 2">
                        已取消
                    </div>
                </div>
                <p>设备编号：{{data.deviceId}}</p>
                <p>安装位置：{{data.installAddr}}</p>
                <p>预警类型：{{data.alarmTypeName}}</p>
                <p>预警说明：{{data.alarmContent}}</p>
                <p>预警时间：{{data.createdTime}}</p>
                <p>责任人：{{data.handleAName}}</p>

                <p><span style="float: left">处理图片：</span>
                <ul class="image-reader-list" style="width: 50%;display: inline-block">
                    <li
                            class="image-reader-item"
                            v-if="data.handlePic"
                            @click="showViewer(request_config_baseUrl + data.handlePic)"
                            :style="{
          'backgroundImage': `url(${request_config_baseUrl + data.handlePic})`,
          'backgroundPosition': 'center center',
          'backgroundRepeat': 'no-repeat',
          'backgroundSize': 'cover'
        }">
                    </li>
                </ul></p>
                <p>处理说明：{{data.handleDesc}}</p>


                <md-image-viewer
                        v-model="isViewerShow"
                        :list="imgs"
                        :has-dots="true">
                </md-image-viewer>

            </div>

            <div class="input-group" v-if="list.length > 0 && list[0].handleState === 0">

                <md-field-item title="处理状态" solid>
                    <md-radio name="1" v-model="formData.handleState" label="已处理" inline/>
                    <md-radio name="2" v-model="formData.handleState" label="已取消" inline/>
                </md-field-item>

                <md-field-item title="处理图片" solid>
                    <ul class="image-reader-list">
                        <li
                                class="image-reader-item"
                                v-if="formData.handlePic"
                                @click="showViewer(request_config_baseUrl + formData.handlePic)"
                                :style="{
          'backgroundImage': `url(${request_config_baseUrl + formData.handlePic})`,
          'backgroundPosition': 'center center',
          'backgroundRepeat': 'no-repeat',
          'backgroundSize': 'cover'
        }">
                            <md-tag
                                    class="image-reader-item-del"
                                    size="small"
                                    shape="quarter"
                                    fill-color="#111A34"
                                    type="fill"
                                    font-color="#fff"
                                    @click.native="onDeleteImage"
                            >
                                <md-icon name="close"></md-icon>
                            </md-tag>
                        </li>
                        <li class="image-reader-item add" v-else>
                            <md-image-reader
                                    name="reader1"
                                    @complete="onReaderComplete"
                                    is-multiple
                            ></md-image-reader>
                            <md-icon name="camera" size="md" color="#CCC"></md-icon>
                            <p>添加图片</p>
                        </li>
                    </ul>
                </md-field-item>

                <md-textarea-item  v-model="formData.handleDesc" :rows="3" title="处理说明" solid></md-textarea-item>
            </div>

            <div class="btn-group">
                <md-button @click="sendFormData" type="primary" size="md"
                           v-if="list.length > 0 && list[0].handleState === 0">提交
                </md-button>
                <md-button @click="goBack" size="md">返回</md-button>
            </div>
        </md-scroll-view>

        <md-image-viewer
                v-model="isViewerShow"
                :list="imgs"
                :has-dots="true">
        </md-image-viewer>


    </div>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Radio, Field, FieldItem,
        ImageReader,
        TextareaItem,
        ImageViewer,
        Toast,
        Tag,
    } from 'mand-mobile'

    import {HeadBar, EmptyDataPage} from '@/components'

    import {RiskPoint} from './components/index'

    import {mapGetters} from 'vuex'

    import {hazardList, hazard, uploadFile} from '@/api/smart_fire'


    export default {
        name: "smart_fire_risk_point_detail",
        components: {
            [Button.name]: Button,
            [InputItem.name]: InputItem,
            [ScrollView.name]: ScrollView,
            [ScrollViewRefresh.name]: ScrollViewRefresh,
            [ScrollViewMore.name]: ScrollViewMore,
            [TextareaItem.name]: TextareaItem,
            [Field.name]: Field,
            [FieldItem.name]: FieldItem,
            [ImageReader.name]: ImageReader,
            [Icon.name]: Icon,
            [Tag.name]: Tag,
            [Radio.name]: Radio,
            [ImageViewer.name]: ImageViewer,
            RiskPoint
        },
        data() {
            return {
                current: 0,
                items: [
                    {name: 0, label: '无线火灾报警监控系统', notifications: 0, isShowTag: true},
                    {name: 1, label: '电气火灾智能监控系统', notifications: 0, isShowTag: true},
                    {name: 2, label: '消防给水监测系统', notifications: 0, isShowTag: true},
                    {name: 3, label: '火灾自动报警系统', notifications: 0, isShowTag: true},
                ],
                list: [],
                isFinished: false,
                query: {
                    limit: 10,
                    page: 1
                },
                lastPage: 0,
                formData: {
                    handleState: '',
                    handleDesc: '',
                    handlePic: '',
                },
                imgs: [],
                isViewerShow: false
            }
        },
        computed: {
            ...mapGetters([
                'request_config_aId',
                'request_config_cId',
                'request_config_gId',
                'request_config_baseUrl',
            ])
        },
        mounted() {
            this.loadData();
        },
        methods: {
            async sendFormData() {
                Toast.loading('提交中...')
                if (this.formData.handleState === '') {
                    Toast.info('请选择处理状态')
                    return false;
                }
                this.formData.hazardId = this.$route.query.hazardId
                await hazard(this.request_config_baseUrl, this.formData).then(response => {
                    const {code, msg, data} = response
                    if (code === 1) {
                        Toast.info(msg)
                        this.loadData();
                    }
                    Toast.hide()
                }).catch(error => {
                    console.log(error)
                })
            },
            showViewer(img) {
                this.imgs = [img]
                this.isViewerShow = true
            },
            async onReaderComplete(name, {file}) {
                let param = new FormData()  // 创建form对象
                param.append('file', file)
                await uploadFile(this.request_config_baseUrl, param).then(response => {
                    const {code, data} = response
                    if (code === 1) {
                        this.formData.handlePic = data.path;
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            onDeleteImage() {
                this.formData.handlePic = ''
            },
            async loadData() {
                this.query.aId = this.request_config_aId
                this.query.cId = this.request_config_cId
                this.query.gId = this.request_config_gId
                this.query.hazardId = this.$route.query.hazardId

                await hazardList(this.request_config_baseUrl, this.query).then(response => {
                    const {code, count, data} = response
                    if (code === 0) {
                        this.list = data;
                    }
                }).catch(error => {
                    console.log(error)
                })

            },
            goBack() {
                this.$router.back()
            }
        }
    }
</script>

<style>
    .md-field-item.is-solid .md-field-item-title{
        font-size: 22px;
    }
</style>

<style lang="scss" scoped>

    .smart_fire_risk_point {
        margin-top: 20px;
        width: calc(100% - 30px);
        /*height: 270px;*/
        margin: 15px;
        border: 1px solid #ddd;
        background: #FFF;

        .top {
            overflow: hidden;
            height: 60px;
            line-height: 60px;
            padding: 0 15px;
            border-bottom: 1px solid #ddd;

            .title {
                /*padding-top: 15px;*/
                /*margin: 30px 0;*/
                font-size: 28px;
                font-weight: 600;
                color: #000;
                float: left;
            }

            .status {
                font-size: 20px;
                float: right;
                color: rgb(12, 110, 207);
            }

            .status-danger {
                color: #D7241F;
            }
        }


        p {
            color: #000;
            font-size: 20px;
            margin: 25px 0 25px;
            padding: 0 15px;
        }

        ul, li {
            list-style-type: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        li {
            width: 33.333%;
            float: left;
            text-align: center;

            p {
                padding: 0;
                margin: 0;
            }
        }


    }

    .smart_fire_risk_point_detail {
        height: 100vh;
        background: #fff;

        .image-reader-list {
            width: 100%;
            overflow: hidden;

            .image-reader-item {
                position: relative;
                float: left;
                width: 150px;
                height: 150px;
                /*padding-bottom: 23.5%;*/
                /*margin-bottom: 2%;*/
                /*margin-right: 2%;*/
                /*background: #FFF;*/
                box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
                box-sizing: border-box;
                list-style: none;
                border-radius: 4px;
                background-size: cover;

                &:nth-of-type(4n) {
                    margin-right: 0;
                }

                &.add {
                    .md-icon {
                        position: absolute;
                        top: 40%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        opacity: .5;
                    }

                    p {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 100%;
                        margin-top: 15px;
                        font-size: 22px;
                        color: #CCC;
                        text-align: center;
                    }

                }

                .image-reader-item-del {
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 3;
                    opacity: .8;

                    .md-icon-close {
                        font-size: 24px
                    }
                }
            }
        }

        .input-group, .btn-group {
            padding: 15px;
        }

        .btn-group {
            display: flex;
        }
    }
</style>