<template>
  <div>
    <el-form inline>
      <el-form-item :label="$t.value.VehicleType">
        <el-select
          v-model="getPricingData.vehicle_type_id"
          :placeholder="$t.value.carTypeSelect"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="item in vehicleTypeList"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="getPricingList"
        >{{ $t.value.Search }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Plus"
          @click="openPricing($t.value.AddChargeConfig,'')"
        >{{ $t.value.new }}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="pricingList"
      height="605"
    >
      <el-table-column
        :label="$t.value.VehicleType"
        align="center"
        width="180"
        prop="vehicle_type.name"
      />
      <el-table-column
        :label="$t.value.StartFee"
        align="center"
        width="180"
        prop="start_fee"
      />
      <el-table-column
        :label="$t.value.UnitFee"
        align="center"
        width="180"
        prop="unit_fee"
      />
      <el-table-column
        :label="$t.value.IsVipFree"
        align="center"
        width="180"
      >
        <template #default="scope">
          <el-button
            :type="scope.row.is_vip_free ? 'success' : 'danger'"
            plain
          >
            {{ scope.row.is_vip_free ? $t.value.vipFree : $t.value.vipNotFree }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t.value.DailyMaxFee"
        align="center"
        width="180"
        prop="daily_max_fee"
      />
      <el-table-column
        :label="$t.value.VipDiscount"
        align="center"
        width="180"
        prop="vip_discount"
      />
      <el-table-column
        :label="$t.value.Action"
        align="center"
      >
        <template #default="scope">
          <el-tooltip
            :content="scope.row.description"
            placement="top"
            effect="light"
          >
            <el-button
              text
              type="primary"
              icon="MessageBox"
            >{{ $t.value.Remarks }}</el-button>
          </el-tooltip>
          <el-button
            icon="edit"
            text
            type="primary"
            @click="openPricing($t.value.EditChargeConfig, scope.row)"
          >{{ $t.value.modify }}</el-button>
          <el-button
            icon="delete"
            text
            type="primary"
            @click="deletePricing(scope.row)"
          >{{ $t.value.remove }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 100%;display: flex;justify-content: end">
      <el-pagination
        :current-page="getPricingData.page"
        :page-size="getPricingData.page_size"
        :page-sizes="[10, 30, 50, 100]"
        :total="pricingTotal"
        layout="total, sizes, prev, pager, next, jumper"
        style="padding-right: 10px"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <el-dialog
      v-model="pricingShow"
      :title="pricingTitle"
      width="650"
    >
      <el-form
        label-width="150"
        size="large"
      >
        <el-form-item :label="$t.value.VehicleType + '：'">
          <el-select
            v-model="pricingData.vehicle_type_id"
            :placeholder="$t.value.carTypeSelect"
          >
            <el-option
              v-for="item in vehicleTypeList"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t.value.FreeDuration + '：'">
          <el-input
            v-model.number="pricingData.start_time"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.StartFee + '：'">
          <el-input
            v-model.number="pricingData.start_fee"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.UnitTime + '：'">
          <el-input
            v-model.number="pricingData.unit_time"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.UnitFee + '：'">
          <el-input
            v-model.number="pricingData.unit_fee"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.DailyMaxFee + '：'">
          <el-input
            v-model.number="pricingData.daily_max_fee"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.IsVipFree + '：'">
          <el-radio-group v-model="pricingData.is_vip_free">
            <el-radio-button :label="false">{{ $t.value.no }}</el-radio-button>
            <el-radio-button :label="true">{{ $t.value.yes }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t.value.VipDiscount + '：'">
          <el-input
            v-model.number="pricingData.vip_discount"
            type="number"
          />
        </el-form-item>
        <el-form-item :label="$t.value.Remarks + '：'">
          <el-input
            v-model="pricingData.description"
            type="textarea"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          size="large"
          @click="pricingShow = false"
        >{{ $t.value.Cancel }}</el-button>
        <el-button
          type="primary"
          size="large"
          @click="pricingOperation"
        >{{ $t.value.Confirm }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { obtainPricingList, addPricing, editPricing, removePricing } from '@/api/pricing'
import { getAllVehicleTypes } from '@/api/vehicle'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { t } from '@/lang/index.js'

const pricingList = ref([])
const pricingShow = ref(false)
const pricingTitle = ref('')
const vehicleTypeList = ref([])
const pricingTotal = ref(0)

// 查询条件
const getPricingData = reactive({
  vehicle_type_id: '',
  page: 1,
  page_size: 10
})

// 表单数据
const pricingData = reactive({
  id: 0,
  vehicle_type_id: '',
  start_time: 0,
  start_fee: 0,
  unit_time: 0,
  unit_fee: 0,
  daily_max_fee: 0,
  is_vip_free: false,
  vip_discount: 1.0,
  description: ''
})

// 获取车辆类型下拉
const loadVehicleTypes = async() => {
  const res = await getAllVehicleTypes()
  if (res.code === 0) {
    vehicleTypeList.value = res.data
  }
}

// 获取收费配置列表
const getPricingList = () => {
  obtainPricingList(getPricingData).then(res => {
    if (res.code === 0) {
      pricingList.value = res.data.list
      pricingTotal.value = res.data.total
    }
  })
}

// 删除
const deletePricing = (data) => {
  ElMessageBox.confirm(t.value.confirmDelete, t.value.tip, { type: 'warning', confirmButtonText: t.value.Confirm,
    cancelButtonText: t.value.Cancel }).then(() => {
    removePricing(data.ID).then(res => {
      if (res.code === 0) {
        ElMessage.success(t.value.deleteSuccess)
        getPricingList()
      }
    })
  })
}

// 打开新增/编辑
const openPricing = (title, data) => {
  pricingShow.value = true
  pricingTitle.value = title
  if (title === t.value.AddChargeConfig) {
    Object.assign(pricingData, {
      id: 0,
      vehicle_type_id: '',
      start_time: 0,
      start_fee: 0,
      unit_time: 0,
      unit_fee: 0,
      daily_max_fee: 0,
      is_vip_free: false,
      vip_discount: 1.0,
      description: ''
    })
  } else {
    Object.assign(pricingData, data)
    pricingData.id = data.ID
  }
}

// 提交
const pricingOperation = async() => {
  if (!pricingData.vehicle_type_id) {
    ElMessage.warning(t.value.carTypeSelect)
    return
  }

  // 关键：提交前强制转数字
  const params = {
    id: pricingData.id,
    vehicle_type_id: pricingData.vehicle_type_id,
    start_time: Number(pricingData.start_time),
    start_fee: Number(pricingData.start_fee),
    unit_time: Number(pricingData.unit_time),
    unit_fee: Number(pricingData.unit_fee),
    daily_max_fee: Number(pricingData.daily_max_fee),
    is_vip_free: pricingData.is_vip_free,
    vip_discount: Number(pricingData.vip_discount),
    description: pricingData.description
  }

  if (pricingTitle.value === t.value.AddChargeConfig) {
    await addPricing(params).then(res => {
      if (res.code === 0) {
        ElMessage.success(t.value.addSuccess)
        pricingShow.value = false
        getPricingList()
      }
    })
  } else {
    await editPricing(params).then(res => {
      if (res.code === 0) {
        ElMessage.success(t.value.editSuccess)
        pricingShow.value = false
        getPricingList()
      }
    })
  }
}

const handleCurrentChange = (val) => {
  getPricingData.page = val
  getPricingList()
}

const handleSizeChange = (val) => {
  getPricingData.page_size = val
  getPricingList()
}

onMounted(() => {
  loadVehicleTypes()
  getPricingList()
})
</script>

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