<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="15vh"
    width="600px"
    @close="showModelThis = false"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-card style="margin: -20px 0 0 0">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rulesThis"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-form-item label="商品分类" prop="goods_class">
                <el-input v-model="ruleForm.goods_class" disabled></el-input>
              </el-form-item>
              <el-form-item label="商品名称" prop="good_name">
                <el-input v-model="ruleForm.good_name" disabled></el-input>
              </el-form-item>
              <el-col :span="12">
                <el-form-item label="采购总数量" prop="good_num">
                  <el-input
                    v-model="ruleForm.good_num"
                    disabled
                  /> </el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item label="已入库数量" prop="send_num">
                  <el-input
                    v-model="ruleForm.send_num"
                    disabled
                  /> </el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item label="未入库数量" prop="wsend_num">
                  <el-input v-model="ruleForm.wsend_num" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="退货数量" prop="return_num">
                  <el-input
                    v-model="ruleForm.return_num"
                    :disabled="isDetail"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button
            type="primary"
            :size="'mini'"
            @click="submitForm"
            v-if="!isDetail"
            >保 存
          </el-button>
          <el-button :size="'mini'" @click="showModelThis = false">{{
            isDetail ? "关 闭" : "取 消"
          }}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
import asyncRequest from "@/apis/service/purchaseIn/purchaseReturn";
import resToken from "@/mixins/resToken";
import { isnumber } from "@/utils/validate";
export default {
  name: "purchaseReturnAdd",
  props: ["showModel", "id", "isDetail", "sitem"],
  mixins: [resToken],
  data() {
    const validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("退货数量不能为空！"));
      } else {
        if (value.length > 50) {
          callback(new Error("退货数量位数不能超过50位！"));
        } else {
          if (!isnumber(value)) {
            callback(new Error("请填写正确的退货数量！"));
          } else {
            callback();
          }
        }
      }
    };
    return {
      loading: false,
      title: "新建采购单退货",
      showModelThis: this.showModel,
      ruleForm: {
        cgdNo: "",
        return_num: "", //退货数量
        good_name: "",
        wsend_num: "",
      },
      rulesThis: this.rules,
      rules: {
        return_num: [
          {
            required: true,
            validator: validatename,
            trigger: "blur",
          },
        ],
        good_name: [
          {
            required: true,
            trigger: "blur",
            message: "请填写商品名称",
          },
        ],
        goods_class: [
          {
            required: true,
            trigger: "blur",
            message: "请填写商品分类名称",
          },
        ],
        wsend_num: [
          {
            required: true,
            trigger: "blur",
            message: "请填写商品数量",
          },
        ],
      },
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm(this.sitem);
      this.loading = false;
    },
    async initData() {
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0 && res.data) {
        this.ruleForm = res.data;
        this.ruleForm.role_id = this.ruleForm.role;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async resetForm(sitem) {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          console.log(this.sitem);
          const {
            good_name,
            goods_class,
            wsend_num,
            cgdNo,
            good_num,
            send_num,
          } = this.sitem;
          this.ruleForm = {
            good_num: good_num || "",
            send_num: send_num || "",
            cgdNo: cgdNo || "",
            return_num: "", //退货数量
            good_name: good_name || "",
            goods_class: goods_class || "",
            wsend_num: wsend_num || "",
          };
        }
      });
    },

    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;

          const model = JSON.parse(JSON.stringify(this.ruleForm));
          if (Number(model.return_num) > Number(model.wsend_num)) {
            this.$message.warning("退货数量不能大于未发货数量");
            this.loading = false;
            return;
          }
          delete model["good_name"];
          delete model["goods_class"];
          delete model["wsend_num"];
          const res = await asyncRequest.add(model);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "添加成功",
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

   <style lang="scss" scoped>
.purchaseReturn {
}
</style>
   