<template>
  <view class="shop-1-container">
    <!-- <u-navbar
      :autoBack="true"
      :safeAreaInsetTop="true"
      :placeholder="true"
      title="填写店铺信息"
    >
      <template slot="right">
        <view class="btn-login-out" @click="loginOut">退出登录</view>
      </template>
    </u-navbar> -->
    <navBar
      title="填写店铺信息"
      :statusBar="true"
      :border="false"
      :fixed="true"
      :height="'44px'"
    >
      <!-- <block slot="left">
        <u-icon
          name="arrow-left"
          color="#303133"
          size="20"
          @click="pageBack()"
        ></u-icon>
      </block> -->
      <block slot="right">
        <view class="btn-login-out" @click="loginOut">退出登录</view>
      </block>
    </navBar>
    <u-form :model="form" class="form" ref="uForm" label-width="70">
      <u-form-item label="联系人" prop="contact_name" required>
        <u-input
          class="form-input"
          v-model="form.contact_name"
          placeholder="请输入联系人"
        />
      </u-form-item>
      <u-form-item
        label="经营品类"
        prop="biz_category"
        required
        @click="skipuBsType"
      >
        <u-input
          style="pointer-events: none"
          class="form-input"
          v-model="form.biz_category"
          placeholder="请选择经营品类"
          readonly
        />
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          name="arrow-right"
          size="12"
          color="#aaaaaa"
        ></u-icon>
      </u-form-item>
      <u-form-item label="门店名称" prop="store_name" required>
        <u-input
          class="form-input"
          v-model="form.store_name"
          placeholder="请输入门店名称"
        />
        <u-button
          slot="right"
          class="btn-check-shop-name"
          @click="handleBtnCheckShopName"
        >
          检查名字
        </u-button>
      </u-form-item>
      <u-form-item
        label="所在地区"
        prop="mapAddress"
        required
        @click="shkipuSelectAddress"
      >
        <u-input
          style="pointer-events: none"
          class="form-input"
          v-model="form.mapAddress"
          placeholder="请在地图上选择门店地址"
          readonly
        />
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          name="arrow-right"
          size="12"
          color="aaaaaa"
        ></u-icon>
      </u-form-item>
      <u-form-item label="详细地址" prop="store_address" required>
        <u-input
          class="form-input"
          v-model="form.store_address"
          @input="handleStoreAddressInput"
          placeholder="详细地址:如:人民大道205号2楼213"
        />
      </u-form-item>
      <u-form-item label="门脸图" prop="front_facade_image">
        <u-upload
          :class="fileList.length == 0 ? 'shop1-upload' : 'shop1-upload-item'"
          @afterRead="afterRead1"
          @delete="deletePic1"
          accept="image"
          :fileList="fileList"
          :max-count="1"
          :width="'100%'"
          :height="154"
          :upload-text="''"
          :maxSize="8 * 1024 * 1024"
          @oversize="overSize"
        ></u-upload>
      </u-form-item>
      <u-form-item label="环境图" prop="environment_image">
        <u-upload
          :class="fileList2.length == 0 ? 'shop2-upload' : 'shop2-upload-item'"
          @afterRead="afterRead2"
          @delete="deletePic2"
          accept="image"
          :fileList="fileList2"
          :max-count="1"
          :width="'100%'"
          :height="154"
          :upload-text="''"
          :maxSize="8 * 1024 * 1024"
          @oversize="overSize"
        ></u-upload>
      </u-form-item>
    </u-form>

    <view class="btn-content">
      <view class="myui_check_text">检查并确认店铺信息无误</view>
      <u-button text="下一步" class="btn-next" @click="handleNext"></u-button>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>
