<template>
  <el-dialog :close-on-click-modal="false" custom-class="edit-dialog" append-to-body width="60%" :close-on-press-escape="false"
    :visible.sync="dialogVisible" title="选择主机">
    <!-- 搜索 -->
    <SearchBlock v-model="query" :menus="queryOption" @change="queryTable"></SearchBlock>
    <el-table
      ref="table"
      v-loading="loading"
      tooltip-effect="dark"
      :data="list"
      border
      @sort-change="sortChange"
      :default-sort="sort"
      @row-click="rowClick"
    >
      <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>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

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

export default {
  name: 'SelectDialog',
  mixins: [TableMixin],
  dicts: ['sys_yes_no'],
  data() {
    return {
      dialogVisible: false,
      queryOption: [
        {
          label: '主机编号', 
          prop: 'hostNo',
          type: 'text',
        },
        {
          label: '是否有效', 
          prop: 'isValid',
          type: 'select',
          getOptions: () => this.dict.type.sys_yes_no,
          optionsProp: 'value',
          optionsLabel: 'label',
        },
      ]
    }
  },
  methods: {
    mx_pageInfo() {
      return {
        pageListApi: pageListHost,
        query: {},
      };
    },
    open() {
      this.dialogVisible = true;
    },
    rowClick(row) {
      this.dialogVisible = false;
      this.$emit('confirm', row);
    }
  }
}
</script>

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