<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <!--        <label class="el-form-item-label">id</label>-->
        <!--        <el-input v-model="query.id" clearable placeholder="id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery"  value="车牌号"/>-->
        <!--        <label class="el-form-item-label">用户</label>-->
        <!--        <el-input v-model="query.userNumber" clearable placeholder="用户" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">车牌号</label>-->
        <!--        <label class="el-form-item-label">有效开始时间</label>-->
        <!--        <el-input v-model="query.startTime" clearable placeholder="有效开始时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">有效结束时间</label>-->
        <!--        <el-input v-model="query.endTime" clearable placeholder="有效结束时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">效期状态(00-有效、01-过期)</label>-->
        <!--        <el-input v-model="query.effectiveState" clearable placeholder="效期状态(00-有效、01-过期)" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">登记状态(00-待审核、01-已登记)</label>-->
        <!--        <el-input v-model="query.registrationStatus" clearable placeholder="登记状态(00-待审核、01-已登记)" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">创建者</label>-->
        <!--        <el-input v-model="query.createBy" clearable placeholder="创建者" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">更新者</label>-->
        <!--        <el-input v-model="query.updateBy" clearable placeholder="更新者" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">创建时间</label>-->
        <!--        <el-input v-model="query.createTime" clearable placeholder="创建时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <!--        <label class="el-form-item-label">更新时间</label>-->
        <!--        <el-input v-model="query.updateTime" clearable placeholder="更新时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <table border="1" style="border-color: #e9e9e9">
          <el-input v-model="query.plateNumber" clearable placeholder="车牌号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.cardNumber" clearable placeholder="一卡通卡号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.name" clearable placeholder="姓名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.registrationStatus" clearable placeholder="登记状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.effectiveState" clearable placeholder="效期状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.startTime" clearable placeholder="登记时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <rrOperation :crud="crud" />
        </table>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件  -->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="750px" height="50">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
          <!--          <el-form-item label="id" prop="DmUser.id">-->
          <!--            <el-input v-model="form.id" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="姓名" prop="name">-->
          <!--            <el-input v-model="form.name" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="人员种类" prop="userType">-->
          <!--            <el-input v-model="form.userType" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="一卡通卡号" prop="cardNumber">-->
          <!--            <el-input v-model="form.cardNumber" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="手机" prop="contacts">-->
          <!--            <el-input v-model="form.contacts" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="车牌号">-->
          <!--            <el-input v-model="form.plateNumber" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="有效开始时间">-->
          <!--            <el-date-picker v-model="form.startTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="有效结束时间">-->
          <!--            <el-date-picker v-model="form.endTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="效期状态(00-有效、01-过期)">-->
          <!--            <el-select v-model="form.effectiveState" filterable placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for="(item,index) in dict.information_status"-->
          <!--                :key="item.id"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="登记状态(00-待审核、01-已登记)">-->
          <!--            <el-select v-model="form.registrationStatus" filterable placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for="(item,index) in dict.print_approval_status"-->
          <!--                :key="item.id"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建者">-->
          <!--            <el-input v-model="form.createBy" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="更新者">-->
          <!--            <el-input v-model="form.updateBy" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建时间">-->
          <!--            <el-date-picker v-model="form.createTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="更新时间">-->
          <!--            <el-date-picker v-model="form.updateTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="登记状态(00-待审核、01-已登记)">-->
          <!--            <el-select v-model="form.registrationStatus" filterable placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for="(item,index) in dict.print_approval_status"-->
          <!--                :key="item.id"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建者">-->
          <!--            <el-input v-model="form.createBy" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="更新者">-->
          <!--            <el-input v-model="form.updateBy" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建时间">-->
          <!--            <el-date-picker v-model="form.createTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="更新时间">-->
          <!--            <el-date-picker v-model="form.updateTime" type="datetime" style="width: 370px;" />-->
          <!--          </el-form-item>-->
          <el-form-item label="一卡通卡号：" prop="DmCard.cardNumber">
            <el-input v-model="form.cardNumber" style="width: 370px;" clearable placeholder="请输入一卡通卡号" />
          </el-form-item>
          <el-form-item label="人员姓名：" prop="DmUser.name">
            <el-input v-model="form.name" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="人员种类" prop="userType">
            <el-input v-model="form.userType" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="手机号" prop="contacts">
            <el-input v-model="form.contacts" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="在职状态" prop="deptId">
            <el-input v-model="form.deptId" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="所属部门" prop="deptId">
            <el-input v-model="form.deptId" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="当前职务" prop="deptId">
            <el-input v-model="form.deptId" style="width: 370px;" readonly="true" />
          </el-form-item>
          <el-form-item label="车牌号" prop="plateNumber">
            <el-input v-model="form.plateNumber" style="width: 370px;" clearable placeholder="请输入车牌号" />
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-select v-model="form.cheliangType" filterable placeholder="请选择">
              <!--              <el-option-->
              <!--                v-for="(item,index) in dict.information_status"-->
              <!--                :key="item.id"-->
              <!--                :label="item.label"-->
              <!--                :value="item.value" />-->
              <el-option label="请选择" value="请选择" />
              <el-option label="员工车辆" value="00" />
              <el-option label="白名单" value="01" />
              <el-option label="访客车辆" value="02" />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌有效期限">
            <el-date-picker v-model="form.startTime" type="date" style="width: 185px;" />
            ~
            <el-date-picker v-model="form.endTime" type="date" style="width: 185px;" />
          </el-form-item>
          <hr>
          <el-form-item>
            <span>当前账户已登记车牌：</span>
            <table border="1">
              <tr>
                <td>车牌号</td>
                <td>有效期开始时间</td>
                <td>有效期结束时间</td>
                <td>效期状态</td>
                <td>登记状态</td>
                <td>登记时间</td>
              </tr>
            </table>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <!--      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">-->
      <!--        <el-table-column type="selection" width="55" />-->
      <!--        <el-table-column prop="id" label="id" />-->
      <!--        <el-table-column prop="userNumber" label="用户" />-->
      <!--        <el-table-column prop="plateNumber" label="车牌号" />-->
      <!--        <el-table-column prop="startTime" label="有效开始时间" />-->
      <!--        <el-table-column prop="endTime" label="有效结束时间" />-->
      <!--        <el-table-column prop="effectiveState" label="效期状态(00-有效、01-过期)">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{ dict.label.information_status[scope.row.effectiveState] }}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column prop="registrationStatus" label="登记状态(00-待审核、01-已登记)">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{ dict.label.print_approval_status[scope.row.registrationStatus] }}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column prop="createBy" label="创建者" />-->
      <!--        <el-table-column prop="updateBy" label="更新者" />-->
      <!--        <el-table-column prop="createTime" label="创建时间" />-->
      <!--        <el-table-column prop="updateTime" label="更新时间" />-->
      <!--        <el-table-column v-if="checkPer(['admin','dmPlateNumber:edit','dmPlateNumber:del'])" label="操作" width="150px" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            <udOperation-->
      <!--              :data="scope.row"-->
      <!--              :permission="permission"-->
      <!--            />-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <!--        <el-table-column prop="id" label="id" />-->
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="userType" label="人员种类">
          <template slot-scope="scope">
            {{ dict.label.user_status[scope.row.userType] }}
          </template>
        </el-table-column>
        <el-table-column prop="cardNumber" label="一卡通卡号" />
        <el-table-column prop="contacts" label="手机" />
        <el-table-column prop="plateNumber" label="车牌号" />
        <el-table-column prop="startTime" label="有效开始时间" />
        <el-table-column prop="endTime" label="有效结束时间" />
        <el-table-column prop="effectiveState" label="效期状态(00-有效、01-过期)">
          <template slot-scope="scope">
            {{ dict.label.information_status[scope.row.effectiveState] }}
          </template>
        </el-table-column>
        <el-table-column prop="registrationStatus" label="登记状态(00-待审核、01-已登记)">
          <template slot-scope="scope">
            {{ dict.label.print_approval_status[scope.row.registrationStatus] }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="createBy" label="创建者" />-->
        <!--        <el-table-column prop="updateBy" label="更新者" />-->
        <!--        <el-table-column prop="createTime" label="创建时间" />-->
        <!--        <el-table-column prop="updateTime" label="更新时间" />-->
        <el-table-column v-if="checkPer(['admin','dmPlateNumber:edit','dmPlateNumber:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudDmPlateNumber from '@/api/dmPlateNumber'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { plateNumberId: null, userNumber: null, plateNumber: null, startTime: null, endTime: null, effectiveState: null, registrationStatus: null, createBy: null, updateBy: null, createTime: null, updateTime: null }
export default {
  name: 'DmPlateNumber',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['information_status', 'print_approval_status', 'user_status'],
  cruds() {
    return CRUD({ title: 'plate_number', url: 'api/dmPlateNumber', idField: 'dm_plate_number.id', sort: 'dm_plate_number.id,desc', crudMethod: { ...crudDmPlateNumber }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'dmPlateNumber:add'],
        edit: ['admin', 'dmPlateNumber:edit'],
        del: ['admin', 'dmPlateNumber:del']
      },
      rules: {
        id: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        userNumber: [
          { required: true, message: '用户不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        // { key: 'id', display_name: 'id' },
        { key: 'name', display_name: '姓名' },
        { key: 'userType', display_name: '人员种类' },
        { key: 'cardNumber', display_name: '一卡通卡号' },
        { key: 'contacts', display_name: '手机' },
        // { key: 'userNumber', display_name: '用户' },
        { key: 'plateNumber', display_name: '车牌号' },
        { key: 'startTime', display_name: '有效开始时间' },
        { key: 'endTime', display_name: '有效结束时间' },
        { key: 'effectiveState', display_name: '效期状态(00-有效、01-过期)' },
        { key: 'registrationStatus', display_name: '登记状态(00-待审核、01-已登记)' },
        { key: 'cheliangType', display_name: '车辆类型(00-员工车辆、01--白名单、02--访客车辆)' }
        // { key: 'createBy', display_name: '创建者' },
        // { key: 'updateBy', display_name: '更新者' },
        // { key: 'createTime', display_name: '创建时间' },
        // { key: 'updateTime', display_name: '更新时间' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
