<template>
  <div class="content">
    <el-card class="card">
      <template #header>
        <div class="head">
          <div class="title">
            {{ t('R-ShopInfo') }}
          </div>
          <div class="title-icon">
            <el-icon @click="edit = true"><Edit /></el-icon>
          </div>
        </div>
      </template>
      <el-form ref="addFormRef" :model="addForm" :rules="formRules" label-width="120px">
        <el-form-item :label="`${t('ShopManage.t1')}:`" prop="merchantName">
          <el-input
            v-model.trim="addForm.merchantName"
            disabled
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t7')}:`" prop="firstName">
          <el-input
            v-model.trim="addForm.firstName"
            :disabled="!edit"
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t6')}:`" prop="lastName">
          <el-input
            v-model.trim="addForm.lastName"
            :disabled="!edit"
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t2')}:`" prop="email">
          <el-input
            v-model.trim="addForm.email"
            :disabled="!edit"
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t3')}:`" prop="mobile">
          <el-input
            v-model.trim="addForm.mobile"
            :disabled="!edit"
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t4')}:`" prop="country">
          <el-select
            v-model="addForm.country"
            :placeholder="t('Placeholder.Choose')"
            clearable
            filterable
            :disabled="!edit"
          >
            <el-option
              v-for="(item, index) in country"
              :key="index"
              :label="item.enName"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="`${t('ShopManage.t5')}:`" prop="address">
          <el-input
            v-model.trim="addForm.address"
            :disabled="!edit"
            :placeholder="t('Placeholder.Input')"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template v-if="edit" #footer>
        <el-button type="primary" @click="saveInfo" :loading="addLoading">{{
          t('Btn.Save')
        }}</el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { computed, inject, onMounted, reactive, ref } from 'vue'
  import ServiceMarket from '@/service/marketing'
  import Service from '@/service/user'
  import Config from '@/config'
  import { useI18n } from 'vue-i18n'

  const { Code } = Config
  const formRef = ref(null)
  const addFormRef = ref(null)
  const addForm = reactive({})
  const country = ref(null)
  const addLoading = ref(false)

  const pigeon = inject('pigeon')
  const Session = inject('session')
  const { t } = useI18n()
  const formRules = computed(() => ({
    merchantName: [
      {
        required: true,
        message: t('ShopManage.p1'),
        trigger: 'blur',
      },
    ],
    email: [
      {
        required: true,
        message: t('ShopManage.p2'),
        trigger: 'blur',
      },
    ],
    mobile: [
      {
        required: true,
        message: t('ShopManage.p3'),
        trigger: 'blur',
      },
    ],
    country: [
      {
        required: true,
        message: t('ShopManage.p4'),
        trigger: 'change',
      },
    ],
    address: [
      {
        required: true,
        message: t('ShopManage.p5'),
        trigger: 'blur',
      },
    ],
    lastName: [
      {
        required: true,
        message: t('ShopManage.p6'),
        trigger: 'blur',
      },
    ],
    firstName: [
      {
        required: true,
        message: t('ShopManage.p7'),
        trigger: 'blur',
      },
    ],
  }))
  const edit = ref(false)

  const user = computed(() => {
    const userStr = Session.Get('user', true)
    return userStr ? JSON.parse(userStr) : {}
  })
  // 获取国家列表
  const getCountry = async () => {
    try {
      let res = await ServiceMarket.Country({})
      if (res.code == Code.StatusOK) {
        country.value = res.data
      } else {
        pigeon.MessageError(res.msg || t('Msg.Error'))
      }
    } catch (error) {
      console.error('获取国家列表失败:', error)
      pigeon.MessageError(t('Msg.NetworkError'))
    }
  }

  const getShopInfo = async () => {
    const params = {
      id: user.value.merchantId,
    }
    const res = await Service.getShopManageInfo(params)
    console.log(res)
    if (res.code == Code.StatusOK) {
      Object.assign(addForm, { ...res.data })
    }
  }
  const saveInfo = async () => {
    const valid = await addFormRef.value.validate()
    if (!valid) return
    addLoading.value = true
    try {
      const params = { ...addForm }
      const res = await Service.shopManageEdit(params)

      if (res.code == Code.StatusOK) {
        await getShopInfo()
        edit.value = false
      } else {
        pigeon.MessageError(res.msg)
      }
      addLoading.value = false
    } catch (error) {
      console.error(error)
    }
  }

  onMounted(() => {
    getCountry()
    getShopInfo()
  })
</script>

<style scoped lang="scss">
  .content {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    overflow: hidden;
    overflow-y: auto;
    padding: 50px 0;
    display: flex;
    //align-items: center;
    justify-content: center;
  }
  .card {
    width: 900px;
    overflow: hidden;
    overflow-y: auto;
  }
  .head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .title {
      font-weight: bold;
      font-size: 16px;
    }
    .title-icon {
      position: absolute;
      right: 0;
      display: flex;
      align-self: flex-end;
      justify-self: flex-end;
      font-size: 20px;
      cursor: pointer;
    }
  }
</style>
