<template>
  <div class="opw-passthrough">
    <el-row :gutter="16">
      <el-col :span="12">
        <div class="panel-title">A口接收数据</div>
        <el-input type="textarea" :rows="14" :value="form.aPortData || ''" readonly />
      </el-col>
      <el-col :span="12">
        <div class="panel-title">B口接收数据</div>
        <el-input type="textarea" :rows="14" :value="form.bPortData || ''" readonly />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tsbWebSocket from '@/utils/tsbWebSocket'
import { OPW_CMD, applyPartialFields } from '@/utils/tsbOpwConfig'

const PAGE_CMD = OPW_CMD.PASSTHROUGH
const DISPLAY_FIELDS = ['aPortData', 'bPortData']

function createDefaultForm() {
  return { aPortData: '', bPortData: '' }
}

export default {
  name: 'TsbOpwPassthrough',
  props: {
    boundDeviceSn: { type: [Number, String], default: null }
  },
  data() {
    return {
      form: createDefaultForm()
    }
  },
  computed: {
    ownerDeviceSn() {
      return this.boundDeviceSn
    },
    canOperateDevice() {
      const activeSn = this.$store.getters.tsbCurrentDeviceSn
      return String(activeSn) === String(this.ownerDeviceSn)
    }
  },
  watch: {
    '$store.state.tsb.pageDataVersion'() {
      this.tryApplyWsPageData(false)
    },
    '$store.state.tsb.deviceSwitchVersion'() {
      if (String(this.$store.getters.tsbCurrentDeviceSn) === String(this.ownerDeviceSn)) {
        this.refreshPageFromStore()
      }
    }
  },
  activated() {
    this.refreshPageFromStore()
  },
  deactivated() {
    this.savePageCache()
  },
  methods: {
    pageCacheKey() {
      return this.ownerDeviceSn != null ? `${this.ownerDeviceSn}::opw-passthrough` : null
    },
    pageDataKey() {
      return this.ownerDeviceSn != null ? `${this.ownerDeviceSn}::${PAGE_CMD}` : PAGE_CMD
    },
    savePageCache() {
      const key = this.pageCacheKey()
      if (!key) return
      this.$store.commit('tsb/SET_DEVICE_PAGE_FORM', {
        key,
        data: { form: { ...this.form }, initialized: true }
      })
    },
    restorePageCache() {
      const key = this.pageCacheKey()
      if (!key) return false
      const cached = this.$store.state.tsb.devicePageFormCache[key]
      if (!cached || !cached.initialized) return false
      this.form = { ...cached.form }
      return true
    },
    tryApplyWsPageData(clearInitFlag) {
      const data = this.$store.state.tsb.pageData[this.pageDataKey()]
      if (!data) return false
      applyPartialFields(this.form, data, DISPLAY_FIELDS, createDefaultForm())
      if (clearInitFlag && this.$store.state.tsb.initFromWs[this.pageDataKey()]) {
        this.$store.commit('tsb/CLEAR_WS_INIT', { cmdType: PAGE_CMD, deviceSn: this.ownerDeviceSn })
      }
      this.savePageCache()
      return true
    },
    refreshPageFromStore() {
      if (this.tryApplyWsPageData(true)) return
      if (this.restorePageCache()) return
      this.initPageData()
    },
    initPageData() {
      this.form = createDefaultForm()
      if (this.canOperateDevice) {
        tsbWebSocket.sendPageSync(PAGE_CMD, { ...this.form })
      }
      this.savePageCache()
    }
  }
}
</script>

<style scoped>
.panel-title { font-weight: 600; margin-bottom: 8px; }
</style>
