<template>
  <div class="container-wrapper">
    <Panel title="基础信息">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto"
               class="demo-ruleForm" status-icon label-position="top">
        <div class="form">
          <div class="left">
            <el-form-item prop="common_name" label="机构名称">
              <el-input v-model="ruleForm.common_name"/>
            </el-form-item>
            <el-form-item prop="social_certUrl" label="电子凭证接口">
              <el-input v-model="ruleForm.social_certUrl"/>
            </el-form-item>
            <el-form-item prop="social_cainfo" label="数字签名">
              <el-input v-model="ruleForm.social_cainfo"/>
            </el-form-item>
            <el-form-item prop="social_fixmedinsName" label="定点机构名称">
              <el-input v-model="ruleForm.social_fixmedinsName"/>
            </el-form-item>
          </div>
          <div class="center">
            <el-form-item prop="social_insuplcAdmdvs" label="机构简称">
              <el-input v-model="ruleForm.common_sortName"/>
            </el-form-item>
            <el-form-item prop="social_mdtrtareaAdmvs" label="就医区域划分">
              <el-input v-model="ruleForm.social_mdtrtareaAdmvs"/>
            </el-form-item>
            <el-form-item label="logo上传">
              <UpLoad v-model="ruleForm.logoUrl" ref="uploadRef" @uploadSuccess="uploadSuccess"></UpLoad>
            </el-form-item>
          </div>
          <div class="right">
            <el-form-item prop="social_fixmedinsCode" label="定点机构编码">
              <el-input v-model="ruleForm.social_fixmedinsCode"/>
            </el-form-item>
            <el-form-item prop="social_url" label="医保接口">
              <el-input v-model="ruleForm.social_url"/>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;padding: 0 24px;height: 50px">
          <span class="default-btn" @click="submitForm(ruleFormRef)">保存</span>
        </div>
      </el-form>
    </Panel>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, type FormInstance, type FormRules} from 'element-plus'
import {post} from "@/utils/request.ts";
import Panel from "@/components/common/Panel.vue";
import UpLoad from "@/components/UpLoad.vue";
import {loadConfig} from "@/utils/config.ts";

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
  common_name: '',
  common_sortName: '',
  social_fixmedinsCode: '',
  social_fixmedinsName: '',
  social_insuplcAdmdvs: '',
  social_cainfo: '',
  social_url: "",
  social_certUrl: "",
  logoUrl: "",
})
const uploadRef = ref<any>()
onMounted(async () => {
  post("common/config/list", null).then((list: any) => {
    for (let i = 0; i < list.length; i++) {
      ruleForm[list[i].k] = list[i].val
    }
  })
})
const rules = reactive<FormRules<any>>({
  common_name: {required: true, message: '机构名称不能为空', trigger: 'blur'},
  common_sortName: {required: true, message: '机构简称不能为空', trigger: 'blur'},
  social_fixmedinsCode: {required: true, message: '定点机构编码不能为空', trigger: 'blur'},
  social_fixmedinsName: {required: true, message: '定点机构名称不能为空', trigger: 'blur'},
  social_mdtrtareaAdmvs: {required: true, message: '就医区域划分不能为空', trigger: 'blur'},
  social_cainfo: {required: true, message: '数字签名不能为空', trigger: 'blur'},
  social_url: {required: true, message: '医保接口不能为空', trigger: 'blur'},
  social_certUrl: {required: true, message: '电子平转增接口不能为空', trigger: 'blur'},
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      post("common/config/edit", ruleForm).then((res: any) => {
        ElMessage.success("保存成功")
      })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
//上传图片
const uploadURL = ref<any>()
const uploadSuccess = (url: any) => {
  ruleForm.logoUrl = url
  post("common/config/edit", ruleForm).then(() => {
    ElMessage.success("保存图片成功")
  })
}
</script>
<style scoped lang="scss">
.container-wrapper {
  padding: 0 24px;
  background: #fff;
}

.demo-ruleForm {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;

  .form {
    width: 100%;
    padding: 0 24px;
    display: flex;

    div {
      flex: 1;
      min-width: 0;
    }

    .center {
      margin: 0 24px;
    }
  }
}

:deep(.el-descriptions__label.el-descriptions__cell:not(.is-bordered-label).is-vertical-label) {
  padding-left: 24px;
}

:deep(.el-input__wrapper) {
  height: 42px;
}
</style>
