<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
                <el-button type="primary" icon="el-icon-share" :disabled="selection.length==0" @click="shareDevice"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-button icon="el-icon-filter" @click="filter"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe border>
                <el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="#" type="index" width="40"></el-table-column>
				<el-table-column :label="$t('device.deviceID')" prop="DeviceCode" width="150"></el-table-column>
				<el-table-column :label="$t('device.deviceName')" prop="Name" width="120"></el-table-column>
				<el-table-column :label="$t('device.deviceTypeName')" prop="DeviceTypeName" width="100"></el-table-column>
                <el-table-column :label="$t('device.deviceModelName')" prop="DeviceModelName" width="120"></el-table-column>
                <el-table-column :label="$t('response.description')" prop="Description" width="150"></el-table-column>
                <el-table-column :label="$t('device.deviceCode')" prop="ShortCode" width="120"></el-table-column>
                <el-table-column :label="$t('device.searchHosptial')" prop="HospitalName" width="150"></el-table-column>
                <el-table-column :label="$t('device.departmentColumnTitle')" prop="DepartmentName" width="150"></el-table-column>
                <el-table-column :label="$t('device.deviceBelongUser')" prop="DirectorName" width="130"></el-table-column>
                <el-table-column :label="$t('device.searchAdmin')" prop="AdminName" width="130"></el-table-column>
                <el-table-column :label="$t('device.shareUserCount')" prop="ShareUserNum" width="110"></el-table-column>
				<el-table-column :label="$t('response.operateColumnTitle')" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-icon :size="30" :title="$t('edit')" color="#409EFC" class="tableOperateIcon" @click="table_edit(scope.row, scope.$index)"><sc-icon-operate-edit /></el-icon>
						<el-icon :size="30" :title="$t('device.removeDeviceToUser')" color="#409EFC" class="tableOperateIcon" @click="removeDeviceUser(scope.row, scope.$index)"><sc-icon-cancel-share /></el-icon>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<saveDevice-dialog v-if="dialog.saveDevice" ref="saveDeviceDialog" @success="handleSaveSuccess" @closed="dialog.saveDevice=false"></saveDevice-dialog>
    <deviceSearch-dialog v-if="dialog.deviceSearch" ref="deviceSearchDialog" @success="handleSearchSuccess" @closed="dialog.deviceSearch=false"></deviceSearch-dialog>
    <shareDeviceUser-dialog v-if="dialog.shareDeviceUser" ref="shareDeviceUserDialog" @success="handleShareSuccess" @closed="dialog.shareDeviceUser=false"></shareDeviceUser-dialog>
</template>

<script>
	import saveDeviceDialog from './saveDevice'
    import deviceSearchDialog from './deviceSearch'
    import shareDeviceUserDialog from './shareDeviceUser'
	export default {
		name: 'deviceList',
		//引用组件
		components: {
			saveDeviceDialog,
            deviceSearchDialog,
            shareDeviceUserDialog
		},
		//初始化数据
		data() {
			return {
				dialog: {
					saveDevice: false,
                    deviceSearch: false,
                    shareDeviceUser: false
				},
                listLoading: true,
				apiObj: this.$API.device.deviceList,
				selection: [],
				search: {
                    searchType: '',
                    keyword: '',
                    hospitals: '',
                    userName: '',
                    adminName: ''
				}
			}
		},
		methods: {
            //搜索
			filter(){
				this.dialog.deviceSearch = true
				this.$nextTick(() => {
					this.$refs.deviceSearchDialog.open().setData(this.search)
				})
			},
			//编辑
			table_edit(row){
				this.dialog.saveDevice = true
				this.$nextTick(() => {
					this.$refs.saveDeviceDialog.open('edit').setData(row)
				})
			},
            //分配设备
            shareDevice(){
				if (this.selection && this.selection.length > 0)
				{
					var deviceCodes = this.selection.map(c => {
						return c.DeviceCode;
					});				
					this.dialog.shareDeviceUser = true
					this.$nextTick(() => {
						this.$refs.shareDeviceUserDialog.open().setData(deviceCodes)
					})
				}
			},
			//移除分配用户
            removeDeviceUser(row){
				this.dialog.shareDeviceUser = true
				this.$nextTick(() => {
					this.$refs.shareDeviceUserDialog.open('remove').setData([row.DeviceCode])
				})
			},
            //表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//搜索
			getList(){
                this.$refs.table.upData(this.search)
			},
			//本地更新数据
			handleSaveSuccess(){
                this.$refs.table.refresh()
			},
            //搜索过滤
            handleSearchSuccess(data){
                Object.assign(this.search, data)
                this.getList();
			},
            //分配成功
			handleShareSuccess(){
                this.$refs.table.refresh()
			},
		}
	}
</script>

<style>
.tableOperateIcon{
	cursor:pointer;
	margin-left:5px;
}
</style>
