<template>
    <div class="log">
        <div ref="leftContainer" class="left">
            <el-form :inline="true">
                <el-form-item :label="$t('system:hospital:table:hospitalName')" prop="Version">
                    <el-input v-model="searchData.HospitalName" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:table:country')" prop="Version">
                    <el-input v-model="searchData.Country" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:table:city')" prop="UpdateContent">
                    <el-input v-model="searchData.City" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:table:province')" prop="UpdateContent">
                    <el-input v-model="searchData.Province" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:table:address')" prop="UpdateContent">
                    <el-input v-model="searchData.Address" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:table:phone')" prop="UpdateContent">
                    <el-input v-model="searchData.Phone" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">
                        {{ $t('common:button:search') }}
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">
                        {{ $t('common:button:new') }}
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" v-adaptive="{ bottomOffset: 65 }" height="100" :data="list" class="table"
                @sort-change="handleSortByColumn" :default-sort="{ prop: 'PublishTime', order: 'descending' }">
                <el-table-column type="index" width="50" />
                <el-table-column :label="$t('system:hospital:table:hospitalName')" prop="HospitalName" min-width="120"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:table:hospitalAliasName')" prop="HospitalAliasName"
                    min-width="120" show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:table:country')" prop="Country" show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:province')" prop="Province" show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:city')" prop="City" show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:address')" prop="Address" min-width="150"
                    show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:phone')" prop="Phone" min-width="150"
                    show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:isCanConnectInternet')" prop="IsCanConnectInternet"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ $fd("YesOrNo", scope.row.IsCanConnectInternet) }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('system:hospital:table:hospitalCode')" prop="HospitalCode"
                    show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:isDefault')" prop="IsDefault" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ $fd("YesOrNo", scope.row.IsDefault) }}</span>
                    </template>
                </el-table-column>

                <el-table-column :label="$t('system:hospital:table:createTime')" prop="CreateTime" min-width="150"
                    show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:updateTime')" prop="UpdateTime" min-width="150"
                    show-overflow-tooltip />

                <el-table-column :label="$t('common:action:action')" fixed="right" prop="" min-width="250"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button size="mini" :disabled="scope.row.IsDefault" type="text" icon="el-icon-circle-check"
                            @click="setDefault(scope.row)">
                            {{ $t('system:hospital:button:setDefault') }}
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)">
                            {{ $t('common:button:edit') }}
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                            {{ $t('common:button:delete') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" style="text-align: right; margin-top: 5px">
                <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
                    @pagination="getList" />
            </div>
        </div>
        <el-dialog top="3vh" :title="status === 'edit' ? $t('common:action:edit') : $t('common:button:new')"
            :visible.sync="visible" :fullscreen="true">
            <system-hospital v-if="visible" :status="status" :rowData="rowData" @getList="getList" @close="close" />
        </el-dialog>
    </div>
</template>
<script>
import { getHIRHospitalList, deleteHIRHospital, updateDefaultHospital } from '@/api/admin'
import Pagination from '@/components/Pagination'
import systemHospital from './form.vue'
import moment from 'moment'
const searchDataDefault = () => {
    return {
        HospitalName: null,
        Country: null,
        City: null,
        Province: null,
        Address: null,
        Phone: null,
        Asc: false,
        SortField: 'CreateTime',
        PageIndex: 1,
        PageSize: 20,
    }
}
export default {
    components: { Pagination, systemHospital },
    data() {
        return {
            moment,
            searchData: searchDataDefault(),
            list: [],
            total: 0,
            loading: false,

            visible: false,
            status: 'default',
            rowData: {}
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async setDefault(row) {
            try {
                this.$confirm(this.$t('system:hospital:message:setDefault'), {
                    type: 'warning',
                    distinguishCancelAndClose: true,
                }).then(async () => {
                    let res = await updateDefaultHospital({ HirHospitalId: row.Id })
                    if (res.IsSuccess) {
                        this.getList()
                    }
                }).catch(err => {
                    console.log(err)
                    this.loading = false
                })
            } catch (err) {
                console.log(err)
            }
        },
        close() {
            this.visible = false
            this.rowData = {}
            this.status = "default"
        },
        getList() {
            this.loading = true
            getHIRHospitalList(this.searchData)
                .then((res) => {
                    this.loading = false
                    this.list = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                })
                .catch(() => {
                    this.loading = false
                })
        },
        handleAdd() {
            this.status = 'add'
            this.visible = true
        },
        handleEdit(row) {
            this.status = 'edit'
            this.rowData = row
            this.visible = true
        },
        // 重置列表查询
        handleReset() {
            this.searchData = searchDataDefault()
            this.getList()
        },
        // 删除
        handleDelete(row) {
            this.$confirm(this.$t('system:hospital:message:handleDelete'), {
                type: 'warning',
                distinguishCancelAndClose: true,
            }).then(() => {
                this.loading = true
                deleteHIRHospital(row.Id)
                    .then((res) => {
                        this.loading = false
                        if (res.IsSuccess) {
                            this.getList()
                            this.$message.success(
                                this.$t('common:message:deletedSuccessfully')
                            )
                        }
                    })
                    .catch(() => {
                        this.loading = false
                    })
            })
        },
        // 排序
        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>
.log {
    padding-top: 20px;

    ::v-deep .el-dialog__body {
        padding-bottom: 5px;
    }
}
</style>