<script setup>
import { ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import { dbl_edit, dbl_preview, upload_file } from './api'
import request from '@/utils/request'

function getFullUrl(str) {
  return /https?:\/\//.test(str) ? str : `${window.GLOBAL_CONFIG.oss}/${str}`
}

const loading = ref(false)
const ruleForm = ref({
  jyj_name: '',
  tel_number: '',
  ewm_img: '',
  email: '',
  dw_address: '',
  cz_number: '',
})
const ruleForm1 = ref({
  jyj_name: '',
  tel_number: '',
  ewm_img: '',
  email: '',
  dw_address: '',
  cz_number: '',
})
const rules = reactive({
  jyj_name: [{ required: true, message: '请输入教育局名称', trigger: 'blur' }],
  dw_address: [{ required: true, message: '请输入单位地址', trigger: 'blur' }],
})
const fileList = ref([])
function initDetailInfo() {
  const data = {
    ai_id: '1',
  }
  try {
    dbl_preview(data).then((res) => {
      ruleForm.value = JSON.parse(res.data.one_info.ai_position_json)
      ruleForm1.value = JSON.parse(res.data.one_info.ai_position_json)
      fileList.value = [
        {
          url: getFullUrl(ruleForm.value.ewm_img),
        },
      ]
    })
  }
  catch (error) {
    console.log(error)
  }
}
initDetailInfo()
const ruleFormRef = ref(null)
const handleEdit = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      const data = ruleForm.value
      const a = {
        ai_id: '1',
        ad_info: {
          ai_position_json: JSON.stringify(data),
        },
      }
      const reg_ph
        = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (
        ruleForm.value.tel_number != ''
        && !reg_ph.test(ruleForm.value.tel_number)
      ) {
        ruleForm.value.tel_number = ''
        return ElMessage.error('请输入正确的手机号')
      }

      const reg_cz = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/
      if (
        ruleForm.value.cz_number != ''
        && !reg_cz.test(ruleForm.value.cz_number)
      ) {
        ruleForm.value.cz_number = ''
        return ElMessage.error('请输入正确的传真号码')
      }

      const reg_email
        = /^(?=^.{3,256}$)^([\w\-]+([\.][\w\-]+)*)@[a-zA-Z0-9][a-zA-Z0-9\-]*[\.][A-Za-z]{2,6}$/
      if (ruleForm.value.email != '' && !reg_email.test(ruleForm.value.email)) {
        ruleForm.value.email = ''
        return ElMessage.error('请输入正确的电子邮箱')
      }
      dbl_edit(a).then((res) => {
        if (res.code == 1) {
          ElMessage.success('信息已保存成功！')
          initDetailInfo()
        }
        else {
          ElMessage.error('操作失败')
        }
      })
      loading.value = false
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

const mainFileData = ref(['png', 'jpg', 'jpeg'])
const mainFileSize = ref(500)
const mainTip = ref('')
function handleMainChange(file) {
  console.log(file, 1111)
  const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
  const isJPG = mainFileData.value.includes(fileType)
  const sizeLimit = file.size / 1024 < mainFileSize.value
  if (!sizeLimit)
    mainTip.value = '上传文件不能超过500KB'

  if (isJPG && sizeLimit)
    fileList.value = [file]
  else fileList.value = []

  if (fileList?.value.length == 0)
    return false
  upload_file(file.raw).then((res) => {
    if (res.code == 1)
      ruleForm.value.ewm_img = res.data.url
    else mainTip.value = '上传失败'
  })
}
function handleRemove() {
  fileList.value = []
  ruleForm.value.ewm_img = ''
}
</script>

<template>
  <div class="card h-full relative">
    <div
      class="flex justify-between mt-5 mb-7 pb-20px"
      style="border-bottom: 1px solid #c1cbdb"
    >
      <div class="text-lg font-medium leading-normal">
        网页底部呈现
      </div>
      <div class="flex">
        <el-button
          class="_ align-middle"
          type="primary"
          @click="handleEdit(ruleFormRef)"
        >
          保存
        </el-button>
      </div>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="pb-120px grid grid-rows-2"
    >
      <div class="flex justify-evenly">
        <el-form-item label="教育局名称" class="w-480px" prop="jyj_name">
          <el-input
            v-model="ruleForm.jyj_name"
            class="h-40px"
            maxlength="12"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="单位地址" class="w-480px" prop="dw_address">
          <el-input
            v-model="ruleForm.dw_address"
            class="h-40px"
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
      </div>
      <div class="flex justify-evenly">
        <el-form-item label="联系电话" class="w-480px">
          <el-input v-model="ruleForm.tel_number" class="h-40px" />
        </el-form-item>
        <el-form-item label="传真号码" class="w-480px">
          <el-input v-model="ruleForm.cz_number" class="h-40px" />
        </el-form-item>
      </div>
      <div class="flex justify-evenly">
        <el-form-item label="公众号二维码" class="w-480px">
          <el-upload
            v-model:file-list="fileList"
            list-type="picture"
            accept=".jpg,.png,.jpeg"
            :limit="1"
            :auto-upload="false"
            :on-remove="handleRemove"
            :on-change="handleMainChange"
          >
            <el-button type="primary">
              点击上传
            </el-button>
            <template #tip>
              <div class="el-upload__tip" style="color: #f35421">
                {{ mainTip }}
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="邮箱" class="w-480px">
          <el-input v-model="ruleForm.email" class="h-40px" />
        </el-form-item>
      </div>
    </el-form>
    <footer class="footer absolute">
      <div class="main">
        <div class="w-110px ml-57px mt-25px">
          <img
            :src="getFullUrl(ruleForm1.ewm_img)"
            class="w-100px h-110px"
            alt=""
          >
          <h3 class="info font-size-14">
            公众号二维码
          </h3>
        </div>
        <div class="w-320px ml-71px mt-13px truncate">
          <h3 class="text-20px text-hex-fff mb-21px">
            联系我们
          </h3>
          <h3 class="mt-4px f-info f-1 truncate">
            {{ ruleForm1.jyj_name }}
          </h3>
          <h3 class="mt-4px f-info f-2 truncate">
            {{ ruleForm1.tel_number }}
          </h3>
          <h3 class="mt-4px f-info f-3 truncate">
            {{ ruleForm1.email }}
          </h3>
          <h3 class="mt-4px f-info f-4 truncate">
            {{ ruleForm1.dw_address }}
          </h3>
        </div>
        <div
          class="w-430px h-100px ml-68px mt-45px color-1 text-14px leading-20px"
        >
          技术支持：苏州博智电子科技有限公司<br>
          备案信息：苏ICP备15025316号-1 苏公网安备 32050702010915号<br>
          备案登记网址：<a
            href="https://beian.miit.gov.cn"
            target="_blank"
            class="color-1"
          >https://beian.miit.gov.cn</a><br>
          违法和不良信息公开举报电话：0573-89393295<br>
          举报邮箱：1499585689@qq.com
        </div>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/button.scss";
@use "~/styles/message-box.scss";
:deep() .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #3f3f44;
}
:deep() .el-input__wrapper {
  box-shadow: none;
  background: #f7f7f7;
  border-radius: 8px;
}
.footer {
  width: 100%;
  height: 250px;
  background: #1f232f;
  left: -12px;
  .main {
    //  width: 1200px;
    margin: 0 auto;
    padding-top: 35px;
    display: flex;
  }
  .info {
    margin-top: 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
  }
  .f-info {
    font-size: 18px;
    color: #fff;
    padding-left: 35px;
    &.f-1 {
      background: url("@/assets/images/f-1.png") left no-repeat;
      background-size: 19px 18px;
    }
    &.f-2 {
      background: url("@/assets/images/f-2.png") left no-repeat;
      background-size: 19px 19px;
    }
    &.f-3 {
      background: url("@/assets/images/f-3.png") left no-repeat;
      background-size: 19px 15px;
    }
    &.f-4 {
      background: url("@/assets/images/f-4.png") left no-repeat;
      background-size: 15px 19px;
    }
  }
  .color-1 {
    color: rgba(255, 255, 255, 0.5);
  }
}
:deep() .el-input .el-input__count .el-input__count-inner {
  background: none;
}
:deep() .el-form-item__content {
  display: inline;
}
</style>
