<template>
  <BasePage>
    <div class="merchant-intro">
      <div class="intro-header">
        <div class="shop-avatar">
          <van-uploader v-model="formData.AvatarUploader" :after-read="uploadShopImg" :max-count="1" upload-icon="plus">
            <div class="avatar-placeholder">
              <van-icon name="photograph" size="20" />
            </div>
          </van-uploader>
        </div>
        <div class="shop-info">
          <div class="name">{{ formData.shopname || '店铺名称' }}</div>
          <div class="phone">{{ formData.cellphone }}</div>
        </div>
      </div>

      <van-form @submit="save">
        <div class="info-section">
          <div class="section-header">
            <span class="section-title">店铺信息</span>
          </div>
          <van-cell-group inset class="info-group">
            <van-field v-model="formData.shopname" label="店铺名称" placeholder="请输入店铺名称" required />
            <van-field v-model="formData.cellphone" label="联系电话" placeholder="请输入联系电话" type="tel" required />
            <van-field v-model="formData.huili" label="惠利比例" placeholder="请输入惠利比例" type="number">
              <template #extra><span style="color:#666">%</span></template>
            </van-field>
          </van-cell-group>
        </div>

        <div class="info-section">
          <div class="section-header">
            <span class="section-title">营业资质</span>
            <span class="readonly-tag">仅展示</span>
          </div>
          <van-cell-group inset class="info-group">
            <van-field v-model="formData.legalpersonname" label="法人姓名" readonly />
            <van-field v-model="formData.legalpersonphone" label="法人手机号" readonly />
            <van-field label="法人身份证照片" readonly>
              <template #input>
                <div v-if="formData.legalidimg && formData.legalidimg.length" class="img-thumb"
                  @click="previewImage(formData.legalidimg[0].url)">
                  <img :src="formData.legalidimg[0].url" />
                </div>
                <span v-else class="empty">暂无</span>
              </template>
            </van-field>
            <van-field label="营业执照照片" readonly>
              <template #input>
                <div v-if="formData.licenseimg && formData.licenseimg.length" class="img-thumb"
                  @click="previewImage(formData.licenseimg[0].url)">
                  <img :src="formData.licenseimg[0].url" />
                </div>
                <span v-else class="empty">暂无</span>
              </template>
            </van-field>
            <van-field v-model="formData.province" label="注册地区" readonly />
          </van-cell-group>
        </div>

        <div class="info-section">
          <div class="section-header">
            <span class="section-title">结算账户</span>
            <span class="readonly-tag">仅展示</span>
          </div>
          <van-cell-group inset class="info-group">
            <van-field v-model="formData.bankrealname" label="账户名称" readonly />
            <van-field v-model="formData.bankcardnumber" label="银行卡号" readonly />
            <!-- <van-field v-model="formData.subbank" label="支行名称" readonly /> -->
            <van-field v-model="formData.bankcellphone" label="银行预留手机号" readonly />
          </van-cell-group>
        </div>

        <div class="btn-wrap">
          <van-button round block type="primary" native-type="submit" :loading="saving" color="#ca2904">
            保存修改
          </van-button>
        </div>
      </van-form>
    </div>
  </BasePage>
</template>

<script>
import { ImagePreview } from 'vant'

