<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { submitScheduleMember } from '../api'
import type { ScheduleMember } from '../types'
import type { FormInstance } from 'element-plus'

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

const userStore = useUserStore()

const OtherFields = defineAsyncComponent(() => import('../components/OtherFields.vue'))

const props = defineProps<{ data?: ScheduleMember }>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

// const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = $ref<any>({
  experiment_id: '',
  connect_id: '',
  size: 1000,
  cover_type: 1,
  name: 1,
  name_value: '',
  status: 1,
  gender: 100,
  mobile: 1,
  create_data: '',
  type_name: '',
})
watchEffect(() => {
  const mergeJson = function (target: any, source: any) {
    if (source) {
      Object.keys(target).forEach(function (key) {
        if (source.hasOwnProperty(key)) {
          if (key !== 'other_fields') {
            target[key] = source[key]
          }
        }
      })
    }
  }
  mergeJson(ruleForm, props.data)
})

const submitForm = async (formEl: FormInstance | undefined, bl: string) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.create_data = bl
      if (props.data?.other_fields) {
        ruleForm.other_fields = JSON.stringify(
          props.data?.other_fields.reduce((a: any, b: any) => {
            a[b.id] = { type: b.rule.type, fixed_value: b.rule.fixed_value, rand_value: b.rule.rand_value }
            return a
          }, {})
        )
      }
      submitScheduleMember(ruleForm).then((res: any) => {
        if (res.code === 0) {
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          emit('update:modelValue', false)
        } else {
          ElMessage({
            message: res.message,
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const rules = [{ required: true }]

const genderWoman = ref(0)
watchEffect(() => {
  if (ruleForm.gender > 100) ruleForm.gender = 100
  if (ruleForm.gender < 0) ruleForm.gender = 0
  genderWoman.value = 100 - ruleForm.gender
})
</script>

<template>
  <el-dialog
    style="width: 800px"
    class="data-form"
    title="自动生成用户数据"
    :close-on-click-modal="false"
    @closed="$emit('update:modelValue', false)">
    <div class="button-flex">
      <el-form
        :disabled="userStore.role?.id === 1"
        label-suffix="："
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
        status-icon>
        <el-form-item label="请输入需要生成的数据量" :rules="rules">
          <el-radio-group v-model="ruleForm.size">
            <el-radio :value="1000">1000</el-radio>
            <el-radio :value="3000">3000</el-radio>
            <el-radio :value="5000">5000</el-radio>
            <el-radio :value="10000">10000</el-radio>
          </el-radio-group>
          <span style="color: #ccc; font-size: 12px; line-height: 100%"
            >注意：为了保障系统性能，您最多只能导入10000条数据</span
          >
        </el-form-item>
        <el-form-item label="请选择数据覆盖形式：" :rules="rules">
          <el-radio-group v-model="ruleForm.cover_type">
            <el-radio :value="1">全新覆盖</el-radio>
            <el-radio :value="2">去重追加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider />
        <el-form-item label="来源链接" :rules="rules">
          {{ ruleForm.type_name }}
        </el-form-item>
        <el-form-item label="姓名" :rules="rules">
          <el-radio-group v-model="ruleForm.name">
            <el-radio :value="1">随机</el-radio>
            <el-radio :value="2">固定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.name === 2" label="固定姓名" :rules="rules">
          <el-input v-model="ruleForm.name_value" placeholder="请输入固定姓名"></el-input>
        </el-form-item>
        <el-form-item label="状态" :rules="rules">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :value="1">生效</el-radio>
            <el-radio :value="2">失效</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="性别" :rules="rules">
          <!-- <el-radio-group v-model="ruleForm.gender">
            <el-radio :value="1">随机</el-radio>
            <el-radio :value="2">男</el-radio>
            <el-radio :value="3">女</el-radio>
          </el-radio-group> -->
          <div>
            <div style="display: flex">男&nbsp;&nbsp;<el-input v-model="ruleForm.gender"></el-input>&nbsp;&nbsp;%</div>
            <div style="display: flex; margin-top: 10px">
              女&nbsp;&nbsp;<el-input v-model="genderWoman"></el-input>&nbsp;&nbsp;%
            </div>
          </div>
        </el-form-item>
        <el-form-item label="手机号吗" :rules="rules">
          <el-radio-group v-model="ruleForm.mobile">
            <el-radio :value="1">随机</el-radio>
          </el-radio-group>
        </el-form-item>
        <OtherFields :data="props.data?.other_fields || []"></OtherFields>
        <el-form :model="ruleForm">
          <el-form-item style="justify-content: center">
            <div style="justify-content: center; display: flex; width: 100%">
              <el-button @click="$emit('update:modelValue', false)">取消</el-button>
              <el-button type="primary" @click="submitForm(ruleFormRef, 'false')"> 保存 </el-button>
              <el-button type="primary" @click="submitForm(ruleFormRef, 'true')"> 提交生成数据 </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-form>
    </div>
  </el-dialog>
</template>
<style lang="scss">
.connect-form {
  .el-dialog__body {
    padding-top: 10px;
  }
}
.button-flex {
  // margin-top: 40px;
  display: flex;
  justify-content: center;
}
</style>