<script>
import { UploadFilePromise } from "../../api/upload";
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
import { CheckShopName } from "@/api/audit";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      showLodingPage: true,
      manageTypeItem: {},
      form: {
        biz_category: "",
        shopAddress: "",
        mapAddress: "",
        store_address: "",
      },
      fileList: [],
      fileList2: [],
      rules: {
        contact_name: [
          {
            required: true,
            message: "请输入联系人",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        type: [
          {
            required: true,
            message: "请选择经营类型",
            trigger: ["change", "blur"],
          },
        ],
        store_name: [
          {
            required: true,
            message: "请输入门店名称",
            trigger: ["change", "blur"],
          },
        ],
        mapAddress: [
          {
            required: true,
            message: "请在地图上选择门店地址",
            trigger: ["change", "blur"],
          },
        ],
        store_address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: ["change", "blur"],
          },
        ],
        isNamePsss: false,
      },
    };
  },
  onShow() {
    let auditItem = uni.getStorageSync("auditItem");

    if (auditItem && this.form.biz_category == "") {
      this.form = auditItem;

      this.fileList.push({ url: auditItem.environment_image });
      this.fileList2.push({ url: auditItem.front_facade_image });
    }

    let typeItem = uni.getStorageSync("typeItem");

    if (typeItem) {
      this.manageTypeItem = typeItem;
      this.form.biz_category = typeItem.bizSecondCategory.name;
    }

    let locationItem = uni.getStorageSync("locationItem");

    if (locationItem) {
      this.form.mapAddress =
        locationItem.administrativeRegion.label[0] +
        locationItem.administrativeRegion.label[1] +
        locationItem.administrativeRegion.label[2];

      this.form.store_address = locationItem.selectAddress.name;
    }
  },
  onReady() {
    this.$refs["uForm"].setRules(this.rules);
  },
  methods: {
    pageBack() {
      uni.navigateBack();
    },
    overSize(e) {
      uni.$u.toast("上传图片大小不能超过20MB!");
    },
    async afterRead1(e) {
      const item = e.file;
      const imgUrl = item.url;
      const group = {
        url: imgUrl,
      };

      this.fileList.push(group);

      let res = await UploadFilePromise(imgUrl);
      if (res && res.status == 200) {
        this.form.front_facade_image = res.data.url;
      }
    },
    async afterRead2(e) {
      const item = e.file;
      const imgUrl = item.url;
      const group = {
        url: imgUrl,
      };
      this.fileList2.push(group);

      let res = await UploadFilePromise(imgUrl);
      if (res && res.status == 200) {
        this.form.environment_image = res.data.url;
      }
    },
    deletePic1() {
      this.fileList.splice(0, 1);
    },
    deletePic2() {
      this.fileList2.splice(0, 1);
    },
    formItemClass() {
      return this.form.shopAddress > 0 ? "" : "shop1-from-item";
    },
    skipuBsType() {
      uni.navigateTo({
        url: "/pages/audit/businessType",
      });
    },
    shkipuSelectAddress() {
      uni.navigateTo({
        url: "/pages/audit/mapAddress",
      });
    },
    handleStoreAddressInput(e) {
      setTimeout(() => {
        let locationItem = uni.getStorageSync("locationItem");
        locationItem.selectAddress.name = e;
        uni.setStorageSync("locationItem", locationItem);
      }, 600);
    },
    handleNext() {
      if (!this.isNamePsss) {
        this.$refs.uToast.show({
          message: "请先检查店铺名字是否可用",
          type: "error",
          duration: 1000,
        });
        return;
      }

      this.$refs.uForm.validate().then((valid) => {
        if (valid) {
          if (!this.form.front_facade_image) {
            this.$refs.uToast.show({
              message: "请上传门脸图",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (!this.form.environment_image) {
            this.$refs.uToast.show({
              message: "请上传环境图",
              type: "error",
              duration: 1000,
            });
            return;
          }

          var params = {};

          let userInfo = uni.getStorageSync("userInfo");
          let locationItem = uni.getStorageSync("locationItem");

          params.mobile = userInfo.user_mobile.startsWith("+86")
            ? userInfo.user_mobile.replace("+86", "")
            : userInfo.user_mobile;

          const storeArea =
            locationItem.administrativeRegion.label[0] +
            locationItem.administrativeRegion.label[1] +
            locationItem.administrativeRegion.label[2];

          let auditItem = {
            login_mobile: userInfo.user_mobile,
            store_name: this.form.store_name,
            contact_name: this.form.contact_name,
            biz_category: this.manageTypeItem.bizCategory.id,
            biz_second_category: this.manageTypeItem.bizSecondCategory.id,
            store_longitude: locationItem.selectAddress.location.lng,
            store_latitude: locationItem.selectAddress.location.lat,
            province_id: locationItem.administrativeRegion.value[0],
            city_id: locationItem.administrativeRegion.value[1],
            county_id: locationItem.administrativeRegion.value[2],
            store_area: locationItem.administrativeRegion.label.join("/"),
            store_district: locationItem.administrativeRegion.value.join("/"),
            store_address: storeArea + this.form.store_address,
            front_facade_image: this.form.front_facade_image,
            environment_image: this.form.environment_image,
          };

          console.log(auditItem);

          uni.setStorageSync("auditItem", auditItem);

          uni.navigateTo({
            url: "/pages/audit/shop2",
          });
        }
      });
    },
    async handleBtnCheckShopName() {
      if (!this.form.store_name) {
        this.$refs.uToast.show({
          message: "请输入门店名称",
          type: "error",
          duration: 1000,
        });
        return;
      }

      let params = {
        storeName: this.form.store_name,
      };

      let res = await CheckShopName(params);
      if (res && res.status == 200) {
        if (res.data.flag == 1) {
          this.isNamePsss = true;
        }

        this.$refs.uToast.show({
          message: res.msg,
          type: res.data.flag == 1 ? "success" : "error",
          duration: 1000,
        });
      }
    },
    loginOut() {
      this.$store.dispatch("user/LoginOut");
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/variables.scss";
.shop-1-container {
  // background: #f2f2f2;
  // height: 100vh;

  .u-navbar {
    height: 88rpx;
  }

  .form {
    padding: 0 24rpx 0 30rpx;
    background: #fff;
    border-top: 1px solid #f2f2f2;

    ::v-deep.shop1-from-item {
      .u-form-item__body__right {
        .uni-input-wrapper {
          font-size: 24rpx;
        }
      }
    }

    ::v-deep.shop1-upload {
      .u-upload__button {
        // background: url("../../static/shenhe-bg1.png");
        background-image: url("../../static/shenhe-bg1.png");
        background-size: 100% 100%;
      }
    }

    ::v-deep.shop1-upload-item {
      .u-upload__wrap {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
      }
    }

    ::v-deep.shop2-upload-item {
      .u-upload__wrap {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
      }
    }

    ::v-deep.shop2-upload {
      .u-upload__button {
        // background: url("../../static/shenhe-bg1.png");
        background-image: url("../../static/shenhe-bg2.png");
        background-size: 100% 100%;
      }
    }
  }

  .btn-content {
    padding: 30rpx 48rpx 88rpx;
  }

  .btn-login-out {
    font-size: 28rpx;
    color: $base-color;
  }

  .btn-check-shop-name {
    width: 160rpx;
    height: 60rpx;
    border: none;
    background: $base-color;
    color: #fff;
  }

  .btn-next {
    background: $base-color;
    color: #fff;
    border: none;
  }
}
</style>
