<template>
  <confirm-dialog
    ref="configDialog"
    :title="title"
    @confirm="onSave"
  >
    <div class="c-grid-form mini u-align-self--center">
      <span class="c-grid-form__label">宽度：</span>
      <el-input-number
        v-model="recordConfig.videoWidth"
        :min="240"
        :max="999999"
        step-strictly
      />
      <span class="c-grid-form__label">高度：</span>
      <el-input-number
        v-model="recordConfig.videoHeight"
        :min="240"
        :max="999999"
        step-strictly
      />
      <span class="c-grid-form__label">码率：</span>
      <div class="l-flex--row c-grid-form__option">
        <el-input-number
          v-model="recordConfig.videoBitRate"
          :min="100"
          :max="999999"
          step-strictly
        />
        &nbsp;Kbps（最低100Kbps)
      </div>
      <span class="c-grid-form__label">帧率：</span>
      <div class="l-flex--row c-grid-form__option">
        <el-input-number
          v-model="recordConfig.frameRate"
          :min="10"
          :max="60"
          step-strictly
        />
        （10~60)
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getRecordConfig,
  addRecordConfig,
  updateRecordConfig
} from '../api'

export default {
  name: 'RecordConfigDialog',
  data () {
    return {
      title: '',
      recordConfig: {}
    }
  },
  methods: {
    show ({ id, name }) {
      this.title = `${name}推流配置`
      getRecordConfig(id).then(({ data }) => {
        if (data) {
          this.$has = true
          const { videoWidth, videoHeight, videoBitRate, frameRate } = data
          this.recordConfig = {
            deviceId: id,
            videoWidth,
            videoHeight,
            videoBitRate: videoBitRate / 1000,
            frameRate
          }
        } else {
          this.$has = false
          this.recordConfig = {
            deviceId: id,
            videoWidth: 1920,
            videoHeight: 1080,
            videoBitRate: 2048,
            frameRate: 30
          }
        }
        this.$refs.configDialog.show()
      })
    },
    onSave (done) {
      const { deviceId, videoWidth, videoHeight, videoBitRate, frameRate } = this.recordConfig
      ;(this.$has ? updateRecordConfig : addRecordConfig)({
        deviceId,
        videoWidth,
        videoHeight,
        videoBitRate: videoBitRate * 1000,
        frameRate
      }).then(done)
    }
  }
}
</script>
