<script setup lang="ts">
import type { OtherFields } from '../types'
import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const props = defineProps<{ data?: OtherFields[] }>()

const fieldsType: any = {
  1: '字符串',
  2: '整数',
  3: '数字',
  4: '日期',
  5: '时间',
}

const ruleTips: any = {
  1: '最大字符数',
  2: '最大位数',
  3: '小数点后位数',
  4: '格式',
  5: '格式',
}

const add = function (item: any) {
  item.push({ min: '', max: '', value: '', rate: '' })
}

const remove = function (item: any, index: number) {
  item.splice(index, 1)
}
</script>

<template>
  <el-form-item v-for="(item, index) in props.data" :label="item.name" :key="index">
    <div>
      <el-radio-group v-model="item.rule.type">
        <el-radio :value="2">指定随机</el-radio>
        <el-radio :value="1">固定</el-radio>
      </el-radio-group>
      <p class="specify-tips">
        字段类型：{{ fieldsType[item.type] }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ ruleTips[item.type] }}：{{
          item.format
        }}
      </p>
      <div class="specify" v-if="item.rule.type === 2">
        <div class="specify-item" v-for="(specify, index) in item.rule.rand_value" :key="index">
          <!-- 字符串 -->
          <template v-if="parseInt(item.type) === 1">
            <el-input v-model="specify.value" placeholder="请输入"></el-input>
            <el-input v-model="specify.rate" placeholder="请输入随机几率" style="margin-left: 15px"></el-input>
            &nbsp;&nbsp;%
          </template>
          <!-- 整数 -->
          <template v-if="parseInt(item.type) === 2">
            <el-input v-model="specify.min" placeholder="请输入随机整数最小值"></el-input>
            <el-input v-model="specify.max" placeholder="请输入随机整数最大值" style="margin-left: 15px"></el-input>
          </template>
          <!-- 数字 -->
          <template v-if="parseInt(item.type) === 3">
            <el-input v-model="specify.min" placeholder="请输入随机数字最小值"></el-input>
            <el-input v-model="specify.max" placeholder="请输入随机数字最大值" style="margin-left: 15px"></el-input>
          </template>
          <!-- 日期 -->
          <template v-if="parseInt(item.type) === 4">
            <el-date-picker
              placeholder="请选择随机日期最小值"
              style="width: 200px"
              value-format="YYYY-MM-DD"
              v-model="specify.min" />
            <el-date-picker
              placeholder="请选择随机日期最大值"
              style="width: 200px; margin-left: 15px"
              value-format="YYYY-MM-DD"
              v-model="specify.max" />
          </template>
          <template v-if="parseInt(item.type) === 5">
            <el-date-picker
              placeholder="请选择随机时间最小值"
              v-model="specify.min"
              style="width: 200px"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss" />
            <el-date-picker
              placeholder="请选择随机时间最大值"
              v-model="specify.max"
              style="width: 200px; margin-left: 15px"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss" />
          </template>
          <template v-if="userStore.role?.id !== 1">
            <el-icon
              v-if="item.rule.rand_value.length - 1 === index || item.rule.rand_value.length === 0"
              @click="add(item.rule.rand_value)"
              size="20"
              style="margin-left: 10px; cursor: pointer"
              ><CirclePlusFilled
            /></el-icon>
            <el-icon
              @click="remove(item.rule.rand_value, index)"
              size="20"
              style="margin-left: 10px; cursor: pointer"
              v-if="item.rule.rand_value.length > 1"
              ><RemoveFilled
            /></el-icon>
          </template>
        </div>
        <!-- <el-icon
            v-if="item.rule.rand_value.length === 0"
            @click="add(item.rule.rand_value)"
            size="20"
            style="margin-left: 10px; cursor: pointer"
            ><CirclePlusFilled
          /></el-icon> -->
      </div>
      <div v-else>
        <template v-if="parseInt(item.type) === 4">
          <el-date-picker
            placeholder="请选择固定属性值"
            style="width: 200px"
            value-format="YYYY-MM-DD"
            v-model="item.rule.fixed_value" />
        </template>
        <template v-else-if="parseInt(item.type) === 5">
          <el-date-picker
            placeholder="请选择固定属性值"
            v-model="item.rule.fixed_value"
            style="width: 200px"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </template>
        <template v-else>
          <el-input v-model="item.rule.fixed_value" placeholder="请输入固定属性值"></el-input>
        </template>
      </div>
    </div>
  </el-form-item>
</template>
<style lang="scss">
.connect-form {
  .el-dialog__body {
    padding-top: 10px;
  }
}
.button-flex {
  // margin-top: 40px;
  display: flex;
  justify-content: center;
}
.specify-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .el-input {
    width: 200px;
  }
}
.specify-tips {
  line-height: 100%;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
}
</style>
