<template>
  <el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" direction="rtl" :before-close="closeDialog">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input v-model="form.polling_time" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input v-model="form.faile_retry_time" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="主机地址" prop="host">
        <el-input v-model="form.host" clearable/>
      </el-form-item>
      <el-form-item label="端口号" prop="port">
        <el-input v-model="form.port" clearable />
      </el-form-item>
      <!-- <el-form-item label="faile_retry_time">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {//2: 'modbus_rtu', 3: 'plc_s7'
  props: ["formData", "dialogVisible", "pztype", "pztypecode"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      form: {
        polling_time: "",
        faile_retry_time: "",
        host: '',
        port: '',
        id: 1,
      },
      rules: {
        polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
        faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
        host: [{ required: true, validator: (rule, value, callback) => {
            // 只能输入英文字母
            var reg =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (value && reg.test(value) ) {
              callback();
            } else {
              callback(new Error("请输入正确的ip地址"));
            }}, trigger: 'blur' }],
        port: [{ required: true, message: "请输入端口号", trigger: "blur" }]
      },
    });
    const onSubmit = async () => {
      console.log(555, props.formData.name);
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const param = {
            driver_name: props.formData.name,
            polling_time:Number(state.form.polling_time),
            faile_retry_time: Number(state.form.faile_retry_time),
            host: state.form.host,
            port: Number(state.form.port),
            id: Number(state.form.id)
          }
          console.log(777, param);
          const res = await infoApi.addPz(param);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            ctx.emit("dialogClose");
          } else {
            ElMessage.error(res.message);
          }
        } else {
          console.log("error submit!");
        }
      });
    }
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {

    });
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
    const importData = () => { };

    const exportData = () => { };

    return {
      ...toRefs(state),
      visible,
      closeDialog,
      importData,
      exportData, 
      onSubmit,
      ruleFormRef

    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  display: flex;
  flex-wrap: nowrap;
  span {
    margin-left: 10px;
  }
}
</style>
