<template>
    <page-header-wrapper>
      <a-card :bordered="false">
        <!-- 条件搜索 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
                <a-row :gutter="48">
                  <a-col :md="6" :sm="8">
                    <a-form-item label="车牌号" prop="plateNumber">
                      <a-input v-model="queryParam.plateNumber" placeholder="请输入车牌号" allow-clear />
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item label="负责人" prop="username">
                      <a-input v-model="queryParam.username" placeholder="请输入负责人" allow-clear />
                    </a-form-item>
                  </a-col>
                  <template >
                    <a-col :md="8" :sm="10">
                      <a-form-item label="时间" prop="status">
                        <a-range-picker style="width: 100%" v-model="daterangeCreateTime" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear/>
                      </a-form-item>
                    </a-col>
                  </template>
                  <a-col :md="8" :sm="8">
                    <span
                      class="table-page-search-submitButtons"
                      :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
                    >
                      <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                      <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>
        </div>
        <!-- 操作 -->
        <div class="table-operations">
          <!-- <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['clw:applyCarLog:add']">
            <a-icon type="plus" />新增
          </a-button>
          <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)" v-hasPermi="['clw:applyCarLog:edit']">
            <a-icon type="edit" />修改
          </a-button>
          <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="['clw:applyCarLog:remove']">
            <a-icon type="delete" />删除
          </a-button> -->
          <!-- <a-button type="primary" @click="handleExport" v-hasPermi="['clw:applyCarLog:export']">
            <a-icon type="download" />导出
          </a-button> -->
          <table-setting
            :style="{ float: 'right' }"
            :table-size.sync="tableSize"
            v-model="columns"
            :refresh-loading="loading"
            @refresh="getList"
          />
        </div>
        <!-- 增加修改 -->
        <create-form ref="createForm" :isNonfixedPointOptions="dict.type.cmmon_yes_no" @ok="getList" />
        <!-- 数据展示 -->
        <a-table
          :loading="loading"
          :size="tableSize"
          rowKey="id"
          :columns="columns"
          :data-source="list"
          :pagination="false"
          :bordered="tableBordered"
        >
          <span slot="num" slot-scope="text, records, index">
            {{ (queryParam.pageNum - 1) * queryParam.pageSize + Number(index) + 1 }}
          </span>
          <span slot="insuranceTime" slot-scope="text, record">
         灭火消防车
        </span>
        <span slot="insuranceIme" slot-scope="text, record">
            78043968304
        </span>
          <span slot="applyStatus" slot-scope="text, record">
            <dict-tag :options="dict.type['apply_status']" :value="record.applyStatus" />
          </span>
          <span slot="isNonfixedPoint" slot-scope="text, record">
            <dict-tag :options="dict.type['cmmon_yes_no']" :value="record.isNonfixedPoint" />
          </span>
          <span slot="operation" slot-scope="text, record">
            <!-- <a-divider type="vertical" v-hasPermi="['clw:applyCarLog:edit']" /> -->
            <!-- <a @click="$refs.createForm.handleInfo(record, undefined)" v-hasPermi="['clw:applyCarLog:edit']">
              <a-icon type="eye" />详情
            </a> -->
            <!-- <a-divider type="vertical" v-hasPermi="['clw:applyCarLog:remove']" />
            <a @click="handleDelete(record)" v-hasPermi="['clw:applyCarLog:remove']">
              <a-icon type="delete" />删除
            </a> -->
          </span>
        </a-table>
        <!-- 分页 -->
        <a-pagination
          class="ant-table-pagination"
          show-size-changer
          show-quick-jumper
          :current="queryParam.pageNum"
          :total="total"
          :page-size="queryParam.pageSize"
          :showTotal="(total) => `共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
          @change="changeSize"
        />
      </a-card>
    </page-header-wrapper>
  </template>
  
  <script>
  import { listApplyCarLog, delApplyCarLog,getOverSpeedList } from '@/api/clw/applyCarLog'
  import CreateForm from './modules/CreateForm'
  import { tableMixin } from '@/store/table-mixin'
  
  export default {
    name: 'ApplyCarLog',
    components: {
      CreateForm,
    },
    mixins: [tableMixin],
    dicts: ['cmmon_yes_no', 'apply_status'],
    data() {
      return {
        list: [],
        selectedRowKeys: [],
        selectedRows: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        ids: [],
        loading: false,
        total: 0,
        // 查询参数
        queryParam: {
          pageNum: 1,
          pageSize: 10,
        },
        daterangeCreateTime:[],
        columns: [
          { title: '序号', scopedSlots: { customRender: 'num' }, width: '50px', align: 'center' },
          {
            title: '车牌号码',
            dataIndex: 'plateNumber',
            ellipsis: true,
            align: 'center',
          },
          {
          title: '车辆类型',
          dataIndex: 'categoryName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: 'IMEI',
          dataIndex: 'imei',
          ellipsis: true,
          align: 'center',
        },
        
          {
            title: '负责人',
            dataIndex: 'username',
            ellipsis: true,
            align: 'center',
          },
          {
            title: '所属机构',
            dataIndex: 'deptName',
            ellipsis: true,
            align: 'center',
          },
  
          {
            title: '超速时间',
            dataIndex: 'reportTime',
            ellipsis: true,
            align: 'center',
          },
          {
            title: '最高车速(km/h)',
            dataIndex: 'speed',
            ellipsis: true,
            align: 'center',
          },
          {
            title: '限制车速(km/h)',
            dataIndex: 'speedLimit',
            ellipsis: true,
            align: 'center',
          },
        ],
      }
    },
    filters: {},
    created() {
      this.getList()
    },
    computed: {},
    watch: {},
    methods: {
      /** 查询用车申请记录列表 */
      getList() {
        this.loading = true
        this.queryParam.params = {}
        if (this.daterangeCreateTime !== null && this.daterangeCreateTime !== '' && this.daterangeCreateTime.length !== 0) {
          this.queryParam.startTime = `${this.daterangeCreateTime[0]} 00:00:00`
          this.queryParam.endTime = `${this.daterangeCreateTime[1]} 23:59:59`
        }
        getOverSpeedList(this.queryParam).then((response) => {
          this.list = response.rows
          this.total = response.total
          this.loading = false
        })
      },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParam.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeCreateTime = []
        this.queryParam = {      
          pageNum: 1,
          pageSize: 10,
        }
        this.handleQuery()
      },
      onShowSizeChange(current, pageSize) {
        this.queryParam.pageSize = pageSize
        this.getList()
      },
      changeSize(current, pageSize) {
        this.queryParam.pageNum = current
        this.queryParam.pageSize = pageSize
        this.getList()
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        this.ids = this.selectedRows.map((item) => item.id)
        this.single = selectedRowKeys.length !== 1
        this.multiple = !selectedRowKeys.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        var that = this
        const ids = row.id || this.ids
        this.$confirm({
          title: '确认删除所选中数据?',
          content: '当前选中编号为' + ids + '的数据',
          onOk() {
            return delApplyCarLog(ids).then(() => {
              that.onSelectChange([], [])
              that.getList()
              that.$message.success('删除成功', 3)
            })
          },
          onCancel() {},
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        var that = this
        this.$confirm({
          title: '是否确认导出?',
          content: '此操作将导出当前条件下所有数据而非选中数据',
          onOk() {
            that.download(
              'clw/applyCarLog/export',
              {
                ...that.queryParam,
              },
              `applyCarLog_${new Date().getTime()}.xlsx`
            )
          },
          onCancel() {},
        })
      },
    },
  }
  </script>
  <style lang="less" scoped>
  // /deep/.ant-input-affix-wrapper {
  //   width: 20%;
  //   display: inline-block;
  // }
  </style>
  