<template>
  <el-form
    ref="ruleForm"
    :loading="loading"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    label-width="110px"
    style="width: 100%"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="24" style="margin: -10px 0 10px 0">
        <el-divider>虚拟仓商品入库信息设置</el-divider>
      </el-col>
      <el-col :span="12">
        <el-form-item label="仓库所在公司" prop="return_company">
          <search-supplier
            :placeholder="'仓库所在公司'"
            :type="'1'"
            :value="ruleForm.return_company"
            @searchChange="selectSupplier"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="入库仓库" prop="return_wsm">
          <search-stock
            :isDetail="true"
            :value="ruleForm.return_wsm"
            :disabled="supplier_code === ''"
            :placeholder="'出库仓库'"
            :isRelation="true"
            :companyCode="supplier_code"
            :names="''"
            @searchChange="selectStock"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退货总数量" prop="cgd_wsend" required>
          <el-input
            disabled
            v-model="ruleForm.cgd_wsend"
            placeholder="退货总数量"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button type="primary" :size="'mini'" @click="submitForm"
          >保 存</el-button
        >
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/zxReturn";
import resToken from "@/mixins/resToken";
export default {
  name: "handover",
  props: ["id", "sitem", "showModel", "newTime"],
  mixins: [resToken],
  data() {
    return {
      supplier_code: "",
      return_wsm: "",
      isShow: true,
      loading: false,
      disabled: true,
      status: "", //存储详情接口返的状态
      showModelThis: this.showModel,
      resign_name: "", //离职人
      hand_name: "", //交接人
      ruleForm: {
        order_type: "1", //售后类型 1销售2咨询，
        outCode: "", //
        stock_out_numbers: "", //发货申请单编号
        anomalous_numbers: "", //异常数量
        anomalous_reason: "", //异常原因
        expect_wish: "", //期望意愿
        anomalous_images: [],
        anomalous_remark: "", //异常备注
      },
      rulesThis: this.rules,
      // 验证规则
      rules: {
        return_wsm: [
          {
            type: "array",
            required: true,
            message: "请选择入库仓库",
            trigger: "change",
          },
        ],
        return_company: [
          {
            type: "array",
            required: true,
            message: "请选择仓库所在公司",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "zxReturnDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  mounted() {
    // this.getReason(); //获取异常原因
    this.initForm();
  },
  watch: {
    id: function (val) {
      if (val) {
        this.initForm();
      }
    },
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.status = "";
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    // 选择供应商
    selectSupplier(e) {
      if (e && e.id) {
        this.ruleForm.return_company = [e.code];
        this.supplier_code = e.code;
      } else {
        this.ruleForm.return_wsm = [];
        this.ruleForm.return_company = [];
        this.return_wsm = "";
        this.supplier_code = "";
      }
    },
    // 选择供应商仓库
    selectStock(e) {
      if (e && e.id) {
        this.ruleForm.return_wsm = [e.code];
        this.return_wsm = e.code;
      } else {
        this.ruleForm.return_wsm = [];
        this.return_wsm = "";
      }
    },
    async resetForm() {
      this.resign_name = "";
      this.hand_name = "";
      this.status = "";
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          let { cgd_wsend, status, return_wsm, returnCode, return_company } =
            this.sitem;
          this.status = status;
          this.ruleForm = {
            returnCode: returnCode || "",
            cgd_wsend: cgd_wsend || "",
            return_wsm: return_wsm ? [return_wsm] : [],
            return_company: return_company ? [return_company] : [],
          };
          console.log(this.ruleForm);
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { anomalous_numbers } = this.ruleForm;
          if (this.sitem.send_num < anomalous_numbers) {
            this.$message.warning("异常数量不能大于发货数量");
            return false;
          }
          let model = JSON.parse(JSON.stringify(this.ruleForm));

          // console.log("调接口");
          let _model = {
            order_type: "1",
            outCode: model.outCode,
            errorCode: model.anomalous_reason, //异常原因
            num: model.anomalous_numbers,
            remark: model.anomalous_remark,
            except_code: model.expect_wish,
            img: model.anomalous_images.toString(),
          };

          const res = await asyncRequest.add(_model);

          if (res && res.code === 0) {
            const title = this.id === "add" ? "添加成功！" : "修改成功！";
            this.$notify.success({
              title,
              message: "",
            });
            this.$emit("refresh", false);
          } 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;
        }
      });
    },
    async statusConfirm(status, message) {
      await this.$confirm(`确定要${message}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (status === "-1") {
            await this.deleteById(message);
          } else {
            await this.setStatus(status, message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    async deleteById(message) {
      const res = await asyncRequest.delete({ id: this.id });
      if (res && res.code === 0) {
        this.$notify.success({
          title: message + "成功！",
          message: "",
        });

        this.routeGoto("handover", {});
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },

    async setStatus(status, message) {
      let model = {
        id: this.id,
        remark: "",
        status: status,
      };
      const res = await asyncRequest.status(model);
      this.loading = false;
      if (res && res.code === 0) {
        this.$notify.success({
          title: message + "成功！",
          message: "",
        });
        this.initForm();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },

    open() {
      this.show = true;
    },
    // // 获取异常原因
    // async getReason() {
    //   let model = {
    //     type: "2",
    //     page: 1,
    //     size: 100,
    //   };
    //   const res = await asyncRequest.reasonList(model);
    //   this.loading = false;
    //   if (res && res.code === 0) {
    //     this.reason_options = res.data.list;
    //   } else if (res && res.code >= 100 && res.code <= 104) {
    //     await this.logout();
    //   } else {
    //     this.$message.warning(res.message);
    //   }
    // },
    // 异常原因
    handleAnomalousReason(e) {
      if (e) {
        this.ruleForm.anomalous_reason = e;
      } else {
        this.ruleForm.anomalous_reason = "";
      }
      this.$refs.ruleForm.validateField("company_img");
    },
    //图片上传失败
    UploadErrorEvent(res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField("anomalous_images");
      }
    },
    //图片上传成功
    async UploadSuccessEvent(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.ruleForm.anomalous_images.push(url);
        this.$message.success("图片上传成功!");
        this.$refs.ruleForm.validateField("anomalous_images");
      }
    },
    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false,
        isLt2M = false;
      if (file) {
        if (
          file.type === "image/jpg" ||
          file.type === "image/png" ||
          file.type === "image/jpeg"
        ) {
          isJPG = true;
        }
        isLt2M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error("图片格式不正确！");
        }
        if (!isLt2M) {
          this.$message.error("图片大小不能超过 1MB!");
        }
      }

      return isJPG && isLt2M;
    },
    imgClose(index) {
      this.ruleForm.anomalous_images.splice(index, 1);
      this.$refs.ruleForm.validateField("anomalous_images");
    },
    getMargin() {
      if (this.ruleForm.anomalous_images.length == 0) {
        return "margin:0;";
      } else if (this.ruleForm.anomalous_images.length < 3) {
        return "margin:0px 0 0 10px";
      } else {
        return "margin:10px 0 0 10px";
      }
    },
    getMargin_li() {
      if (this.ruleForm.anomalous_images.length <= 3) {
        return "margin:0 0 0 10px";
      } else {
        return "margin:10px 0 0 10px";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item-error-img {
  width: 100%;
  ul {
    width: 100%;
    li {
      float: left;
      border: 1px solid rgb(220, 223, 230);
      // border-left: 0;
      box-sizing: border-box;
      width: 254px;
      height: 164px;
      line-height: 164px;
      position: relative;
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
      .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        font-size: 19px;
        &:hover {
          color: #63cbe7;
        }
      }
    }
  }
}
.images_li {
  // width: 254px;
  // height: 164px;
  float: left;
}
.btnupload {
  float: left;
  border: 1px solid rgb(220, 223, 230);
  // border-left: 0;
  box-sizing: border-box;
  width: 254px;
  height: 164px;
  line-height: 164px;
  text-align: center;
}
.Upload {
  width: 254px;
  height: 164px;
  line-height: 164px;
  text-align: center;
  position: absolute;
  line-height: 0px;
  top: 0;
  left: 0;
  z-index: 2;
  line-height: 164px;
}
.avatar-uploader-icon {
  font-size: 33px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
