<template>
  <div>
    <el-row class="purchaseOrderDetail-addForm">
      <el-col
        :span="12"
        class="purchaseOrderDetail-addForm-el-col"
        v-for="(colu, index) in columns"
        :key="colu + index"
      >
        <div class="label">{{ colu.label }}：</div>
        <div class="name">{{ sitem[colu.prop] }}</div>
      </el-col>
    </el-row>
    <!-- <purchase-order-addedit-model
      :id="modelId"
      :show-model="showModel"
      :sitem="detailSitem"
      @refresh="refresh"
      @cancel="showModel = false"
    /> -->
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/purchaseIn/purchaseOrder";
import resToken from "@/mixins/resToken";
// import purchaseOrderAddeditModel from "./purchase-order-addedit-model";
import columns from "./columns";
export default {
  name: "addEdit",
  props: ["id", "sitem", "newTime"],
  mixins: [resToken],
  // components: { purchaseOrderAddeditModel },
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "purchaseOrderDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      columns: columns,
      status: "",
      loading: false,

      isDisabled: false,
      detailSitem: null,
      loading: false,
      modelId: "",
      sitem: null,
      showModel: false,
      isDetail: false,
      modelId: 0,
    };
  },
  mounted() {
    this.initForm();
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  methods: {
    
    addForm() {
      this.detailSitem = this.sitem;
      this.modelId = this.id;
      this.showModel = true;
    },

    async initForm() {
      this.loading = true;
      if (this.id === "add") {
        this.status = "";
      } else {
        const { status, can } = this.sitem;
        this.sitem.goods_class = "";
        this.status = status || "";
        can.forEach((v, i) => {
          this.sitem.goods_class += i === 0 ? v.name : "/" + v.name;
        });
      }
      this.loading = false;
    },
    refresh() {
      this.showModelThis = false;
      this.$emit("refresh");
    },

    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.queryId });
      if (res && res.code === 0) {
        this.$notify.success({
          title: message + "成功！",
          message: "",
        });

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

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

   <style lang="scss" scoped>
.purchaseOrderDetail-addForm {
  border-top: 1px solid #ebeef5 !important;
  border-left: 1px solid #ebeef5 !important;
  .purchaseOrderDetail-addForm-el-col {
    display: flex;
    align-items: stretch;
    //
    border-right: 1px solid #ebeef5 !important;
    .label {
      width: 145px;
      line-height: 40px;
      text-align: right;
      background: #fafafa !important;
      font-weight: 400 !important;
      color: #909399 !important;
      font-size: 12px !important;
      border-bottom: 1px solid #ebeef5 !important;
      border-right: 1px solid #ebeef5 !important;
    }
    .name {
      width: calc(100% - 145px);
      text-align: left;
      line-height: 40px;
      font-size: 12px !important;
      border-bottom: 1px solid #ebeef5 !important;
      padding: 0 0 0 12px !important;
      color: #606266 !important;
    }
  }
}
</style>
   