<template>
<a-card title="空间管理" >

 <table-pro
    :service="SpaceController.page"
    :columns="columns"
    @add="openModal"
    ref="tableProDom"
  >
    <template v-slot:search >
      <a-space><InputTsx placeholder="请输入空间名称进行搜索" /> <a-button type="primary">搜索</a-button> </a-space>
    </template>
    <template v-slot:render="{column, record}" >
      <template v-if="column.key === 'status'" >
        <div style="display: flex;align-items: center;" >
          <div :style="{width: '8px',height: '8px',borderRadius: '50%', backgroundColor:SpaceController.statusMap.get(record.status)?.color, marginRight: '5px' }" ></div>
          <div>{{SpaceController.statusMap.get(record.status)?.label}}</div>
        </div>
      </template>
      <template v-if="column.key === 'action'"  >
        <a-space>
          <a @click="openModal(record)" >配置管理</a>
          <a @click="pushCvsDevicePage(record)" >设备管理</a>
          <a @click="changeStatus(record)" >{{record.status === 'RUNNING' ? '停用' : "启用"}}</a>
        </a-space>
      </template>
    </template>
 </table-pro>

 <StepModal
    :step=" step"
    :steps="spaceState.spaceId ? [] : steps"
    :visible="visible"
    @close="visible = false"
    @next="stepNext"
    @pre="preNext"
    @submit="submit"
  >
  <a-form  style="width: 100%;display: block;" :labelCol="{span: 2}" :wrapperCol="{span: 14}" >
    <div v-show="step === 0" >
      <a-form-item label="空间名称" v-bind="validateInfos.spaceName"  >
        <InputTsx allowClear placeholder="请输入空间名称" v-model:value="spaceState.spaceName" />
      </a-form-item>
      <a-form-item  label="空间类型" v-bind="validateInfos.type"  >
        <a-radio-group v-model:value="spaceState.type" button-style="solid">
          <a-radio-button
            v-for="item in SpaceController.type"
            :key="item.key"
            :value="item.value"
          >
            {{item.label}}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="空间描述" >
        <a-textarea v-model:value="spaceState.description" placeholder="请输入空间描述" :rows="4" />
      </a-form-item>
    </div>
    <div v-show="step === 1"  style="width: 100%;" >
      <a-row class="section" >
        <a-col class="title" :span="24" >推流鉴权</a-col>
        <a-col class="content" >
          <a-row class="content-item"  >
            <a-col span="4" >推流配置：</a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.upstreamAuth.enabled" name="radioGroup">
                <a-radio :value="false">关闭</a-radio>
                <a-radio :value="true">开启</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.upstreamAuth.enabled">
            <a-col span="4" >推流鉴权密钥：</a-col>
            <a-col><InputTsx placeholder="请输入推流鉴权密钥" v-model:value="spaceState.upstreamAuth.key" /> </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.upstreamAuth.enabled">
            <a-col span="4" >过期时间: </a-col>
            <a-col><a-input-number id="inputNumber"  :min="1"    v-model:value="spaceState.upstreamAuth.expire"  /> 分钟 </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="section" >
        <a-col class="title" :span="24" >观看鉴权</a-col>
        <a-col class="content" >
          <a-row class="content-item" >
            <a-col span="4" >观看配置：</a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.downstreamAuth.enabled" name="radioGroup">
                <a-radio :value="false">关闭</a-radio>
                <a-radio :value="true">开启</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.downstreamAuth.enabled"  >
            <a-col span="4" >观看鉴权密钥：</a-col>
            <a-col><InputTsx placeholder="请输入观看鉴权密钥" v-model:value="spaceState.downstreamAuth.key" /> </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.downstreamAuth.enabled"  >
            <a-col span="4" >过期时间: </a-col>
            <a-col><a-input-number id="inputNumber"  :min="1" v-model:value="spaceState.downstreamAuth.expire"   /> 分钟 </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="section" >
        <a-col class="title" :span="24" >录制回放配置</a-col>
        <a-col class="content" >
          <a-row class="content-item" >
            <a-col span="4" >基础配置：</a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.recording.enabled" name="radioGroup">
                <a-radio :value="false">关闭</a-radio>
                <a-radio :value="true">开启</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.recording.enabled"  >
            <a-col span="4">单个文件时常: </a-col>
            <a-col><a-input-number id="inputNumber"  :min="1" v-model:value="spaceState.recording.duration"   /> 分钟 </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.recording.enabled"  >
            <a-col span="4" >存储格式: </a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.recording.format" name="radioGroup">
                <a-radio value="MP4">MP4</a-radio>
                <a-radio value="FLV">FLV</a-radio>
                <a-radio value="M3U8">M3U8</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.recording.enabled"  >
            <a-col span="4" >录制方式: </a-col>
            <a-col>周期录制 </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="section" >
        <a-col class="title" :span="24" >截图配置</a-col>
        <a-col class="content" >
          <a-row class="content-item" >
            <a-col span="4" >截图配置：</a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.thumbnail.enabled" name="radioGroup">
                <a-radio :value="false">关闭</a-radio>
                <a-radio :value="true">开启</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row class="content-item" v-show="spaceState.thumbnail.enabled"  >
            <a-col span="4" >截图周期: </a-col>
            <a-col><a-input-number id="inputNumber"  :min="1" v-model:value="spaceState.thumbnail.interval"   /> 秒 </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="section" >
        <a-col class="title" :span="24" >AI配置</a-col>
        <a-col class="content" >
          <a-row class="content-item" >
            <a-col span="4" >AI配置：</a-col>
            <a-col>
              <a-radio-group v-model:value="spaceState.aiConfig.enabled" name="radioGroup">
                <a-radio :value="false">关闭</a-radio>
                <a-radio :value="true">开启</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <!-- <a-row class="content-item" v-show="spaceState.config.thumbnail.enabled"  >
            <a-col span="4" >截图周期: </a-col>
            <a-col><a-input-number id="inputNumber"  :min="1" v-model:value="spaceState.config.thumbnail.interval"   /> 秒 </a-col>
          </a-row> -->
        </a-col>
      </a-row>
    </div>
  </a-form>
 </StepModal>

