<template>
  <div class="l-flex--col">
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <template v-if="isSuperAdmin">
        <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>
      </template>
      <template v-else>
        <el-tab-pane
          label="人流量监测"
          name="TRAFFIC_CAMERA"
        />
        <el-tab-pane
          label="LED屏监测"
          name="LED_CAMERA"
        />
      </template>
    </el-tabs>
    <grid-table
      ref="table"
      :schema="schema"
      size="large"
    >
      <grid-table-item v-slot="item">
        <camera-player
          v-if="isActivated"
          :key="item.identifier"
          :class="{ 'u-pointer': canClick && item.onlineStatus }"
          :camera="item"
          @click.native="onClick(item)"
        >
          <div
            class="c-footer l-flex--row"
            @click.stop
          >
            <div class="l-flex__auto c-sibling-item u-ellipsis">{{ item.name }}</div>
            <template v-if="isSuperAdmin">
              <i
                class="o-icon--active el-icon-delete u-pointer"
                @click.stop="onDel(item)"
              />
            </template>
          </div>
        </camera-player>
      </grid-table-item>
    </grid-table>
    <el-dialog
      class="c-dialog--full"
      :visible="detailing"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      fullscreen
    >
      <camera-detail
        v-if="detailing"
        :camera="targetCamera"
        @close="onClose"
      />
    </el-dialog>
    <table-dialog
      ref="cameraDialog"
      :title="title"
      :schema="cameraSchema"
      @choosen="onCameraChoosen"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getCameras,
  getThirdPartyDevices,
  bind,
  unbind
} from '@/api/external'
import { 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
      },
      detailing: false,
      targetCamera: null
    }
  },
  computed: {
    ...mapGetters(['isSuperAdmin']),
    canClick () {
      return this.active === 'TRAFFIC_CAMERA'
    },
    cameraType () {
      return this.canClick ? 2 : 1
    },
    isActivated () {
      return !this.detailing
    },
    title () {
      return this.deviceType === ThirdPartyDevice.TRAFFIC_CAMERA ? '绑定人流量监测摄像头' : '绑定LED屏监测摄像头'
    },
    cameraSchema () {
      return {
        condition: { deviceType: this.deviceType },
        list: getThirdPartyDevices,
        cols: [
          { prop: 'name', label: '名称', align: 'center' }
        ]
      }
    }
  },
  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 }
      })
    },
    onClick (camera) {
      if (this.canClick && camera.onlineStatus) {
        this.targetCamera = camera
        this.detailing = true
      }
    },
    onClose () {
      this.detailing = false
    },
    onAdd (deviceType) {
      this.deviceType = ThirdPartyDevice[deviceType]
      this.$refs.cameraDialog.show()
    },
    onCameraChoosen ({ value, done }) {
      this.$confirm(
        `绑定摄像头 ${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.canClick ? 'LED_CAMERA' : 'TRAFFIC_CAMERA' })
          }
        })
      })
    },
    onDel (item) {
      this.$confirm(
        `解绑摄像头 ${item.name} ？`,
        { type: 'warning' }
      ).then(() => {
        unbind(item.id).then(() => {
          this.$refs.table.decrease(1)
        })
      })
    }
  }
}
</script>
