var pageSys = {

}


function renderIsOpen(data, type, row) { return data == 1 ? "启用" : "禁用" }

var roleTypeDef = {} // = { 1: "角色1", 2: "角色2" } // 调用接口查询获取角色定义
function renderRole(data, type, row) {
  var text = roleTypeDef[data]
  return text != undefined ? text : ''
}

// 需要调用接口查询获取策略类型定义
var policyTypeDef = { 1: "发电策略", 2: "储能策略", 3: "充电策略" }
function renderPolicy(data, type, row) {
  var text = policyTypeDef[data]
  return text != undefined ? text : ''
}

var deviceTypeDef = {
  1: "变压器",
  2: "配电柜",
  3: "电表",
  4: "门禁",
  5: "空调",
  6: "照明",
  7: "消防",
  8: "光照监测设备",
  9: "风速监测设备",
  10: "温湿度监测设备",
  11: "烟感监测设备",
  12: "水浸传感器",
  13: "视频监控",
  101: "逆变器",
  102: "汇流箱",
  103: "光伏板",
  104: "风力发电机",
  105: "储能变流器",
  106: "储能电池",
  107: "BMS",
  108: "充电桩",
  109: "充电枪",
  110: "集中器",
}
function renderDeviceType(data, type, row) {
  var text = deviceTypeDef[data]
  return text != undefined ? text : ''
}

var priceTypeDef = {
  1: "充电计费"
}
function renderPriceType(data, type, row) {
  var text = priceTypeDef[data]
  return text != undefined ? text : ''
}

var syslogTypeDef = {
  0: "其它",
  1: "系统日志",
  2: "操作员日志",
  3: "设备日志",
  4: "告警日志",
}
function renderSyslogType(data, type, row) {
  var text = syslogTypeDef[data]
  return text != undefined ? text : ''
}

var tableDef = {
  user: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '账户', width: '150px' },
      { title: '姓名' },
      { title: '性别', render: function (data, type, row) { return data == 1 ? "男" : "女" } },
      { title: '年龄' },
      { title: '手机号' },
      { title: '邮箱' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '上次登录时间', width: '180px' },
      { title: '角色', render: renderRole },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
      },
    ],
    header: ['user_id', 'account', 'name', 'gender', 'age', 'phone', 'email', 'is_open', 'login_time', 'role_id'],
    query: G.cppNative.queryUserList,
    update: G.cppNative.updateUser,
    insert: G.cppNative.insertUser,
    poptitle: "人员",
    popkeys: ['', 'account', 'name', 'gender', 'age', 'phone', 'email', 'is_open', '', 'role_id'],
  },

  role: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '名称', width: '150px' },
      { title: '描述' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '创建时间', width: '180px' },
      { title: '更新时间', width: '180px' },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
      },
    ],
    header: ['role_id', 'name', 'describe', 'is_open', 'create_time', 'update_time', 'update_by'],
    query: G.cppNative.queryRoleList,
    update: G.cppNative.updateRole,
    insert: G.cppNative.insertRole,
    poptitle: "角色",
    popkeys: ['', 'name', 'describe', 'is_open', 'permission'],
  },

  permission: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '名称', width: '150px' },
      { title: '描述' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '创建时间', width: '180px' },
      { title: '更新时间', width: '180px' },
      { title: '更新人', width: '180px' },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
      },
    ],
    header: ['permission_id', 'name', 'describe', 'is_open', 'create_time', 'update_time', 'update_by'],
    query: G.cppNative.queryPermissionList,
    update: G.cppNative.updatePermission,
    insert: G.cppNative.insertPermission,
    poptitle: "权限",
    popkeys: ['', 'name', 'describe', 'is_open'],
  },

  device: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '类型', width: '150px', render: renderDeviceType },
      { title: '名称', width: '150px' },
      { title: '编号' },
      { title: '型号' },
      { title: '厂家' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '创建时间', width: '180px' },
      { title: '更新时间', width: '180px' },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptAttrs },
      },
    ],
    header: ['device_id', 'type', 'name', 'code', 'model', 'factory', 'is_open', 'create_time', 'update_time', 'attrs'],
    query: G.cppNative.queryDeviceList,
    update: G.cppNative.updateDevice,
    insert: G.cppNative.insertDevice,
    poptitle: "设备",
    popkeys: ['', 'type', 'name', 'code', 'model', 'factory', 'is_open'],
  },

  price: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '类型', width: '120px', render: renderPriceType },
      { title: '名称', width: '150px' },
      { title: '描述' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '创建时间', width: '180px' },
      { title: '更新时间', width: '180px' },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
      },
    ],
    header: ['price_id', 'type', 'name', 'describe', 'is_open', 'create_time', 'update_time'],
    query: G.cppNative.queryPriceList,
    update: G.cppNative.updatePrice,
    insert: G.cppNative.insertPrice,
    poptitle: "计费",
    popkeys: ['', 'type', 'name', 'describe', 'is_open'],
  },

  policy: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '名称', width: '150px' },
      { title: '类型', render: renderPolicy },
      { title: '参数' },
      { title: '描述' },
      { title: '是否启用', width: '120px', render: renderIsOpen },
      { title: '创建时间', width: '180px' },
      { title: '更新时间', width: '180px' },
      {
        title: '操作',
        width: '200px',
        render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
      },
    ],
    header: ['policy_id', 'name', 'type', 'value', 'describe', 'is_open', 'create_time', 'update_time'],
    query: G.cppNative.queryPolicyList,
    update: G.cppNative.updatePolicy,
    insert: G.cppNative.insertPolicy,
    poptitle: "策略",
    popkeys: ['', 'name', 'type', 'value', 'describe', 'is_open'],
  },

  syslog: {
    table: null,
    columns: [
      { title: 'ID', width: '80px' },
      { title: '类型', width: '100px', render: renderSyslogType },
      { title: '用户ID', width: '120px' },
      { title: '用户账户', width: '120px' },
      { title: '内容' },
      { title: '记录时间', width: '180px' }
    ],
    header: ['log_id', 'type', 'user_id', 'user_acount', 'content', 'create_time'],
    query: G.cppNative.querySyslogList,
  }
}

