<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    :title="title"
    :visible.sync="outerVisible"
    :show-close="false"
    width="40%"
    :close-on-click-modal="false"
    v-loading="loadings.dialogLoading"
    @close="close"
  >
    <div class="modelItem">
      <el-form
        class="fedexFormStyle"
        ref="formData"
        :model="formData"
        :rules="type == 'roleChange' ? {} : rules"
        label-position="top"
        :disabled="type == 'roleChange'"
        size="small"
      >
        <el-row :gutter="5">
          <!-- 密码机编号 -->
          <el-col :span="8">
            <Formitem label="密码机编号" prop="cipherMachineNumber" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-cipherMachineNumber"
                resize="none"
                v-model="formData.cipherMachineNumber"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 密码机IP地址 -->
          <el-col :span="8">
            <Formitem label="密码机IP地址" prop="ipAddress" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-ipAddress"
                resize="none"
                v-model="formData.ipAddress"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 密码机可使用用户数量 -->
          <el-col :span="8">
            <Formitem
              label="密码机可使用用户数量"
              prop="availableUserCount"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-availableUserCount"
                resize="none"
                v-model="formData.availableUserCount"
                clearable
                oninput="value=value.replace(/[^0-9]/g,'')"
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :disabled="loadings.submitLoading"
        @click="submit"
        >确 定</el-button
      >
      <el-button
        class="entrySaveButton"
        :disabled="loadings.uploadLoading"
        @click="close"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  addCipherMachineData,
  updateCipherMachineData,
} from "@/api/system/cipherMachine-api.js";
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "新增密码机",
    },
    type: {
      type: String,
      default: "",
    },
    active: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      formData: {
        availableUserCount: "",
        cipherMachineNumber: "",
        ipAddress: "",
      },
      customData: [],
      rules: {
        ipAddress: [
          {
            required: true,
            trigger: "blur",
            message: "密码机IP地址不能为空！",
          },
        ],
        cipherMachineNumber: [
          {
            required: true,
            trigger: "blur",
            message: "密码机编号不能为空！",
          },
        ],
        availableUserCount: [
          {
            required: true,
            trigger: "blur",
            message: "密码机可使用用户数量不能为空！",
          },
        ],
      },
      loadings: {
        dialogLoading: false,
        uploadLoading: false,
        submitLoading: false,
      },
      loadingText: "",
    };
  },
  watch: {
    outerVisible(val) {
      if (val) {
        this.loadings.dialogLoading = false;
        if (this.type == "update") {
          this.formData = this.active;
        }
      }
    },
  },
  methods: {
    //查询用户信息详情
    searchUserData(id) {
      this.loadings.dialogLoading = true;
      getUserDetailData({ id: id })
        .then((res) => {
          if (res.code === "200") {
            this.formData = res.data;
          } else {
            this.alertWarningMsg(res.message);
          }
          this.loadings.dialogLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //数据保存
    submit() {
      this.loadings.dialogLoading = true;
      let obj = {};
      if (this.type == "add") {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            obj = this.formData;
            this.addApi(obj);
          } else {
            this.loadings.dialogLoading = false;
          }
        });
      } else if (this.type == "update") {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            obj.availableUserCount = this.formData.availableUserCount;
            obj.cipherMachineNumber = this.formData.cipherMachineNumber;
            obj.ipAddress = this.formData.ipAddress;
            obj.id = this.formData.id;
            this.updateapi(obj);
          } else {
            this.loadings.dialogLoading = false;
          }
        });
      }
    },
    //新增
    addApi(val) {
      addCipherMachineData(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close();
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //修改
    updateapi(val) {
      updateCipherMachineData(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close();
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    close() {
      this.formData = {
        availableUserCount: "",
        cipherMachineNumber: "",
        ipAddress: "",
      };
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
</style>