<template>
    <!-- 附件 -->
    <cell-box class="cell-box" :class="{ empty: !list.length && !formItem.value.length }">
        <!-- 选择文件 -->
        <label
            :for="!disabled ? listItem.uuid : ''"
            class="file weui-cell weui-cell_access"
        >
            <span class="label">
                <slot></slot>
            </span>
            <span class="placeholder vux-cell-box" v-show="!disabled">请选择</span>
            <div class="weui-cell__ft"></div>
        </label>
        <input
            type="file"
            :id="listItem.uuid"
            :multiple="!listItem.verify.onlyOne"
            @change="upload"
        >

        <div class="file-list">
            <!-- 已上传的文件列表 -->
            <div class="file" v-for="(item, index) in formItem.value" :key="item">
                <span class="name ellipsis">{{ JSON.parse(item).fullName }}</span>
                <x-icon type="ios-close-empty" size="30" @click="del(item, index)"></x-icon>
            </div>

            <!-- 上传中的文件列表 -->
            <div class="file percent" v-for="(item, index) in list" :key="index">
                <span class="name ellipsis">{{ item.name }}</span>
                <x-progress :percent="item.percent" :show-cancel="false"></x-progress>
            </div>
        </div>
    </cell-box>
</template>

<script>
import { CellBox, XProgress } from 'vux'
import common from '@/common/formRender/mixin/common.js'
import { getObjectKey } from '@/assets/utils/host.js'
import { ossUpload, ossDelete } from '@/assets/utils/ossTool.js'
import ossPaths from '@/assets/ossPaths.js'
let fileId = 0
export default {
    name: 'FormFile',
    components: { CellBox, XProgress },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    mixins: [common],
    data () {
        return {
            list: [] // 上传中的文件列表
        }
    },
    computed: {
        disabled: vm => vm.listItem.verify.onlyOne && (vm.list.length || vm.formItem.value.length)
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 上传附件
        upload (e) {
            const fileList = [...e.target.files]
            const list = fileList.map(file => ({ name: file.name, percent: 0, id: fileId++ }))
            this.list.push(...list)
            e.target.value = ''
            ossUpload({
                path: ossPaths.form,
                file: fileList,
                realname: true,
                progress: (percent, index) => {
                    list[index].percent = percent
                },
                success: (res, index) => {
                    const delIndex = this.list.findIndex(item => item.id === list[index].id)
                    this.list.splice(delIndex, 1)
                    this.formItem.value.push(JSON.stringify(res))
                    this.verify().catch(() => {})
                }
            })
        },
        // 删除附件
        del (item, index) {
            ossDelete({
                path: ossPaths.form,
                key: getObjectKey(item)
            }).then(res => {
                this.formItem.value.splice(index, 1)
                this.verify().catch(() => {})
            })
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return new Promise((resolve, reject) => {
                if (!this.list.length) {
                    resolve(this.validate({ value: this.formItem.value }))
                } else {
                    this.toast('请等待上传完成')
                    reject(new Error('请等待上传完成'))
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.weui-cell__ft {
    display: none;
}
.cell-box {
    display: block;
    padding-top: 0;
    padding-left: 0;
    &.empty {
        padding-bottom: 0;
    }
}
input[type=file] {
    display: none;
}
label {
    justify-content: space-between;
    margin-right: -15px;
    .placeholder {
        padding-right: 13px;
        color: #999;
        &::before {
            display: none;
        }
        &::after {
            right: 0;
        }
    }
}
.file-list {
    padding-left: 15px;
}
.file {
    display: flex;
    justify-content: space-between;
    position: relative;
    &.percent .name {
        width: 100%;
    }
    .name {
        width: calc(100% - 50px);
        line-height: 30px;
        font-size: 14px;
        color: #606266;
    }
    .weui-progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
</style>
