<template>
  <t-modal
    :visibled.sync="visibled"
    :title="title"
    :mask-closable="false"
    :ok="handleSubmit"
    width="780px"
    height="590px"
  >
    <div>
      <div style="display: flex">
        <span style="margin-top: 5px">{{ monitorSceneTypeName }}名称:</span>
        <t-input
          v-model="searchValue"
          placeholder="名称..."
          style="width: 300px; margin: 0px 10px"
          icon="search-outline"
          icon-placement="right"
        ></t-input>
        <t-button color="primary">搜索</t-button>
      </div>
      <div
        v-for="item in cameraList"
        :key="item.resourceToolId"
        :data="item"
        class="masonry__item div-float"
        @click="groupClick(item)"
      >
        <div class="card-has-shadowed" style="width: 158px">
          <div>
            <img
              :class="item.resourceToolId == form.resourceToolId ? 'hover' : ''"
              :src="item.imageUrl"
              style="height: 120px; width: 158px"
              alt=""
            />
          </div>
        </div>
        <div class="div-footer" style="width: 158px">
          <div class="div-base">
            {{ item.resourceToolName }}
          </div>
        </div>
      </div>
      <div class="table-pager">
        <t-pager
          :current.sync="page"
          :total="total"
          :page-size="limit"
          show-elevator
          @on-change="onChange"
        >>
        </t-pager>
      </div>
    </div>
  </t-modal>
</template>

<script>
import sysapi from '@/api/system'

export default {
  name: 'ShiftCameraDialog',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    monitorSceneTypeId: {
      type: String,
      require: true
    },
    monitorSceneTypeName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      visibled: false,
      form: {},
      searchValue: null,
      // 当前页
      page: 1,
      // 当前页的数据个数
      limit: 7,
      // 数据总数
      total: 70,
      cameraList: [
        {
          resourceToolId: '881', // 设备ID
          resourceToolCode: 'JK881', // 设备CODE
          resourceToolName: '大门人脸识别', // 设备名称
          resourceToolType: 'FAC', // 设备类型CODE
          longitude: null,
          latitude: null,
          radius: null,
          pictureUrl: '#', // 图片的URL(无图片则为#)
          videoUrl: '#',
          resourceToolTypeName: '人脸识别' // 设备类型名称
        }
      ]
    }
  },
  computed: {
    title() {
      return this.data.monitorSceneTerminalRelId == null ? '新增' + this.monitorSceneTypeName : '更换' + this.monitorSceneTypeName
    }
  },
  watch: {
    data(val) {
      // 侦听data属性
      this.form = this.data
      this.visibled = true
      this.getCameras(0)
    }
  },
  mounted() {
    // this.getCameras(0)
  },
  methods: {
    getCameras(page) {
      let params = {
        pageNumber: page,
        pageSize: this.limit, // 每页条数
        typeId: this.monitorSceneTypeId, // 设备类型
        nameAsLike: this.searchValue // 设备名称(模糊匹配)
      }
      sysapi.getResourceTool(params).then((resp) => {
        const res = resp.data.data.data || []
        let data = []
        res.forEach(item => data.push(item.pictureUrl))
        this.getListFileUrl(res, data)
        this.total = resp.data.data.total
      })
    },
    async getListFileUrl(res, data) {
      const resp = await sysapi.getListFileUrl(data)
      res.filter((item, index) => {
        item.imageUrl = resp.data.data[index]
      })
      this.cameraList = res
    },
    groupClick(item) {
      // 选中更换摄像头
      this.form.resourceToolName = item.resourceToolName
      this.form.resourceToolId = item.resourceToolId
      this.form.pictureUrl = item.pictureUrl
    },
    handleSubmit() {
      this.$emit('submit', this.form)
      this.visibled = false
    },
    onChange(page) {
      this.page = page
      this.getCameras(page)
    }
  }
}
</script>

<style lang="scss">
.div-float {
  display: inline-block;
}
.div-footer {
  height: 32px;
  margin-top: 6px;
}
.card-has-shadowed {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  cursor:pointer
}
.table-pager {
  clear:both;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.div-base {
  margin: 5px 10px 0px 10px;
}
.hover {
  border: 2px solid blue;
}
</style>