<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
    <el-breadcrumb-item to="/ContactUs'">联系我们</el-breadcrumb-item>
  </el-breadcrumb>
  <el-form ref="formRef" :model="formData" :rules="rules">
    <el-row>

      <el-col :span="24" style="display: none;">
        <el-form-item :label-width="labelWidth" label="地址" prop="contact_us_address">
          <el-input v-model='formData.contact_us_address' type="textarea" :rows="5" placeholder='请输入地址'></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="座机电话" prop="contact_us_phone">
          <el-input v-model='formData.contact_us_phone' type="text" placeholder='请输入座机电话'></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="邮箱" prop="contact_us_mail">
          <el-input v-model='formData.contact_us_mail' type="text" placeholder='请输入邮箱'></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label-width="labelWidth" label="手机号码" prop="contact_us_mobile_phone">
          <el-input v-model='formData.contact_us_mobile_phone' type="text" placeholder='请输入手机号码'></el-input>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row>
      <el-button type="primary" class="sus_button" @click="save(formRef)">
        保存
      </el-button>
    </el-row>
  </el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import { getContactUs, editContactUs } from "~/service/contact_us";
import { useLoginStore } from "~/store";

const store = useLoginStore();
const headers = {
  Accept: "application/json",
  ...store.headers,
};

let formData = ref({
  contact_us_address: "",
  contact_us_phone: "",
  contact_us_mail: "",
  contact_us_mobile_phone: "",
});



const uoloadData = ref({
  dirName: "ContactUs"
})

//验证规则
const rules = reactive({
  contact_us_address: [
    {
      required: true,
      message: '地址不能为空'
    }
  ],
  contact_us_phone: [
    {
      required: true,
      message: '座机电话不能为空'
    }
  ],
  contact_us_mail: [
    {
      required: true,
      message: '邮箱不能为空'
    }
  ],
  contact_us_mobile_phone: [
    {
      required: true,
      message: '手机号码不能为空'
    }
  ],

});

const labelWidth = 200;
const formRef = ref();

//获取
const getContent = async () => {
  const { code, data } = await getContactUs();
  if (code == 0) {
    formData.value = data;
  }
};

getContent()

//保存
const save = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return;
    }

    const { code } = await editContactUs(formData.value);
  });
};

</script>
<style lang="scss" scoped>
.sus_button {
  width: 300px;
  height: 50px;
  margin: 20px auto;
}

.upLoadEl {
  :deep(.el-upload-list__item) {
    height: 200px;
    width: 300px;
  }

  :deep(.el-upload-list__item-thumbnail) {
    object-fit: contain;
  }
}
</style>