<template>
  <ele-modal
    :visible.sync="visible"
    title="规则详情"
    width="700px"
    append-to-body
    :maxable="true"
  >
    <el-descriptions :column="2" size="medium" border>
      <el-descriptions-item>
        <template slot="label">规则编码</template>
        {{ detailData.ruleCode }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">规则名称</template>
        {{ detailData.ruleName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">时间间隔</template>
        {{ detailData.forInterval }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否重复</template>
        {{ detailData.repeated ? '是' : '否' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">排序号</template>
        {{ detailData.indexNo }}
      </el-descriptions-item>
      <el-descriptions-item label="关联摄像头" :span="2">
        <template v-if="detailData.devices && detailData.devices.length">
          {{ getDeviceNames(detailData.devices) }}
        </template>
        <span v-else>-</span>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
import * as VideoPollingApi from '@/api/config/videoPolling'

export default {
  name: 'VideoPollingDetail',
  data() {
    return {
      visible: false,
      loading: false,
      detailData: {}
    }
  },
  methods: {
    /** 获取摄像头名称 */
    getDeviceNames(devices) {
      if (!devices || !devices.length) return '-'
      return devices.map(d => d.name || d.deviceCode).join('、')
    },

    /** 打开弹窗 */
    openForm(id) {
      this.visible = true
      this.loading = true

      VideoPollingApi.getVideoRule(id)
        .then((res) => {
          res.devices = JSON.parse(res.devices || '[]')
          this.detailData = res
        })
        .catch((e) => {
          console.error(e)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
