<template>
  <div class="store-management-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="item">
        <label class="label">店铺名称：</label>
        <Input
          placeholder="请输入店铺名称"
          v-model="form.shopName"
          clearable
          class="form-input"
          style="width:400px;"
        />
      </div>
      <div class="item">
        <label class="label">店铺头像：</label>
        <div class="upload-con">
          <file-upload
            :width="150"
            :iconSize="26"
            :maxNum="1"
            v-model="form.shopImage"
            showWatch
          />
        </div>
      </div>
      <div class="item">
        <label class="label">店铺介绍：</label>
        <Input
          placeholder="请输入店铺介绍"
          v-model="form.introduction"
          clearable
          class="form-input"
          type="textarea"
          style="width:400px;"
        />
      </div>
      <div class="item">
        <label class="label">店铺联系人：</label>
        <Input
          placeholder="请输入联系人"
          v-model="form.contact"
          clearable
          class="form-input"
          style="width:400px;"
        />
      </div>
      <div class="item">
        <label class="label">联系方式：</label>
        <Input
          placeholder="请输入手机号"
          v-model="form.contactPhone"
          clearable
          class="form-input"
          style="width:400px;"
        />
      </div>
      <div class="item">
        <label class="label">店铺联系地址：</label>
        <Input
          placeholder="请输入联系地址"
          v-model="form.shopAddress"
          clearable
          class="form-input"
          style="width:400px;"
        />
      </div>
      <div class="footer-con">
        <Button type="primary" @click="handleSubmit" size='large'>确 定</Button>
      </div>
    </Card>
  </div>
</template>
<script>
import FileUpload from '_c/file-upload'
export default {
  name: 'store-management',
  components: {
    FileUpload
  },
  data () {
    return {
      form: {
        shopName: '',
        shopImage: [],
        introduction: '',
        contact: '',
        contactPhone: '',
        shopAddress: '',
        updateTime: '',
        shopId: ''
      },
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getStoreList',
        success: (res) => {
          if (res.data.records.length) {
            let { shopId } = res.data.records[0]
            this.form.shopId = shopId
            this.requestDetail(shopId)
          }
        },
        complete: () => {
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      })
    },
    requestDetail (shopId) {
      this.api({
        apiName: 'shopPermissionDetail',
        postdata: shopId,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          let { shopName, shopImage, introduction, contact, contactPhone, shopAddress, updateTime } = res.data
          this.form.shopName = shopName
          this.form.introduction = introduction
          this.form.contact = contact
          this.form.contactPhone = contactPhone
          this.form.shopAddress = shopAddress
          this.form.updateTime = updateTime
          this.$nextTick(() => {
            this.form.shopImage = [shopImage]
          })
        }
      })
    },
    checkForm () {
      let errMsg = ''
      let { shopName, shopImage, introduction, contact, contactPhone, shopAddress, updateTime, shopId } = this.form
      let form = {
        shopName,
        shopImage,
        introduction,
        contact,
        contactPhone,
        shopAddress,
        updateTime,
        shopId
      }
      form.shopImage = shopImage.join()
      if (!shopName) {
        return { errMsg: '请输入店铺名称！' }
      }
      if (shopImage.length === 0) {
        return { errMsg: '请上传店铺头像！' }
      }
      if (!introduction) {
        return { errMsg: '请输入店铺介绍！' }
      }
      if (!contact) {
        return { errMsg: '请输入联系人！' }
      }
      if (!contactPhone) {
        return { errMsg: '请输入手机号！' }
      }
      let reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/
      if (!reg.test(contactPhone)) {
        return { errMsg: '手机号格式输入有误!' }
      }
      if (!shopAddress) {
        return { errMsg: '请输入店铺联系地址！' }
      }
      return { errMsg, form }
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Message.warning(errMsg)
      }
      if (this.form.shopId) {
        this.api({
          apiName: 'editShopPermission',
          postdata: form,
          success: (res) => {
            this.$Notice.success({ title: '编辑成功' })
            this.requestData()
          }
        })
      } else {
        this.api({
          apiName: 'addShopPermission',
          postdata: form,
          success: (res) => {
            this.$Notice.success({ title: '保存成功' })
            this.requestData()
          }
        })
      }
    }
  },
  mounted () {
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
.store-management-page {
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .label {
      width: 140px;
      text-align: right;
      flex-shrink: 0;
    }
    .form-input {
      width: 300px;
    }
  }
  .footer-con {
    margin-left: 150px;
  }
}
</style>
