<template>
  <div id="root">
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="banner轮播" name="banner">
        <div style="width: 1000px; margin-left: auto; margin-right: auto;">
          <span>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>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>
      </el-tab-pane>
      <el-tab-pane label="首页功能按钮" name="homeIndex">
        <el-table
          :data="indexData"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            align="center"
            label="序号"
            width="180"/>
          <el-table-column
            prop="menuName"
            align="center"
            label="按钮名"
            width="180"/>
          <el-table-column
            prop="menuUrl"
            align="center"
            label="图标">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" width="50" height="50">
            </template>
          </el-table-column>
          <el-table-column
            prop="explain"
            align="center"
            label="说明"/>
          <el-table-column
            prop="address"
            align="center"
            width="150"
            label="启用">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status === '1'" type="primary" @click="menuEnable(scope.row.id)">启用</el-button>
              <el-button v-if="scope.row.status === '0'" type="danger" @click="menuDisable(scope.row.id)">停用</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            width="150"
            label="配置">
            <template slot-scope="scope">
              <el-button type="primary">配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="物业号码" name="property">
        <el-form :model="formInline" inline="true" class="form-inline">
          <el-form-item label="名称">
            <el-input v-model="formInline.name" placeholder="名称"/>
          </el-form-item>
          <el-form-item label="号码">
            <el-input v-model="formInline.tel" placeholder="号码"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formInline.remark" placeholder="备注"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-left: 20px;">
          <el-button type="primary" @click="add">添加</el-button>
          <el-button type="warning" @click="edi">修改</el-button>
          <el-button type="danger" @click="deleteIds">删除</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="propertyList"
          border
          tooltip-effect="dark"
          style="width: 100%; margin-top: 20px;"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column
            prop="name"
            label="名称"/>
          <el-table-column
            prop="tel"
            label="号码"/>
          <el-table-column
            prop="remark"
            label="备注"/>
          <el-table-column
            prop="updateName"
            label="编辑人"/>
          <el-table-column
            prop="updateDate"
            label="编辑时间">
            <template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="公区监控" name="monitoring">
        <span style="display: flex; justify-content: center;">可配置项</span>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
          <span style="display: flex; justify-content: center; color: #409EFF;cursor: pointer; margin-right: 50px;" @click="addMonitoring">添加一个配置</span>
          <span style="display: flex; justify-content: center; color: #409EFF;cursor: pointer; margin-left: 50px;" @click="monitoringSubmit">提交</span>
        </div>
        <div style="display: flex; justify-content: center; flex-wrap: wrap;">
          <el-form v-for="(item, index) in equipmentList" ref="monitoringForm" label-width="120px" style="margin-top: 20px;">
            <div>
              <el-form-item label="编号">
                <!-- item.id -->
                <span>{{ index }}</span>
              </el-form-item>
              <el-form-item label="视频流地址">
                <el-input v-model="item.url" :disabled="false" name="name"/>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="item.address" :disabled="false" name="address"/>
              </el-form-item>
              <el-form-item label="安保人员电话">
                <el-input v-model="item.securityGuardTel" :disabled="false" name="phone"/>
              </el-form-item>
              <el-form-item label="保安室电话">
                <el-input v-model="item.securityRoomTel" :disabled="false" name="phone-2"/>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="info" @click="monitoringRemover(item.id, index)" >删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      activeName2: 'banner', // 默认banner选项卡
      formInline: {
        name: '',
        tel: '',
        remark: '',
        pageNum: 1,
        pageSize: 100
      },
      monitoring: { // 监控数据

      },
      indexData: [], // APP端菜单列表数据
      propertyList: [], // 物业数据列表
      ids: [], // id集合
      announcementBannerNum: 0, // banner数量
      activityBannerNum: 0, // 活动banner数量
      announcementBannerBool: false, // 是否显示公告的保存按钮
      activityBannerNumBool: false, // 是否显示活动的保存按钮
      equipmentList: [] // 处理过后的监控数据
    }
  },
  mounted() {
    this.carouselGetBanner()
  },
  methods: {
    handleBannerChange(value) {
      console.log(value)
      this.announcementBannerNum = value
      this.announcementBannerBool = true
    },
    handleActivityChange(value) {
      console.log(value)
      this.activityBannerNum = value
      this.activityBannerNumBool = true
    },
    handleClick(tab, event) {
      console.log(tab, event)
      const tabName = tab.name

      if (tabName === 'banner') {
        this.carouselGetBanner()
      }
      if (tabName === 'homeIndex') {
        this.getMenuList()
      }
      if (tabName === 'property') {
        this.getPropertyData()
      }
      if (tabName === 'monitoring') {
        // 监控
        this.equipmentGetAll()
      }
    },
    monitoringSubmit() { // 监控提交
      console.log('monitoringForm : ', this.equipmentList)
      this.$store.dispatch('EquipmentMonitoring', this.equipmentList).then((res) => {
        if (res.code === '0') {
          this.$message.success(res.message)
          // 监控
          this.equipmentGetAll()
        }
      }).catch(() => {
        console.log('EquipmentMonitoring error')
      })
    },
    monitoringRemover(id, equipmentIndex) { // 监控删除
      // console.log('monitoringForm : ', this.equipmentList, '  下坐标：', index)
      // const tempEquipmentList = []
      // this.equipmentList.map((item, index) => {
      //   // 排除需要删除的下坐标的数据
      //   if (index !== equipmentIndex) {
      //     tempEquipmentList.push(item)
      //   }
      // })
      // this.equipmentList = tempEquipmentList

      this.$store.dispatch('DeleteEquipment', id).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.getMenuList()
      }).catch(() => {
        console.log('DeleteEquipment error!')
      })
    },
    onSubmit() {
      this.getPropertyData()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.ids = []
      val.map((item, index) => {
        this.ids.push(item.id)
      })
      console.log(this.ids)
    },
    add() { // 跳转添加物业号码
      this.$router.push({ name: 'property-add-index' })
    },
    edi() { // 修改页面
      if (this.ids.length === 0) {
        this.$message.error('请至少选择一项')
        return
      }
      if (this.ids.length > 1) {
        this.$message.error('只能选择一项进行操作')
        return
      }
      this.$router.push({ name: 'property-edi-index', query: { id: this.ids[0] }})
    },
    getPropertyData() { // 查询物业号码数据
      this.$store.dispatch('GetTelsList', this.formInline).then(res => {
        const resData = res.data
        this.propertyList = resData.list
      }).catch(() => {
        console.log('error GetTelsList')
      })
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    deleteIds() { // 批量删除id
      if (this.ids.length === 0) {
        this.$message.error('请至少选择一个项')
        return
      }
      this.$store.dispatch('TelDeleteProperty', this.ids).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getPropertyData()
      }).catch(() => {
        console.log('error TelDelete')
      })
    },
    getMenuList() { // 获取菜单列表
      this.$store.dispatch('GetMenuList').then(res => {
        this.indexData = res.data
      }).catch(() => {
        console.log('error GetMenuList')
      })
    },
    menuEnable(id) { // 启用菜单
      this.$store.dispatch('MenuEnable', id).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getMenuList()
      }).catch(() => {
        console.log('error MenuEnable')
      })
    },
    menuDisable(id) { // 停用菜单
      this.$store.dispatch('MenuDisable', id).then(res => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.getMenuList()
      }).catch(() => {
        console.log('error MenuDisable')
      })
    },
    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')
      })
    },
    equipmentGetAll() { // 监控配置
      const eqData = { type: 1 }
      this.$store.dispatch('EquipmentGetAll', eqData).then((res) => {
        this.equipmentList = res.data
      }).catch(() => {
        console.log('EquipmentGetAll error')
      })
    },
    addMonitoring() { // 添加一个公区监控配置
      this.equipmentList.push({
        'address': '',
        'addressId': '',
        'communityId': '',
        'createTime': '',
        'createUser': '',
        'equipmentTreeId': '',
        'equipmentType': '',
        'id': '',
        'securityGuardTel': '',
        'securityGuardTelId': '',
        'securityRoomTel': '',
        'securityRoomTelId': '',
        'updateTime': '',
        'updateUser': '',
        'url': '',
        'urlId': '',
        'uuid': '',
        'uuidId': ''
      })
    }
  }
}
</script>

<style scoped>
.form-inline {
  margin-left: 20px;
}
</style>
