<template>
  <div class="app-content">
    <form @submit="formSubmit">
      <div class="module-com">
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">花店名称</div>
          <input
            v-model="form.name"
            placeholder-class="phcolor"
            placeholder-style="color:#CCCCCC"
            class="tui-input"
            name="name"
            placeholder="请输入名称"
          />
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
          :arrow="true"
          @click="openAddres"
        >
          <div class="tui-title">所在城市</div>
          <div
            class="tui-input"
            v-if="form.province"
          >{{ form.province + '-' + form.city }}</div>
          <div
            class="tui-placeholder"
            v-else
          >请选择</div>
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
          :arrow="true"
          @click="selRegionFn"
        >
          <div class="tui-title">详细地址</div>
          <div
            class="tui-input"
            v-if="form.address"
          >{{ form.address }}</div>
          <div
            class="tui-placeholder"
            v-else
          >请填写详细地址</div>
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">门牌号</div>
          <input
            v-model="form.floor"
            placeholder-class="phcolor"
            placeholder-style="color:#CCCCCC"
            class="tui-input"
            name="floor"
            placeholder="楼号门牌号（选填）"
          />
        </tui-list-cell>
<!--
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">花店头像</div>
          <app-uploader
            @resultData="_resultData"
            :num="1"
          />
        </tui-list-cell>
-->
      </div>
      <!-- 店长昵称 -->
      <div class="module-com">
        <AppBindInfo
          @bindInfo="bindInfo"
          nameTetx="昵称"
        >
        </AppBindInfo>
      </div>
      <!-- 手机号 -->
      <!--
      <div class="module-com">
        <tui-list-cell
          v-if="option.style == 1"
          class="line-cell code-wrap"
          :hover="false"
        >
          <div class="tui-title">主营业务</div>
          <div>
            <button
              @click="changeMain(1)"
              :class="['admin-button-com','mini-btn',form.main==1?'blue':'default']"
            >
              零售
            </button>
            <button
              @click="changeMain(2)"
              style="margin-left:10px;"
              :class="['admin-button-com','mini-btn',form.main==2?'blue':'default']"
            >
              培训
            </button>
          </div>
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >

          <div class="tui-title">营业执照编号</div>
          <input
            v-model="form.licenseNo"
            placeholder-class="phcolor"
            placeholder-style="color:#CCCCCC"
            class="tui-input"
            name="name"
            placeholder="请输入营业执照编号"
          />
        </tui-list-cell>
        <tui-list-cell
          class="line-cell"
          :hover="false"
        >
          <div class="tui-title">营业执照</div>
          <app-uploader
            @resultData="resultData"
            ref="appUploader"
            :num="1"
          />
        </tui-list-cell>

      </div>
