<template>
  <view class="container">
    <Header title="商家入驻"></Header>
    <view class="content">
      <view class="formmain">
        <wd-form ref="form" :model="formData" :rules="rules">
          <wd-cell-group border>
            <wd-picker
              label="店铺类型"
              placeholder="请选择店铺类型"
              label-width="100px"
              prop="promotion"
              v-model="formData.promotion"
              :columns="promotionlist"
            />
            <wd-input
              label="店铺名称"
              label-width="100px"
              prop="xm"
              clearable
              v-model="formData.xm"
              placeholder="请输入店铺名称"
            />
            <wd-input
              label="联系电话"
              label-width="100px"
              prop="sjh"
              clearable
              v-model="formData.sjh"
              placeholder="请输入联系电话"
            />
            <wd-input
              label="所在地区"
              label-width="100px"
              v-model="formData.szdq"
              prop="szdq"
              readonly
              placeholder="请选择所在地区"
              @click="getLocationFn"
            />
            <wd-input
              label="详细地址"
              label-width="100px"
              prop="xxdz"
              clearable
              v-model="formData.xm"
              placeholder="请输入详细地址"
            />
            <wd-input
              label="小区/学校"
              label-width="100px"
              v-model="formData.szdq"
              prop="szdq"
              readonly
              placeholder="请选择"
              @click="getLocationFn"
            />
            <view class="flex">
              <view class="logo">LOGO/门头照</view>
              <wd-upload
                :file-list="fileList1"
                image-mode="aspectFill"
                :action="action"
                @change="handleChange1"
                :limit="1"
                class="img1"
              ></wd-upload>
            </view>
            <view class="flex">
              <view class="logo">营业执照</view>
              <wd-upload
                :file-list="fileList1"
                image-mode="aspectFill"
                :action="action"
                @change="handleChange1"
                :limit="1"
                class="img1"
              ></wd-upload>
            </view>
            <view class="flex">
              <view class="logo">身份证照</view>
              <wd-upload
                :file-list="fileList1"
                image-mode="aspectFill"
                :action="action"
                @change="handleChange1"
                :limit="1"
                class="img1"
              ></wd-upload>
              <wd-upload
                :file-list="fileList1"
                image-mode="aspectFill"
                :action="action"
                @change="handleChange1"
                :limit="1"
                class="img1"
              ></wd-upload>
            </view>
            <view class="flex">
              <view class="logo">店铺分类</view>
              <view class="text" @click="showclass">请选择</view>
            </view>
            <wd-textarea
              placeholder="请填写评价"
              label="店铺介绍"
              label-width="100px"
              v-model="formData.szdq"
              prop="szdq"
            />

            <button type="primary" style="width: 80%">提交</button>
          </wd-cell-group>
          <wd-popup
            v-model="show"
            position="bottom"
            custom-style="height:300px;overflow:auto;"
            @close="handleClose"
          >
            <view class="hcontent">
              <view class="flex1">
                <view class="text">取消</view>
                <view class="text">请选择</view>
                <view class="text">确定</view>
              </view>
              <view class="nr">
                <view class="left">
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                  <view class="name">周边美食</view>
                </view>
                <view class="right">
                  <view class="item">
                    <view class="hname">生活用品</view>
                    <view class="hnr">
                      <wd-tag round>标签</wd-tag>
                      <wd-tag round>标签</wd-tag>
                      <wd-tag round>标签</wd-tag>
                      <wd-tag round>标签</wd-tag>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </wd-popup>
        </wd-form>
      </view>
    </view>
  </view>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { reactive, ref } from 'vue';
const promotionlist = ref([
  {
    value: '1',
    label: '连锁直营',
  },
  {
    value: '2',
    label: '连锁加盟',
  },
]);
const show = ref(false);
const fileList = ref([
  {
    url: '1',
  },
]);
const showclass = () => {
  show.value = true;
};

function chooseImage({ fileList: files }) {
  xma.chooseImage({
    count: 6, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], // 从相册选择
    success: function (res) {
      console.log(JSON.stringify(res.tempFilePaths));
    },
  });
}
const formData = ref({
  systemCode: 'one-centre',
  promotion: '',
  xm: '',
  sfz: '',
  sjh: '',
  szdq: '',
  xxdz: '',
});
const form = ref();
const rules = ref({
  promotion: [{ required: true, message: '请选择' }],
  xm: [{ required: true, message: '请输入店铺名称' }],
  sjh: [{ required: true, message: '请输入联系电话' }],
  szdq: [{ required: true, message: '请选择' }],
  xxdz: [{ required: true, message: '请输入详细地址' }],
});
const shopDetail = ref({
  shopAddress: '',
});
const getLocationFn = () => {
  xma.chooseLocation({
    success: function (res) {
      console.log('位置名称：' + res.name);
      console.log('详细地址：' + res.address);
      console.log('纬度：' + res.latitude);
      console.log('经度：' + res.longitude);
    },
  });
};
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}

.uni-textarea-placeholder,
.uni-textarea-line,
.uni-textarea-compute,
.uni-textarea-textarea {
  width: 400rpx;
  height: 220rpx;
  border: 1px solid #d5d1d1;
}

.wd-tag {
  margin-left: 15rpx;
}

.hcontent {
  height: 100%;

  .flex1 {
    padding: 10px;
    display: flex;
    position: fixed;
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    background: #fff;
    z-index: 6;
  }

  .nr {
    padding-top: 42px;
    display: flex;

    .left {
      background: #ebe7e7;
      width: 33%;
      height: 100%;
      overflow-y: auto;

      .name {
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }

    .right {
      background: #fff;
      width: 67%;

      .hname {
        font-size: 14px;
        margin: 15rpx;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}

.container {
  width: 375 * 2rpx;
  margin: 0 auto;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 40rpx;

  .content {
    padding-top: 88rpx;
  }

  .formmain {
    background: #f3f3f3;
  }

  .flex {
    display: flex;
    align-items: flex-start;
    padding: var(--wot-input-cell-padding, 10px)
      var(--wot-input-padding, var(--wot-size-side-padding, 15px));
    background-color: var(--wot-input-cell-bg, var(--wot-color-white, rgb(255, 255, 255)));

    .text {
      margin-left: 16px;
      width: 60%;
      font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
      color: var(--wot-input-placeholder-color, #bfbfbf);
    }

    .logo {
      position: relative;
      padding-left: 12px;
      color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85));
      display: inline-block;
      font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
      line-height: var(--wot-cell-line-height, 24px);

      &::after {
        position: absolute;
        left: 0;
        top: 2px;
        content: '*';
        font-size: var(--wot-cell-required-size, 18px);
        line-height: 1.1;
        color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));
      }
    }

    .img1 {
      margin-left: 16px;
    }
  }
}
</style>
