<template>
  <el-form :model="formData" label-width="120px" 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="name">
          <el-input v-model="formData.name" placeholder="请输入小程序名称" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="formData.company" placeholder="请输入所属公司" />
        </el-form-item>
        <el-form-item label="对应剧场名称" prop="play_name">
          <el-input v-model="formData.play_name" clearable size="large" placeholder="请输入对应剧场名称" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select class="w-full" v-model="formData.type" @change="appletTypeChange" filterable clearable
            placeholder="选择类型">
            <el-option v-for="item in appletType" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="绑定支付信息" prop="pay_merchant_id" v-if="formData.type">
          <el-select class="w-full" v-model="formData.pay_merchant_id" filterable clearable placeholder="选择绑定支付信息">
            <el-option v-for="item in paymentInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="APP ID" prop="appid">
          <el-input v-model="formData.appid" clearable size="large" placeholder="请输入APP ID" />
        </el-form-item>
        <el-form-item label="APP 密钥" prop="appsecret">
          <el-input v-model="formData.appsecret" clearable size="large" placeholder="请输入APP 密钥" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
        </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 { useCreate } from '@/hook/curd/useCreate';
import { useShow } from '@/hook/curd/useShow';
import type { FormInstance, FormRules } from 'element-plus'
import { manageMiniprogramStore, manageMiniprogramTypelist, manageMiniprogramShow, manageMiniprogramUpdate } from '@/api/applet/index'
import { managePayConfigList } from '@/api/iPayment/index'
const ruleForm = ref<FormInstance>()
import { onMounted, ref } from 'vue';
const props = defineProps({
  primary: String | Number,
});
const formData = ref({ status: 2, miniProgramIds: [] })
const rules = reactive({
  type: [{ required: true, message: '请选择类型' }],
  pay_merchant_id: [{ required: true, message: '请选择绑定支付信息' }],
  appid: [
    {
      required: true,
      message: '请输入APP ID',
      trigger: 'blur'
    },
    { max: 32, message: '至多输入32个字符', trigger: 'blur' }
  ],
  remark: [
    {
      required: false,
      message: '请输入备注',
      trigger: 'blur'
    }
  ],
  appsecret: [
    {
      required: true,
      message: '请输入APP 密钥',
      trigger: 'blur'
    },
    { max: 64, message: '至多输入64个字符', trigger: 'blur' }
  ],
  name: [
    {
      required: true,
      message: '请输入小程序名称',
      trigger: 'blur'
    },
    { max: 15, message: '至多输入15个字符', trigger: 'blur' }
  ],
  company: [
    {
      required: true,
      message: '请输入所属公司',
      trigger: 'blur'
    },
    { max: 30, message: '至多输入30个字符', trigger: 'blur' }
  ],
  play_name: [
    {
      required: true,
      message: '请输入对应剧场名称',
      trigger: 'blur'
    },
    { max: 15, message: '至多输入15个字符', trigger: 'blur' }
  ]
});
const loading = ref(false)
const appletType = ref([])
const paymentInfo = ref([])


const appletTypeChange = (e) => {
  initPaymentInfo({ limit: 100000 })
}

const initPaymentInfo = (params?: object) => {
  managePayConfigList({ miniprogram_type: formData.value.type, ...params }).then(res => {
    console.log(res, 'channelMiniprogramListchannelMiniprogramList');
    paymentInfo.value = res.data
  })
}
const initAppletType = () => {
  manageMiniprogramTypelist().then(res => {
    console.log(res, 'channelMiniprogramListchannelMiniprogramList');
    appletType.value = res.data
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  console.log(formData.value, 'formData.valueformData.value');
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        if (props.primary) {
          manageMiniprogramUpdate(props.primary, { ...formData.value }).then(res => {
            console.log(res);
            ElMessage.success(res.message)
            emit('close')
          })
        } else {
          manageMiniprogramStore({ ...formData.value }).then(res => {
            console.log(res);
            ElMessage.success(res.message)
            emit('close')
          })
        }
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}

if (props.primary) {
  manageMiniprogramShow(props.primary).then(res => {
    console.log(res, 'props.primary');
    formData.value = res.data
    initPaymentInfo({ limit: 100000 })
  })
}

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