<template>
  <el-form
    ref="ruleForm"
    :loading="loading"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    label-width="80px"
    style="width: 100%"
    class="demo-ruleForm"
  >
    <!-- <p>orderCode{{ sitem }}</p> -->
    <p>disabled{{ disabled }}</p>
    <el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发货总量" prop="send_num">
            <el-input
              disabled
              v-model="ruleForm.send_num"
              maxlength="10"
              placeholder="发货总量"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="异常数量" prop="error_num">
            <el-input
              :disabled="disabled"
              v-model="ruleForm.error_num"
              placeholder="异常数量"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="期望意愿" prop="except_code">
            <el-select
              style="width: 100%"
              :disabled="disabled"
              v-model="ruleForm.except_code"
              placeholder="期望意愿"
            >
              <el-option
                v-for="item in expect_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="异常原因" prop="error_code">
            <el-select
              style="width: 100%"
              :disabled="disabled"
              v-model="ruleForm.error_code"
              placeholder="异常原因"
            >
              <el-option
                v-for="item in reason_options"
                :key="item.id"
                :label="item.result"
                :value="item.result_code"
                :disabled="item.status == 0"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="异常备注" prop="error_remark">
            <el-input
              type="textarea"
              placeholder="异常原因备注"
              v-model="ruleForm.error_remark"
              :disabled="disabled"
              maxlength="250"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24">
        <el-form-item label="异常图片" prop="error_img">
          <div class="el-form-item-error-img">
            <ul>
              <li
                class="images_li"
                :style="getMargin_li()"
                v-for="(item, index) in ruleForm.error_img"
                :key="item"
              >
                <img :src="item" alt="" style="width: 254px; height: 164px" />
                <i
                  class="el-icon-close"
                  @click="imgClose(index)"
                  v-if="!disabled"
                ></i>
              </li>
            </ul>
            <div
              class="btnupload"
              :style="getMargin()"
              v-if="ruleForm.error_img.length < 5 && isShow"
              style="position: relative"
              @click="open"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <file-upload
                class="Upload"
                :accept="'.jpg,.png,.jpeg'"
                :multiple="true"
                :uploadcondition="beforeAvatarUpload"
                @UploadErrorEvent="UploadErrorEvent"
                @UploadSuccessEvent="UploadSuccessEvent"
              />
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="text-align: right">
        <el-button
          type="primary"
          @click="submitForm"
          v-if="
            id === 'add' ||
            (status === '0' && powers.some((i) => i == '005'))
          "
          >保 存</el-button
        >
        <el-button
          @click="closeAddEdit"
          v-if="
            id === 'add' ||
            (status === '0' && powers.some((i) => i == '005'))
          "
          >{{ isDetail ? "关 闭" : "取 消" }}</el-button
        ></el-col
      >
    </el-row>
  </el-form>
</template>
<script>
import { isnumber } from "@/utils/validate.js";
import asyncRequest from "@/apis/service/sellOut/sellOutOrder";
import resToken from "@/mixins/resToken";

