<template>
  <div class="station-car-present">
    <el-card shadow="never" class="present-card">
      <!-- 搜索区域 -->
      <div class="search-area">
        <seek-page
          :seekList="seekList"
          @search="handleSearch"
          @reset="handleReset"
          :formLength="3"
        />
      </div>

      <!-- 列表视图 -->
      <div class="list-view">
        <ele-pro-table
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="datasource"
          @columns-change="handleColumnChange"
          :cache-key="cacheKeyUrl"
          :selection.sync="selection"
          height="calc(100vh - 300px)"
        >
          <template v-slot:toolbar>
            <exportButton
              fileName="在场车辆列表"
              apiUrl="/basic/station-car-present/export"
              :params="params"
            ></exportButton>
            <el-button
              v-if="$hasPermission('basic:company:delete')"
              v-show="selection.length"
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleBatchDelete"
              >删除</el-button
            >
          </template>

          <template v-slot:picture="{ row }">
            <el-image
              :src="row.picture"
              class="table-image"
              :preview-src-list="[row.picture]"
            />
          </template>
        </ele-pro-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as StationCarPresentApi from '@/api/basic/stationCarPresent';
  import { getFactoryarea } from '@/api/factoryModel';
  import exportButton from '@/components/upload/exportButton.vue';

  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    components: { exportButton },
    mixins: [tabMixins, dictMixins],

    data() {
      return {
        loading: false,
        stationListData: [],
        params: {},
        selection: [],
        cacheKeyUrl: 'station-car-present-list',
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 55,
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            prop: 'carNo',
            label: '车牌号',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'enterTime',
            label: '入场时间',
            align: 'center',
            width: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'picture',
            align: 'center',
            label: '照片',
            width: 100,
            slot: 'picture'
          }
        ]
      };
    },

    mounted() {
      this.getSelectStationList();
    },

    computed: {
      seekList() {
        return [
          {
            label: '场站',
            value: 'stationId',
            type: 'select',
            placeholder: '请选择',
            planList: this.stationListData
          },
          {
            label: '车牌号',
            value: 'carNo',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '入场时间',
            value: 'enterTime',
            type: 'date',
            width: '300px',
            valueAr: ['enterTimeStart', 'enterTimeEnd']
          }
        ];
      }
    },

    methods: {
      /** 查询列表数据源 */
      async datasource({ page, limit, where }) {
        this.loading = true;
        try {
          this.params = {
            pageNo: page,
            pageSize: limit,
            ...where
          };
          return await StationCarPresentApi.getStationCarPresentPage(
            this.params
          );
        } finally {
          this.loading = false;
        }
      },

      /** 获取场站列表 */
      async getSelectStationList() {
        getFactoryarea({
          type: 2,
          size: 9999
        }).then((res) => {
          this.stationListData = res.list.map((item) => {
            return {
              label: item.name,
              value: item.id
            };
          });
        });
      },

      /** 搜索 */
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      /** 重置 */
      handleReset() {
        this.$refs.table.reload({ page: 1 });
      },

      /** 批量删除按钮操作 */
      handleBatchDelete() {
        this.$confirm('确认删除选中的记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            StationCarPresentApi.deleteBatchStationCarPresent(
              this.selection.map((item) => item.id)
            ).then(() => {
              this.$message.success('删除成功');
              this.$refs.table.reload({ page: 1 });
            });
          })
          .catch(() => {});
      }
    }
  };
</script>

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