<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="page-transport">
    <!-- 搜索相关区域 -->
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline input-row"
        @submit.prevent
      >
        <el-form-item :label="$t('delivery.transport.name') + '：'">
          <el-input
            v-model="searchForm.transName"
            :placeholder="$t('delivery.transport.name')"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSearch(true)"
          >
            {{ $t('table.search') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="onResetSearch()"
          >
            {{ $t('table.clear') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表按钮栏 -->
    <div class="main-content">
      <div class="btn-content">
        <!-- 全选 -->
        <el-checkbox
          v-model="selectAll"
          :disabled="!dataList.length"
          class="all-check-btn"
          @change="onSelectAll()"
        >
          {{ $t('delivery.transport.selectAll') }}
        </el-checkbox>
        <!-- 新增 -->
        <el-button
          v-permission="['user:transport:save']"
          type="primary"
          @click="onAddOrUpdate()"
        >
          {{ $t("table.create") }}
        </el-button>
        <!-- 批量删除 -->
        <el-button
          v-permission="['user:transport:delete']"
          :disabled="dataListSelections.length <= 0"
          @click="onDelete()"
        >
          {{ $t('table.batchDel') }}
        </el-button>
      </div>
      <!-- 列表相关区域 -->
      <div class="table-con">
        <el-table
          ref="transportTableRef"
          v-loading="pageLoading"
          :data="dataList"
          header-cell-class-name="table-header"
          row-key="imgId"
          style="width: 100%"
          @selection-change="onSelectSome"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <!-- 模板名称 -->
          <el-table-column
            :label="$t('delivery.transport.name')"
            prop="transName"
            align="left"
          >
            <template #default="{ row }">
              <span class="table-cell-text">{{ row.transName }}</span>
            </template>
          </el-table-column>
          <!-- 模板类型 -->
          <el-table-column
            :label="$t('delivery.transport.type')"
            prop="type"
          >
            <template #default="scope">
              <span>{{ [$t('delivery.transport.buyerPrice'),$t('delivery.transport.shopPrice')][scope.row.isFreeFee] }}</span>
            </template>
          </el-table-column>
          <!-- 收费方式 -->
          <el-table-column
            align="left"
            prop="imgType"
            :label="$t('delivery.transport.chargePrice')"
          >
            <template #default="scope">
              <span>{{ [$t('delivery.transport.byCount'),$t('delivery.transport.byWeight'),$t('delivery.transport.byVolume')][scope.row.chargeType] }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            :label="$t('table.actions')"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <el-button
                v-permission="['user:transport:update']"
                link
                type="primary"
                @click="onAddOrUpdate(row.transportId)"
              >
                {{ $t("table.edit") }}
              </el-button>
              <el-button
                v-permission="['user:transport:delete']"
                link
                type="primary"
                @click="onDelete(row.transportId)"
              >
                {{ $t("table.delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <pagination
          v-show="page.total > 0"
          v-model:page="page.pageNum"
          v-model:limit="page.pageSize"
          style="text-align: right"
          :total="page.total"
          @pagination="onSearch()"
        />
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="onGetDataList()"
    />
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination/index.vue'
import AddOrUpdate from './add-or-update.vue'
import * as api from '@/api/delivery/transport'
import { ElMessage, ElMessageBox } from 'element-plus'

// 回调函数
onMounted(() => {
  onGetDataList()
})

// 查询列表数据
const dataList = reactive([])
const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  pages: 0
})
const searchForm = reactive({
  transName: ''
})
const pageLoading = ref(false)
let tempSearchForm = null
const onGetDataList = (newData = false) => {
  if (newData || !tempSearchForm) {
    tempSearchForm = {
      pageNum: page.pageNum,
      pageSize: page.pageSize,
      transName: searchForm.transName
    }
  } else {
    tempSearchForm.pageNum = page.pageNum
    tempSearchForm.pageSize = page.pageSize
  }
  pageLoading.value = true
  api.page(tempSearchForm).then(data => {
    dataList.length = 0
    dataList.push(...data.list)
    page.total = data.total
    page.pages = data.pages
    pageLoading.value = false
  }).catch(() => {
    pageLoading.value = false
  })
}

// 条件查询（点击搜索按钮）
const onSearch = (newData = false) => {
  onGetDataList(newData)
}

// 新增 or 修改
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value.init(id)
  })
}

// 删除
const dataListSelections = reactive([])
const onDelete = (id) => {
  const ids = id ? [id] : dataListSelections.map(item => {
    return item.transportId
  })
  if (!id && !dataListSelections.length) {
    return
  }
  ElMessageBox.confirm(
    $t('table.sureToDelete'),
    $t('table.tips'),
    {
      confirmButtonText: $t('table.confirm'),
      cancelButtonText: $t('table.cancel'),
      type: 'warning'
    }
  ).then(() => {
    api.deleteById(ids).then(() => {
      ElMessage({
        message: $t('table.actionSuccess'),
        type: 'success',
        duration: 1500,
        onClose: () => onGetDataList()
      })
    })
  }).finally(() => {
    transportTableRef.value?.clearSelection()
  })
}

// 重置搜索表单
const onResetSearch = () => {
  searchForm.transName = ''
}

// 表格多选
const selectAll = ref(false)
const onSelectSome = (val) => {
  dataListSelections.length = 0
  dataListSelections.push(...val)
  selectAll.value = dataListSelections.length === dataList.length
}

// 表格全选
const transportTableRef = ref()
const onSelectAll = () => {
  selectAll.value = transportTableRef.value.getSelectionRows().length < dataList.length
  transportTableRef.value.toggleAllSelection()
}

</script>

<style lang="scss" scoped>
.page-transport {
  padding: 20px;
  .btn-content {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 22px;
    .all-check-btn {
      margin-right: 10px;
    }
  }
  :deep(.el-table__empty-block) {
    border-bottom: 1px solid #dfe6ec !important;
  }
  :deep(.el-pagination .el-select .el-input){
    width: 100px !important;
  }
  .search-bar {
    padding-bottom: 6px !important;
  }
}
</style>
