<template>
  <div class="bigBoxs">
    <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :model="data.fromObj" :inline="true"
          :rules="rules" :disabled="!props.saveBtnShow">
          <el-form-item label="供应商名称:" prop="suppliername" style="overflow-x: scroll;">
            <el-input v-model="data.fromObj.suppliername" type="textarea" autosize show-word-limit maxlength="50"
              clearable placeholder="不能超过50个字" style="width: 834px" />
          </el-form-item>
          <el-form-item label="供应商营业证号:">
            <el-input v-model="data.fromObj.supplierbusiness" show-word-limit maxlength="30" placeholder="不能超过30个字"
              clearable style="width: 337px" />
          </el-form-item>
          <el-form-item label="供应商地址:" style="overflow-x: scroll;">
            <el-input v-model="data.fromObj.supplieraddress" type="textarea" autosize show-word-limit maxlength="50"
              placeholder="不能超过50个字" clearable style="width: 834px" />
          </el-form-item>
          <el-form-item label="法人姓名:" prop="legalperson">
            <el-input v-model="data.fromObj.legalperson" show-word-limit maxlength="20" placeholder="不能超过20个字" clearable
              style="width: 337px" />
          </el-form-item>
          <el-form-item label="法人身份证号:" prop="legalpersonidcard">
            <MOSTY.IdentityCard width="337px" v-model="data.fromObj.legalpersonidcard" show-word-limit maxlength="18"
              placeholder="不能超过18个字" clearable @onInput="identityCardChange">
            </MOSTY.IdentityCard>
          </el-form-item>
          <el-form-item label="法人电话:" prop="legalpersonphone">
            <MOSTY.Phone width="337px" show-word-limit v-model="data.fromObj.legalpersonphone" maxlength="11" clearable
              @onInput="phoneChange">
            </MOSTY.Phone>
          </el-form-item>
          <el-form-item label="供应商联系人:" prop="suppliercontact">
            <el-input v-model="data.fromObj.suppliercontact" show-word-limit maxlength="20" placeholder="不能超过20个字"
              clearable style="width: 337px" />
          </el-form-item>
          <el-form-item label="供应商电话:" prop="supplierphone">
            <MOSTY.Phone width="337px" show-word-limit v-model="data.fromObj.supplierphone" maxlength="11" clearable
              @onInput="phoneChange">
            </MOSTY.Phone>
          </el-form-item>
          <el-form-item label="供应食材:" style="overflow-x: scroll;">
            <el-input v-model="data.fromObj.ingredients" type="textarea" autosize show-word-limit maxlength="50"
              placeholder="不能超过50个字" clearable style="width: 834px" />
          </el-form-item>
          <!-- <el-form-item label="备注:" >
              <el-input v-model="data.fromObj.bz" type="textarea" clearable style="width: 1310px" />
            </el-form-item> -->
          <el-form-item label="营业执照复印件：" style='width:100%;'>
            <MOSTY.Upload v-model="data.fromObj.file" :limit="5" :delrow="delrow" :ShowfileList="true"
              @filehandleChange="changeFile" :gsgfList="['jpg', 'png', 'pdf']" :isImg="true"
              :disabled="!props.saveBtnShow" />
          </el-form-item>
          <el-form-item label="法人身份证复印件：" style='width:100%;'>
            <MOSTY.Upload v-model="data.fromObj.idcardfile" :limit="5" :delrow="delrow" :ShowfileList="true"
              @filehandleChange="changeFile" :gsgfList="['jpg', 'png', 'pdf']" :isImg="true"
              :disabled="!props.saveBtnShow" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>

        <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)" v-if="props.saveBtnShow">
          <span><el-icon>
              <DocumentChecked />
            </el-icon>保存</span>
        </el-button>
        <el-button @click="CloseEvent" type="primary">
          <span><el-icon>
              <DocumentDelete />
            </el-icon>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>

</template>

<script setup>
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watchEffect,
  getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();

const rules = reactive({
  suppliername: [{ required: true, message: "供应商名称不能为空", trigger: "change" }],
  legalperson: [{ required: true, message: "法人姓名不能为空", trigger: "change" }],
  suppliercontact: [{ required: true, message: "供应商联系人姓名不能为空", trigger: "change" }],
  ...rule.identityCardRule({ require: true, validator: true }, "legalpersonidcard"),
  ...rule.phoneRule({
    require: true,
    validator: true
  }, 'legalpersonphone'),
  ...rule.phoneRule({
    require: true,
    validator: true
  }, 'supplierphone')
});
const loading = ref(false)
const emits = defineEmits(["close"]);
const props = defineProps({
  rowId: String,
  title: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  canteenInfoId: String
});
const data = reactive({
  fromObj: {},
  tbOndutymanagesonList: {}
});
const delrow = ref({}); //删除文件列表
onMounted(() => {
  data.fromObj = {};
  if (props.rowId) {
    getmain(props.rowId)
  }

});
//详情
const getmain = (id) => {
  if (id) {
    getApi(
      {},
      "/mosty-jcgl/ingredientsSupplier/getIngredientsSupplierById/" + id
    ).then((res) => {
      if (res) {
        data.fromObj = res;
      }
    });
  }
};
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};
const ruleFormRef = ref();
const handleSave = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true
      data.fromObj.file = data.fromObj.file ? data.fromObj.file.toString() : "";
      data.fromObj.idcardfile = data.fromObj.idcardfile ? data.fromObj.idcardfile.toString() : "";
      data.fromObj.canteenInfoId = props.canteenInfoId;
      if (data.fromObj) {
        if (props.title == "食材供应商新增") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/ingredientsSupplier/addIngredientsSupplierOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              emits("close");
            }).finally(() => {
              loading.value = false
            })
        } else if (props.title == "食材供应商修改") {
          postApi(
            data.fromObj,
            "/mosty-jcgl/ingredientsSupplier/updateIngredientsSupplierOne"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              emits("close");
            }).finally(() => {
              loading.value = false
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};

</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.el-form {
  margin: 20px;
  flex-wrap: wrap;
  justify-content: start;

}

.el-form-item {
  text-align: center;
  margin-right: 10px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}

.img_fix {
  width: 915px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
</style>