<template>
  <div>
    <div v-if="mode === 'favorShare'" class="radio-ctn">
        <div class="radio-item" v-for="(radioItem, index) of radioOption" :key="index">
            <label :class="{'radio-active': radioItem.value === radioValue}" class="radio-label" :for="radioItem.value">{{ radioItem.label }}</label>
            <input type="radio" v-show="false" name="favor" v-model="radioValue" :id="radioItem.value" :value="radioItem.value">
        </div>
        <!-- <span class="radio-item">我收藏的</span>
        <span class="radio-item">我分享的</span>
        <span class="radio-item">分享给我的</span> -->
    </div>
    <group class="cellgroup-ctn">
        <cell v-show="mode !== 'favorShare' || radioValue === 'all' || item.fileType === radioValue" v-for="(item, index) of list" :key="index" :title="item.file_name" @click.native="showBtns(item)">
            <i slot="icon" class="iconfont">&#xe890;</i>
            <div slot="after-title" class="after-title-ctn">
                <p v-if="mode === 'favorShare'" class="document-descript">某某某 2020-08-13 12:00</p>
                <div v-show="item.showFunBtn || false" class="btns-ctn" @click.stop>
                    <span class="btn-item" @click="handleOpen(item)">打开</span>
                    <span class="btn-item">下载</span>
                    <span class="btn-item" v-if="mode === 'myUpload'" @click="clickRenameBtn(item)">重命名</span>
                    <span class="btn-item" v-if="mode === 'myUpload'" @click="handleShare(item)">分享</span>
                    <span class="btn-item" style="color:#D9001B" v-if="mode === 'myUpload' || (mode === 'favorShare' && item.fileType === 'shareToMe')" @click="selectDeleteItem(item)">删除</span>
                    <span class="btn-item" style="color:#D9001B" v-if="mode === 'favorShare' && item.fileType === 'myFavor'">取消收藏</span>
                    <span class="btn-item" style="color:#D9001B" v-if="mode === 'favorShare' && item.fileType === 'myShare'">取消分享</span>
                </div>
            </div>
        </cell>
    </group>

    <!-- 重命名弹窗 -->
    <div v-transfer-dom>
      <x-dialog v-model="renameDialog" hide-on-blur :dialog-style="{ 'max-width': '100%',width: '90%'}">
        <div class="rename-ctn">
            <div class="headers">
                <span>重命名</span>
                <span @click="renameDialog = false"><i slot="icon" class="iconfont">&#xe827;</i></span>
            </div>
            <x-input class="rename-input" v-model="renameValue" placeholder="请输入名称..."></x-input>
            <div class="btn-ctn">
                <x-button class="reset" mini plain @click.native="renameDialog = false">取消</x-button>
                <x-button class="inquire" mini @click.native="handleUpdate">确定</x-button>
            </div>
        </div>
      </x-dialog>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-transfer-dom>
      <x-dialog v-model="deleteDialog" hide-on-blur :dialog-style="{ 'max-width': '100%',width: '90%'}">
        <div class="delete-ctn">
            <div class="headers">
                <span>删除确认</span>
                <span @click="deleteDialog = false"><i slot="icon" class="iconfont">&#xe827;</i></span>
            </div>
            <p class="tips">删除后不可恢复，确认要删除此文档吗</p>
            <div class="btn-ctn">
                <x-button class="reset" mini plain @click.native="deleteDialog = false">取消</x-button>
                <x-button class="inquire" mini @click.native="handleDelete">确定</x-button>
            </div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { Group, Cell, XInput, XDialog, XButton, TransferDomDirective as TransferDom } from 'vux'