</a-card>
</template>
<script lang='ts' setup >

import { StepModal } from '@/components/StepModal'
import { InputTsx } from '@/components/MicroComponents/index'
import { ref, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import { SpaceController } from '@/controller'
import { useRouter } from 'vue-router'

const useForm = Form.useForm

const router = useRouter()

const steps = [{ title: '空间基本信息' }, { title: '空间配置' }]

const step = ref(0)

const visible = ref<boolean>(false)

const tableProDom = ref()

const columns = [
  {
    title: '空间ID',
    dataIndex: 'spaceId',
    key: 'spaceId'
  },
  {
    title: '空间名称',
    dataIndex: 'spaceName',
    key: 'spaceName'
  },
  {
    title: '空间类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '设备数量',
    dataIndex: 'deviceCount',
    key: 'deviceCount'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const spaceState = reactive<CVS.space>({
  description: '',
  spaceName: '',
  type: 'RTMP',
  spaceId: '',
  upstreamAuth: {
    enabled: false,
    key: '',
    expire: 1
  },
  downstreamAuth: {
    enabled: false,
    key: '',
    expire: 1
  },
  recording: {
    enabled: true,
    duration: 1,
    format: 'FLV',
    recordType: 'PERIOD',
    bucket: ''
  },
  thumbnail: {
    enabled: true,
    interval: 1,
    bucket: ''
  },
  aiConfig: {
    enabled: true,
    configuration: [],
    bucket: ''
  }

})

const { resetFields, validate, validateInfos } = useForm(spaceState, {
  spaceName: [{ required: true, message: '请填写空间名称' }],
  type: [{ required: true }]
})

const openModal = async (record = { spaceId: '' }) => {
  if (record.spaceId) {
    spaceState.spaceId = record.spaceId
    resetFields(await SpaceController.spaceConfigById(record.spaceId))
    step.value = 1
  } else {
    resetFields({})
  }
  visible.value = true
}

const closeModal = () => visible.value = false

const submit = async () => {
  spaceState.spaceId ? await SpaceController.update(spaceState) : await SpaceController.add(spaceState)
  closeModal()
}

const changeStatus = async (record: CVS.space) => {
  await SpaceController.updateStatue(record.spaceId, record.status === 'RUNNING' ? 'STOPPED' : 'RUNNING')
  tableProDom.value.reload()
}

const pushCvsDevicePage = (record: CVS.space) => {
  router.push({ path: '/cvs/video/device', query: { spaceId: record.spaceId } })
}

const stepNext = () => {
  validate().then(() => {
    step.value++
  }).catch(() => {})
}

const preNext = () => {
  step.value--
}

</script>
<style lang='less' scoped >
.section {
  width: 100%;
  margin-bottom: 20px;
  .title {
    font-size: 20px;
  }
  .content {
    margin-top: 20px;
    width: 100%;
    .content-item {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