var htmlOptEdit = '<button class="btn btn-primary btn-sm" style="width:80px; height:28px;" id="btnRowEdit">编辑</button>'
var htmlOptDel = '' //'<button class="btn btn-outline-danger btn-sm" style="width:80px; margin-left:8px;" id="btnRowDel">删除</button>'
var htmlOptAttrs = '<button class="btn btn-primary btn-sm" style="width:80px; height:28px; margin-left:8px;" id="btnRowAttrs">属性设置</button>'

var popRowdata = null

// 初始化页面和表格的基础数据
async function initSubpage(id) {
  G.clickSubpageBtn(id)

  if (id == 'user') {
    // 查询获取角色列表，初始化下拉表单和表格角色id的映射
    var elementSelectRole = document.getElementById('userForm_role_id')
    elementSelectRole.innerHTML = ''
    await G.cppNative.queryRoleList(0, 0).then(res => {
      res.data.forEach(item => {
        elementSelectRole.options.add(new Option(item.name, item.role_id))
        roleTypeDef[item.role_id] = item.name
      })
    })
  }
  else if (id == 'role') {
  }
  else if (id == 'price') {
    var elementSelectPriceType = document.getElementById('priceForm_type')
    elementSelectPriceType.innerHTML = ''
    await G.cppNative.queryPriceTypeList().then(res => {
      res.forEach(item => {
        elementSelectPriceType.options.add(new Option(item.name, item.id))
      })
    })
  }
  else if (id == 'policy') {
    var elementSelectPolicyType = document.getElementById('policyForm_type')
    elementSelectPolicyType.innerHTML = ''
    for (var k in policyTypeDef) {
      elementSelectPolicyType.options.add(new Option(policyTypeDef[k], k))
    }
  }

  var tableInfo = tableDef[id]
  // 表格已经初始化，重新加载数据
  if (tableInfo.table) {
    tableInfo.table.ajax.reload()
    return
  }

  G.initTable(id, tableInfo)
  G.initForm(id, popConfirm)

  // 绑定行编辑
  tableInfo.table.on('click', '#btnRowEdit', function () {
    var row = tableInfo.table.row($(this).closest('tr'))
    showPop(id, row.data())
  })

  tableInfo.table.on('click', '#btnRowAttrs', function () {
    var row = tableInfo.table.row($(this).closest('tr'))
    showPopDeviceAttr(row.data())
  })
}


function showPop(id, rowData) {
  popRowdata = (rowData && rowData.length > 0) ? rowData : null
  var isEdit = (popRowdata) ? true : false

  G.showElement(id + 'Pop', true)
  document.getElementById(id + 'FormOk').disabled = true

  var tableInfo = tableDef[id]

  // 设置弹框的标题
  $('#' + id + 'PopTitle').text((isEdit ? '编辑' : '新增') + tableInfo.poptitle)
  // 设置弹框的参数信息
  G.popSetParams(id, tableInfo.popkeys, popRowdata, callbackPopSetParams)

  if (id == 'user') {
    G.popSetParamReadonly('user', 'account', isEdit)
  }
}

var deviceAttrKeyDef = {
  commType: "通讯方式",
  ip: "通讯地址",
  port: "通讯端口",
  isclient: "客户端",
}

