<template>
  <view class="changeInfo">
    <view class="ipt-center">
      <template v-if="title == 'shopBrief'">
        <tui-textarea
          v-model="shopInfo[title]"
          height="240rpx"
          min-height="40rpx"
          :placeholder="placeholder"
          :focus="true"
          :adjustPosition="false"
        ></tui-textarea>
      </template>
      <template v-else>
        <tui-input
          type="text"
          :placeholder="placeholder"
          v-model="shopInfo[title]"
          :focus="true"
        >
          <template #right>
            <tui-icon
              @click="cleanVal"
              name="close"
              :size="18"
              color="rgba(0, 0, 0, 0.9)"
            ></tui-icon>
          </template>
        </tui-input>
      </template>
    </view>
    <view class="complete">
      <text :class="shopInfo[title] ? 'act' : ''" @click="changeInfo"
        >完成</text
      >
    </view>
    <modal :showModal="modal" :promptList="promptList" @closeModal="closeModal" :showBtn="true"></modal>
  </view>
</template>

<script>
import { updateShopInfo } from "@/config/index.js";

export default {
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.barTitle,
    });
    this.placeholder = `请输入${option.barTitle}`;
    this.title = option.title;
    this.barTitle = option.barTitle;
    //  获取本地存储的 shopInfo 数据
    this.shopInfo = uni.getStorageSync("shopInfo");
  },
  data() {
    return {
      placeholder: "",
      shopInfo: {},
      barTitle: "",
      title: "",
    //   弹框
    modal:false,
    promptList:[]
    };
  },
  methods: {
    async changeInfo() {
      //  判断是不是电话号码 电话号码的话就用正则判断
      const phoneRule = /^1[3-9]\d{9}$/;
      if (this.title == "shopPhone" && !phoneRule.test(this.shopInfo[this.title])) {
        this.promptList = ['手机号码', '必须为1开头的11位数']
        this.modal = true
        return;
      }
      this.$loading.show("更新中");
      try {
        let res = await updateShopInfo(this.shopInfo);
        if (res.code == "") {
          this.$showToast(`${this.barTitle}修改成功`, "success");
          //    对本地存储的数据进行更换
          let uploadInfo = JSON.parse(res.json);
          this.shopInfo.shopLogo = uploadInfo.shopLogo;
          uni.setStorageSync("shopInfo", uploadInfo);
        }
      } finally {
        this.$loading.hide();
      }
    },
    //  关闭弹框
    closeModal(){
        this.modal = false
    },
    cleanVal() {
      this.shopInfo[this.title] = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.changeInfo {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);
  padding-top: 20rpx;
  box-sizing: border-box;
  .complete {
    width: 100%;
    padding-right: 32rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    text-align: right;
    color: #999999;
    font-size: 28rpx;
    .act {
      color: #1db064;
    }
  }
}
</style>
