<template>
  <section class="AppMonitorDevice">
    <ai-list>
      <ai-title slot="title" title="监控设备管理" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #right>
            <el-input prefix-icon="iconfont iconSearch" v-model="search.title" placeholder="设备名、MAC号" clearable
                      @change="page.current=1,getTableData()" size="small"/>
            <el-button type="primary" icon="iconfont iconSearch" @click="page.current=1,getTableData()">查询</el-button>
            <el-button icon="iconfont iconResetting" @click="search={},page.current=1,getTableData()">重置</el-button>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
                  :size.sync="page.size" @getList="getTableData">
          <el-table-column label="操作" slot="options" align="center">
            <el-row type="flex" slot-scope="{row}" align="middle" justify="center">
              <ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
                       @change="handleSubmit(row)">
                <el-button type="text">绑定</el-button>
              </ai-area>
              <el-button type="text" @click="handleLocate(row)">标绘</el-button>
              <div/>
              <el-button type="text" @click="handleShow(row)">设置</el-button>
            </el-row>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
    <setting-dialog v-model="dialog" :ins="instance"/>
  </section>
</template>

<script>
import LocateDialog from "../components/locateDialog";
import SettingDialog from "../components/settingDialog";

export default {
  name: "AppMonitorDevice",
  components: {SettingDialog, LocateDialog},
  label: "监控设备管理",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  provide() {
    return {
      device: this
    }
  },
  computed: {
    colConfigs() {
      return [
        {type: 'selection'},
        {label: "设备名", prop: "deviceName"},
        {label: "上级归属", prop: "areaName"},
        {label: "设备型号", prop: "devModel"},
        {label: "MAC号", prop: "devMac"},
        {label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
        {slot: "options"}
      ]
    },
    isDetail() {
      return !!this.$route.query?.id
    }
  },
  data() {
    return {
      search: {startTime: null, endTime: null, title: ""},
      page: {current: 1, size: 10, total: 0},
      tableData: [],
      locate: false,
      dialog: false,
      detail: {}
    }
  },
  created() {
    this.dict.load("zyDeviceBindStatus")
    if (this.isDetail) {
      //TODO 待补充
    } else this.getTableData()
  },
  methods: {
    getTableData() {
      this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
        params: {...this.search, ...this.page}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    handleSubmit(row) {
      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
        ...row, id: row.deviceId
      }).then(res => {
        if (res?.code == 0) {
          this.$message.success("提交成功!")
          this.getTableData()
        }
      })
    },
    handleShow(row) {
      this.dialog = true
      this.detail = row
    },
    handleLocate(row, locate) {
      if (locate) {
        let {lat, lng} = locate.location
        this.handleSubmit({...row, lat, lng}).then(() => {
          this.locate = false
          this.getTableData()
        })
      } else {
        this.locate = true
        this.detail = row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AppMonitorDevice {
  ::v-deep .AiSearchBar {
    margin-bottom: 10px;
  }
}
</style>
