<template>
  <el-dialog :visible.sync="crud.tempShow.deviceInfo" title="设备信息" width="60%">
    <!--设备数据-->
    <el-row>
      <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">设备编号 :</label>
        <span class="el-form-item-label">{{ form.code }}</span>
      </el-col>
      <el-col :xs="11" :sm="11" :md="19" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">设备名称 :</label>
        <span class="el-form-item-label">{{ form.name }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">产品类型 :</label>
        <span>{{ form.style }}</span>
      </el-col>
      <el-col :xs="11" :sm="11" :md="19" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">安装位置 :</label>
        <span>{{ form.floor.floorName }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">运维人员 :</label>
        <span>{{ form.operator }}</span>
      </el-col>
      <el-col :xs="11" :sm="11" :md="19" :lg="11" :xl="11" class="test">
        <label class="el-form-item-label">联系方式 :</label>
        <span>{{ form.linkType }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          v-loading="crud.loading"
          :data="form.queueList"
          tooltip-effect="dark"
        >
          <el-table-column label="待打印任务" header-align="center">
            <el-table-column :show-overflow-tooltip="true" prop="printingRequest.taskCode" label="文印编号" />
            <el-table-column :show-overflow-tooltip="true" prop="printingRequest.taskName" label="文印名称" />
            <el-table-column :show-overflow-tooltip="true" prop="printingRequest.file.name" label="文件">
              <template slot-scope="scope">
                {{ scope.row.printingRequest.file.name +"."+scope.row.printingRequest.file.suffix }}
              </template>
            </el-table-column>
            <el-table-column prop="printingRequest.filePageNum" label="文档总页数" />
            <el-table-column prop="printingRequest.fileRepeatNum" label="文档份数" />
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                {{ dict.label.print_status[scope.row.printingRequest.status] }}
              </template>
            </el-table-column>
          </el-table-column></el-table>
      </el-col>
    </el-row>
    <div slot="footer" />
  </el-dialog>
</template>
<style type="text/css">
  test{
    border:solid red 10px;
  }
</style>
<script>
import crudDevice from '@/api/dm/device/dmDevice'
import { mapGetters } from 'vuex'
import CRUD, { form, crud } from '@crud/crud'
const defaultForm = { id: null, name: null, style: null, floor: { floorId: null }, status: null, buildDate: null, warranty: null, lastGuarantee: null, operator: null, linkType: null, remark: null, queueList: [] }
export default {
  mixins: [form(defaultForm), crud()],
  // 数据字典
  dicts: ['print_status'],
  cruds() {
    return CRUD({ title: '设备', url: 'api/dmDevice/info?id=' + this.crud.openId, tempBtnShow: {
      device: true
    }, crudMethod: { ...crudDevice }})
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      devices: [],
      multipleSelection: crud.selectData || [],
      checkInfo: '',
      code: '',
      size: 0,
      page: 0,
      total: 0

    }
  },
  computed: {
    ...mapGetters([
      'device'
    ])
  },
  watch: {
    'crud.openId': {
      handler: function(datainfo) {
        this.$nextTick(function() {
          this.getInfo()
        })
      },
      deep: true
    },
    multipleSelection: {
      handler: function() {
        this.setCheckInfo()
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getDevices() {
      console.info('this.page  ', this.page)
      console.info('this.size  ', this.size)
      crudDevice.selectList({ page: this.page, size: this.size }).then(res => {
        this.total = res.totalElements
        this.devices = res.content.map(function(obj) {
          return obj
        })
      })
    },
    getInfo() {
      console.info('this.crud.openId ', this.crud.openId)
      crudDevice.getInfo(this.crud.openId).then(res => {
        this.form = res
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelection = val[0]
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
    },
    selected() {
      console.log(this.$refs.multipleTable.selection)
      this.$emit('on-change-device', this.$refs.multipleTable.selection, this.crud.openId)
      this.$refs.multipleTable.clearSelection()
      this.crud.doCloseDevice()
    },
    setCheckInfo() {
      var checkedDevices = this.$refs.multipleTable.selection
      var info = ''
      checkedDevices.forEach(row => {
        info += row.name + ','
      })
      this.checkInfo = info.substring(0, info.length - 1)
    }
  }
}
</script>
<style scoped>
  .normal-weight{
    font-weight: 500;
  }
</style>