export default {
    name: 'FileList',
    directives: {
        TransferDom
    },
    props: {
        mode: { // myUpload：我上传页面，favorShare：收藏分享页面，schoolResources：学校资源库
            type: String,
            default: 'myUpload'
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
        // fileParent: {
        //     type: Object,
        //     default: () => {
        //         return {}
        //     }
        // }
    },
    components: {
        Group,
        Cell,
        XInput,
        XButton,
        XDialog
    },
    data () {
        return {
            radioValue: 'all', // 类型框的值 (all: 全部，myFavor：我收藏的，myShare：我分享的，shareToMe：分享给我的)
            deleteItem: {}, // 储存选中删除的对象
            renameItem: {}, // 储存选中重命名的对象
            radioOption: [
                {
                    label: '全部',
                    value: 'all'
                },
                {
                    label: '我收藏的',
                    value: 'myFavor'
                },
                {
                    label: '我分享的',
                    value: 'myShare'
                },
                {
                    label: '分享给我的',
                    value: 'shareToMe'
                }
            ],
            renameDialog: false,
            renameValue: '',
            deleteDialog: false
        }
    },
    mounted () {
    },
    methods: {
        showBtns (item) {
            this.$emit('handleClickItem', item)
        },
        handleOpen (item) {
            /* 打开文档 */
            this.$emit('handleOpen', item)
        },
        handleShare (item) {
            /* 分享文档 */
            this.$emit('handleShare', item)
        },
        clickRenameBtn (item) {
            /* 点击重命名按钮 */
            this.renameValue = item.file_name
            this.renameItem = item
            this.renameDialog = true
        },
        handleUpdate () {
            /* 修改文件名称 */
            let data = {
                b_id: this.renameItem.file_info_id,
                file_name: this.renameValue
            }
            this.$emit('updateFileName', data)
        },
        selectDeleteItem (item) {
            /* 选择删除对象并弹窗确认 */
            this.deleteItem = item
            this.deleteDialog = true
        },
        handleDelete () {
            /* 删除文件 */
            let data = {
                b_id: this.deleteItem.file_info_id
            }
            this.$emit('handleDeleteFile', data)
        }
    }
}
</script>

<style lang="less" scoped>
.radio-ctn {
    padding: 15px;
    display: flex;
    .radio-item {
        margin-right: 10px;
        .radio-label {
            font-size: 14px;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            border-radius: 30px;
            background: #F2F2F2;
            color: #333333;
            text-align: center;
        }
        .radio-active {
            background: #1890FF !important;
            color: white !important;
        }
    }
}
/deep/ .cellgroup-ctn {
    .weui-cells{
        margin-top: 0;
        padding-left: 20px;
        &:before, &:after{
            border: none;
        }
        .weui-cell {
            align-items: flex-start;
            padding-top: 18px;
            padding-bottom: 15px;
            padding-left: 0;
            &:before {
                border-top: none;
            }
            border-bottom: 0.02rem solid #F2F2F2;
            .iconfont {
                display:block;
                margin-right: 7px;
                font-size: 22px;
            }
            .vux-cell-bd {
                .vux-label {
                    font-size: 16px;
                    font-weight: 500;
                }
                .after-title-ctn {
                    .document-descript {
                        font-size: 15px;
                        color: rgb(128, 128, 128);
                        margin-top: 6px;
                    }
                    .btns-ctn {
                        margin: 18px 0 -5px -20px;
                        .btn-item {
                            display: inline-block;
                            width: 18%;
                            font-size: 13px;
                            color: #1890FF;
                            text-align: center;
                            &:not(:last-child){
                                border-right: 0.02rem solid #D9D9D9;
                            }
                        }
                    }
                }
            }
        }
    }
}

.rename-ctn, .delete-ctn {
    padding: 15px;
    font-size: 15px;
    color: black;
    .headers {
        display: flex;
        justify-content: space-between;
        height: 28px;
        line-height: 28px;
        .iconfont {
            font-size: 20px;
        }
    }
    /deep/ .rename-input {
        margin-top: 20px;
        margin-bottom: 10px;
        border: 0.02rem solid #AAAAAA;
        border-radius: 5px;
        &:before {
            border: none;
        }
    }
    .tips {
        text-align: left;
        color: rgb(39, 39, 39);
        font-size: 15px;
        margin: 20px 0 30px 0;
    }
    /deep/ .btn-ctn {
        text-align: center;
        padding: 15px 0 10px 0;
        .weui-btn {
            width: 1.8rem;
            height: 0.7rem;
            font-size: 16px;
        }
        .reset {
            margin-right: 0.25rem;
            border-color: #1890FF;
            color: #1890FF;
        }
        .inquire {
            background: #1890FF;
            color: white;
        }
    }
}

</style>
