import { getHost, getToken } from "../../on";
import { generatePagination } from "./Pagination";
import { legp } from './datalist';

function attributeElm(that) {
  let host = getHost()

  that.cameraSelect = cameraSelect
  that.ISCSelect = ISCSelect
  that.goodsSelect = goodsSelect
  that.goodsFilter = goodsFilter
  that.cameraName = ''
  that.ISCName = ''
  const type = {
    '1': '海康',
    '2': '大华'
  }

  let cameraPageSize = 5
  let iscPageSize = 5
  let goodsPageSize = 999999

  function cameraSelect(page) {
    if (!that.attributeSelect) {
      return
    }
    else {
      let flag = false
      for (let i = 0; i < that.attributeSelect.length; i++) {
        if (that.attributeSelect[i].key === 'camera') {
          flag = true
          break
        }
      }
      if (!flag) {
        return
      }
    }
    let firstPage = page
    page = !page || typeof page === 'object' ? 1 : page
    let attributeCameraElm
    if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
      let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
      attributeCameraElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-camera')[0]
      if (!paginationElm) {
        return
      }
      if (!attributeCameraElm) {
        return
      }
      generatePagination(paginationElm, 1, 10, 1);
    }
    else {
      return
    }
    let url = ""
    const params = {
      cameraName: that.cameraName,
      page: page,
      pageSize: cameraPageSize
    };
    const queryString = new URLSearchParams(params).toString();
    if (host.endsWith("yjearth4.0"))
      url = `${host}/api/v1/cameraData/list?${queryString}`
    else
      url = `${host}/yjearth4.0/api/v1/cameraData/list?${queryString}`
    fetch(url, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        "token": getToken(),
        "Authorization": "Bearer " + getToken(),
      }
    }).then((response) => {
      if (response.status === 200) {
        response.json().then((data) => {
          if (data.code === 200 || data.code === 0) {
            if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
              return
            }
            let paginationElm = attributeCameraElm.getElementsByClassName('pagination')[0]
            let table = that._DialogObject._element.content.getElementsByClassName('camera-table')[0]
            let tableContent = table.getElementsByClassName('table-body')[0]
            tableContent.innerHTML = ''
            if (data.rows) {
              data.data = {
                list: [...data.rows],
                total: data.total
              }
            }
            if (data.data) {
              if (data.data.list && data.data.list.length > 0) {
                generatePagination(paginationElm, data.data.total, cameraPageSize, 1, (pageIndex) => {
                  that.cameraSelect(pageIndex)
                });
                table.getElementsByClassName('table-empty')[0].style.display = 'none'
                tableContent.style.display = 'inline-flex'
                let checkboxArray = []
                for (let i = 0; i < data.data.list.length; i++) {
                  let tr = `
                    <div class="tr">
                      <div class="td">
                        <input type="checkbox" value="${data.data.list[i].deviceId}">
                        <span>绑定</span>
                      </div>
                      <div class="td">${data.data.list[i].cameraName}</div>
                      <div class="td center" style="width: 80px; flex: 0 80px; min-width: 80px;">${type[data.data.list[i].type]}</div>
                      <div class="td center" style="width: 126px; flex: 0 126px;min-width: 126px;">${data.data.list[i].ip}</div>
                      <div class="td center" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].port}</div>
                      <div class="td center" style="width: 80px; flex: 0 80px;min-width: 80px;">${data.data.list[i].userName}</div>
                      <div class="td center">${data.data.list[i].passWord || data.data.list[i].password}</div>
                    </div>`
                  let trElm = document.createRange().createContextualFragment(tr)
                  let checkbox = trElm.querySelector('input[type="checkbox"]')
                  checkboxArray.push(checkbox)
                  checkbox.addEventListener('change', () => {
                    if (checkbox.checked) {
                      // 只选中一个
                      that.attributeCamera = []
                      that.attributeCamera.push(data.data.list[i])
                      for (let j = 0; j < checkboxArray.length; j++) {
                        if (checkboxArray[j] !== checkbox) {
                          checkboxArray[j].checked = false
                        } 
                      }
                    }
                    else {
                      let newArray = that.attributeCamera.filter((item) => {
                        if ('deviceId' in data.data.list[i]) {
                          return item.deviceId !== data.data.list[i].deviceId
                        }
                      })
                      that.attributeCamera = newArray
                    }
                  })
                  tableContent.appendChild(trElm)

                  for (let m = 0; m < that.attributeCamera.length; m++) {
                    if (('deviceId' in data.data.list[i]) ? (that.attributeCamera[m].deviceId === data.data.list[i].deviceId):false) {
                      checkbox.checked = true
                      break
                    }
                  }
                }
              }
              if (data.data && data.data.total) {
                generatePagination(paginationElm, data.data.total, cameraPageSize, page, (pageIndex) => {
                  that.cameraSelect(pageIndex)
                });
              }
            }
            else {
              generatePagination(paginationElm, 1, cameraPageSize, 1);
              table.getElementsByClassName('table-empty')[0].style.display = 'flex'
              tableContent.style.display = 'none'
            }
          } else {
            console.error(data.message)
          }
        })
      }
    })

    // 查询全部
    if (!firstPage) {
      const params2 = {
        page: 1,
        pageSize: 99999999
      };
      const queryString2 = new URLSearchParams(params2).toString();
      if (host.endsWith("yjearth4.0"))
        url = `${host}/api/v1/cameraData/list?${queryString2}`
      else
        url = `${host}/yjearth4.0/api/v1/cameraData/list?${queryString2}`
      fetch(url, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json',
          "token": getToken(),
          "Authorization": "Bearer " + getToken(),
        }
      }).then((response) => {
        if (response.status === 200) {
          response.json().then((data) => {
            if (data.code === 200 || data.code === 0) {
              if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
                return
              }
              if (data.rows) {
                data.data = {
                  list: [...data.rows],
                  total: data.total
                }
              }
              if (data.data) {
                if (data.data.list) {
                  for (let i = that.attributeCamera.length - 1; i >= 0; i--) {
                    let flag = false
                    for (let m = 0; m < data.data.list.length; m++) {
                      if (that.attributeCamera[i].deviceId === data.data.list[m].deviceId) {
                        flag = true
                        break
                      }
                    }
                    if (!flag) {
                      that.attributeCamera.splice(i, 1)
                    }
                  }
                }
                else {
                  that.attributeCamera = []
                }
              }
              else {
                that.attributeCamera = []
              }
            } else {
              console.error(data.message)
            }
          })
        }
      })
    }
  }

  function ISCSelect(page) {
    if (!that.attributeSelect) {
      return
    }
    else {
      let flag = false
      for (let i = 0; i < that.attributeSelect.length; i++) {
        if (that.attributeSelect[i].key === 'isc') {
          flag = true
          break
        }
      }
      if (!flag) {
        return
      }
    }
    page = !page || typeof page === 'object' ? 1 : page
    let attributeCameraElm
    if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
      let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
      attributeCameraElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-isc')[0]
      if (!paginationElm) {
        return
      }
      if (!attributeCameraElm) {
        return
      }
      generatePagination(paginationElm, 1, 10, 1);
    }
    else {
      return
    }
    let url = ""
    const params = {
      // name: that.iscName,
      page: page,
      page_size: iscPageSize
    };
    const queryString = new URLSearchParams(params).toString();
    if (host.endsWith("yjearth4.0"))
      url = `${host}/api/v1/isc/list?${queryString}`
    else
      url = `${host}/yjearth4.0/api/v1/isc/list?${queryString}`
    fetch(url, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        "token": getToken(),
        "Authorization": "Bearer " + getToken(),
      }
    }).then((response) => {
      if (response.status === 200) {
        response.json().then((data) => {
          if (data.code === 200 || data.code === 0) {
            if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeCameraElm) {
              return
            }
            let paginationElm = attributeCameraElm.getElementsByClassName('pagination')[0]
            let table = that._DialogObject._element.content.getElementsByClassName('isc-table')[0]
            let tableContent = table.getElementsByClassName('table-body')[0]
            tableContent.innerHTML = ''
            if (data.rows) {
              data.data = {
                list: [...data.rows],
                total: data.total
              }
            }
            if (data.data) {
              if (data.data.list && data.data.list.length > 0) {
                generatePagination(paginationElm, data.data.total, iscPageSize, 1, (pageIndex) => {
                  that.ISCSelect(pageIndex)
                });
                table.getElementsByClassName('table-empty')[0].style.display = 'none'
                tableContent.style.display = 'flex'
                for (let i = 0; i < data.data.list.length; i++) {
                  let tr = `
                    <div class="tr">
                      <div class="td">
                        <input type="checkbox" value="${'ID' in data.data.list[i] ? data.data.list[i].ID : data.data.list[i].id}">
                        <span>绑定</span>
                      </div>
                      <div class="td">${data.data.list[i].name}</div>
                      <div class="td center" style="width: 180px; flex: 0 180px; min-width: 180px;">${data.data.list[i].status ? '在线' : '离线'}</div>
                    </div>`
                  let trElm = document.createRange().createContextualFragment(tr)
                  let checkbox = trElm.querySelector('input[type="checkbox"]')
                  checkbox.addEventListener('change', () => {
                    if (checkbox.checked) {
                      that.attributeISC.push(data.data.list[i])
                    }
                    else {
                      let newArray = that.attributeISC.filter((item) => {
                        if ('ID' in data.data.list[i]) {
                          return item.ID !== data.data.list[i].ID
                        }
                        else {
                          return item.id !== data.data.list[i].id
                        }
                      })
                      that.attributeISC = newArray
                    }
                  })
                  tableContent.appendChild(trElm)

                  for (let m = 0; m < that.attributeISC.length; m++) {
                    if (('ID' in data.data.list[i]) ? (that.attributeISC[m].ID === data.data.list[i].ID) : (that.attributeISC[m].id === data.data.list[i].id)) {
                      checkbox.checked = true
                      break
                    }
                  }
                }
              }
              if (data.data && data.data.total) {
                generatePagination(paginationElm, data.data.total, iscPageSize, page, (pageIndex) => {
                  that.ISCSelect(pageIndex)
                });
              }
            }
            else {
              generatePagination(paginationElm, 1, iscPageSize, 1);
              table.getElementsByClassName('table-empty')[0].style.display = 'flex'
              tableContent.style.display = 'none'
            }
          } else {
            console.error(data.message)
          }
        })
      }
    })
  }

  function goodsSelect(page) {
    if (!that.attributeSelect) {
      return
    }
    else {
      let flag = false
      for (let i = 0; i < that.attributeSelect.length; i++) {
        if (that.attributeSelect[i].key === 'goods') {
          flag = true
          break
        }
      }
      if (!flag) {
        return
      }
    }
    page = !page || typeof page === 'object' ? 1 : page
    let attributeElm
    if (that._DialogObject && that._DialogObject._element && that._DialogObject._element.content) {
      let paginationElm = that._DialogObject._element.content.getElementsByClassName('pagination')[0]
      attributeElm = that._DialogObject._element.content.getElementsByClassName('attribute-content-goods')[0]
      if (!paginationElm) {
        return
      }
      if (!attributeElm) {
        return
      }
      // generatePagination(paginationElm, 1, 10, 1);
    }
    else {
      return
    }
    let url = ""
    const params = {
      page: page,
      page_size: goodsPageSize
    };
    const queryString = new URLSearchParams(params).toString();
    if (host.endsWith("yjearth4.0"))
      url = `${host}/api/v1/goods/list?${queryString}`
    else
      url = `${host}/yjearth4.0/api/v1/goods/list?${queryString}`
    fetch(url, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        "token": getToken(),
        "Authorization": "Bearer " + getToken(),
      }
    }).then((response) => {
      if (response.status === 200) {
        response.json().then((data) => {
          if (data.code === 200 || data.code === 0) {
            if (!that._DialogObject || !that._DialogObject._element || !that._DialogObject._element.content || !attributeElm) {
              return
            }
            let paginationElm = attributeElm.getElementsByClassName('pagination')[0]
            let table = that._DialogObject._element.content.getElementsByClassName('goods-table')[0]
            let tableContent = table.getElementsByClassName('table-body')[0]
            tableContent.innerHTML = ''
            if (data.rows) {
              data.data = {
                list: [...data.rows],
                total: data.total
              }
            }
            if (data.data) {
              if (data.data.list && data.data.list.length > 0) {
                that._allGoodsList = data.data.list
                // generatePagination(paginationElm, data.data.total, goodsPageSize, 1, (pageIndex) => {
                //   that.goodsSelect(pageIndex)
                // });
                for (let i = that.attributeGoods.length - 1; i >= 0; i--) {
                  let flag = false
                  for (let m = 0; m < data.data.list.length; m++) {
                    if ('ID' in data.data.list[m]) {
                      if (data.data.list[m].ID === that.attributeGoods[i].ID) {
                        flag = true
                        break
                      }
                    }
                    else if ('id' in data.data.list[m]) {
                      if (data.data.list[m].id === that.attributeGoods[i].id) {
                        flag = true
                        break
                      }
                    }
                  }
                  if (!flag) {
                    that.attributeGoods.splice(i, 1)
                  }
                }
                table.getElementsByClassName('table-empty')[0].style.display = 'none'
                tableContent.style.display = 'block'
                tableContent.style.maxHeight = '150px'
                for (let i = 0; i < data.data.list.length; i++) {
                  let tr = `
                    <div class="tr">
                      <div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">
                        ${i + 1}
                      </div>
                      <div class="td" style="flex: 0 0 280px;">${data.data.list[i].name}</div>
                      <div class="td"><input class="input" type="number" title="" min="0" max="999999999"></div>
                    </div>`
                  let trElm = document.createRange().createContextualFragment(tr)
                  let inputElm = trElm.querySelector('input[type="number"]')
                  inputElm.value = 0
                  for (let m = 0; m < that.attributeGoods.length; m++) {
                    if ('ID' in data.data.list[i]) {
                      if (data.data.list[i].ID === that.attributeGoods[m].ID) {
                        inputElm.value = that.attributeGoods[m].cnt
                        that.attributeGoods[m].name = data.data.list[i].name
                      }
                    }
                    else if ('id' in data.data.list[i]) {
                      if (data.data.list[i].id === that.attributeGoods[m].id) {
                        inputElm.value = that.attributeGoods[m].cnt
                      }
                    }

                  }
                  inputElm.addEventListener('blur', (e) => {
                    let value = Number(e.target.value)
                    inputElm.value = value
                    let flag = false
                    for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
                      if ('ID' in data.data.list[i]) {
                        if (data.data.list[i].ID === that.attributeGoods[m].ID) {
                          flag = true
                          if (value) {
                            that.attributeGoods[m].cnt = value
                          }
                          else {
                            that.attributeGoods.splice(m, 1)
                          }
                          break
                        }
                      }
                      else if ('id' in data.data.list[i]) {
                        if (data.data.list[i].id === that.attributeGoods[m].id) {
                          flag = true
                          if (value) {
                            that.attributeGoods[m].cnt = value
                          }
                          else {
                            that.attributeGoods.splice(m, 1)
                          }
                          break
                        }
                      }
                    }
                    if (!flag) {
                      if (!value) {
                        return
                      }
                      let item = {
                        name: data.data.list[i].name,
                        cnt: value
                      }
                      if ('ID' in data.data.list[i]) {
                        item.ID = data.data.list[i].ID
                      }
                      else if ('id' in data.data.list[i]) {
                        item.id = data.data.list[i].id
                      }
                      that.attributeGoods.push({ ...item })
                    }
                  })
                  inputElm.addEventListener('input', (e) => {
                    if (e.data && isNaN(Number(e.data))) {
                      if (e.data != '.') {
                        inputElm.value = Number(inputElm.value)
                      }
                      return
                    }
                    let value = Number(e.target.value)
                    if ((e.target.max) && value > Number(e.target.max)) {
                      value = Number(e.target.max)
                    }
                    if ((e.target.min) && value < Number(e.target.min)) {
                      value = Number(e.target.min)
                    }
                    inputElm.value = value
                    let flag = false
                    for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
                      if ('ID' in data.data.list[i]) {
                        if (data.data.list[i].ID === that.attributeGoods[m].ID) {
                          flag = true
                          if (value) {
                            that.attributeGoods[m].cnt = value
                          }
                          else {
                            that.attributeGoods.splice(m, 1)
                          }
                          break
                        }
                      }
                      else if ('id' in data.data.list[i]) {
                        if (data.data.list[i].id === that.attributeGoods[m].id) {
                          flag = true
                          if (value) {
                            that.attributeGoods[m].cnt = value
                          }
                          else {
                            that.attributeGoods.splice(m, 1)
                          }
                          break
                        }
                      }
                    }
                    if (!flag) {
                      if (!value) {
                        return
                      }
                      let item = {
                        name: data.data.list[i].name,
                        cnt: value
                      }
                      if ('ID' in data.data.list[i]) {
                        item.ID = data.data.list[i].ID
                      }
                      else if ('id' in data.data.list[i]) {
                        item.id = data.data.list[i].id
                      }
                      that.attributeGoods.push({ ...item })
                    }
                  })


                  tableContent.appendChild(trElm)
                }
              }
              if (data.data && data.data.total) {
                // generatePagination(paginationElm, data.data.total, goodsPageSize, page, (pageIndex) => {
                //   that.goodsSelect(pageIndex)
                // });
              }
            }
            else {
              // generatePagination(paginationElm, 1, goodsPageSize, 1);
              table.getElementsByClassName('table-empty')[0].style.display = 'flex'
              tableContent.style.display = 'none'
            }
          } else {
            console.error(data.message)
          }
        })
      }
    })
  }

  function goodsFilter() {
    let list = []
    if (that._allGoodsList && that._allGoodsList.length) {
      let keywords = that._DialogObject._element.content.getElementsByClassName('goods-select-input')[0].value
      list = that._allGoodsList.filter(function (item) {
        return (item.name.indexOf(keywords) !== -1);
      });
    }
    let table = that._DialogObject._element.content.getElementsByClassName('goods-table')[0]
    let tableContent = table.getElementsByClassName('table-body')[0]
    tableContent.innerHTML = ''
    if (list.length > 0) {
      // generatePagination(paginationElm, data.data.total, goodsPageSize, 1, (pageIndex) => {
      //   that.goodsSelect(pageIndex)
      // });
      table.getElementsByClassName('table-empty')[0].style.display = 'none'
      tableContent.style.display = 'block'
      tableContent.style.maxHeight = '150px'
      for (let i = 0; i < list.length; i++) {
        let tr = `
            <div class="tr">
              <div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">
                ${i + 1}
              </div>
              <div class="td" style="flex: 0 0 280px;">${list[i].name}</div>
              <div class="td"><input class="input" type="number" title="" min="0" max="999999999"></div>
            </div>`
        let trElm = document.createRange().createContextualFragment(tr)
        let inputElm = trElm.querySelector('input[type="number"]')
        inputElm.value = 0
        for (let m = 0; m < that.attributeGoods.length; m++) {
          if ('ID' in list[i]) {
            if (list[i].ID === that.attributeGoods[m].ID) {
              inputElm.value = that.attributeGoods[m].cnt
            }
          }
          else if ('id' in list[i]) {
            if (list[i].id === that.attributeGoods[m].id) {
              inputElm.value = that.attributeGoods[m].cnt
            }
          }

        }
        inputElm.addEventListener('blur', (e) => {
          let value = Number(e.target.value)
          inputElm.value = value
          let flag = false
          for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
            if ('ID' in list[i]) {
              if (list[i].ID === that.attributeGoods[m].ID) {
                flag = true
                if (value) {
                  that.attributeGoods[m].cnt = value
                }
                else {
                  that.attributeGoods.splice(m, 1)
                }
                break
              }
            }
            else if ('id' in list[i]) {
              if (list[i].id === that.attributeGoods[m].id) {
                flag = true
                if (value) {
                  that.attributeGoods[m].cnt = value
                }
                else {
                  that.attributeGoods.splice(m, 1)
                }
                break
              }
            }
          }
          if (!flag) {
            if (!value) {
              return
            }
            let item = {
              name: list[i].name,
              cnt: value
            }
            if ('ID' in list[i]) {
              item.ID = list[i].ID
            }
            else if ('id' in list[i]) {
              item.id = list[i].id
            }
            that.attributeGoods.push({ ...item })
          }
        })
        inputElm.addEventListener('input', (e) => {
          if (e.data && isNaN(Number(e.data))) {
            if (e.data != '.') {
              inputElm.value = Number(inputElm.value)
            }
            return
          }
          let value = Number(e.target.value)
          if ((e.target.max) && value > Number(e.target.max)) {
            value = Number(e.target.max)
          }
          if ((e.target.min) && value < Number(e.target.min)) {
            value = Number(e.target.min)
          }
          inputElm.value = value
          let flag = false
          for (let m = that.attributeGoods.length - 1; m >= 0; m--) {
            if ('ID' in list[i]) {
              if (list[i].ID === that.attributeGoods[m].ID) {
                flag = true
                if (value) {
                  that.attributeGoods[m].cnt = value
                }
                else {
                  that.attributeGoods.splice(m, 1)
                }
                break
              }
            }
            else if ('id' in list[i]) {
              if (list[i].id === that.attributeGoods[m].id) {
                flag = true
                if (value) {
                  that.attributeGoods[m].cnt = value
                }
                else {
                  that.attributeGoods.splice(m, 1)
                }
                break
              }
            }
          }
          if (!flag) {
            if (!value) {
              return
            }
            let item = {
              name: list[i].name,
              cnt: value
            }
            if ('ID' in list[i]) {
              item.ID = list[i].ID
            }
            else if ('id' in list[i]) {
              item.id = list[i].id
            }
            that.attributeGoods.push({ ...item })
          }
        })
        tableContent.appendChild(trElm)
      }

      // else {
      //   table.getElementsByClassName('table-empty')[0].style.display = 'flex'
      //   tableContent.style.display = 'none'
      // }
    }
    else {
      table.getElementsByClassName('table-empty')[0].style.display = 'flex'
      tableContent.style.display = 'none'
    }
  }

  return `<div class="attribute">
            <div class="row">
                <div class="col attribute-select-box">
                    <span class="label" style="line-height: 32px;">内容类型</span>
                    <div class="input input-select attribute-select"></div>
                </div>
            </div>
            <div class="attribute-content attribute-content-richText">
                <div class="row">
                    <div class="col">
                        <span class="label">编辑内容</span>
                        <button @click="openRichTextEditor">打开文本编辑器</button>
                    </div>
                </div>
            </div>
            <div class="row attribute-content attribute-content-link">
                <div class="col">
                    <span class="label">添加链接</span>
                    <div style="flex: 1;position: relative;">
                        <input class="input link_add" type="text">
                        <i class="link_add_btn" @click="_addLink"></i>
                    </div>
                </div>
            </div>
            <div class="attribute-content attribute-content-link">
                <div class="table">
                    <div class="table-head">
                        <div class="tr">
                            <div class="th">名称</div>
                            <div class="th">链接</div>
                            <div class="th">操作</div>
                        </div>
                    </div>
                    <div class="table-body">
                    </div>
                    <div class="table-empty">
                        <div class="empty-img"></div>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="attribute-content attribute-content-camera">
                <div class="row">
                    <div class="col">
                        <span class="label">编辑内容</span>
                        <input class="input" type="text" @model="cameraName" style="width: 100px;">
                        <button class="select btn" @click="cameraSelect">搜索</button>
                    </div>
                </div>
                <div>
                    <div class="table camera-table">
                        <div class="table-head">
                            <div class="tr">
                                <div class="th">操作</div>
                                <div class="th">设备名称</div>
                                <div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备类型</div>
                                <div class="th" style="width: 126px; flex: 0 126px;min-width: 126px;">设备IP</div>
                                <div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备端口</div>
                                <div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">用户名</div>
                                <div class="th">密码</div>
                            </div>
                        </div>
                        <div class="table-body" style="display:none;">
                            <div class="tr">
                                <div class="td">
                                  <input type="checkbox" value="2">
                                  <span>绑定</span>
                                </div>
                                <div class="td">设备名称</div>
                                <div class="td">设备类型</div>
                                <div class="td">设备IP</div>
                                <div class="td">设备端口</div>
                                <div class="td">用户名</div>
                                <div class="td">密码</div>
                            </div>
                        </div>
                        <div class="table-empty">
                            <div class="empty-img"></div>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </div>
                <div class=""row>
                    <ul class="pagination"></ul>
                </div>
            </div>
            <div class="attribute-content attribute-content-isc">
                <!-- <div class="row">
                    <div class="col">
                        <span class="label">编辑内容</span>
                        <input class="input" type="text" @model="ISCName" style="width: 100px;">
                        <button class="select btn" @click="ISCSelect">搜索</button>
                    </div>
                </div> -->
                <div>
                    <div class="table isc-table">
                        <div class="table-head">
                            <div class="tr">
                                <div class="th" style="width: 74px; flex: 0 74px;min-width: 74px;">操作</div>
                                <div class="th">设备名称</div>
                                <div class="th" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
                            </div>
                        </div>
                        <div class="table-body" style="display:none;">
                            <div class="tr">
                                <div class="td">
                                  <input type="checkbox" value="2">
                                  <span>绑定</span>
                                </div>
                                <div class="td">设备名称</div>
                                <div class="td" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
                            </div>
                        </div>
                        <div class="table-empty">
                            <div class="empty-img"></div>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </div>
                <div class=""row>
                    <ul class="pagination"></ul>
                </div>
            </div>
            <div class="row attribute-content attribute-content-vr">
                <div class="col">
                    <span class="label">添加链接</span>
                    <div style="flex: 1;position: relative;">
                        <input class="input vr_add" type="text">
                        <i class="vr_add_btn" @click="_addRr"></i>
                    </div>
                </div>
            </div>
            <div class="attribute-content attribute-content-vr">
                <div class="table">
                    <div class="table-head">
                        <div class="tr">
                            <div class="th">名称</div>
                            <div class="th">链接</div>
                            <div class="th">操作</div>
                        </div>
                    </div>
                    <div class="table-body">
                    </div>
                    <div class="table-empty">
                        <div class="empty-img"></div>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="attribute-content attribute-content-goods">
                <div>
                    <div class="row">
                        <div class="col">
                            <span class="label">编辑内容</span>
                            <input class="input goods-select-input" type="text" style="width: 180px;margin-right: 10px;">
                            <button class="select btn" @click="goodsFilter">搜索</button>
                        </div>
                    </div>
                    <div class="table goods-table">
                        <div class="table-head">
                            <div class="tr">
                                <div class="th" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
                                <div class="th" style="flex: 0 0 280px;">名称</div>
                                <div class="th">数量</div>
                            </div>
                        </div>
                        <div class="table-body" style="display:none;">
                            <div class="tr">
                                <div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
                                <div class="td" style="flex: 0 0 280px;">名称</div>
                                <div class="td">数量</div>
                            </div>
                        </div>
                        <div class="table-empty">
                            <div class="empty-img"></div>
                            <p>暂无数据</p>
                        </div>
                    </div>
                </div>
            </div>
          </div>`
}

