<template>
  <el-dialog
    v-model="visible"
    :title="type == '1' ? '编辑驱动' : '新增驱动'"
    width="45%"
    :before-close="closeDialog"
  >
    <el-form
      size="large"
      label-position="top"
      :model="addForm"
      label-width="150px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="驱动名称:" prop="driver_name">
        <el-input
          v-model="addForm.driver_name"
          placeholder="请输入驱动名称(不超过20个字符)"
          clearable
          maxlength="20"
          :disabled="type == '1'"
        />
      </el-form-item>
      <el-form-item label="驱动类型:" prop="driver_type" >
        <el-select
          v-model="addForm.driver_type"
          value-key="name"
          clearable
          placeholder="请选择驱动类型"
          @change="driveChange"
          :disabled="type == '1'"
        >
        <el-option v-for="(item, index) of typeOptions" :key="index" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="驱动模板:" prop="template_name" >
        <el-select
          v-model="addForm.template_name"
          value-key="name"
          clearable
          placeholder="请选择驱动模板"
          :disabled="type == '1'"
        >
        <el-option v-for="(item, index) of templateOptions" :key="index" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="驱动描述:" prop="driver_description">
        <el-input
          v-model="addForm.driver_description"
          placeholder="请输入驱动描述(不超过50个字符)"
          clearable
          maxlength="50"
        ></el-input>
      </el-form-item>
    </el-form>

      
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" @click="closeDialog">取消</el-button>
        <el-button size="large" type="primary" @click="saveData"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</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 {
  props: ["formData", "dialogVisible", "type", "qudongOptions"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const validName = (rule, value, callback) => {
      var name = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
      if (name.test(value) || !value) {
        callback();
      } else {
        callback(new Error("名称只能以字母开头,仅支持字母,数字和下划线,最短3个字符起,且长度不能超过20个字符"));
      }
    };
    const state = reactive({
      addForm: {},
      typeOptions: [],
      templateOptions: [],
      rules: {
        driver_name: [
          { required: true, message: "请输入驱动名称", trigger: "blur" },
          { required: true, validator: validName, trigger: "blur" },
        ],
        template_name: [
        { required: true, message: "请选择通讯模板", trigger: "blur" },
      ],
        driver_description: [{ required: false, message: "请输入驱动描述", trigger: "blur" }],
        driver_type: [{ required: true, message: "请选择驱动类型", trigger: "change" }]
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(async () => {
      state.addForm = props.formData;
      getTypeOptions();
      driveChange();
    });

    const getTypeOptions = () => {
      state.typeOptions = [];
      for (let i in props.qudongOptions) {
        let obj = {
          key: Number(i),
          name: props.qudongOptions[i]
        }
        state.typeOptions.push(obj);
      }
    }
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
    const saveData = async () => {
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const res = props.type === '0' ? await infoApi.saveTx(state.addForm) : await infoApi.editTx(state.addForm);
          if (res.code == 0) {
            ElMessage.success(res.data || res.message || "请求成功");
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.data || res.message);
          }
        } else {
        }
      });
    };
    const driveChange = () => {
      console.log(1);
      state.addForm.template_name = '';
      getTxTemplate();
    }

    const getTxTemplate = async () => {
      const param = {
        driver_type: state.addForm.driver_type
      }
      const res = await infoApi.getTxTemplate(param);
      if (res.code == 0) {
        state.templateOptions = res.data;
        state.addForm.template_name = state.templateOptions[0].name;
      }
    }
    
    return {
      ...toRefs(state),
      ruleFormRef,
      visible,
      saveData,
      closeDialog,
      driveChange
    };
  },
};
</script>
<style lang="scss" scoped>
.inline-div {
  display: flex;
  width: 100%;
  .el-form-item {
    margin-right: 10px;
    width: 175px;
  }
}
</style>
