<template>
    <div class="data-cell">
        <div v-if="hasValue"
            class="value">
            <Icon :type="iconType"
                size="32"></Icon>
            <div class="cover">
                <Icon type="ios-eye-outline"
                    color="#fff"
                    size="24"
                    title="查看"
                    @click.native="handleView"></Icon>
                <Icon type="ios-trash-outline"
                    color="#fff"
                    size="24"
                    title="删除"
                    @click.native="handleRemove()"></Icon>
            </div>
        </div>
        <Upload v-else
            class="upload"
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :on-progress="handleProgress"
            :on-error="handleError"
            :format="['pdf','mp4', 'jpg']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            type="drag"
            action="/capacity-building-service/resources/v1/upload/">
            <div class="icon">
                <Icon type="ios-add"
                    size="20"></Icon>
            </div>
            <Progress class="progress"
                v-if="showProgress"
                :percent="percent"
                hide-info></Progress>
        </Upload>
    </div>
</template>
<script>
import uuid from 'uuid'

export default {
    name: 'DataCell',
    data() {
        return {
            fileName: '',
            cellData: {},
            showProgress: false,
            percent: 0
        }
    },
    props: {
        header: {
            type: String,
        },
        brand: {
            type: String
        },
        data: {
            type: Object
        }
    },
    watch: {
        brand() {
            this.updateData()
        },

        header() {
            this.updateData()
        }
    },
    computed: {
        hasValue() {
            return !!this.fileName
        },

        iconType() {
            if (/pdf$/i.test(this.fileName)) {
                return 'ios-paper-outline'
            } else {
                return 'ios-videocam-outline'
            }
        },
    },
    methods: {
        isPdf() {
            return /pdf$/i.test(this.fileName)
        },

        updateData() {
            this.cellData = this.data[`${this.brand}_${this.header}`]

            if (!this.cellData) {
                this.cellData = this.data[`${this.brand}_${this.header}`] = {}
            }

            this.fileName = this.cellData.file
        },
        getUrl(key) {
            return `/capacity-building-service/resources/v1/get/?key=${key}`;
        },
        handleView() {
            if (this.isPdf()) {
                this.$emit('on-show-pdf', this.cellData.url)
            } else {
                this.$emit('on-show-video', this.cellData.url)
            }
        },

        handleRemove() {
            delete this.cellData.file
            delete this.cellData.url
            delete this.cellData.guid

            this.fileName = ''
        },

        // eslint-disable-next-line
        handleSuccess(res, file, fileList) {
            this.cellData.file = file.name
            this.cellData.url = this.getUrl(res.message)
            this.cellData.dataTime = (new Date()).getTime()
            this.cellData.empName = this.empName
            if (!this.cellData.guid) {
                this.cellData.guid = uuid.v1().replace(/-/g, '').toUpperCase()
            }

            this.fileName = this.cellData.file

            console.log(JSON.stringify(this.cellData))
            this.showProgress = false
        },

        // eslint-disable-next-line
        handleError(error, file, fileList) {
            this.showProgress = false
        },

        // eslint-disable-next-line
        handleProgress(event, file, fileList) {
            this.percent = event.percent
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: file.name + ' 文件格式不正确, 请选择 pdf 或者 mp4。'
            });
        },
        handleMaxSize(file) {
            this.$Notice.warning({
                title: '文件太大',
                desc: file.name + ' 太大, 最大上传文件大小为 20M.'
            });
        },
        handleBeforeUpload() {
            this.showProgress = true
            return true
        }
    },
    mounted() {
        this.updateData()
    }
};
</script>
<style lang="less"
    scoped>
.data-cell {
    .value {
        position: relative;
        display: inline-block;
        width: 58px;
        height: 58px;
        text-align: center;
        line-height: 58px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;

        .cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .6);
        }

        &:hover {
            .cover {
                display: inline-block;
            }
        }
    }

    .upload {
        display: inline-block;
        position: relative;
        width: 58px;

        .icon {
            width: 58px;
            height: 58px;
            line-height: 58px;
        }

        .progress {
            position: absolute;
            top: 20px;
            left: 0;
        }
    }
}
</style>