<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="5vh"
    width="1040px"
    @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">
      <add-form
        v-if="showModel"
        :showModel="showModel"
        :sitem="sitem"
        :id="id"
        :isDetail="isDetail"
        @closeModel="handClick"
        @refresh="refresh"
      />
    </el-card>
  </el-dialog>
</template>
   <script>
import asyncRequest from "@/apis/service/sellOut/sellReturn";
import resToken from "@/mixins/resToken";
import addForm from "./addForm";
import { isMobile } from "@/utils/validate";
export default {
  components: {   addForm },
  name: "sellReturn",
  props: ["showModel", "id", "isDetail", "sitem"],
  mixins: [resToken],
  data() {
    const validatemobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空！"));
      } else {
        if (!isMobile(value)) {
          callback(new Error("手机号格式不正确！"));
        } else {
          callback();
        }
      }
    };
    return {
      noSendNumbers: "", //收货-未发货数量
      noSendNum: "", //销售-未发货数量
      reason_options: [], //退换货原因备选项
      loading: false,
      title: "添加销售退货单",
      showModelThis: this.showModel,
      ruleForm: {
        get_return_num: "",
        outCode: "", //出库单编号
        return_remark: "", //退货备注
        return_num: "", //退货数量
        returnReason: [], //退货原因
      },
      rulesThis: this.rules,
      rules: {
        returnReason: [
          {
            required: true,
            message: "请选择退货原因",
            trigger: "change",
          },
        ],
        return_num: [
          {
            required: true,
            validator: validatemobile,
            trigger: "blur",
          },
        ],
        return_remark: [
          {
            required: true,
            message: "请输入退货备注",
            trigger: "blur",
          },
        ],
      },
      tableForm: {
        product_go: [],
        get_product_go: [],
      },
    };
  },
  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.title = "添加销售退货单";
      // this.rulesThis = this.rules;
      // await this.resetForm();
      // this.getReason(); //获取退还货原因

      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.outCode = this.sitem.orderCode;
          const { info, addrs } = this.sitem;
          info.forEach((ele) => {
            this.noSendNum += ele.wsend_num;
          });
          let list = JSON.parse(JSON.stringify(info)); //
          list.map((v) => {
            v.edit = false;
            return v;
          });
          this.tableForm.product_go = [].concat(...list);
          addrs.forEach((ele) => {
            this.noSendNumbers += ele.wsend_num;
          });
          let l_list = JSON.parse(JSON.stringify(addrs));
          l_list.map((ele) => {
            ele.edit = false;
            return ele;
          });
          this.tableForm.get_product_go = [].concat(...l_list);
          this.ruleForm = {
            return_remark: "", //退货备注
            return_num: "", //退货数量
            returnReason: [], //退货原因
          };
        }
      });
    },

    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const model = JSON.parse(JSON.stringify(this.ruleForm));
          let arr = JSON.parse(JSON.stringify(this.tableForm.product_go));
          //收货信息列表入参
          let list = [];
          arr.map((e) => {
            let obj = {
              wsm_code: e.wsm_code,
              return_num: model.return_num,
            };
            list.push(obj);
          });
          // 地址列表入参
          let arr1 = JSON.parse(JSON.stringify(this.tableForm.get_product_go));
          let addr = [];
          arr1.map((e) => {
            let obj = {
              addrid: e.id,
              return_num: model.num,
            };
            addr.push(obj);
          });
          let _model = {
            orderCode: model.outCode,
            errorCode: model.errorCode,
            remark: model.return_remark,
            list,
            addr,
          };
          if (model.return_num > this.noSendNum) {
            this.$message.warning("退货数量不能大于未发货数量");
            return;
          }
          let res = {};
          if (this.id === "add") {
            delete model["id"];
            res = await asyncRequest.add(_model);
          } else {
            res = await asyncRequest.update(_model);
          }
          this.loading = false;
          if (res && res.code === 0) {
            const title = this.id === "add" ? "添加成功" : "修改成功";
            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;
        }
      });
    },
    //异常原因筛选
    //保存某一行
    checkRow(rowIndex, name) {
      if (name == "return") {
        const model = JSON.parse(JSON.stringify(this.ruleForm));
        if (Number(model.return_num) > Number(this.noSendNum)) {
          this.$message.warning("退货数量不能大于未发货数量");
          return;
        }
        const { check_value, check_remark } =
          this.tableForm.product_go[rowIndex];
        if (check_value != "" && check_remark != "") {
          this.tableForm.product_go[rowIndex].edit = false;
        } else {
          this.$message.warning("审核情况或审核备注不能为空");
        }
      } else if (name == "get") {
        const model = JSON.parse(JSON.stringify(this.ruleForm));
        if (Number(model.get_return_num) > Number(this.noSendNum)) {
          this.$message.warning("退货数量不能大于未发货数量");
          return;
        }
        const { check_value, check_remark } =
          this.tableForm.get_product_go[rowIndex];
        if (check_value != "" && check_remark != "") {
          this.tableForm.get_product_go[rowIndex].edit = false;
        } else {
          this.$message.warning("审核情况或审核备注不能为空");
        }
      }
    },
    //编辑某一行
    editRow(rowIndex, name) {
      if (name == "return") {
        let index = this.tableForm.product_go.findIndex((v) => {
          v.edit;
        });
        if (index !== -1) {
          this.$message.warning("请完成其他行的编辑！");
          return;
        } else {
          this.tableForm.product_go[rowIndex].edit = true;
        }
      } else if (name == "get") {
        let index = this.tableForm.product_go.findIndex((v) => {
          v.edit;
        });
        if (index !== -1) {
          this.$message.warning("请完成其他行的编辑！");
          return;
        } else {
          this.tableForm.get_product_go[rowIndex].edit = true;
        }
      }
    },
    resetRow(rowIndex) {
      this.tableForm.product_go[rowIndex].check_remark = "";
      this.tableForm.product_go[rowIndex].check_value = "agree";
    },
    handClick(e) {
      this.showModelThis = e;
    },
    refresh(e) {
      this.showModelThis = e;
      this.$emit("refresh", true);
    },
  },
};
/**
 *  <el-row :gutter="10">
        <el-col :span="24">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rulesThis"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="退货原因"
              prop="returnReason"
              v-if="id === 'add' || isDetail"
            >
              <el-select
                style="width: 100%"
                v-model="ruleForm.returnReason"
                placeholder="退换货原因"
              >
                <el-option
                  v-for="item in reason_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="退货备注" prop="return_remark">
              <!-- <el-input v-model="ruleForm.tel" :disabled="isDetail"></el-input> -->
              <el-input
                type="textarea"
                maxlength="250"
                show-word-limit
                placeholder="请填写备注"
                v-model="ruleForm.return_remark"
              />
            </el-form-item>
            <el-form-item label="仓库信息">
              <el-table
                :data="tableForm.product_go"
                border
                :size="'mini'"
                row-key="key"
              >
                <el-table-column label="商品总数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="已发货数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.send_num }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="未发货数量" width="100">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsend_num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="退货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.return_num'" -->
                    <el-form-item
                      :style="!scope.row.edit ? 'margin:0' : ''"
                      :rules="{
                        required: true,
                        message: '退货数量不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <el-input
                        :disabled="!scope.row.edit"
                        v-model="ruleForm.return_num"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="采购编码" width="180">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.orderCode }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库名称" width="150">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_name }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库供应商" width="220">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplier }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="仓库编码" width="200">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_code }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>

                <!-- <el-table-column label="仓库供应商">
                  <template slot-scope="scope">
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplierNo }}</p>
                    </el-form-item>
                  </template>
                </el-table-column> -->

                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      content="编辑"
                      v-if="!scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-edit tb-icon"
                        @click="editRow(scope.$index, 'return')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip
                      effect="dark"
                      content="保存"
                      v-if="scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-check tb-icon"
                        @click="checkRow(scope.$index, 'return')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="重置" placement="top">
                      <i
                        v-if="scope.row.edit"
                        class="el-icon-refresh-left tb-icon"
                        @click="resetRow(scope.$index)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-col
                :span="24"
                style="text-align: right; padding: 30px 0 10px 0"
              >
                <el-button type="primary" :size="'mini'" @click="submitForm"
                  >保 存
                </el-button>
              </el-col> -->
            </el-form-item>
            <el-form-item label="收货信息">
              <el-table
                :data="tableForm.get_product_go"
                border
                :size="'mini'"
                row-key="key"
              >
                <el-table-column label="收货总数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.receipt_quantity }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="已发货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.send_num }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="未发货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsend_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsend_num }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="退货数量">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.return_num'" -->
                    <el-form-item
                      :style="!scope.row.edit ? 'margin:0' : ''"
                      :rules="{
                        required: true,
                        message: '退货数量不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <el-input
                        :disabled="!scope.row.edit"
                        v-model="ruleForm.get_return_num"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="采购编码" width="200">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.send_num'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>
                        {{ scope.row.orderCode }}
                      </p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="仓库供应商">
                  <template slot-scope="scope">
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.wsm_supplierNo }}</p>
                    </el-form-item>
                  </template>
                </el-table-column> -->
                <el-table-column label="收货联系人 ">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.contactor }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="联系方式" width="120">
                  <template slot-scope="scope">
                    <!-- :prop="'product_go.' + scope.$index + '.wsm_name'" -->
                    <el-form-item :style="!scope.row.edit ? 'margin:0' : ''">
                      <p>{{ scope.row.mobile }}</p>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      content="编辑"
                      v-if="!scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-edit tb-icon"
                        @click="editRow(scope.$index, 'get')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip
                      effect="dark"
                      content="保存"
                      v-if="scope.row.edit"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-check tb-icon"
                        @click="checkRow(scope.$index, 'get')"
                      ></i>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="重置" placement="top">
                      <i
                        v-if="scope.row.edit"
                        class="el-icon-refresh-left tb-icon"
                        @click="resetRow(scope.$index)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-col
                :span="24"
                style="text-align: right; padding: 30px 0 10px 0"
              >
                <el-button type="primary" :size="'mini'" @click="submitForm"
                  >保 存
                </el-button>
              </el-col> -->
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="submitForm" v-if="!isDetail"
            >保 存
          </el-button>
          <el-button @click="showModelThis = false">{{
            isDetail ? "关 闭" : "取 消"
          }}</el-button>
        </el-col>
      </el-row>
 */
</script>

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