<template>
    <div v-if="config.visible">
        <base-model :config="config">
            <template slot="dialog-body">
                <el-button size="mini" type="primary" style="float:right" @click.stop="edit({})">
                    {{ $t('common:button:add') }}</el-button>
                <el-table :data="list" style="width: 100%" max-height="300px" v-loading="loading"
                    @sort-change="handleSortByColumn">
                    <el-table-column type="index" width="60" />
                    <el-table-column prop="Name" :label="$t('dictionary:signature:attachmentList:FileName')"
                        sortable="custom" />
                    <el-table-column prop="OffLine" :label="$t('dictionary:signature:attachmentList:OffLine')"
                        sortable="custom">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.OffLine" @change="(val) => OffLine(scope.row, val)"
                                :active-value="true" :inactive-value="false" :active-text="$fd('YesOrNo', true)"
                                :inactive-text="$fd('YesOrNo', false)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CreateTime" :label="$t('dictionary:signature:attachmentList:CreateTime')"
                        sortable="custom" />
                    <el-table-column :label="$t('common:action:action')" min-width="120px">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click.stop="preview(scope.row)">
                                {{ $t('common:button:preview') }}
                            </el-button>
                            <el-button size="mini" type="text" @click.stop="edit(scope.row)">
                                {{ $t('common:button:edit') }}
                            </el-button>
                            <!-- <el-button size="mini" type="text" @click.stop="OffLine(scope.row, true)"
                                :disabled="scope.row.OffLine">
                                {{ $t('dictionary:signature:attachmentList:OffLine') }}
                            </el-button> -->
                            <el-button size="mini" type="text" @click.stop="del(scope.row)">
                                {{ $t('common:button:delete') }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 新增/编辑附件 -->
                <el-dialog :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true" :title="title"
                    width="800px" custom-class="base-dialog-wrapper">
                    <attachmentForm v-if="visible" :data="rowData" :SystemDocumentId="SystemDocumentId"
                        @closeDialog="closeDialog" @getList="getAllList" />
                </el-dialog>
            </template>
        </base-model>
        <viewer ref="picture_perview2" style="margin: 0 10px"
            v-if="rowData.FileFormat && ['png', 'jpg', 'jpeg'].includes(rowData.FileFormat.toLowerCase())"
            :images="[`${OSSclientConfig.basePath}${rowData.FilePath}`]" :options="viewerOptions">

            <img v-show="false" :src="`${OSSclientConfig.basePath}${rowData.FilePath}`" alt="Image" />
        </viewer>
        <!-- <attachmentPreview :SystemDocumentId="SystemDocumentId" :visible.sync="perview_visible"
            v-if="perview_visible" /> -->
    </div>
</template>
<script>
import BaseModel from '@/components/BaseModel'
import attachmentForm from './attachmentForm'
// import attachmentPreview from './attachmentPreview'
import { addOrUpdateSystemDocumentAttachment, getSystemDocumentAttachmentList, deleteSystemDocumentAttachment } from '@/api/dictionary'
const defaultSearchData = () => {
    return {
        PageIndex: 1,
        PageSize: 1000,
        Asc: false,
        SortField: null
    }
}
export default {
    components: {
        BaseModel,
        attachmentForm,
        //  attachmentPreview 
    },
    props: {
        config: {
            type: Object,
            default: () => {
                return {
                    visible: false,
                    title: this.$t('dictionary:signature:attachmentList:title'),
                    width: '800px',
                }
            }
        },
        SystemDocumentId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            searchData: defaultSearchData(),
            visible: false,
            title: null,
            list: [],
            rowData: {},
            loading: false,
            viewerOptions: {
                toolbar: {
                    zoomIn: true,
                    zoomOut: true,
                    reset: true,
                    prev: false,
                    next: false,
                    rotateLeft: true,
                    rotateRight: true,
                    flipHorizontal: true,
                    flipVertical: true,
                }
            },
            // perview_visible: false
        }
    },
    watch: {
        SystemDocumentId: {
            handler() {
                this.getList()
            },
            immediate: true,
        }
    },
    methods: {
        closeDialog() {
            this.visible = false
        },
        getAllList() {
            this.getList()
            this.$emit("getList")
        },
        async del(row) {
            try {
                let confirm = await this.$confirm(this.$t("dictionary:signature:attachmentList:message:del"))
                if (!confirm) return false
                this.loading = true
                let res = await deleteSystemDocumentAttachment(row.Id)
                this.loading = false
                if (res.IsSuccess) {
                    this.getAllList()
                }
            } catch (err) {
                console.log(err)
                this.loading = false
            }
        },
        edit(row) {
            this.rowData = Object.assign({}, row)
            this.visible = true
        },
        async getList() {
            try {
                if (!this.SystemDocumentId) return false
                this.loading = true
                this.searchData.SystemDocumentId = this.SystemDocumentId
                let res = await getSystemDocumentAttachmentList(this.searchData)
                this.loading = false
                if (res.IsSuccess) {
                    this.list = res.Result.CurrentPageData
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        async OffLine(row, val) {
            try {
                let data = Object.assign({}, row)
                data.OffLine = val
                this.loading = true
                let res = await addOrUpdateSystemDocumentAttachment(data)
                this.loading = false
                if (res.IsSuccess) {
                    this.$t('dictionary:signature:attachmentList:updateSuccessfully')
                    this.getList()
                }
            } catch (err) {
                this.loading = false
                row.OffLine = !row.OffLine
                console.log(err)
            }
        },
        preview(data) {
            // return this.perview_visible = true
            this.rowData = Object.assign({}, data)
            if (['.ppt',
                '.pptx',
                '.doc',
                '.docx',
                '.xls',
                '.xlsx'].includes(`.${data.FileFormat.toLowerCase()}`)) {
                this.$onlyOffice({
                    path: data.FilePath,
                    type: data.FileFormat,
                    title: data.Name
                })
            }
            if (['.jpg',
                '.jpeg',
                '.png'].includes(`.${data.FileFormat.toLowerCase()}`)) {
                this.$nextTick(() => {
                    this.$refs['picture_perview2'].$viewer.show()
                })
            }
            if (['.pdf'].includes(`.${data.FileFormat.toLowerCase()}`)) {
                this.$preview({
                    path: data.Path || data.FilePath,
                    type: 'pdf',
                    title: data.Name,
                })
            }
        },
        // 排序
        handleSortByColumn(column) {
            if (column.order === 'ascending') {
                this.searchData.Asc = true
            } else {
                this.searchData.Asc = false
            }
            this.searchData.SortField = column.prop
            this.searchData.PageIndex = 1
            this.getList()
        },
    }

}
</script>