<template>
  <view>
    <cc-scroll-loading :meta="metaData">
      <view class="vehicle_item">
        <view class="vehicle_item_head">
          <view class="icon">
            <image
              src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K76T3CYJ23068A7S1XAZFJKR.png"
              mode="widthFix"
            />
          </view>
          <view class="car_no"> 粤BFR2323 <text>新能源</text> </view>
        </view>
        <view class="vehicle_item_foot">
          <view class="foot_left" @click="handleSetDefaultVehicle">
            <uni-icons type="checkbox-filled" size="18" :color="getStyleColorValueInfo()"></uni-icons>
            <!-- <uni-icons type="circle" size="18" color="#666"></uni-icons> -->
            设为默认车辆
          </view>
          <view class="foot_right" @click="headleDeleteVehicle">
            <up-icon name="trash" size="16" color="#666"></up-icon> 删除车辆
          </view>
        </view>
      </view>
    </cc-scroll-loading>
    <hs-footer btnParimaryName="添加车辆" @handleParmaryClick="handleAddBtn" />
  </view>
</template>

<script setup lang="ts">
import {getStyleColorValueInfo} from '@/common/libraries/getPageConfig'
const metaData = { current_page: 1, last_page: 1, per_page: 10, total: 1 }
const headleDeleteVehicle = () => {
  uni.showModal({
    title: '提示',
    content: '演示车辆不能删除！',
    showCancel: false,
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

const handleSetDefaultVehicle = () => {
  uni.showModal({
    title: '提示',
    content: '演示车辆不能取消！',
    showCancel: false,
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

const handleAddBtn = () => {
  uni.navigateTo({
    url: '/ME/vehicle_management/add/index'
  })
}
</script>

<style lang="scss">
@import './style.scss';
</style>