-->
      <!-- 推荐人 -->
      <div
        class="module-com recommend-wrap"
        v-if="!$util.isEmpty(merchantData)"
      >
        <div class="recommend-tag">推荐人</div>
        <div class="recommend-det">
          <image
            style="width:90rpx;height:90rpx;border-radius:42rpx;"
            mode="scaleToFill"
            :src="merchantData.logoUrl"
            @error="imageError"
          />
          <div class="recommend-info">
            <div class="app-size-32">{{ merchantData.name }}</div>
            <div class="app-color-2"></div>
          </div>
        </div>
      </div>

      <div class="btn-wrap">
        <button
          class="admin-button-com blue big"
          formType="submit"
        >确认</button>
      </div>
      <!-- 选择地区 -->
      <app-area-sel
        :show.sync="showRegion"
        @change="changeAreaFn"
        :city="form.city"
      />
      <!-- 省市联动 -->
      <simple-address
        ref="simpleAddress"
        :pickerValueDefault="cityPickerValueDefault"
        @onConfirm="onCityConfirm"
      ></simple-address>
    </form>
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAreaSel from "@/components/app-area-sel";
import SimpleAddress from "@/components/plugin/simple-address";
import AppAvatarModule from "@/components/module/app-avatar";
// import { getWxInfo, getWxPhone } from "@/api/mini";
import AppUploader from "@/components/app-uploader";
import AppBindInfo from "@/components/app-bind-info";
const form = require("@/utils/formValidation.js");
import {
  getIntroduce,
  applyRegister
} from "@/api/official";
export default {
  name: "apply-data",
  components: {
    TuiListCell,
    AppAreaSel,
    SimpleAddress,
    AppAvatarModule,
    AppUploader,
    AppBindInfo
  },
  data () {
    return {
      merchantData: {},
      form: {
        name: "",
        mobile: "",
        province: "",
        city: "",
        dist: "",
        address: "",
        adminName: '',
        main: 1,
        licenseNo: "",
        license: "",
        // floor: "",
        longitude: "",
        latitude: "",
        showAddress:""
      },
      showRegion: false,
      // 省市联动
      regionData: [],
      cityPickerValueDefault: [0, 0],
      // 验证码
      isSend: 0,
      countDown: 119,
      timer: null,
      adminName: "",
      logo: ''
    };
  },
  onLoad () {
  },
  methods: {
    //图片地址
    resultData (val) {
      this.form.license = val.shortUrl
    },
    _resultData (val) {
      this.form.logo = val.shortUrl
    },
    changeMain (val) {
      this.form.main = val
    },
    bindInfo (val) {
      this.form.adminName = val.name;
      this.form.mobile = val.mobile
    },
    init () {
      this._getMerchantDet()

    },
    _getMerchantDet () {
      getIntroduce(this.option).then(res => {
        this.merchantData = res.data.introduce
      });
    },
    confirmFn () {
      applyRegister({
        hdShopAdminId: this.option.hdShopAdminId,
        ghsShopAdminId: this.option.ghsShopAdminId,
        ...this.form,
        style: this.option.style || 0,
        from: this.option.from || 0
      }).then(res => {
        this.$util.pageTo({
          url: "/pagesClient/official/result",
          type: 2,
          query: {
            pagestatus: 3
          }
        });
      });
    },
    // 选择地址
    selRegionFn () {
      if (!this.form.city) {
        this.$msg("请先选择城市！");
        return false;
      }
      this.showRegion = true;
    },
    changeAreaFn (e) {
      console.log("changeAreaFn", e);
      this.form.address = e.title;
      this.form.showAddress = e.address;
      this.form.latitude = e.location.lat;
      this.form.longitude = e.location.lng;
      this.form.dist = e.district
    },
    // 省市联动
    openAddres () {
      this.$refs.simpleAddress.open();
    },
    onCityConfirm (e) {
      this.form.province = e.provinceName;
      this.form.city = e.cityName;
    },
    // 表单验证
    formSubmit (e) {
      // 表单规则
      let rules = [
        {
          name: "name",
          rule: ["required"],
          msg: ["请填写花店名称"]
        },
        {
          name: "city",
          rule: ["required"],
          msg: ["请选择城市"]
        },
        {
          name: "address",
          rule: ["required"],
          msg: ["请填写地址"]
        },
        {
          name: "adminName",
          rule: ["required"],
          msg: ["请填写昵称"]
        },
        {
          name: "mobile",
          rule: ["required"],
          msg: ["请填写手机号"]
        }
      ];
      // 进行表单检查
      let formData = this.form;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        setTimeout(() => {
          this.confirmFn();
        });
      } else {
        this.$msg(checkRes);
      }
    }
  },
  watch: {
  }
};
</script>

<style lang="scss" scoped>
.module-com {
  margin-bottom: 20px;
  background-color: #fff;
  .module-tit {
    padding: 20px 18px;
    font-size: 28px;
    font-weight: 600;
    border-bottom: 1px solid $borderColor;
  }
  .module-det {
    padding: 0 30px;
  }
}
// 公共
.line-cell {
  .tui-title {
    width: 210px;
    color: $fontColor2;
  }
  .tui-input {
    width: calc(100% - 210px);
    font-size: 28px;
  }
  .tui-placeholder {
    color: #ccc;
  }
  .phcolor {
    color: #ccc;
  }
}
.btn-wrap {
  width: 90%;
  margin: 60px auto;
  .admin-button-com {
    width: 100%;
    margin: 0 auto;
  }
}
// 验证码
.code-wrap {
  .tui-input {
    width: calc(100% - 410px);
    font-size: 28px;
  }
  .tui-code {
    width: 200px;
    text-align: center;
    border-left: 1px solid $borderColor;
    color: $mainColor;
  }
}
// 推荐人
.recommend-wrap {
  padding: 30px 45px;
  .recommend-tag {
    font-size: 28px;
    color: $fontColor2;
    margin-bottom: 24px;
  }
  .recommend-det {
    @include disFlex(center, flex-start);
    .recommend-info {
      margin-left: 20px;
      .app-size-32 {
        margin-bottom: 4px;
      }
    }
  }
}
</style>