<script setup>
import api from '../api'
import Upload from '@/components/Upload.vue'
import TiandituPicker from '@/components/TiandituPicker.vue'

onMounted(() => {
  getInfo()
})

const infoData = ref({})

const model = ref({})

const formRef = ref(null)

const showModal = ref(false)

const rules = {
  name: {
    required: true,
    message: '请输入店铺名称',
    trigger: 'blur',
  },
  head_photo: {
    required: true,
    type: 'array',
    message: '请输入上传店铺封面图',
    trigger: 'blur',
  },
  bank: {
    required: true,
    message: '请输入银行名称',
    trigger: 'blur',
  },
  bank_card: {
    required: true,
    message: '请输入银行卡号',
    trigger: 'blur',
  },
  bank_name: {
    required: true,
    message: '请输入账户名称',
    trigger: 'blur',
  },
  bank_user: {
    required: true,
    message: '请输入法定代表人',
    trigger: 'blur',
  },
  img: {
    required: true,
    type: 'array',
    message: '请输入上传店铺轮播图',
    trigger: 'blur',
  },
  address: {
    required: true,
    message: '请输入店铺详细地址',
    trigger: 'blur',
  },
  lt: {
    required: true,
    message: '请查找店铺经纬度',
  },
  week: {
    required: true,
    type: 'array',
    message: '请选择营业日期',
  },
  week_start: {
    required: true,
    message: '请选择营业开始时间',
  },
  week_end: {
    required: true,
    message: '请选择营业结束时间',
  },
  mobile: {
    required: true,
    message: '请输入店铺手机号',
  },
}

const days = ref([
  { label: '周一', value: '1' },
  { label: '周二', value: '2' },
  { label: '周三', value: '3' },
  { label: '周四', value: '4' },
  { label: '周五', value: '5' },
  { label: '周六', value: '6' },
  { label: '周日', value: '7' },
])

const getInfo = async () => {
  const res = await api.getMerchantInfo()
  infoData.value = res.data.data
  model.value = {
    ...res.data.data,
    head_photo: [{ url: res.data.data.head_photo, status: 'finished', id: 1 }],
    img: res.data.data.img
      .split(',')
      .map((item, index) => ({ url: item, status: 'finished', id: index })),
    lt: `${res.data.data.lat},${res.data.data.lon}`,
    week: res.data.data.week.length === 0 ? [] : res.data.data.week.split(','),
    week_start: res.data.data.week_start.length === 0 ? '00:00:00' : res.data.data.week_start,
    week_end: res.data.data.week_end.length === 0 ? '00:00:00' : res.data.data.week_end,
  }
}

// 选中位置触发该函数
window.addEventListener('message', (res) => {
  model.value.lt = `${res.data?.latlng?.lat},${res.data?.latlng?.lng}`
  model.value.lat = res.data?.latlng?.lat
  model.value.lon = res.data.latlng?.lng
  showModal.value = false
})

const confirm = (data) => {
  model.value.lt = `${data.latlng.lat},${data.latlng.lng}`
  model.value.lat = data.latlng.lat
  model.value.lon = data.latlng.lng
  showModal.value = false
}

const submit = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const data = {
        ...model.value,
        head_photo: model.value.head_photo[0].url,
        img: model.value.img.map((item) => item.url).join(','),
        lat: model.value.lat.toString(),
        lon: model.value.lon.toString(),
        week: model.value.week.join(','),
      }
      delete data.lt
      const res = await api.updateMerchantInfo(data)
      $message.success(res.msg)
      await getInfo()
    }
  })
}
</script>

<template>
  <CommonPage show-footer :title="$route.title">
    <n-tabs type="line" animated>
      <n-tab-pane name="1" tab="基本信息">
        <div>商户名称: {{ infoData.name }}</div>
        <div>负责人手机号码: {{ infoData.phone }}</div>
        <!-- <div>经营类目: {{ infoData.scope }}</div> -->
        <div>入驻时间: {{ infoData.add_time }}</div>
      </n-tab-pane>
      <n-tab-pane name="2" tab="店铺信息">
        <!-- {{ model }} -->
        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="24" label="店铺封面图：" path="head_photo">
              <Upload v-model:list="model.head_photo" :max="1" />
            </n-form-item-gi>
            <n-form-item-gi :span="24" label="店铺轮播图：" path="img">
              <Upload v-model:list="model.img" :max="5" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="店铺号码：" path="mobile">
              <n-input v-model:value="model.mobile" placeholder="请输入店铺号码" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="法定代表人：" path="bank_user">
              <n-input v-model:value="model.bank_user" placeholder="请输入法定代表人" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="账户名称：" path="bank_name">
              <n-input v-model:value="model.bank_name" placeholder="请输入账户名称" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="开户银行：" path="bank">
              <n-input v-model:value="model.bank" placeholder="请输入开户银行" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="银行卡号：" path="bank_card">
              <n-input v-model:value="model.bank_card" placeholder="请输入银行卡号" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="营业日期：" path="week">
              <n-select v-model:value="model.week" multiple :options="days" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="营业开始时间：" path="week_start">
              <n-time-picker
                v-model:formatted-value="model.week_start"
                value-format="HH:mm:ss"
                clearable
              />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="营业结束时间：" path="week_end">
              <n-time-picker
                v-model:formatted-value="model.week_end"
                value-format="HH:mm:ss"
                clearable
              />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="店铺名称：" path="name">
              <n-input v-model:value="model.name" placeholder="请输入店铺名称" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="店铺详细地址：" path="address">
              <n-input v-model:value="model.address" placeholder="请输入店铺详细地址" />
            </n-form-item-gi>
            <n-form-item-gi :span="15" label="店铺经纬度：" path="lt">
              <n-input-group>
                <n-input
                  v-model:value="model.lt"
                  placeholder="请查找店铺经纬度"
                  :style="{ width: '100%' }"
                />
                <n-button type="primary" @click="showModal = true">查找位置</n-button>
              </n-input-group>
            </n-form-item-gi>
            <n-form-item-gi :span="15">
              <div class="m-auto">
                <n-button type="primary" w-100 @click="submit">提交</n-button>
              </div>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-tab-pane>
      <!-- <n-tab-pane name="3" tab="功能信息">开发中</n-tab-pane> -->
    </n-tabs>
    <!-- h5地图 -->
    <n-modal v-if="showModal" v-model:show="showModal">
      <n-card
        style="width: 600px; height: auto"
        title="查找地图位置"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <TiandituPicker @confirm="confirm" @cancel="showModal = false" />
      </n-card>
    </n-modal>
  </CommonPage>
</template>

<style scoped lang="scss"></style>
