<template>
  <div class="salesOrderDetail">
    <el-row>
      <el-col :span="24" style="padding: 0 0 22px 0">
        <el-form :model="addrForm" ref="addrForm" :size="'mini'">
          <el-table
            :data="addrForm.order_addr"
            border
            :size="'mini'"
            style="width: 100%"
            row-key="key"
          >
            <el-table-column
              show-overflow-tooltip
              prop="receipt_quantity"
              label="收货总数"
              width="110"
            />

            <el-table-column
              show-overflow-tooltip
              prop="arrive_time"
              label="最晚收货日期"
              width="145"
            />
            <el-table-column
              show-overflow-tooltip
              prop="contactor"
              label="收件联系人"
              width="85"
            />

            <el-table-column
              show-overflow-tooltip
              prop="mobile"
              label="收货联系电话"
              width="110"
            />

            <el-table-column
              show-overflow-tooltip
              prop="addr"
              label="收货地址"
              min-width="200"
            />

            <el-table-column
              prop="post_fee"
              label="预计物流费用"
              min-width="170"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="'order_addr.' + scope.$index + '.' + 'post_fee'"
                  :rules="addrRules.post_fee"
                  :size="'mini'"
                  :style="{ marginBottom: scope.row.edit ? '13px' : '0' }"
                >
                  <el-input
                    v-model="scope.row.post_fee"
                    :disabled="!scope.row.edit"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              width="80"
              label="操作"
              v-if="status === '1' && powers.some((item) => item == '033')"
            >
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  content="编辑"
                  v-if="!scope.row.edit"
                  placement="top"
                >
                  <i
                    class="el-icon-edit tb-icon"
                    @click="openHouseModal(scope.$index)"
                  ></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)"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
      <el-col
        :span="24"
        style="text-align: right"
        v-if="status === '1' && powers.some((item) => item == '033')"
      >
        <el-button :size="'mini'" type="primary" @click="submitForm"
          >保 存
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/sellOut/zxOrder/detail";
import searchStockGoodModal from "@/components/search-stock-good-modal";
import { isnumber2 } from "@/utils/validate";
export default {
  name: "salesOrderDetail",
  mixins: [mixinPage, resToken],
  props: ["newTime", "id", "sitem"],
  components: { searchStockGoodModal },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "salesOrderDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },

  data() {
    const validateWeight = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("物流费用不能为空"));
      } else {
        if (isnumber(value)) {
          callback();
        } else if (isnumber2(value)) {
          callback();
        } else {
          callback(new Error("物流费用仅支持整数或两位小数!"));
        }
      }
    };

    return {
      showGoodsModel: false,
      stock_code: "",
      addrForm: {
        order_addr: [], //收货地址
      },
      addrRules: {
        post_fee: {
          required: true,
          validator: validateWeight,
          trigger: "blur",
        },
      },
      loading: false,
      queryId: "",
      status: "",
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.status = "";
      this.queryId = this.$route.query.id;
      this.rulesThis = this.rules;
      this.resetForm();
    },

    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.addrForm) {
          this.$refs.addrForm.resetFields();
          this.$refs.addrForm.clearValidate();
          const { addrs, status } = this.sitem;
          this.status = status;
          this.addrForm = {
            order_addr: [],
          };
          if (addrs && addrs.length > 0) {
            addrs.forEach((v) => {
              let model = {
                edit: false,
                arrive_time: v.arrive_time || "",
                receipt_quantity: v.receipt_quantity || "",
                contactor: v.contactor || "",
                mobile: v.mobile || "",
                addr: v.addr_info + v.addr || "",
                id: v.id,
                post_fee: v.post_fee || "",
                is_del: 0,
              };
              this.addrForm.order_addr.push(model);
            });
          }
        }
      });
    },

    openHouseModal(index) {
      let findex = this.addrForm.order_addr.findIndex((v) => v.edit === true);
      if (findex !== -1) {
        this.$message.warning("当前已有地址在编辑，请保存后再试！");
        return;
      } else {
        this.addrForm.order_addr[index].edit = true;
      }
    },

    //省市区保存某一行
    checkRow(rowIndex) {
      this.$refs.addrForm.validate((valid) => {
        if (valid) {
          this.addrForm.order_addr[rowIndex].edit = false;
        } else {
          return false;
        }
      });
    },
    async submitForm() {
      await this.$refs.addrForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const { order_addr } = JSON.parse(JSON.stringify(this.addrForm));
          let model = {
            id: this.queryId,
            order_addr: [],
          };
          order_addr.forEach((v2) => {
            let model2 = {
              post_fee: v2.post_fee,
              id: v2.id,
            };
            model.order_addr.push(model2);
          });
          let res = await asyncRequest.salefee(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>
.salesOrderDetail {
}
</style>
   
   