<template>
    <div class="groupList">
        <div ref="leftContainer">
            <el-form :inline="true">
                <el-form-item :label="$t('system:hospital:group:Code')" prop="Code">
                    <el-input v-model="searchData.Code" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:Name')" prop="Name">
                    <el-input v-model="searchData.Name" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:Affiliation')" prop="Affiliation">
                    <el-input v-model="searchData.Affiliation" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:ContactName')" prop="ContactName">
                    <el-input v-model="searchData.ContactName" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:ContactPhone')" prop="ContactPhone">
                    <el-input v-model="searchData.ContactPhone" size="small" clearable style="width:100px" />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:State')" prop="IsEnable">
                    <el-select v-model="searchData.IsEnable" size="small" clearable style="width:100px">
                        <el-option v-for="item in $d.IsEnable" :key="item.id" :label="item.label" :value="item.value" />
                    </el-select>
                </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:add') }}
                    </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: 'CreateTime', order: 'descending' }">
                <el-table-column type="index" width="50" />
                <el-table-column :label="$t('system:hospital:group:Code')" prop="Code" min-width="80"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:group:Name')" prop="Name" min-width="120"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:group:CallingAE')" prop="CallingAE" min-width="100"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:group:Affiliation')" prop="Affiliation" min-width="120"
                    show-overflow-tooltip sortable="custom" />

                <el-table-column :label="$t('system:hospital:group:ContactName')" prop="ContactName" min-width="120"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:group:ContactPhone')" prop="ContactPhone" min-width="120"
                    show-overflow-tooltip sortable="custom" />
                <el-table-column :label="$t('system:hospital:group:IdentityUserIdList')" prop="IdentityUserIdList"
                    min-width="80" show-overflow-tooltip sortable="custom">
                    <template slot-scope="scope">
                        <span>{{scope.row.GAUserList && scope.row.GAUserList.length > 0
                            ? scope.row.GAUserList.map(item => item.UserName).join(", ") : ''}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('system:hospital:group:State')" prop="IsEnable" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag :type="!scope.row.IsEnable ? 'danger' : ''">
                            <span>{{ $fd("IsEnable", scope.row.IsEnable) }}</span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('system:hospital:table:createTime')" prop="CreateTime" min-width="150"
                    sortable="custom" show-overflow-tooltip />
                <el-table-column :label="$t('system:hospital:table:updateTime')" prop="UpdateTime" min-width="150"
                    sortable="custom" show-overflow-tooltip />

                <el-table-column :label="$t('common:action:action')" fixed="right" prop="" min-width="200"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <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" width="450px"
            :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
            <el-form ref="hospitalGroupForm" size="small" :model="from" :rules="rules" label-width="100px">
                <el-form-item :label="$t('system:hospital:group:Code')" prop="Code">
                    <el-input v-model.trim="from.Code" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:Name')" prop="Name">
                    <el-input v-model.trim="from.Name" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:CallingAE')" prop="CallingAE">
                    <el-input v-model.trim="from.CallingAE" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:Affiliation')" prop="Affiliation">
                    <el-input v-model="from.Affiliation" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:ContactName')" prop="ContactName">
                    <el-input v-model="from.ContactName" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:ContactPhone')" prop="ContactPhone">
                    <el-input v-model="from.ContactPhone" clearable />
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:IdentityUserIdList')" prop="IdentityUserIdList"
                    v-if="status === 'edit'">
                    <el-select ref="userType" v-model="from.IdentityUserIdList" size="small" placeholder="Please select"
                        multiple style="width: 100%">
                        <template v-for="user of GAUserList">
                            <el-option :key="user.Id" :label="user.UserName" :value="user.Id">
                                <span>{{ user.UserName }}</span>
                                <i style=" color: #F56C6C;float:right;margin-top: 10px;" class="el-icon-warning"
                                    v-if="user.IsGACurrentHospitalDisabled || user.IsGARoleDisabled || user.IsUserDisabled"
                                    :title="$t('system:hospital:group:tip:userDisabled')" />
                            </el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system:hospital:group:State')" prop="IsEnable">
                    <el-switch v-model="from.IsEnable" :active-value="true" :inactive-value="false" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel" size="small">{{ $t('common:button:cancel') }}</el-button>
                <el-button type="primary" size="small" @click="handleSave" :loading="loading">{{
                    $t('common:button:save')
                }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getHospitalGroupPageList, deleteHospitalGroup, addOrUpdateHospitalGroup, getGAUserList } from '@/api/admin'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
    return {
        Name: null,
        ContactPhone: null,
        ContactName: null,
        Code: null,
        Affiliation: null,
        Asc: false,
        SortField: 'CreateTime',
        PageIndex: 1,
        PageSize: 20,
    }
}
export default {
    name: "groupList",
    components: { Pagination },
    data() {
        return {
            searchData: searchDataDefault(),
            list: [],
            total: 0,
            loading: false,

            visible: false,
            from: {
                Id: null,
                Affiliation: null,
                Code: null,
                ContactName: null,
                ContactPhone: null,
                Name: null,
                IsEnable: true,
                CallingAE: null,
                IdentityUserIdList: []
            },
            rules: {
                // Affiliation: [
                //     { required: true, message: 'Please specify', trigger: 'blur' },
                // ],
                Code: [
                    { required: true, message: 'Please specify', trigger: 'blur' },
                ],
                // ContactName: [
                //     { required: true, message: 'Please specify', trigger: 'blur' },
                // ],
                // ContactPhone: [
                //     { required: true, message: 'Please specify', trigger: 'blur' },
                // ],
                Name: [
                    { required: true, message: 'Please specify', trigger: 'blur' },
                ],
                // CallingAE: [
                //     { required: true, message: 'Please specify', trigger: 'blur' },
                // ],
                // IdentityUserIdList: [
                //     { required: true, type: 'array', message: 'Please select', trigger: 'blur' },
                // ],
            },
            GAUserList: [],
            status: 'add'
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async handleSave() {
            try {
                let validate = await this.$refs.hospitalGroupForm.validate()
                if (!validate) return false
                this.loading = true
                let res = await addOrUpdateHospitalGroup(this.from)
                this.loading = false
                if (res.IsSuccess) {
                    this.$message.success(this.$t("common:message:savedSuccessfully"))
                    this.handleCancel()
                    this.getList()
                }
            } catch (err) {
                console.log(err)
                this.loading = false
            }
        },
        handleCancel() {
            this.visible = false
            Object.keys(this.from).forEach(key => {
                this.from[key] = null
            })
            this.from.IdentityUserIdList = []
        },
        async getGAUserList(HospitalGroupId) {
            try {
                let data = {
                    HospitalGroupId
                }
                let res = await getGAUserList(data)
                if (res.IsSuccess) {
                    this.GAUserList = res.Result
                }
            } catch (err) {
                console.log(err)
            }
        },
        getList() {
            this.loading = true
            getHospitalGroupPageList(this.searchData)
                .then((res) => {
                    this.loading = false
                    this.list = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                })
                .catch(() => {
                    this.loading = false
                })
        },
        handleAdd() {
            // this.getGAUserList() 
            Object.keys(this.from).forEach(key => {
                this.from[key] = null
            })
            this.from.IdentityUserIdList = []
            this.status = 'add'
            this.visible = true
        },
        handleEdit(row) {
            this.getGAUserList(row.Id)
            this.status = 'edit'
            Object.keys(this.from).forEach(key => {
                this.from[key] = row[key]
            })
            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
                deleteHospitalGroup(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></style>