<!--项目配置-->
<template>
  <app-container>
    <el-row>
      <el-col v-show="tenantList.length>1" :span="5">
        <div style="width:95%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>项目</span>
            </div>
            <el-tree ref="tenantlist" :data="tenantList" :props="defaultProps" :highlight-current="true" :current-node-key="selectedTenant.id" :default-checked-keys="defaultCheckedKeys" node-key="id" @node-click="handleNodeClick" />
          </el-card>
        </div>
      </el-col>
      <!--右半部分-->
      <el-col :span="tenantList.length>1?19:24">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="configForm"
          label-well-code="right"
          label-width="140px"
        >
          <div class="titleHeadStyle">
            <div>{{ selectedTenant.tenantName }}</div>
          </div>
          <div class="titleStyle">
            基础配置
          </div>
          <el-row :gutter="10">
            <el-col :span="20">
              <el-form-item label="默认坐标系" prop="devcode">
                <el-radio-group v-model="configForm.coordinateType">
                  <el-radio label="wgs84">
                    WGS84
                  </el-radio>
                  <el-radio label="gcj02">
                    GCJ02
                  </el-radio>
                  <el-radio label="bd09">
                    BD09
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="默认中心经度" prop="lng">
                <el-input
                  v-model.trim="configForm.lng"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入经度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="默认中心纬度" prop="lat">
                <el-input
                  v-model.trim="configForm.lat"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入纬度"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="20">
              <el-form-item label="支持通讯协议" prop="communication">
                <el-checkbox-group v-model="configForm.communication">
                  <el-checkbox v-for="item in commuList" :key="item.value" :label="item.name" :value="item.value" />
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="产生工单" prop="isJobGenerate">
                <el-switch
                  v-model="configForm.isJobGenerate"
                  active-value="1"
                  inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="APP推送" prop="isAppPush">
                <el-switch
                  v-model="configForm.isAppPush"
                  active-value="1"
                  inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="短信推送" prop="isMessagePush">
                <el-switch
                  v-model="configForm.isMessagePush"
                  active-value="1"
                  inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="titleStyle">
            NB平台配置
          </div>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="APPID" prop="appid">
                <el-input
                  v-model.trim="nbConfig.appid"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入APPID"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="APPKEY" prop="appkey">
                <el-input
                  v-model.trim="nbConfig.appkey"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入APPKEY"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="平台地址" prop="baseUrl">
                <el-input
                  v-model.trim="nbConfig.baseUrl"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入平台地址"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="应用名称" prop="appname">
                <el-input
                  v-model.trim="nbConfig.appname"
                  clearable
                  size="small"
                  type="text"
                  placeholder="请输入应用名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="20">
            <el-row type="flex" class="buttonGroup" justify="center">
              <el-button type="primary" class="btn" @click="saveData">
                保存
              </el-button>
              <el-button class="btn" @click="cancel">
                取消
              </el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </app-container>
</template>

<script>
import { getTenantList } from '@/api/system/tenant'
import { communicationType } from '@/api/well/well'
// import { alarmTenantList, delAlarmTenant } from '@/api/systemConfig/tenantConfig'
export default {
  name: 'TenantConfig',
  data() {
    return {
      selectedTenant: {
        id: '1',
        tenantName: ''
      }, // 选中的项目
      tenantList: [], // 项目列表
      commuList: [], // 支持通讯方式
      treeLoading: false,
      deptTree: null,
      defaultProps: {
        children: 'children',
        label: 'tenantName'
      },
      configForm: {
        lng: '', // 经度
        lat: '', // 纬度
        communication: ['1', '2', '3', '4', '5'], // 通讯方式,
        coordinateType: 'wgs84', // 坐标系
        isJobGenerate: '1', // 是否生成工单
        isAppPush: '0', // 是否开始app推送
        isMessagePush: '0' // 是否开启短信推送
      }, // 项目配置项
      nbConfig: {
        appid: '',
        appkey: '',
        baseUrl: '',
        appname: ''
      }, // NB配置
      // 表单校验规则
      rules: {
        lng: [{ required: false, message: '设备编号必填', trigger: ['blur', 'change'] }]
      }
    }
  },
  mounted() {
    this.fetchcommunType()
    this.fetchTenantList()
    this.fetchData()
  },
  methods: {
    // 获取通讯方式
    fetchcommunType() {
      communicationType().then(response => {
        console.log(response, '通讯方式')
        this.commuList = response.data
      })
    },
    // 获取项目列表
    fetchTenantList() {
      getTenantList().then(response => {
        this.tenantList = response.data
        if (this.tenantList.length > 0) {
          this.selectedTenant = this.tenantList[0]
          this.fetchData()
        }
      })
    },
    // 点击切换项目
    handleNodeClick(data) {
      this.selectedTenant = {
        id: data.id,
        tenantName: data.tenantName
      }
      this.fetchData()
    },
    search() {},
    // 获取用户数据
    fetchData() {
    },
    // 保存
    saveData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // updateDeviceModel(this.deviceForm).then(response => {
          //   if (response.code === 200) {
          //     this.$message.success('修改成功')
          //     this.$emit('watchChild')
          //     this.dialogFormVisible = false
          //   }
          // })
        }
      })
    },
    // 取消
    cancel() {}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .titleHeadStyle{
    font-weight: 600;
    margin: 20px 0;
  }
  .titleStyle{
    margin: 20px;
    font-weight: 600;
  }
  .buttonGroup{
    margin-top: 20px;
    .btn +.btn{
      margin-left: 20px;
    }
  }
</style>
