<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(false)"
  >
    <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="portCode" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-portCode"
                resize="none"
                v-model="formData.portCode"
                clearable
                :disabled="type == 'update'"
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 申报地海关代码（4位海关编号) -->
          <el-col :span="8">
            <Formitem
              label="申报地海关代码（4位海关编号)"
              prop="declarationPortCode"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-declarationPortCode"
                resize="none"
                v-model="formData.declarationPortCode"
                clearable
                maxlength="4"
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 申报单位（18位社会信用代码) -->
          <el-col :span="8">
            <Formitem
              label="申报单位（18位社会信用代码）"
              prop="declarationUnit18"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-declarationUnit18"
                resize="none"
                v-model="formData.declarationUnit18"
                clearable
                maxlength="18"
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <!-- 申报单位（10位海关代码) -->
          <el-col :span="8">
            <Formitem
              label="申报单位（10位海关代码)"
              prop="declarationUnit10"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-declarationUnit10"
                resize="none"
                v-model="formData.declarationUnit10"
                clearable
                maxlength="10"
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 申报单位 (企业名称) -->
          <el-col :span="8">
            <Formitem
              label="申报单位 (企业名称)"
              prop="declarationUnitCompanyName"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-declarationUnitCompanyName"
                resize="none"
                v-model="formData.declarationUnitCompanyName"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- DXPID -->
          <el-col :span="8">
            <Formitem label="DXPID" prop="dxpid" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-dxpid"
                resize="none"
                v-model="formData.dxpid"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="8">
            <Formitem
              label="汇总申报地海关代码"
              prop="exportPortCode"
              type="edit"
            >
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-exportPortCode"
                resize="none"
                v-model="formData.exportPortCode"
                clearable
                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(false)"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { addPortData, updatePortData } from "@/api/system/port-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: {
        declarationPortCode: "",
        declarationUnit10: "",
        declarationUnit10Inspection: "",
        declarationUnit18: "",
        declarationUnitCompanyName: "",
        dxpid: "",
        portCode: "",
        exportPortCode: "",
      },
      rules: {
        portCode: [
          {
            required: true,
            trigger: "blur",
            message: "口岸代码不能为空！",
          },
        ],
        declarationPortCode: [
          {
            required: true,
            trigger: "blur",
            message: "申报地海关代码不能为空！",
          },
          {
            validator: (rule, value, callback) => {
              if (value.length != 4) {
                callback("申报地海关代码必须为4位！");
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        declarationUnit18: [
          {
            required: true,
            trigger: "blur",
            message: "申报单位（18位社会信用代码)不能为空！",
          },
          {
            validator: (rule, value, callback) => {
              if (value.length != 18) {
                callback("18位社会信用代码必须为18位！");
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        declarationUnit10: [
          {
            required: true,
            trigger: "blur",
            message: "申报单位（10位海关代码)不能为空！",
          },
          {
            validator: (rule, value, callback) => {
              if (value.length != 10) {
                callback("10位海关代码必须为10位！");
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        declarationUnitCompanyName: [
          {
            required: true,
            trigger: "blur",
            message: "申报单位 (企业名称)不能为空！",
          },
        ],
        exportPortCode: [
          {
            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 = this.formData;
            this.updateapi(obj);
          } else {
            this.loadings.dialogLoading = false;
          }
        });
      }
    },
    //新增
    addApi(val) {
      addPortData(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //修改
    updateapi(val) {
      updatePortData(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close(true);
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    close(flag = false) {
      this.formData = {
        declarationPortCode: "",
        declarationUnit10: "",
        declarationUnit10Inspection: "",
        declarationUnit18: "",
        declarationUnitCompanyName: "",
        dxpid: "",
        portCode: "",
        exportPortCode: "",
      };
      this.$emit("close", flag);
    },
  },
};
</script>

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