<template>
    <div v-if="config.visible">
        <base-model :config="config">
            <template slot="dialog-body">
                <el-form ref="form" :model="rowData" label-width="80px" style="width: 80%;display: inline-block;">
                    <el-form-item :label="`${$t('trials:attachment:table:Name')}: `">
                        <span class="name text-ellipsis" :title="rowData.Name">{{ rowData.Name }}</span>
                    </el-form-item>
                </el-form>
                <el-button size="mini" type="primary" style="float:right" @click.stop="edit({})" v-if="!isView">
                    {{ $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('trials:attachment:attachmentList:FileName')"
                        sortable="custom" />
                    <el-table-column prop="OffLine" :label="$t('trials:attachment:attachmentList:OffLine')"
                        sortable="custom" v-if="!isView">
                        <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('trials:attachment: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)" v-if="!isView">
                                {{ $t('common:button:edit') }}
                            </el-button>
                            <!-- <el-button size="mini" type="text" @click.stop="OffLine(scope.row, true)"
                                :disabled="scope.row.OffLine">
                                {{ $t('trials:attachment:attachmentList:OffLine') }}
                            </el-button> -->
                            <el-button size="mini" type="text" @click.stop="del(scope.row)" v-if="!isView">
                                {{ $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" :TrialDocumentId="TrialDocumentId"
                        @closeDialog="closeDialog" @getList="getAllList" />
                </el-dialog>
            </template>
        </base-model>
        <viewer ref="picture_perview3" 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 :TrialDocumentId="TrialDocumentId" :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 { addOrUpdateTrialDocumentAttachment, getTrialDocumentAttachmentList, deleteTrialDocumentAttachment } from '@/api/trials'
const defaultSearchData = () => {
    return {
        PageIndex: 1,
        PageSize: 1000,
        Asc: false,
        OffLine: null,
        SortField: null
    }
}
export default {
    components: {
        BaseModel,
        attachmentForm,
        //  attachmentPreview 
    },
    props: {
        config: {
            type: Object,
            default: () => {
                return {
                    visible: false,
                    title: this.$t('trials:attachment:attachmentList:title'),
                    width: '800px',
                }
            }
        },
        isView: {
            type: Boolean,
            default: false
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        TrialDocumentId: {
            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: {
        TrialDocumentId: {
            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("trials:attachment:attachmentList:message:del"))
                if (!confirm) return false
                this.loading = true
                let res = await deleteTrialDocumentAttachment(row.Id)
                this.loading = false
                if (res.IsSuccess) {
                    this.getAllList()
                }
            } catch (err) {
                console.log(err)
                this.loading = false
            }
        },
        edit(row) {
            this.title = this.$t('trials:attachment:attachmentForm:title:update')
            if (!row.Id) {
                this.title = this.$t('trials:attachment:attachmentForm:title:add')
            }
            this.rowDATA = Object.assign({}, row)
            this.visible = true
        },
        async getList() {
            try {
                if (!this.TrialDocumentId) return false
                this.loading = true
                this.searchData.TrialDocumentId = this.TrialDocumentId
                if (this.isView) {
                    this.searchData.OffLine = false
                }
                let res = await getTrialDocumentAttachmentList(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 addOrUpdateTrialDocumentAttachment(data)
                this.loading = false
                if (res.IsSuccess) {
                    this.$t('trials:attachment: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_perview3'].$viewer.show()
                })
            }
            if (['.pdf'].includes(`.${data.FileFormat.toLowerCase()}`)) {
                this.$preview({
                    path: data.Path || data.FilePath,
                    type: 'pdf',
                    title: data.Name,
                })
            }
            if (['.mp4'].includes(`.${data.FileFormat.toLowerCase()}`)) {
                this.$video({
                    path: data.Path || data.FilePath,
                    type: 'mp4',
                    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>
<style lang="scss" scoped>
.name {
    display: block;
    width: 90%;
}
</style>