export default {
  name: 'MerchantIntroduction',
  data() {
    return {
      saving: false,
      formData: {
        shopname: '',
        shopimg: '',
        AvatarUploader: [],
        huili: 20,
        cellphone: '',
        legalpersonname: '',
        legalpersonphone: '',
        legalidimg: [],
        licenseimg: [],
        province: '',
        bankname: '',
        bankcardnumber: '',
        subbank: '',
        bankcellphone: '',
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$get('/v1/client/DShopsClient').then(res => {
        const data = res.data
        this.formData.shopname = data.shopname
        this.formData.shopimg = data.shopimg
        this.formData.huili = data.feeratio || 20
        this.formData.cellphone = data.cellphone
        this.formData.legalpersonname = data.legalpersonname
        this.formData.legalpersonphone = data.legalpersonphone
        this.formData.province = data.shopprovince + data.shopcity + data.shopcounty
        this.formData.bankrealname = data.bankrealname
        this.formData.bankcardnumber = data.bankcardnumber
        this.formData.subbank = data.subbank
        this.formData.bankcellphone = data.bankcellphone

        if (data.shopimg) {
          this.formData.AvatarUploader = [{ url: this.$file(data.shopimg), isImage: true }]
        }
        if (data.legalpersonidimg) {
          this.formData.legalidimg = [{ url: this.$file(data.legalpersonidimg), isImage: true }]
        }
        if (data.businesslicenseimg) {
          this.formData.licenseimg = [{ url: this.$file(data.businesslicenseimg), isImage: true }]
        }
      })
    },
    uploadShopImg(file) {
      if (!file || !file.file) {
        this.formData.shopimg = ''
        this.formData.AvatarUploader = []
        return
      }
      this.formData.shopimg = file.file
    },
    previewImage(url) {
      ImagePreview([url])
    },
    async save() {
      this.saving = true
      try {
        const fd = new FormData()
        fd.append('shopname', this.formData.shopname)
        fd.append('shopphone', this.formData.cellphone)
        if (this.formData.shopimg instanceof File) {
          fd.append('file', this.formData.shopimg)
        }
        await this.$postForm('/v1/client/DShopsClient/shopinfo', fd)
        this.$showSuccessToast('保存成功')
      } catch (err) {
        this.$showFailToast(err.message || '保存失败')
      } finally {
        this.saving = false
      }
    },
    uploadFile(url, file) {
      const fd = new FormData()
      fd.append('file', file)
      return fetch(`${import.meta.env.VITE_API_URL}${url}`, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${localStorage.getItem('member_token')}` },
        body: fd,
      }).then(res => res.json()).then(res => {
        if (res.status !== 200) throw new Error(res.message)
        return res.data
      })
    }
  },
}
</script>

<style lang="less" scoped>
.merchant-intro {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 8vw;

  .intro-header {
    background: linear-gradient(135deg, #ca2904 0%, #e84a2f 100%);
    padding: 6vw 5.33vw;
    display: flex;
    align-items: center;

    .shop-avatar {
      flex-shrink: 0;

      :deep(.van-uploader) {
        .van-uploader__wrapper {
          .van-uploader__upload {
            width: 18vw;
            height: 18vw;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
          }
        }
      }

      .avatar-img {
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255, 255, 255, 0.4);
      }

      .avatar-placeholder,
      .van-uploader__preview-image {
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .shop-info {
      margin-left: 4vw;
      color: #fff;

      .name {
        font-size: 5.33vw;
        font-weight: bold;
        margin-bottom: 1.5vw;
      }

      .phone {
        font-size: 3.47vw;
        opacity: 0.85;
      }
    }
  }

  .info-section {
    margin-top: 4vw;

    .section-header {
      padding: 0 5.33vw;
      height: 10vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f5f5f5;

      .section-title {
        font-size: 4vw;
        font-weight: 600;
        color: #333;
      }

      .readonly-tag {
        font-size: 3.2vw;
        color: #999;
        background: #e8e8e8;
        padding: 0.8vw 2vw;
        border-radius: 2vw;
      }
    }

    .info-group {
      background: #fff;

      :deep(.van-cell) {
        padding: 0 5.33vw;
        height: 12vw;
        align-items: center;

        &::after {
          left: 5.33vw;
          right: 0;
          border-color: #f0f0f0;
        }
      }

      :deep(.van-field__label) {
        width: 26vw;
        font-size: 3.73vw;
        color: #666;
        white-space: nowrap;
      }

      :deep(.van-field__control) {
        font-size: 3.73vw;
        color: #333;
        text-align: right;

        &::placeholder {
          color: #ccc;
        }
      }

      :deep(.van-field__append) {
        color: #666;
        font-size: 3.73vw;
        padding-left: 4px;
      }

      :deep(.van-field__extra) {
        color: #666;
        font-size: 3.73vw;
      }

      :deep(.van-field__control:disabled) {
        color: #999;
        background: transparent;
      }

      .img-thumb {
        width: 14vw;
        height: 10vw;
        border-radius: 1.33vw;
        overflow: hidden;
        margin-left: auto;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .empty {
        margin-left: auto;
        color: #ccc;
        font-size: 3.47vw;
      }
    }
  }

  .btn-wrap {
    padding: 6vw 5.33vw;
    margin-top: 6vw;

    :deep(.van-button) {
      height: 11.73vw;
      font-size: 4.27vw;
    }
  }
}
</style>