<template>
  <ColumnPage>
    <template #left>
      <VehicleList @rowClick="handleVehicleClick"></VehicleList>
    </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:rfid:add']">新增</el-button>
        <!-- <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="selection.length === 0"
          @click="handleMultDelete" v-hasPermi="['gangkou:rfid: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:rfid:remove']" type="selection" width="50" />
        <el-table-column label="标签编号" align="center" prop="rfidNo" sortable='custom' show-overflow-tooltip
          min-width='120' />
        <el-table-column label="绑定车辆" align="center" prop="vehicleNo" 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='120' >
          <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="remark" show-overflow-tooltip min-width='160' />
        <el-table-column width="120px" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" v-hasPermi="['gangkou:rfid:edit']" @click="handleEdit(scope.row)">编辑</el-link>
            <el-link type="danger" v-if="scope.row.isValid === 'Y'" v-hasPermi="['gangkou:rfid: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>
  </ColumnPage>
</template>

<script>
import TableMixin from "@/mixins/table-mixin";
import EditDialog from "./components/EditDialog";
import { pageListRfid, delRfid } from "@/api/gangkou/device/rfid";
import VehicleList from '@/views/gangkou/vehicle/components/SimpleList';

export default {
  name: 'Rfid',
  mixins: [TableMixin],
  components: { EditDialog, VehicleList },
  dicts: ['sys_yes_no'],
  data() {
    return {
      queryOption: [
        {
          label: '标签编号',
          prop: 'rfidNo',
          type: 'text',
        },
        // {
        //   label: '绑定车辆', 
        //   prop: 'vehicleId',
        //   type: 'select',
        // },
        {
          label: '是否有效',
          prop: 'isValid',
          type: 'select',
          getOptions: () => this.dict.type.sys_yes_no,
          optionsProp: 'value',
          optionsLabel: 'label',
        },
        {
          label: '厂商',
          prop: 'manufacturer',
          type: 'text',
        },
      ]
    };
  },
  methods: {
    mx_pageInfo() {
      return {
        title: 'RFID标签管理',
        exportUrl: '',
        pageListApi: pageListRfid,
        deleteApi: delRfid,
        query: {},
      };
    },
    handleVehicleClick(row) {
      this.query.vehicleId = row.vehicleId;
      this.queryTable();
    },
    handleDelete(row) {
      this.$confirm(`确定设为失效?`, '温馨提示', {
        type: 'warning'
      }).then(() => {
        this.mx_pageInfo().deleteApi(row.id).then((_) => {
          this.$message.success('设置成功');
          this.getTableList();
        });
      });
    },
  },
};
</script>

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