<template>
  <div v-loading="loading" class="sync">
    <div class="log-form">
      <h3 class="title">产品日志</h3>
      <el-form :model="state.logData" :label-width="100" label-position="left">
        <el-form-item label="租户标识">
          <el-input v-model="state.logData.tenantId" disabled />
        </el-form-item>
        <el-form-item label="是否同步">
          <el-switch v-model="state.logData.isSync" />
        </el-form-item>
        <el-form-item label="开始时间过滤">
          <el-input v-model="state.logData.dateFrom" />
        </el-form-item>
        <el-form-item label="结束时间过滤">
          <el-input v-model="state.logData.dateTo" />
        </el-form-item>
        <el-form-item label="过滤参数">
          <el-input v-model="state.logData.whereFilter" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="onUpdate('log')">日志更新</el-button>
    </div>
    <el-divider direction="vertical" />
    <div class="scene-form">
      <h3 class="title">产品场景</h3>
      <el-form :model="state.sceneData" :label-width="100" label-position="left">
        <el-form-item label="租户标识">
          <el-input v-model="state.sceneData.tenantId" disabled />
        </el-form-item>
        <el-form-item label="是否同步">
          <el-switch v-model="state.sceneData.isSync" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="onUpdate('scene')">场景更新</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getSyncConfigLog,
  setSyncConfigLog,
  getSyncConfigScene,
  setSyncConfigScene
} from '@/api/webApi'
import { useTenantStore } from '@/stores/modules/tenant'

const tenantStore = useTenantStore()
const tenantId = computed(() => tenantStore.getTenantId)

const state = reactive({
  logData: {
    tenantId: '',
    isSync: false,
    dateFrom: '',
    dateTo: '',
    whereFilter: ''
  },
  sceneData: {
    tenantId: '',
    isSync: false
  }
})

const loading = ref(true)

const onUpdate = async (type: string) => {
  ElMessageBox.confirm(`确认${type === 'log' ? '日志' : '场景'}更新?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res: any =
      type === 'log'
        ? await setSyncConfigLog(state.logData)
        : await setSyncConfigScene(state.sceneData)
    if (res.code === 200) {
      init().finally(() => (loading.value = false))
    }
  })
}

const init = async () => {
  loading.value = true
  const res: any = await getSyncConfigLog({ tenantId: tenantId.value })
  const res1: any = await getSyncConfigScene({ tenantId: tenantId.value })
  if (res.code === 200) {
    state.logData = res.data
  }
  if (res1.code === 200) {
    state.sceneData = res1.data
  }
}

watch(
  () => tenantId.value,
  () => {
    init().finally(() => (loading.value = false))
  },
  { immediate: true }
)
</script>

<style scoped>
.sync {
  width: 100%;
  height: 100%;
  display: flex;
}
.log-form,
.scene-form {
  width: 49%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.el-form {
  min-height: 300px;
}
.title {
  font-weight: bolder;
  margin-bottom: 20px;
}

.el-divider {
  height: 100%;
}
</style>
