<template>
  <div class="app-container">
    <!-- 搜索 -->
    <SearchBlock v-model="query" :menus="queryOption" @change="queryTable"></SearchBlock>
    <!-- 表格工具按钮 -->
    <div class="table-operate">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['gangkou:host:add']"
        >新增</el-button
      >
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="selection.length === 0"
        @click="handleMultDelete"
        v-hasPermi="['gangkou:host:remove']"
        >删除选中</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table
      ref="table"
      v-loading="loading"
      tooltip-effect="dark"
      :data="list"
      @selection-change="handleSelectionChange"
      border
      @sort-change="sortChange"
      :default-sort="sort"
    >
      <el-table-column v-hasPermi="['gangkou:host:remove']" type="selection" width="50" />
      <el-table-column label="主机编号" align="center" prop="hostNo" sortable='custom' show-overflow-tooltip min-width='120' />
      <el-table-column label="设备类型" align="center" prop="hostType" show-overflow-tooltip min-width='120' />
      <el-table-column label="厂商" align="center" prop="manufacturer" show-overflow-tooltip min-width='120' />
      <el-table-column label="是否有效" align="center" prop="isValid" show-overflow-tooltip min-width='80' >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isValid"/>
        </template>
      </el-table-column>
      <el-table-column label="绑定车辆" align="center" prop="vehicleNo" show-overflow-tooltip min-width='120' />
      <el-table-column label="流量卡号" align="center" prop="simNo" show-overflow-tooltip min-width='120' />
      <el-table-column label="安装日期" align="center" prop="setupDate" show-overflow-tooltip min-width='120' sortable='custom'/>
      <el-table-column label="生效日期" align="center" prop="effectiveDate" show-overflow-tooltip min-width='120' sortable='custom'/>
      <el-table-column label="失效日期" align="center" prop="expiringDate" show-overflow-tooltip min-width='120' sortable='custom'/>
      <el-table-column label="最后工作时间" align="center" prop="lastWorkDate" show-overflow-tooltip min-width='120' sortable='custom'/>
      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip min-width='160' />
      <el-table-column width="86px" align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-link type="primary" v-hasPermi="['gangkou:host:edit']" @click="handleEdit(scope.row)">编辑</el-link>
          <el-link type="danger" v-hasPermi="['gangkou:host:remove']" @click="handleDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格页脚 -->
    <pagination
      hide-on-single-page
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="getTableList"
    />
    <EditDialog ref="editDialog" @refresh="getTableList"></EditDialog>
  </div>
</template>

<script>
import TableMixin from "@/mixins/table-mixin";
import EditDialog from "./components/EditDialog";
import { pageListHost, delHost } from "@/api/gangkou/device/host";

export default {
  name: 'Host',
  mixins: [TableMixin],
  components: { EditDialog },
  dicts: ['sys_yes_no'],
  data() {
    return {
      queryOption: [
        {
          label: '主机编号', 
          prop: 'hostNo',
          type: 'text',
        },
        {
          label: '绑定车辆', 
          prop: 'vehicleId',
          type: 'select',
        },
        {
          label: '安装日期', 
          prop: 'setupDate',
          type: 'date',
        },
        {
          label: '设备类型', 
          prop: 'hostType',
          type: 'text',
        },
        {
          label: '厂商', 
          prop: 'manufacturer',
          type: 'text',
        },
        {
          label: '是否有效', 
          prop: 'isValid',
          type: 'select',
          // options: [{ value: 1, label: '是' }, { value: 0, label: '否' }],
          getOptions: () => this.dict.type.sys_yes_no,
          optionsProp: 'value',
          optionsLabel: 'label',
        },
        {
          label: '流量卡号', 
          prop: 'simNo',
          type: 'text',
        },
        {
          label: '生效日期', 
          prop: 'effectiveDate',
          type: 'date',
        },
        {
          label: '失效日期', 
          prop: 'expiringDate',
          type: 'date',
        },
        {
          label: '最后工作时间', 
          prop: 'lastWorkDate',
          type: 'date',
        },
      ]
    };
  },
  methods: {
    mx_pageInfo() {
      return {
        title: '主机管理',
        exportUrl: '',
        pageListApi: pageListHost,
        deleteApi: delHost,
        query: {},
      };
    },
  },
};
</script>

<style scoped lang="scss">
</style>

