<template>
  <div class="st-bid-input-container">
    <el-form-item>
      <el-select v-model="bidData.bidType" style="width: 150px">
        <el-option v-for="item in bidTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="bidData.type" v-show="bidData.bidType !== '1'" style="width: 100px">
        <el-option label="提高竞价" value="increase"></el-option>
        <el-option label="降低竞价" value="decrease"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="bidData.numType" v-show="bidData.bidType !== '1'" style="width: 100px">
        <el-option label="数值" value="1"></el-option>
        <el-option label="百分比" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      style="width: 150px"
      :prop="index !== undefined ? `rule.action.keywords[${index}].defaultBidding` : `rule.action.target.defaultBidding`"
      :rules="{ validator: checkFloat, trigger: 'blur' }">
      <InputFloat
        v-model="bidData.defaultBidding"
        :prefix="bidData.numType === '1' || bidData.bidType === '1' ? '$' : ''"
        :suffix="bidData.numType === '2' && bidData.bidType !== '1' ? '%' : ''">
      </InputFloat>
    </el-form-item>
    <div style="display: flex; justify-content: flex-start; gap: 5px" v-show="bidData.bidType !== '1'">
      <div style="margin-top: 7px">出价范围：</div>
      <el-form-item
        :prop="index !== undefined ? `rule.action.keywords[${index}].min` : `rule.action.target.min`"
        :rules="{ validator: checkMin, trigger: 'blur' }">
        <InputFloat v-model="bidData.min" prefix="$" style="width: 150px"></InputFloat>
      </el-form-item>
    </div>
    <div style="display: flex; justify-content: flex-start; gap: 10px" v-show="bidData.bidType !== '1'">
      <div style="margin-top: 7px">~</div>
      <el-form-item
        :prop="index !== undefined ? `rule.action.keywords[${index}].max` : `rule.action.target.max`"
        :rules="{ validator: checkMax, trigger: 'blur' }">
        <InputFloat v-model="bidData.max" prefix="$" style="width: 150px"></InputFloat>
      </el-form-item>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import InputFloat from '/@/components/input-float/index.vue'
import XEUtils from 'xe-utils';

interface Props {
  bidData: SearchTermBid
  index?: number
}
const props = defineProps<Props>()
const bidTypeList = [
  { label: '设置竞价', value: '1' },
  { label: '基于7天CPC', value: '2' },
  { label: '基于14天CPC', value: '3' },
  { label: '基于30天CPC', value: '4' },
]

const checkFloat = (rule: any, value: string, callback: any) => {
  if (XEUtils.toNumber(value) <= 0) {
    callback(new Error('请输入大于0的数值！'))
  }
  callback()
}

const checkMin = (rule: any, value: string, callback: any) => {
  if(value === '' || props.bidData.max === '') return callback()
  if (XEUtils.toNumber(value) >= XEUtils.toNumber(props.bidData.max)) {
    callback(new Error('最小值必须小于最大值！'))
  }
  callback()
}
const checkMax = (rule: any, value: string, callback: any) => {
  if(value === '' || props.bidData.min === '') return callback()
  if (XEUtils.toNumber(value) <= XEUtils.toNumber(props.bidData.min)) {
    callback(new Error('最大值必须大于最小值！'))
  }
  callback()
}
</script>

<style scoped>
.st-bid-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
}
</style>