function labelStyleElm1(that) {
  return `
    <div class="row">
      <div class="col">
          <span class="label">标注开关</span>
          <input class="btn-switch" type="checkbox" @model="labelShow">
      </div>
    </div>
    <div class="row">
      <div class="col" style="flex: 0 0 114px;">
          <span class="label">字体颜色</span>
          <div class="labelColor"></div>
      </div>
      <div class="col font-select-box">
          <span class="label" style="flex: none;">字体选择</span>
          <div class="input input-select font-select"></div>
      </div>
      <div class="col">
          <span class="label">字体大小</span>
          <div class="input-number input-number-unit-2">
              <input class="input" type="number" title="" min="1" max="99" @model="labelFontSize">
              <span class="unit">px</span>
              <span class="arrow"></span>
          </div>
      </div>
    </div>
    <div class="row">
      <div class="col" style="flex: 0 0 114px;">
          <span class="label">视野缩放</span>
          <input class="btn-switch" type="checkbox" @model="labelScaleByDistance">
      </div>
      <div class="col">
          <span class="label">最近距离</span>
          <div class="input-number input-number-unit-1">
              <input class="input" type="number" title="" min="1" max="99999999" @model="labelNear">
              <span class="unit">m</span>
              <span class="arrow"></span>
          </div>
      </div>
      <div class="col">
          <span class="label">最远距离</span>
          <div class="input-number input-number-unit-1">
              <input class="input" type="number" title="" min="1" max="99999999" @model="labelFar">
              <span class="unit">m</span>
              <span class="arrow"></span>
          </div>
      </div>
    </div>
  `
}
function labelStyleElm2(that) {
  return `
    <div class="row">
      <div class="col">
          <span class="label">引线颜色</span>
          <div class="labelLineColor"></div>
      </div>
      <div class="col">
          <span class="label">背景颜色</span>
          <div class="labelBackgroundColorStart" style="margin-right: 10px;"></div>
          <div class="labelBackgroundColorEnd"></div>
      </div>
    </div>
    <div class="row">
      <div class="col">
          <span class="label">引线宽度</span>
          <div class="input-number input-number-unit-2">
              <input class="input" type="number" title="" min="1" max="999" @model="labelLineWidth">
              <span class="unit">px</span>
              <span class="arrow"></span>
          </div>
      </div>
      <div class="col">
          <span class="label">引线长度</span>
          <div class="input-number input-number-unit-2">
              <input class="input" type="number" title="" min="0" max="999" @model="labelPixelOffset">
              <span class="unit">px</span>
              <span class="arrow"></span>
          </div>
      </div>
    </div>
  `
}

export { attributeElm, labelStyleElm1, labelStyleElm2 }