<template>
  <div class="l-flex--col">
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <el-tab-pane name="TRAFFIC_CAMERA">
        <template #label>
          <div class="o-tab">
            <i
              class="o-tab__icon el-icon-circle-plus-outline"
              @click.stop="onAdd('TRAFFIC_CAMERA')"
            />
            人流量监测
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane name="LED_CAMERA">
        <template #label>
          <div class="o-tab">
            <i
              class="o-tab__icon el-icon-circle-plus-outline"
              @click.stop="onAdd('LED_CAMERA')"
            />
            LED屏监测
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <grid-table
      ref="table"
      :schema="schema"
      size="large"
    >
      <grid-table-item v-slot="item">
        <camera-player
          v-if="isActivated"
          :key="item.identifier"
          :camera="item"
          controls
          @fullscreen="onFullScreen(item)"
          @click.native="onFullScreen(item)"
        >
          <i
            class="c-sibling-item el-icon-delete has-active u-pointer"
            @click.stop="onDel(item)"
          />
        </camera-player>
      </grid-table-item>
    </grid-table>
    <table-dialog
      ref="tableDialog"
      :title="title"
      :schema="cameraSchema"
      @choosen="onCameraChoosen"
    />
    <camera-dialog
      ref="cameraDialog"
      @closed="onClosed"
    />
  </div>
</template>

<script>
import {
  getCameras,
  getThirdPartyDevices,
  bind,
  unbind
} from '@/api/external'
import {
  Camera,
  ThirdPartyDevice
} from '@/constant'

export default {
  name: 'DeviceCamera',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      active: 'TRAFFIC_CAMERA',
      deviceType: ThirdPartyDevice.TRAFFIC_CAMERA,
      schema: {
        pageSize: 999,
        list: this.getCameras
      },
      isActivated: true
    }
  },
  computed: {
    isTraffic () {
      return this.active === 'TRAFFIC_CAMERA'
    },
    cameraType () {
      return this.isTraffic ? Camera.TRAFFIC : Camera.LED
    },
    title () {
      return this.deviceType === ThirdPartyDevice.TRAFFIC_CAMERA ? '绑定人流量监测摄像头' : '绑定LED屏监测摄像头'
    },
    cameraSchema () {
      return {
        condition: { deviceType: this.deviceType },
        list: getThirdPartyDevices,
        cols: [
          { prop: 'name', label: '名称' },
          { prop: 'remark', label: '备注' }
        ]
      }
    }
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = active
        this.$refs.table.pageTo(1)
      }
    },
    getCameras () {
      return getCameras({
        deviceId: this.device.id,
        cameraType: this.cameraType
      }).then(({ data }) => {
        data = data.map(({ id, thirdPartyDevice }) => {
          return {
            ...thirdPartyDevice,
            id
          }
        })
        return { data }
      })
    },
    onFullScreen (camera) {
      this.isActivated = false
      this.$refs.cameraDialog.show(camera)
    },
    onClosed () {
      this.isActivated = true
    },
    onAdd (deviceType) {
      this.deviceType = ThirdPartyDevice[deviceType]
      this.$refs.tableDialog.show()
    },
    onCameraChoosen ({ value, done }) {
      this.$confirm(
        `${this.title} ${value.name} ？`,
        { type: 'warning' }
      ).then(() => {
        bind(this.device.id, this.deviceType, value.id).then(() => {
          done()
          if (this.deviceType === ThirdPartyDevice[this.active]) {
            this.$refs.table.pageTo(1)
          } else {
            this.onTabClick({ name: this.isTraffic ? 'LED_CAMERA' : 'TRAFFIC_CAMERA' })
          }
        })
      })
    },
    onDel (item) {
      this.$confirm(
        `解绑摄像头 ${item.name} ？`,
        { type: 'warning' }
      ).then(() => {
        unbind(item.id).then(() => {
          this.$refs.table.decrease(1)
        })
      })
    }
  }
}
</script>
