<template>
  <view class="page">
    <u-navbar title="免责协议" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
      title-size='36' height='36' id="navbar"></u-navbar>

    <view class="container">
      <!-- 协议内容编辑 -->
      <view class="agreement-editor">
        <textarea style="background-color: #F7F8FA;width: 100%;padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;height: 77vh;"
          v-model="agreementContent" 
          placeholder="请输入免责协议内容..." 
          height="600"
          placeholder-style="color: #C7CDD3; font-size: 30rpx"
        ></textarea>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <u-button 
          type="default" 
          shape="circle" 
          @click="handleCancel"
        >
          取消
        </u-button>
        <u-button 
          type="primary" 
          shape="circle" 
          @click="handleSave"
          :disabled="!agreementContent.trim()"
        >
          保存协议
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#fff",
      },
      agreementContent: '',
	  id:'',
	  areaId:''
    }
  },
  onLoad() {
    // 加载已有协议内容
    this.loadAgreement()
  },
  methods: {
	  // 获取协议内容
    loadAgreement() {
      this.areaId = uni.getStorageSync('adminAreaid')
      this.$u.get(`/app/agreement/latest?areaId=${this.areaId}&agreementType=1`).then(res => {
      	if (res.code == 200) {
      		if (res.data) {
                this.agreementContent = res.data.content
				this.id = res.data.id
      		} else {
                this.agreementContent = null
      		}
      	}
      })
    },
    handleCancel() {
      uni.showModal({
        title: '提示',
        content: '确定放弃当前修改吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },
    handleSave() {
      uni.showLoading({
        title: '保存中...',
        mask: true
      })
      let data = {
		areaId:this.areaId,
      	content: this.content,
      	agreement: 1,
		id:this.id == undefined ? '' : this.id
      }
	  if(this.agreementContent == null){
		  this.$u.post(`/app/agreement/notice`, data).then(res => {
		  	if (res.code == 200) {
		  		uni.hideLoading()
		  		uni.showToast({
		  			title: '保存成功',
		  			icon: 'success'
		  		})
		  		setTimeout(() => {
		  			uni.navigateBack()
		  		}, 1000)
		  	}
		  })
	  }else{
		  this.$u.put(`/app/agreement/notice`, data).then(res => {
		  	if (res.code == 200) {
		  		uni.hideLoading()
		  		uni.showToast({
		  			title: '保存成功',
		  			icon: 'success'
		  		})
		  		setTimeout(() => {
		  			uni.navigateBack()
		  		}, 1000)
		  	}
		  })
	  }
    }
  }
}
</script>

<style lang="scss">
page {
  background: #fff;
}

.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  height: calc(60vh - 100rpx);
}

.agreement-editor {
  flex: 1;
  margin-bottom: 40rpx;
  
  ::v-deep .u-textarea {
    height: 100% !important;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  
  .u-button {
    &[disabled] {
      opacity: 0.6;
    }
  }
}
</style>