<template>
  <div class="admin-authorize-editInfo">
    <el-dialog :title="state.title" v-model="state.isShowDialog" width="769px">
      <el-form :model="state.editData" size="default" label-width="80px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="日期">
              <el-date-picker
                v-model="state.editData.date"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="Select date and time"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="油站名称">
              <el-input v-model="state.editData.oilStation" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="项目名称">
              <el-input v-model="state.editData.projectName" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="设备SN">
              <el-input v-model="state.editData.sn" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="授权码">
              <el-input v-model="state.editData.key" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="有效时间">
              <el-date-picker
                v-model="state.editData.expiedTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="Select date and time"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="状态">
              <el-input v-model="state.editData.state" placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="备注">
              <el-input v-model="state.editData.remark" placeholder="格式：message.router.xxx" clearable type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {oilSdkTableModel} from "/@/api/admin/deviceAuthorization/oilSdkAuthorDto";

/**数据对象 */
const state = reactive({
  title:'',
  isShowDialog: false,
  editData:{} as oilSdkTableModel,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'oilStation', label: '油站名称' },
    { prop: 'projectName', label: '项目名称' },
    { prop: 'sn', label: '设备SN号' },
    { prop: 'key', label: '授权码' },
    { prop: 'expiedTime', label: '过期时间' },
    { prop: 'state', label: '状态' },
    { prop: 'remark', label: '备注' },
  ],
})

const openDialog = (val) => {
  if(val){
    state.editData = JSON.parse(JSON.stringify(val))
    state.title = '更新授权'
  }else {
    state.editData = {} as oilSdkTableModel
    state.title = '新增授权'
  }
  state.isShowDialog = true
}

const onCancel = () => {
  state.editData = {} as oilSdkTableModel
  state.isShowDialog = false
}

const onSubmit = () => {
  console.log(state.editData)
}

defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">

</style>
