<template>
  <div id="root">
    <div style="width: 1000px; margin-left: auto; margin-right: auto; margin-top: 20px;">
      <span style="font-size:0.7vw;color:#666666">APP端公告列表中,前多少个,显示在公告banner位？</span>
      <el-input v-model="announcementBannerNum" min="1" max="10" type="number" placeholder="请输入数字" style="width: 150px;" @change="handleBannerChange"/>
      <el-tooltip class="item" effect="dark" content="如果需要修改,请选择1~10之间的数字后保存!" placement="top-start">
        <i class="el-icon-info"/>
      </el-tooltip>
      <el-button v-if="announcementBannerBool" type="primary" @click="carouselAnnouncementBanner">保存</el-button>
    </div>
    <div style="width: 1000px; margin-left: auto; margin-right: auto; margin-top: 20px;">
      <span style="font-size:0.7vw;color:#666666">APP端活动列表中,前多少个,显示在活动banner位？</span>
      <el-input v-model="activityBannerNum" min="1" max="10" type="number" placeholder="请输入数字" style="width: 150px;" @change="handleActivityChange"/>
      <el-tooltip class="item" effect="dark" content="如果需要修改,请选择1~10之间的数字后保存!" placement="top-start">
        <i class="el-icon-info"/>
      </el-tooltip>
      <el-button v-if="activityBannerNumBool" type="primary" @click="carouselActivityBanner">保存</el-button>
    </div>
    <div style="width: 1000px; margin-left: auto; margin-right: auto; margin-top: 20px;">
      <span style="font-size:0.7vw;color:#666666;">业主邀请访客时，录入访客车牌功能 开还是关？</span>
      <el-radio v-model="visitorBool" :label="true" style="margin-left: 58px;" @change="visitorSaveOrDelete">开</el-radio>
      <el-radio v-model="visitorBool" :label="false" @change="visitorSaveOrDelete">关</el-radio>
      <el-tooltip class="item" effect="dark" content="小区如果实际允许临时车出入停车场，则建议此配置为关。只有小区禁止临时车进入时，业主才需要邀请访客车辆进入小区。" placement="top-start">
        <i class="el-icon-info"/>
      </el-tooltip>
      <el-button v-if="activityBannerNumBool" type="primary" @click="carouselActivityBanner">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  data() {
    return {
      announcementBannerNum: 0, // banner数量
      activityBannerNum: 0, // 活动banner数量
      announcementBannerBool: false, // 是否显示公告的保存按钮
      activityBannerNumBool: false, // 是否显示活动的保存按钮
      visitorBool: false // 是否打开
    }
  },
  mounted() {
    this.carouselGetBanner()
    this.getVisitorLicenseSetting()
  },
  methods: {
    handleBannerChange(value) {
      console.log(value)
      this.announcementBannerNum = value
      this.announcementBannerBool = true
    },
    handleActivityChange(value) {
      console.log(value)
      this.activityBannerNum = value
      this.activityBannerNumBool = true
    },
    carouselAnnouncementBanner() { // 修改公告的Banner数量
      this.$store.dispatch('CarouselAnnouncementBanner', this.announcementBannerNum).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.announcementBannerBool = false
      }).catch(() => {
        console.log('error CarouselAnnouncementBanner')
      })
    },
    carouselActivityBanner() { // 修改公告的Banner数量
      this.$store.dispatch('CarouselActivityBanner', this.activityBannerNum).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.activityBannerNumBool = false
      }).catch(() => {
        console.log('error CarouselActivityBanner')
      })
    },
    carouselGetBanner() { // 获取设置Banner的数量
      this.$store.dispatch('CarouselGetBanner').then(res => {
        const resData = res.data
        this.activityBannerNum = resData.activity.carouselNum
        this.announcementBannerNum = resData.announcement.carouselNum
      }).catch(() => {
        console.log('error CarouselGetBanner')
      })
    },
    getVisitorLicenseSetting() { // 查看是否开启访客车辆邀请
      this.$store.dispatch('GetVisitorLicenseSetting').then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.visitorBool = res.data
        }
      }).catch(() => {
        console.log('error GetVisitorLicenseSetting')
      })
    },
    visitorSaveOrDelete() { // 是否开启访客邀请车辆
      this.$store.dispatch('VisitorSaveOrDelete', this.visitorBool).then(res => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message.success(res.message)
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('error VisitorSaveOrDelete')
      })
    }

  }

}
</script>

<style scoped>

</style>
