<template>
  <el-form :model="formData" label-width="100px" ref="ruleForm" :rules="rules" v-loading="loading" class="pr-4">
    <div class="flex flex-row justify-between">
      <div class="w-full">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请填写邮箱" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请填写用户名" />
        </el-form-item>
        <el-form-item label="密码" v-if="!props.primary" prop="password">
          <el-input v-model="formData.password" clearable type="password" autocomplete="new-password" size="large"
            placeholder="密码" show-password :prefix-icon="Lock" class="h-12 text-base" />
        </el-form-item>
        <el-form-item label="确认密码" v-if="!props.primary" prop="repassword">
          <el-input v-model="formData.repassword" clearable type="password" autocomplete="new-password" size="large"
            placeholder="确认密码" show-password :prefix-icon="Lock" class="h-12 text-base" />
        </el-form-item>
        <el-form-item label="绑定小程序" prop="miniProgramIds">
          <el-select class="w-full" v-model="formData.miniProgramIds" filterable multiple clearable placeholder="选择小程序">
            <el-option v-for="item in applet" :key="item.miniprogram_id" :label="item.name"
              :value="item.miniprogram_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="formData.status" :active-value="1" :inactive-value="2" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-tooltip placement="top">
            <template #content> 鼠标移到账号上面显示备注内容<br /> </template>
            <el-input v-model="formData.remark" placeholder="请填写备注" type="textarea" />
          </el-tooltip>
        </el-form-item>
      </div>
    </div>
    <div class="flex justify-end">
      <el-button type="primary" @click="submitForm(ruleForm)">{{ $t('system.confirm') }}</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { Lock, Message, Key } from '@element-plus/icons-vue'
import { useCreate } from '@/hook/curd/useCreate';
import { useShow } from '@/hook/curd/useShow';
import { advertiserGetAdvertiser, advertiserAdd, advertiserUpdateAdvertiser } from '@/api/advertiser/index'
import type { FormInstance, FormRules } from 'element-plus'
import { channelMiniprogramList } from '@/api/applet/index'
const ruleForm = ref<FormInstance>()
import { onMounted, ref } from 'vue';
const props = defineProps({
  primary: String | Number,
});
const applet = ref([])
const formData = ref({ status: 1, miniProgramIds: [] })
//自定义校验规则
const validatePasswordConfirmation = (
  rule: any,
  value: any,
  callback: any
) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== formData.value.password) {
    console.log(formData.value.password, 'ruleForm.password');
    callback(new Error('两次密码不匹配'));
  } else {
    callback();
  }
};
const rules = reactive({
  miniProgramIds: [{ required: true, message: '请选择小程序' }],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: '邮箱格式不正确',
      trigger: 'blur'
    }
  ],
  remark: [
    {
      required: false,
      message: '请输入备注',
      trigger: 'blur'
    }
  ],
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/,
      message:
        '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-20之间'
    }
  ],
  repassword: [
    {
      required: true,
      message: '请再次输入密码',
      trigger: 'blur'
    },
    { validator: validatePasswordConfirmation, trigger: 'blur' }
  ]
});
const loading = ref(false)

const initApplet = () => {
  channelMiniprogramList().then(res => {
    console.log(res, 'channelMiniprogramListchannelMiniprogramList');
    applet.value = res.data
  })
}

const passwordRules = [
  {
    required: true,
    message: '密码必须填写'
  },
  {
    pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/,
    message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-20之间'
  }
];
const submitForm = (formEl: FormInstance | undefined) => {
  console.log(formData.value, 'formData.valueformData.value');
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        let api;
        if (props.primary) {
          api = advertiserUpdateAdvertiser
        } else {
          api = advertiserAdd
        }
        api({ ...formData.value }).then(res => {
          console.log(res);
          ElMessage.success(res.message)
          emit('close')
        })
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}

if (props.primary) {
  advertiserGetAdvertiser({ id: props.primary }).then(res => {
    console.log(res, 'props.primary');
    formData.value = res.data
  })
}

const emit = defineEmits(['close']);
const cpList = ref();
onMounted(() => {
  initApplet()
});
</script>
