<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="110px"
    class="demo-ruleForm"
  >
    <el-row>
           <el-col :span="12">
        <el-form-item label="商品分类" prop="numbers">
          <el-input
            disabled
            v-model="ruleForm.numbers"
            placeholder="商品分类"
          ></el-input>
        </el-form-item>
      </el-col>
           <el-col :span="12">
        <el-form-item label="商品名称" prop="numbers">
          <el-input
            disabled
            v-model="ruleForm.numbers"
            placeholder="商品名称"
          ></el-input>
        </el-form-item>
      </el-col>
           <el-col :span="12">
        <el-form-item label="购买方公司" prop="numbers">
          <el-input
            disabled
            v-model="ruleForm.numbers"
            placeholder="购买方公司"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="12" prop="numbers">
          <el-input
            disabled
            v-model="ruleForm.numbers"
            placeholder="请输入异常数量"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="异常原因" prop="reason">
          <el-select
            style="width: 100%"
            disabled
            v-model="ruleForm.reason"
            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="12">
        <el-form-item label="异常备注" prop="remark">
          <el-input
            type="textarea"
            disabled
            placeholder="请输入异常原因备注"
            v-model="ruleForm.remark"
            maxlength="250"
            show-word-limit
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
   <script>
import asyncRequest from "@/apis/service/sellOut/zxAfterSaleOrder";
import resToken from "@/mixins/resToken";
export default {
  name: "returnOrder",
  props: ["showModel", "id", "isDetail", "sitem"],
  mixins: [resToken],
  data() {

    return {
      loading: false,
      title: "添加异常情况",
      showModelThis: this.showModel,
      ruleForm: {
        numbers: "", //异常数量
        reason: "", //异常原因
        remark: "", //异常备注
        name: "",
        status: "1",
      },
      reason_options: [],
     
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        console.log("int:" + val);
        this.initForm();
      }
    },
    showModelThis(val) {
      console.log(val);
      if (!val) {
        console.log("out:" + val);
        this.$emit("cancel");
      }
    },
  },

  methods: {
    
    async initForm() {
      await this.getReason();
      this.loading = true;
      await this.resetForm();
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();

          this.ruleForm = {
            numbers: "", //异常数量
            reason: "", //异常原因
            remark: "", //异常备注
            name: "",
          };
        }
      });
    },

    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // this.loading = true;
          this.showModelThis = false;
          console.log(this.ruleForm);
          this.$emit("refresh", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 异常原因
    async getReason() {
      let model = {
        type: "5",
        page: 1,
        size: 100,
      };
      const res = await asyncRequest.resultlist(model);
      this.loading = false;
      if (res && res.code === 0) {
        console.log(res.data);
        this.reason_options = res.data.list;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
</style>
   