<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>关于我们</el-breadcrumb-item>
    <el-breadcrumb-item to="/AboutUs'">关于我们</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form ref="formRef" :model="formData" :rules="rules">
    <el-row>
      <el-col :span='24'>
        <el-form-item :label-width="labelWidth" label="语言类型" prop="i18n_lang_type_guid">
          <el-select style="width:150px" v-model="formData.i18n_lang_type_guid" clearable placeholder="请选择"
            @change="changeI18n">
            <el-option v-for="item in i18n_lang_type" :key="item.i18n_lang_type_guid" :label="item.i18n_lang_type_code"
              :value="item.i18n_lang_type_guid"></el-option>
          </el-select>

          <el-button class="copy-to" type="primary" @click="handleCopyTo()"
            :disabled="copyToDisabled">复制到...</el-button>

        </el-form-item>
      </el-col>

      <h1>公司简介</h1>
      <el-col :span='24'>
        <el-form-item :label-width="labelWidth" label="头图" prop="about_us_profile">
          <UploadImage v-model='formData.about_us_profile' :data=uoloadData :limit='1' :fileSize='5' :drag='true'
            :isShowTip='true' />
        </el-form-item>
        <el-form-item :label-width="labelWidth" label='历史' prop="about_us_profile_history">
          <UploadImage v-model='formData.about_us_profile_history' :data=uoloadData :limit='1' :fileSize='5'
            :drag='true' :isShowTip='true' />
        </el-form-item>
      </el-col>

      <el-divider />

      <h1>荣誉资质</h1>
      <el-col :span='24'>
        <el-form-item :label-width="labelWidth" label="头图" prop="about_us_honor">
          <UploadImage v-model='formData.about_us_honor' :data=uoloadData :limit='1' :fileSize='5' :drag='true'
            :isShowTip='true' />
        </el-form-item>

        <el-form-item :label-width="labelWidth" label='更多' prop='about_us_honor_more'>
          <UploadImage v-model='formData.about_us_honor_more' :data=uoloadData :limit='99' :fileSize='5' :drag='true'
            :isShowTip='true' />
        </el-form-item>
      </el-col>

      <el-divider />

      <h1>工厂照片</h1>
      <el-col :span='24'>
        <el-form-item :label-width="labelWidth" label='工厂照片' prop='about_us_factory'>
          <UploadImage v-model='formData.about_us_factory' :data=uoloadData :limit='99' :fileSize='5' :drag='true'
            :isShowTip='true' />
        </el-form-item>
      </el-col>

      <el-divider />

      <h1>展会信息</h1>
      <el-col :span='24'>
        <el-form-item :label-width="labelWidth" label='展会信息' prop='about_us_exhibition'>
          <UploadImage v-model='formData.about_us_exhibition' :data=uoloadData :limit='99' :fileSize='5' :drag='true'
            :isShowTip='true' />
        </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>

  <CopyToDialog v-model="copyToDialogVisible" :locale="formData.i18n_lang_type_guid" :data="formData"
    :done="CopyToDialogDone" />
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { getAboutUs, editAboutUs } from "~/service/about_us";
import { getI18nLangTypeList } from '~/service/i18n_lang_type';
import { useLoginStore } from "~/store";

import CopyToDialog from "./components/CopyToDialog.vue";
const copyToDialogVisible = ref(false);

const store = useLoginStore();

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

const initFormState = {
  about_us_profile: "",
  about_us_profile_history: "",
  about_us_honor: "",
  about_us_honor_more: "",
  about_us_factory: "",
  about_us_exhibition: "",
};
let formData = ref({
  i18n_lang_type_guid: "",
  ...initFormState
});

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

//验证规则
const rules = reactive({
  i18n_lang_type_guid: [
    {
      required: true,
      message: '语言类型不能为空'
    }
  ],
  about_us_profile: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
  about_us_profile_history: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
  about_us_honor: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
  about_us_honor_more: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
  about_us_factory: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
  about_us_exhibition: [
    {
      required: true,
      message: '内容不能为空'
    }
  ],
});

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

const changeI18n = async (val) => {
  getContent(val)
}

//获取
const getContent = async (locale) => {
  const { code, data } = await getAboutUs({ i18n_lang_type_guid: locale });
  if (code == 0) {
    if (!data) {
      formData.value = {
        i18n_lang_type_guid: formData.value.i18n_lang_type_guid,
        ...initFormState
      }
      return
    }
    formData.value = data;
  }
};

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

const CopyToDialogDone = (i18n_lang_type_guid) => {
  formData.value.i18n_lang_type_guid = i18n_lang_type_guid;
  getContent(i18n_lang_type_guid);
}


// 语言类型code
const i18n_lang_type = ref();
async function geti18n_lang_typeList() {
  getI18nLangTypeList({ limit: 9999 }).then((res) => {
    if (res.code == 0) {
      i18n_lang_type.value = res.data
    }
  })
}
geti18n_lang_typeList()

const copyToDisabled = computed(() => {
  return !formData.value.i18n_lang_type_guid;
})

const handleCopyTo = () => {
  copyToDialogVisible.value = true;
}

</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;
  }
}

.copy-to {
  margin-left: 30px;
}
</style>