<template>
  <view class="app-container">
    <HeaderBar :title="id ? '编辑客服' : '新增客服'" text-align="center" enable-back />
    <view class="form-box">
      <form @submit.prevent="submit">
        <view class="form-item">
          <view class="label">名称<text style="color: #ff4d4f; margin-left: 8rpx;">必填</text></view>
          <input class="input" v-model="form.name" placeholder="请输入客服名称" />
        </view>
        <view class="form-item">
          <view class="label">联系方式<text style="color: #ff4d4f; margin-left: 8rpx;">必填</text></view>
          <input class="input" v-model="form.mobile" placeholder="请输入联系方式" type="number" />
        </view>
        <button class="submit-btn" form-type="submit">保存</button>
      </form>
    </view>
  </view>
</template>

<script>
import { mchAddMchCustom, mchUpdateMchCustom, mchGetMchCustomDetail } from '@/api/mch/mchCustom'
import HeaderBar from '@/components/HeaderBar.vue'

export default {
  components: {
    HeaderBar
  },
  data() {
    return {
      id: '',
      form: {
        mchId: this.$store.state.user.mchId,
        name: '',
        mobile: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      mchGetMchCustomDetail(this.id).then(res => {
        this.form = res.data
      })
    },
    submit() {

      this.$modal.loading('提交中...')
      const request = this.id ? mchUpdateMchCustom : mchAddMchCustom
      request(this.form).then(() => {
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }).finally(() => {
        this.$modal.closeLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.form-box {
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  width: 96%;
  margin: 32rpx auto;
  z-index: 2;
}

.form-item {
  margin-bottom: 30rpx;
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  .input {
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #666;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    box-sizing: border-box;
  }
}

.submit-btn {
  width: 90%;
  margin: 40rpx auto 0;
  display: block;
  background: #2979ff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: none;
}
</style>