<template>
  <div class="new-app-container layout-vertical">
    <!--    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>-->
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :is-page="false"
      :custom-style="{ height: 'calc(100vh - 100px)' }"
    />
    
    <!-- Element弹窗 -->
    <el-dialog title="设置维护时间" :visible.sync="dialogVisible" width="400px">
      <el-form label-width="100px" style="padding: 20px 0;">
        <el-form-item label="维护时间">
          <el-input v-model="timeVal" placeholder="格式为：10:30-11:00" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveTime">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pc28Switch, pc28Store } from '@/api/data'

export default {
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      renderContent: '',
      searchForm: [],
      // 新增以下三个属性用于弹窗时间编辑
      dialogVisible: false,
      timeVal: '',
      currentRow: null,
      columns: [
        {
          label: '模式',
          method: (row) => {
            if(row.val === 0 || row.val === 1) {
              return row.val === 0 ? 'PC28' : '极速28'
            } else {
              return row.val
            }
          }
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      rowsActions: [
        {
          key: 'witch',
          label: '快速切换',
          // type: 'primary',
          vIF: (row) => row.val === 0 || row.val === 1,
          method: (row) => {
            pc28Switch({ val: row.val === 1 ? 0 : 1 })
              .then((res) => {
                if (res.code === 0) {
                  this.$message.success('设置成功')
                  this.onSubmit()
                }
              }).catch(() => {
              this.$message.error('设置失败')
            })
          }
        },
        {
          key: 'setTime',
          label: '设置维护时间',
          vIF: (row) => !(row.val === 0 || row.val === 1),
          method: (row) => {
            // 赋值当前行，并回显现有的 val 时间
            this.currentRow = row;
            this.timeVal = row.val || ''; 
            this.dialogVisible = true;
          }
        }
      ],
      apis: {
        list: {
          url: 'config/pcConfig',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },
      tableOptions: {},
      editForm: [],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      }
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

    },
    onSubmit(params) {
      this.$refs.table.getList(params)
    },
    // 新增：保存维护时间的方法
    handleSaveTime() {
      // 如果有值，才进行格式校验
      if (this.timeVal) {
        // 校验时间段格式（如：10:30-11:00）
        const reg = /^([01]\d|2[0-3]):[0-5]\d-([01]\d|2[0-3]):[0-5]\d$/
        if (!reg.test(this.timeVal)) {
          this.$message.warning('时间格式错误，请输入如：10:30-11:00')
          return
        }
      }

      pc28Store({ field: this.currentRow.field, val: this.timeVal, remark: this.currentRow.remark  }).then(() => {
        this.$message.success('维护时间设置成功')
        this.dialogVisible = false
        this.onSubmit() // 刷新列表
      })
    }
  }
}
</script>