<script lang="ts" setup>
import { useCenterControlStore } from '@/store'
import executionList from './components/executionList.vue'
import scanByTest from './components/scanByTest.vue'

definePage({
  style: {
    navigationBarTitleText: '测试中控',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const executionListRef = ref(null)
const store = useCenterControlStore()
const btnConfig = reactive({
  btnText: '自动化测试',
  btnLoadingText: '正在测试中，请等待...',
  btnLoading: false,
})

function handleTestClick() {
  btnConfig.btnLoading = true
  executionListRef.value?.loopExecuteCommand()
}
function completeTest() {
  btnConfig.btnLoading = false
}
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f3f3f3"
  >
    <view class="container">
      <!-- 测试中控内容输入框 -->
      <scan-by-test />

      <!-- 测试中控执行列表 -->
      <executionList ref="executionListRef" @complete="completeTest" />
    </view>

    <template #bottom>
      <view class="bottom-button-zaping">
        <uv-button
          :disabled="store.isOnline !== 1"
          type="primary"
          :text="btnConfig.btnText"
          :loading="btnConfig.btnLoading"
          :loading-text="btnConfig.btnLoadingText"
          @click="handleTestClick"
        />
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.container {
  width: calc(100% - 40rpx);
  padding: 10rpx 20rpx;
}
</style>
