<template>
  
    <div class="params-container">
      <div class="params-item">
        <div class="params-label">照片名称：</div>
        <div class="params-value">
          <a-input v-model:value="props.params.orientedFilePath"></a-input>
        </div>
    </div>

    <div class="params-item">
        <div class="params-label">相机选择：</div>
        <div class="params-value">
            <div  v-for="(item,index) in cameraType" 
              :key="index" 
              :class="item.checked ? 'checkbox-item-active' : 'checkbox-item'"
              @click="item.checked = !item.checked"  
            >
              {{ item.name }}
            </div>
        </div>
    </div>
    </div>
</template>

<script lang="ts" setup>

import {ref,defineProps,defineComponent,defineOptions} from 'vue';

const props = defineProps(["params"])

defineComponent({
  name: 'actionComponents'
})

const cameraType = ref([
  {
    name:"可见光",
    value:"visable",
    checked:true,
  },{
    name:"红外照片",
    value:"ir",
    checked:true
  }
])


</script>

<style scoped>
.params-container{
  display:flex;
  flex-direction: column;
  gap:20px;
}
.params-item{
  width:100%;
  display: flex;
  gap:20px;
}
.params-item .params-label{ 
    line-height:30px;
}

.params-item .params-value{
  flex:1;
  display:flex;
  gap:10px;
}

.checkbox-item {
  line-height:30px;
  border-radius: 15px;
  background:#3C3C3C;
  padding:0px 12px;
  cursor:pointer;
}

.checkbox-item-active{
  line-height:30px;
  border-radius: 15px;
  background:#3A57E8;
  padding:0px 12px;
  cursor:pointer;
}

::v-deep .ant-input{
  background:#3c3c3c!important ;
  border:none!important;
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
  color:#fff!important;
}

::v-deep .ant-input::placeholder{
  color:rgba(255, 255, 255, 0.533)!important;
}

::v-deep .ant-input-number{
  color:#fff!important;
  background:#3c3c3c!important;
  border:0px !important;
}

::v-deep .ant-input-number-input{
  color:#fff!important;
  border:0px !important;
}

</style>