<template>
  <div class="storeForm">
    <div class="form-content">
      <div class="item">
        <div class="top-flex">
          <div class="name">门店照</div>
          <div class="right" @click="uploadImg">
            <img :src="detailInfo.fileUrl" alt="">
            <u-icon name="arrow-right" color="#999" size="22"></u-icon>
          </div>
        </div>
        <div class="line-flex">
          <div class="label">门店名称</div>
          <div class="value">
            <u-input trim placeholder="请输入" input-align="right" v-model="detailInfo.shopName"
              placeholder-style="color:#999;font-size: 14px;" height="36"></u-input>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="line-flex">
          <div class="label">经营类型</div>
          <div class="value" @click="showOperatorType=true">
            {{ $dict.getLabel('operatorType', detailInfo.operatorType) }}<u-icon name="arrow-right" color="#999" size="22"></u-icon>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="line-flex solid">
          <div class="label">经营者姓名</div>
          <div class="value">
            <u-input trim placeholder="请输入" input-align="right" v-model="detailInfo.name"
              placeholder-style="color:#999;font-size: 14px;" height="36"></u-input>
          </div>
        </div>
        <div class="line-flex">
          <div class="label">联系电话</div>
          <div class="value">
            <u-input trim placeholder="请输入" input-align="right" v-model="detailInfo.phone"
              placeholder-style="color:#999;font-size: 14px;" height="36"></u-input>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="line-flex solid">
          <div class="label">门店住址</div>
          <div class="value">
            <AiAreaPicker class="ai-area" v-model="detailInfo.areaId" :areaId="$areaId" :fullName.sync="detailInfo.areaName">
              <div class="ai-area__wrapper">
                <span :style="detailInfo.areaName ? '' : 'color: #999'">{{ detailInfo.areaName || '请选择'}}</span>
                <u-icon name="arrow-right" color="#999" size="22"></u-icon>
              </div>
            </AiAreaPicker>
          </div>
        </div>
        <div class="line-flex">
          <div class="label">详细地址</div>
          <div class="value">
            <u-input trim placeholder="请输入" input-align="right" v-model="detailInfo.address"
              placeholder-style="color:#999;font-size: 14px;" height="36"></u-input>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" @click="submit">
      <div class="btn">提交</div>
    </div>
    <u-select v-model="showOperatorType" :list="$dict.getDict('operatorType')" value-name="dictValue"
      label-name="dictName" @confirm="confirmOperatorType"></u-select>
  </div>
</template>

<script>

export default {
  name: 'storeForm',
  appName: '我的门店',
  data() {
    return {
      form: {
        name : ''
      },

      shopId: '',
      detailInfo: {},
      showOperatorType: false
    }
  },
  onLoad(e) {
    this.shopId = e.shopId
    this.$dict.load(['operatorType']).then(() => {
      this.getDetail()
    })
  },
  methods: {
    getDetail() {
      this.$instance.post(`/app/appshoparchives/queryDetailById?id=${this.shopId}`).then(res => {
        if (res?.data) {
          this.detailInfo = res.data
        }
      })
    },
    confirmOperatorType(e) {
      this.detailInfo.operatorType = e[0].value
    },
    submit() {
      this.$instance.post(`/app/appshoparchives/addOrUpdate`, {
        ...this.detailInfo
      }).then(res => {
        if (res?.data) {
          this.$toast('修改成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 300);
        }
      })
    },
    uploadImg() {
      console.log(123)
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        success: (res) => {
          console.log(res)
          if (res.tempFiles.length > 1) {
            this.$toast(`门店头像不能超过1张`)
            return false
          }
          this.$loading('上传中')
          this.uploadFile(res.tempFiles[0].tempFilePath) 
        },
      })
    },
    uploadFile(img) {
      uni.uploadFile({
        url: this.$instance.defaults.baseURL + '/admin/file/add',
        filePath: img,
        name: 'file',
        header: {
          'Content-Type': 'multipart/form-data',
          Authorization: uni.getStorageSync('token'),
        },
        success: (res) => {
          this.detailInfo.fileUrl = JSON.parse(res.data).data[0].split(';')[0]
          this.$hideLoading()
        }
      })
    },
  },

}
</script>

<style lang="scss" scoped>
.storeForm {
  background-color: #F4F5FA;
  .form-content {
    padding: 32px;
  }
  .item {
    width: 100%;
    background: #fff;
    border-radius: 32px;
    margin-bottom: 24px;
    .top-flex {
      padding: 24px 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      .name {
        display: inline-block;
        width: calc(100% - 168px);
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 30px;
        color: #666;
        line-height: 36px;
      }
      .right {
        display: inline-block;
        img {
          width: 112px;
          height: 112px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
    .line-flex {
      display: flex;
      padding: 42px 32px 50px;
      box-sizing: border-box;
      .label {
        width: 162px;
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #666;
        line-height: 36px;
      }
      .value {
        width: calc(100% - 162px);
        text-align: right;
      }
    }
  }
  .solid {
    border-bottom: 1px solid #eee;
  }
  .footer {
    width: 100%;
    padding: 20px 32px 88px 32px;
    box-sizing: border-box;
    background: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    .btn {
      width: 100%;
      height: 80px;
      background: #2D7DFF;
      border-radius: 40px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      text-align: center;
      line-height: 80px;
    }
  }
  u-icon {
    margin-left: 16px;
  }
  .ai-area__wrapper {
    span {
      display: inline-block;
      font-size: 28px;
    }
  }
}
</style>