// 显示设备的属性编辑弹窗，属性字段格式为JSON: attrs="{}"
function showPopDeviceAttr(rowData) {
  G.showElement('deviceAttrPop', true)
  var device_id = rowData[0]
  var deviceType = rowData[1]
  var deviceTypeStr = deviceTypeDef[deviceType]
  var attrsStr = rowData[9]

  var attrs = { commType: "", ip: "", port: 0, isclient: 1 }
  try {
    attrs = JSON.parse(attrsStr);
  } catch (error) {
  }
  var elemtForm = document.getElementById('deviceAttrForm')
  elemtForm.innerHTML =
    `<div class="input-group mb-3">
      <span class="input-group-text" style="width: 90px; background-color: #a6c0da">编号</span>
      <input type="text" class="form-control" value='${device_id}' disabled />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" style="width: 90px; background-color: #a6c0da">设备类型</span>
      <input type="text" class="form-control" value='${deviceTypeStr}' disabled />
    </div>`
  for (k in attrs) {
    var title = deviceAttrKeyDef[k]
    elemtForm.innerHTML += `<div class="input-group mb-3">
      <span class="input-group-text" style="width: 90px; background-color: #a6c0da">${title}</span>
      <input type="text" class="form-control" value='${attrs[k]}' />
    </div>`
  }
}


function showPrompt(text, status) {
  G.showElement('promptPop', true)
  var promptText = $('#promptText')
  promptText.text(text)
  promptText.css('color', status == 0 ? 'green' : 'red')
}
function hidePrompt() {
  G.showElement('promptPop', false)
}

function callbackPopSetParams(id, key, val) {
  if (key == 'permission') {
    var elementFormPermission = document.getElementById('roleForm_permission')
    elementFormPermission.innerHTML = ""

    if (popRowdata) {
      var roleId = popRowdata[0]
      // 查询权限列表， 更新编辑弹框的权限列表显示内容
      G.cppNative.queryRolePermissionList(roleId).then(res => {
        res.forEach(item => {
          // <li><input class="form-check-input" type="checkbox" value="" />系统总览-查看</li>
          var elemHtml = '<li><input class="form-check-input" type="checkbox" value="' + item.permission_id + '" ' +
            (item.is_open == '1' ? 'checked' : '') + '/>' + item.name + '</li>'
          elementFormPermission.innerHTML += elemHtml
        })
      })
    } else {
      G.cppNative.queryPermissionList(0, 0).then(res => {
        res.data.forEach(item => {
          var elemHtml = '<li><input class="form-check-input" type="checkbox" value="' + item.permission_id + '" ' +
            (item.is_open == '1') + '/>' + item.name + '</li>'
          elementFormPermission.innerHTML += elemHtml
        })
      })
    }
    // 不需要设置参数值
    return undefined
  }
  else {
    return val
  }
}

function callbackPopGetParams(id, key) {
  var val = undefined
  if (key == 'permission') {
    val = []
    var elemtFormPermission = document.getElementById('roleForm_permission')
    var elemtPermissionList = elemtFormPermission.querySelectorAll('input')
    elemtPermissionList.forEach((elemt => {
      val.push({ permission_id: elemt.value, is_open: (elemt.checked ? 1 : 0) })
    }))
  }
  return val
}

function updateTableData(id) {
  var info = tableDef[id]
  var queryFunc = info.query
  if (!queryFunc) return

  queryFunc(1, 10).then((res) => {

  })

}

// 用户弹窗确认
function popConfirm(id) {
  // 获取数据表格操作对象
  var mytable = $('#' + id + 'Table').DataTable()
  // 获取弹框的参数信息
  var tableInfo = tableDef[id]
  G.cppNative.log(id + " edit: rowdata=" + JSON.stringify(popRowdata))
  var params = G.popGetParams(id, tableInfo.popkeys, popRowdata, callbackPopGetParams)
  if (Object.keys(params).length == 0) {
    G.showElement(id + 'Pop', false)
    return
  }

  var isEdit = popRowdata ? true : false
  if (isEdit) {
    var msg = '编辑' + tableInfo.poptitle
    var dataId = popRowdata[0]
    tableInfo.update(dataId, params).then(ret => {
      if (ret == 0 && id == "role" && params.permission.length > 0) {
        G.cppNative.updateRolePermission(dataId, params.permission).then(ret => {
          G.showElement(id + 'Pop', false)
          showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
          mytable.ajax.reload()
        })
      } else {
        G.showElement(id + 'Pop', false)
        showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
        mytable.ajax.reload()
      }
    })
  } else {
    var msg = '新增' + tableInfo.poptitle
    tableInfo.insert(params).then(ret => {
      G.showElement(id + 'Pop', false)
      showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
      mytable.ajax.reload()
    })
  }
}

// 设置设备类型下拉列表
var elementSelectDeviceType = document.getElementById('deviceForm_type')
elementSelectDeviceType.innerHTML = ''
for (k in deviceTypeDef) {
  elementSelectDeviceType.options.add(new Option(deviceTypeDef[k], k))
}

$(document).ready(function () {
  initSubpage('user')

  //G.initTable('user', tableDef['user'])
})