<template>
  <div class="devCenter">
    <div class="devHead">
      <h3>开发文档</h3>
      <p>提供开放开发环境，满足线上和线下开发部署</p>
    </div>
    <div class="container">
      <div class="nav">
        <div class="navtop">
          <h4>开发文档</h4>
          <!-- <el-input
            placeholder="请输入搜索关键字"
            suffix-icon="el-icon-search"
            v-model="searchVal"
          >
          </el-input> -->
          <el-autocomplete
            class="inline-input"
            v-model="searchVal"
            :fetch-suggestions="querySearch"
            placeholder="请输入搜索关键字"
            :trigger-on-focus="false"
            @select="handleSelect"
            clearable
            suffix-icon="el-icon-search"
          ></el-autocomplete>
        </div>
        <el-button class="navBtn" v-show="editState" @click="showDiolog"
          >编辑菜单与内容</el-button
        >
        <div class="navbar">
          <el-menu :default-active="activeId" :unique-opened="true">
            <el-submenu :index="item.id" v-for="item in navList" :key="item.id">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ item.value }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="child.id"
                  v-for="child in item.children"
                  :key="child.id"
                  @click="hanldeClick(child.id)"
                  >{{ child.value }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <div class="content">
        <device-query
          :activeId="activeId"
          :devCenter="devCenter"
        ></device-query>
      </div>
    </div>
    <dev-diolog
      ref="devDiolog"
      :navList="navList"
      :contentList="devCenter"
      @handleSuccess="handleSuccess"
    ></dev-diolog>
  </div>
</template>

<script>
import DeviceQuery from "./DeviceQuery";
import DevDiolog from "./DevDiolog";
import { mapState } from "vuex";
export default {
  props: {
    devData: {
      type: Object,
    },
  },
  name: "devCenter",
  data() {
    return {
      searchVal: "",
      navList: [
        {
          value: "设备管理",
          id: "a",
          children: [
            {
              value: "设备查询",
              id: "0",
            },
            {
              value: "设备新增",
              id: "1",
            },
            {
              value: "设备详情",
              id: "2",
            },
            {
              value: "设备修改",
              id: "3",
            },
            {
              value: "设备删除",
              id: "4",
            },
            {
              value: "设备批量删除",
              id: "5",
            },
            {
              value: "设备信息统计",
              id: "6",
            },
            {
              value: "数据监测",
              id: "7",
            },
            {
              value: "历史数据",
              id: "8",
            },
          ],
        },
        {
          value: "产品管理",
          id: "b",
          children: [
            {
              value: "产品查询",
              id: "9",
            },
            {
              value: "产品新增",
              id: "10",
            },
            {
              value: "产品详情",
              id: "11",
            },
            {
              value: "产品修改",
              id: "12",
            },
            {
              value: "产品删除",
              id: "13",
            },
            {
              value: "产品批量删除",
              id: "14",
            },
          ],
        },
        {
          value: "资费管理",
          id: "c",
          children: [
            {
              value: "资费查询",
              id: "15",
            },
            {
              value: "资费详情",
              id: "16",
            },
          ],
        },
        {
          value: "统计分析",
          id: "d",
          children: [
            {
              value: "统计租户操作信息",
              id: "17",
            },
            {
              value: "统计资源信息",
              id: "18",
            },
          ],
        },
      ],
      devCenter: [
        {
          id: 0,
          title: "设备查询",
          method: "GET",
          url: "/device/page",
          tableData: [
            {
              name: "name",
              format: "字符串",
              required: "否",
              explain: "设备名称",
            },
            {
              name: "key",
              format: "字符串",
              required: "否",
              explain: "设备标识",
            },
            {
              name: "productKey",
              format: "字符串",
              required: "否",
              explain: "产品键值",
            },
            {
              name: "iccid",
              format: "字符串",
              required: "否",
              explain: "设备卡编号",
            },
            {
              name: "page",
              format: "数字",
              required: "是",
              explain: "页数",
            },
            {
              name: "size",
              format: "数字",
              required: "是",
              explain: "分页大小",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": null,
    "data": {
        "records": [
            {
                "deviceId": 59,
                "key": "xxx",
                "name": "xxxx",
                "iccid": "xxxx",
                "sn": "xxxx",
                "connected": false,
                "productKey": "xxxx",
                "description": "xxx",
                "gwFlag": "1",
                "autoAdd": "1",
                "createTime": "2020-07-15 09:58:40",
                "updateTime": "2020-07-15 09:58:40",
                "runTime": 0,
                "productName": "环境温湿度",
                "deptName": "产品",
                "alarmStatus": "0"
            }
        ],
        "total": 1,
        "size": 10,
        "current": 1,
        "searchCount": true,
        "pages": 1
    }
}
                </code>
            </pre>
        `,
        },
        {
          id: 1,
          title: "设备新增",
          method: "POST",
          url: "/device/save",
          tableData: [
            {
              name: "name",
              format: "字符串",
              required: "是",
              explain: "设备名称",
            },
            {
              name: "key",
              format: "字符串",
              required: "是",
              explain: "设备唯一标识",
            },
            {
              name: "productKey",
              format: "字符串",
              required: "是",
              explain: "产品键值",
            },
            {
              name: "gwFlag",
              format: "字符串",
              required: "是",
              explain: "是否网关，0.不是网关 1.是网关",
            },
            {
              name: "iccid",
              format: "字符串",
              required: "否",
              explain: "设备卡编号",
            },
            {
              name: "sn",
              format: "字符串",
              required: "否",
              explain: "设备序列号",
            },
            {
              name: "description",
              format: "字符串",
              required: "否",
              explain: "描述",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": {
        "deviceId": 1
    }
}
                </code>
            </pre>
        `,
        },
        {
          id: 2,
          title: "设备详情",
          method: "GET",
          url: "/device",
          tableData: [
            {
              name: "id",
              format: "数字",
              required: "是",
              explain: "设备id",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": {
        "deviceId": 1,
        "key": "654321",
        "name": "654321",
        "iccid": "testtest",
        "sn": "testtest",
        "connected": false,
        "productKey": "5g",
        "description": "testetst",
        "gwFlag": "1",
        "autoAdd": "0",
        "createTime": "2020-10-28 14:51:30",
        "updateTime": "2020-10-28 14:51:30",
        "runTime": 0,
        "productName": "5g测试",
        "alarmStatus": "0"
    }
}
                </code>
            </pre>
        `,
        },
        {
          id: 3,
          title: "设备修改",
          method: "POST",
          url: "/device/update",
          tableData: [
            {
              name: "key",
              format: "字符串",
              required: "是",
              explain: "设备标识",
            },
            {
              name: "name",
              format: "字符串",
              required: "否",
              explain: "设备名称",
            },
            {
              name: "productKey",
              format: "字符串",
              required: "否",
              explain: "产品键值",
            },
            {
              name: "gwFlag",
              format: "字符串",
              required: "否",
              explain: "是否网关，0.不是网关 1.是网关",
            },
            {
              name: "iccid",
              format: "字符串",
              required: "否",
              explain: "设备卡编号",
            },
            {
              name: "sn",
              format: "字符串",
              required: "否",
              explain: "设备序列号",
            },
            {
              name: "description",
              format: "字符串",
              required: "否",
              explain: "描述",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 4,
          title: "设备删除",
          method: "DELETE",
          url: "/device/delete",
          tableData: [
            {
              name: "id",
              format: "数字",
              required: "是",
              explain: "设备id",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 5,
          title: "设备批量删除",
          method: "DELETE",
          url: "/device/delete-by-ids",
          tableData: [
            {
              name: "ids",
              format: "字符串",
              required: "是",
              explain: "设备id，多个用逗号分隔",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 6,
          title: "设备信息统计",
          method: "GET",
          url: "/device/queryDeviceNum",
          tableData: [],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": {
        "allDeviceNum": 13,
        "runningDeviceNum": 4,
        "warningDeviceNum": 2,
        "onlineRate": "30.77",
        "warningRate": "15.38"
    }
}
                </code>
            </pre>
        `,
        },
        {
          id: 7,
          title: "数据监测",
          method: "GET",
          url: "/device/queryRealTimeData",
          tableData: [
            {
              name: "deviceId",
              format: "数字",
              required: "是",
              explain: "设备id",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": [
        {
            "deviceId": 2,
            "propKey": "prop_test",
            "value": 50,
            "dataTime": "2020-04-21 10:46:10"
        },
        {
            "deviceId": 2,
            "propKey": "prop_",
            "value": 50,
            "dataTime": "2020-04-21 10:46:53"
        }
    ]
}
                </code>
            </pre>
        `,
        },
        {
          id: 8,
          title: "历史数据",
          method: "GET",
          url: "/device/queryHistoryData",
          tableData: [
            {
              name: "deviceId",
              format: "数字",
              required: "是",
              explain: "设备id",
            },
          ],
          response: `
            <pre>
                <code>
{
    "code": 0,
    "msg": "成功",
    "data": {
        "records": [
            {
                "deviceId": 46,
                "propKey": "test1",
                "value": 100,
                "dataTime": "2020-05-11 11:19:48"
            },
            {
                "deviceId": 46,
                "propKey": "test1",
                "value": 100,
                "dataTime": "2020-05-11 11:23:08"
            },
            {
                "deviceId": 46,
                "propKey": "test1",
                "value": 100,
                "dataTime": "2020-05-11 11:24:16"
            },
            {
                "deviceId": 46,
                "propKey": "test1",
                "value": 100,
                "dataTime": "2020-05-11 11:24:16"
            }
        ]
    }
}
                </code>
            </pre>
        `,
        },
        {
          id: 9,
          title: "产品查询",
          method: "GET",
          url: "/product/page",
          tableData: [
            {
              name: "name",
              format: "字符串",
              required: "否",
              explain: "产品名称",
            },
            {
              name: "key",
              format: "字符串",
              required: "否",
              explain: "产品标识",
            },
            {
              name: "page",
              format: "数字",
              required: "是",
              explain: "页数",
            },
            {
              name: "size",
              format: "数字",
              required: "是",
              explain: "分页大小",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": {
    "records": [
      {
        "productId": 138,
        "key": "fnic_device",
        "name": "环境温湿度",
        "description": "环境温湿度",
        "createTime": "2020-03-19 15:06:10",
        "updateTime": "2020-07-09 10:03:41"
      },
      {
        "productId": 139,
        "key": "illuminance",
        "name": "铲车",
        "description": "铲车",
        "createTime": "2020-03-19 15:06:10",
        "updateTime": "2020-07-09 10:05:53"
      }
    ],
    "total": 2,
    "size": 10,
    "current": 1,
    "searchCount": true,
    "pages": 1
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 10,
          title: "产品新增",
          method: "POST",
          url: "/product/save",
          tableData: [
            {
              name: "name",
              format: "字符串",
              required: "是",
              explain: "产品名称",
            },
            {
              name: "key",
              format: "字符串",
              required: "是",
              explain: "产品唯一标识",
            },
            {
              name: "description",
              format: "字符串",
              required: "否",
              explain: "描述",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": {
    "productId": 166
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 11,
          title: "产品详情",
          method: "GET",
          url: "/product",
          tableData: [
            {
              name: "id",
              format: "数字",
              required: "是",
              explain: "产品id",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": {
    "productId": 138,
    "key": "xxxx",
    "name": "环境温湿度",
    "description": " 环境温湿度",
    "createTime": "2020-03-19 15:06:10",
    "updateTime": "2020-07-09 10:03:41"
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 12,
          title: "产品修改",
          method: "POST",
          url: "/product/update",
          tableData: [
            {
              name: "key",
              format: "字符串",
              required: "是",
              explain: "产品唯一标识",
            },
            {
              name: "name",
              format: "字符串",
              required: "否",
              explain: "产品名称",
            },
            {
              name: "description",
              format: "字符串",
              required: "否",
              explain: "产品描述",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 13,
          title: "产品删除",
          method: "DELETE",
          url: "/product/delete",
          tableData: [
            {
              name: "id",
              format: "数字",
              required: "是",
              explain: "产品id",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 14,
          title: "产品批量删除",
          method: "DELETE",
          url: "/product/delete-by-ids",
          tableData: [
            {
              name: "ids",
              format: "字符串",
              required: "是",
              explain: "产品id，多个用逗号分隔",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": "成功",
  "data": null
}
                </code>
            </pre>
        `,
        },
        {
          id: 15,
          title: "资费查询",
          method: "GET",
          url: "/cardBill/page",
          tableData: [
            {
              name: "cycleDate",
              format: "字符串",
              required: "是",
              explain: "账期",
            },
            {
              name: "page",
              format: "数字",
              required: "是",
              explain: "页数",
            },
            {
              name: "size",
              format: "数字",
              required: "是",
              explain: "分页大小",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": null,
  "data": {
    "records": [
      {
        "billId": 1,
        "tenantId": 1,
        "accountId": "xxxxxx",
        "invoiceId": "xxxxxx",
        "currency": "CNY",
        "invoiceDate": "2001-07-31",
        "cycleStartDate": "2001-06-27",
        "cycleEndDate": "2001-07-26",
        "dataVolume": 100.00,
        "totalTerminals": 18,
        "totalCharge": 12.04,
        "smsVolume": 0,
        "createTime": "2001-08-19 11:26:17",
        "updateTime": "2001-08-19 11:26:17",
        "cycleDate": null
      },
      {
        "billId": 2,
        "tenantId": 1,
        "accountId": "xxxxxx",
        "invoiceId": "xxxxxx",
        "currency": "CNY",
        "invoiceDate": "2001-07-01",
        "cycleStartDate": "2001-05-27",
        "cycleEndDate": "2001-06-26",
        "dataVolume": 22.308,
        "totalTerminals": 19,
        "totalCharge": 162.46,
        "smsVolume": 0,
        "createTime": "2001-08-04 11:37:39",
        "updateTime": "2001-08-04 11:37:39",
        "cycleDate": null
      }
    ],
    "total": 2,
    "size": 10,
    "current": 1,
    "searchCount": true,
    "pages": 1
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 16,
          title: "资费详情",
          method: "GET",
          url: "/cardBill",
          tableData: [
            {
              name: "id",
              format: "数字",
              required: "是",
              explain: "资费id",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": null,
  "data": {
    "billId": 1,
    "tenantId": 1,
    "accountId": "xxxx",
    "invoiceId": "xxxx",
    "currency": "CNY",
    "invoiceDate": "2002-07-31",
    "cycleStartDate": "2002-06-27",
    "cycleEndDate": "2002-07-26",
    "dataVolume": 38.826,
    "totalTerminals": 18,
    "totalCharge": 61.04,
    "smsVolume": 0,
    "createTime": "2002-08-19 11:26:17",
    "updateTime": "2002-08-19 11:26:17",
    "cycleDate": null
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 17,
          title: "统计租户操作信息",
          method: "GET",
          url: "/statistic/stat",
          tableData: [
            {
              name: "startTime",
              format: "字符串",
              required: "是",
              explain: "起始时间，时间格式yyyy-mm-dd",
            },
            {
              name: "endTime",
              format: "字符串",
              required: "是",
              explain: "终止时间，时间格式yyyy-mm-dd",
            },
          ],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": null,
  "data": {
    "logList": [
      {
        "logName": "添加设备",
        "logCount": 74
      },
      {
        "logName": "删除设备",
        "logCount": 11
      }
    ],
    "apiList": [
      {
        "logName": "设备查询2222",
        "logCount": 143
      },
      {
        "logName": "设备查询",
        "logCount": 76
      }
    ]
  }
}
                </code>
            </pre>
        `,
        },
        {
          id: 18,
          title: "统计租户操作信息",
          method: "GET",
          url: "/statistic/resourceStat",
          tableData: [],
          response: `
            <pre>
                <code>
{
  "code": 0,
  "msg": null,
  "data": [
    {
      "name": "资源1",
      "status": 2,
      "limit": 99,
      "used": 0,
      "alarm": 0
    },
    {
      "name": "资源2",
      "status": 2,
      "limit": 12,
      "used": 0,
      "alarm": 0
    }
  ]
}
                </code>
            </pre>
        `,
        },
      ],
      activeId: sessionStorage.getItem("activeId") || "0",
    };
  },
  components: {
    DeviceQuery,
    DevDiolog,
  },
  computed: {
    ...mapState(["editState"]),
    contentList() {
      console.log(this.$refs.devDiolog);
      //  return this.$refs.deviceQuery
      return [];
    },
  },
  methods: {
    hanldeClick(id) {
      sessionStorage.setItem("activeId", id);
      this.activeId = id;
    },
    querySearch(queryString, cb) {
      var restaurants = [
        ...this.navList[0].children,
        ...this.navList[1].children,
        ...this.navList[2].children,
        ...this.navList[3].children,
      ];

      console.log(restaurants);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      console.log(results);
      cb(results);
    },

    createFilter(queryString) {
      return (item) => {
        return item.value.indexOf(queryString) != -1;
      };
    },
    handleSelect(item) {
      sessionStorage.setItem("activeId", item.id);
      this.activeId = item.id;
    },
    showDiolog() {
      this.$refs.devDiolog.dialogVisible = true;
    },
    handleSuccess(nav, content) {
      this.navList = nav;
      this.devCenter = content;
    },
  },
  watch: {
    devData: {
      handler(newValue) {
        if (newValue) {
          this.navList = newValue.navList;
          this.devCenter = newValue.devCenter;
        }
      },
      immediate: true,
      deep: true,
    },
  }
};
</script>

<style lang='scss' scoped>
::v-deep.devCenter {
  .devHead {
    width: 100%;
    height: 340px;
    background: url("../assets/home/dev.jpg") no-repeat center/100%;
    overflow: hidden;
    color: #fff;

    h3 {
      margin-top: 160px;
      font-size: 45px;
    }

    p {
      margin-top: 30px;
      font-size: 24px;
    }
  }

  .container {
    background: #f5f5f5;
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .nav {
      width: 15%;
      background: #fff;

      .navtop {
        padding: 20px;
        height: 120px;

        h4 {
          font-size: 20px;
          text-align: left;
          margin-bottom: 20px;
        }
      }

      .navBtn {
        width: 78%;
      }

      .navbar {
        height: calc(100% - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        .el-menu {
          border: 0;

          .el-submenu__title {
            text-align: left;
          }

          .el-menu-item {
            text-align: left;
            padding-left: 50px !important;
          }

          .el-submenu.is-active {
            .el-submenu__title {
              color: #409eff;
              .el-icon-menu {
                color: #409eff;
              }
            }
          }

          .el-menu-item.is-active {
            background: #e6f7ff;
            border-right: 2px solid #1e93ff;
          }
        }
      }
    }

    .content {
      width: 84.5%;
      min-height: 800px;
      background: #fff;
    }
  }

  .el-dialog {
    min-width: 695px;
  }
}
</style>