//组件重写 组件内部重复调用
export default {
  name: "sellAfterApplyDetail",
  props: ["id", "sitem", "showModelThis", "newTime", "orderCode", "outCode"],
  mixins: [resToken],
  data() {
    const validatenumbers = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("异常数量不能为空！"));
      } else {
        if (!isnumber(value)) {
          callback(new Error("异常数量必须为数字"));
        } else {
          callback();
        }
      }
    };
    return {
      isShow: true,
      loading: false,
      disabled: true,
      status: "", //存储详情接口返的状态
      showModelThis: this.showModel,
      resign_name: "", //离职人
      hand_name: "", //交接人
      ruleForm: {
        send_num: "",
        order_type: "",
        outCode: "", //发货申请单编号
        error_num: "", //异常数量
        error_img: [], //异常图片
        error_remark: "", //异常备注
        error_code: "", //异常原因code
        except_code: [], //期望意愿
      },
      rulesThis: this.rules,
      // 验证规则
      rules: {
        error_num: [
          {
            required: true,
            trigger: "blur",
            validator: validatenumbers,
          },
        ],
        error_code: [
          {
            required: true,
            message: "请选择异常原因",
            trigger: "change",
          },
        ],
        except_code: [
          {
            required: true,
            message: "请选择期望意愿",
            trigger: "change",
          },
        ],
        error_img: [
          {
            type: "array",
            required: true,
            message: "异常图片不能为空！",
            trigger: "change",
          },
        ],
        error_remark: [
          {
            required: true,
            message: "请输入异常原因备注",
            trigger: "blur",
          },
        ],
      },
      reason_options: [],
      reason_value: "", //异常原因
      expect_options: [
        {
          value: "1",
          label: "退货",
        },
        {
          value: "2",
          label: "换货",
        },
        {
          value: "3",
          label: "改变售价",
        },
      ],
      code: "",
    };
  },
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "sellAfterApplyDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  mounted() {
    this.getReason(); //获取异常原因
    this.initForm();
  },
  watch: {
    id: function (val) {
      if (val) {
        this.initForm();
      }
    },
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  methods: {
    //   关闭弹窗,直接隐藏表单
    async closeAddEdit() {
      this.$emit("closeModel", false); //抛出一个事件，关闭弹窗
    },
    closeAdd() {
      this.showModelThis = false;
    },
    async initForm() {
      this.loading = true;
      this.status = "";
      this.rulesThis = this.rules;
      this.disabled = false;
      await this.resetForm();

      this.loading = false;
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          let {
            error_num,
            error_img,
            error_remark,
            except_code,
            error_code,
            outCode,
            send_num,
          } = this.sitem;

          this.ruleForm = {
            outCode: outCode || "", //发货申请单编号
            error_num: error_num || "", //异常数量
            error_code: error_code || "", //异常原因
            except_code: except_code || "", //期望意愿
            error_img: error_img ? error_img.split(",") : [],
            error_remark: error_remark || "", //异常备注
            send_num: send_num || "",
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          const { error_num } = this.ruleForm;
          if (Number(this.sitem.send_num) < Number(error_num)) {
            this.$message.warning("异常数量不能大于发货数量");
            return false;
          }
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          model.error_img = model.error_img.toString();
          model.outCode = this.sitem.outCode;
          model.orderCode = this.sitem.orderCode;
          model.num = model.error_num;
          model.remark = model.error_remark;
          model.img = model.error_img;
          model.errorCode = model.error_code;
          delete model["error_num"];
          delete model["error_remark"];
          delete model["error_img"];
          delete model["error_code"];
          // this.$emit("refresh", { status: "4", close: false });
          const res = await asyncRequest.add(model);
          this.loading = false;
          if (res && res.code === 0) {
            const title = this.id === "add" ? "添加成功！" : "修改成功！";
            this.$notify.success({
              title,
              message: "",
            });
            if (this.id === "add") {
              this.showModelThis = false;
              this.$emit("refresh", { status: "5", close: false });
            } else {
              this.initForm();
            }
          } 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 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.error_code = e;
      } else {
        this.ruleForm.error_code = "";
      }
      this.$refs.ruleForm.validateField("error_code");
    },
    //图片上传失败
    UploadErrorEvent(res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField("error_img");
      }
    },
    //图片上传成功
    async UploadSuccessEvent(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.ruleForm.error_img.push(url);
        this.$message.success("图片上传成功!");
        this.$refs.ruleForm.validateField("error_img");
      }
    },
    //判断图片规格
    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.error_img.splice(index, 1);
      this.$refs.ruleForm.validateField("error_img");
    },
    getMargin() {
      if (this.ruleForm.error_img.length == 0) {
        return "margin:0;";
      } else if (this.ruleForm.error_img.length < 3) {
        return "margin:0px 0 0 10px";
      } else {
        return "margin:10px 0 0 10px";
      }
    },
    getMargin_li() {
      if (this.ruleForm.error_img.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: #6954f0;
        }
      }
    }
  }
}
.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>
