<template>
  <div>
    <div v-if="powers.some((i) => i == '007')">
      <Anchor height="900px" :data="anchorArray">
        <div style="width: 100%" v-if="tableData">
          <el-collapse v-model="activeNames" style="margin: -8px 0 0 0">
            <div
              id="detail1"
              v-if="tableData.order_type && (tableData.skuCode || tableData.spuCode)"
            >
              <el-collapse-item title="商品信息" name="1">
                <show-goods-data-table
                  :newTime="newTime"
                  v-if="newTime !== ''"
                  :type="tableData.order_type"
                  :skucode="tableData.skuCode"
                  :spucode="tableData.spuCode"
                  :iscgd="true"
                />
              </el-collapse-item>
            </div>

            <div id="detail2" v-if="tableData.cgdNo">
              <el-collapse-item title="采购单" name="2" v-if="newTime !== ''">
                <detail2 :queryId="tableData.cgdNo"> </detail2>
              </el-collapse-item>
            </div>
            <!-- //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示 -->
            <div id="detail3" v-if="tableData.cgdNo">
              <el-collapse-item title="采购入库单" name="3" v-if="newTime !== ''">
                <detail3 :queryId="tableData.cgdNo"> </detail3>
              </el-collapse-item>
            </div>

            <!-- //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示 -->
            <div id="detail4" v-if="tableData.cgdNo">
              <el-collapse-item title="采购退货单" name="4" v-if="newTime !== ''">
                <detail4 :queryId="tableData.cgdNo"> </detail4>
              </el-collapse-item>
            </div>

            <!-- //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示 -->
            <div id="detail5" v-if="tableData.cgdNo">
              <el-collapse-item title="采购工差单" name="5" v-if="newTime !== ''">
                <detail5 :queryId="tableData.cgdNo"> </detail5>
              </el-collapse-item>
            </div>

            <div id="detail6" v-if="tableData.projectNo">
              <el-collapse-item title="项目单" name="6" v-if="newTime !== ''">
                <detail6 :queryId="tableData.projectNo"> </detail6>
              </el-collapse-item>
            </div>
            <div id="detail7" v-if="tableData.infoNo">
              <el-collapse-item title="竞价单" name="7" v-if="newTime !== ''">
                <detail7 :queryId="tableData.infoNo"> </detail7>
              </el-collapse-item>
            </div>

            <div id="detail8" v-if="tableData.bargainNo">
              <el-collapse-item title="议价单" name="8" v-if="newTime !== ''">
                <detail8 :queryId="tableData.bargainNo"> </detail8>
              </el-collapse-item>
            </div>

            <div id="detail9" v-if="tableData.purchease_id">
              <el-collapse-item title="备货申请单" name="9" v-if="newTime !== ''">
                <detail9 :queryId="tableData.purchease_id"> </detail9>
              </el-collapse-item>
            </div>

            <div id="detail10" v-if="tableData.sale_id">
              <el-collapse-item title="销售订单" name="10" v-if="newTime !== ''">
                <detail10 :queryId="tableData.sale_id"> </detail10>
              </el-collapse-item>
            </div>

            <!-- //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示 -->
            <div id="detail11" v-if="tableData.orderCode">
              <el-collapse-item title="发货申请单" name="11" v-if="newTime !== ''">
                <detail11 :queryId="tableData.orderCode"> </detail11>
              </el-collapse-item>
            </div>
            <!-- //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示 -->
            <div id="detail12" v-if="tableData.orderCode">
              <el-collapse-item title="销售售后申请单" name="12" v-if="newTime !== ''">
                <detail12 :queryId="tableData.orderCode"> </detail12>
              </el-collapse-item>
            </div>
            <!-- //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示 -->
            <div id="detail13" v-if="tableData.orderCode">
              <el-collapse-item title="销售售后退货单" name="13" v-if="newTime !== ''">
                <detail13 :queryId="tableData.orderCode"> </detail13>
              </el-collapse-item>
            </div>
            <!-- //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示 -->
            <div id="detail14" v-if="tableData.orderCode">
              <el-collapse-item title="销售退货单" name="14" v-if="newTime !== ''">
                <detail14 :queryId="tableData.orderCode"> </detail14>
              </el-collapse-item>
            </div>

            <!-- //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示 -->
            <div id="detail15" v-if="tableData.orderCode">
              <el-collapse-item title="销售工差单" name="15" v-if="newTime !== ''">
                <detail15 :queryId="tableData.orderCode"> </detail15>
              </el-collapse-item>
            </div>

            <div id="detail16" v-if="tableData.supplierNo">
              <el-collapse-item title="供应商详情" name="16" v-if="newTime !== ''">
                <detail16 :queryId="tableData.supplierNo"> </detail16>
              </el-collapse-item>
            </div>

            <div id="detail17" v-if="tableData.companyNo">
              <el-collapse-item title="业务公司详情" name="17" v-if="newTime !== ''">
                <detail17 :queryId="tableData.companyNo"> </detail17>
              </el-collapse-item>
            </div>

            <div id="detail18" v-if="tableData.customer_code">
              <el-collapse-item title="企业客户详情" name="18" v-if="newTime !== ''">
                <detail18 :queryId="tableData.customer_code"> </detail18>
              </el-collapse-item>
            </div>
          </el-collapse>
        </div>
      </Anchor>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/reportQuery/standingBook";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
//锚点
// import anchorItem from "./anch/anchorItem.vue"
import Anchor from "./anchBook/anchor.vue";
//详情组件
import detail2 from "./components/detail2/main.vue";
import detail3 from "./components/detail3/main.vue";
import detail4 from "./components/detail4/main.vue";
import detail5 from "./components/detail5/main.vue";
import detail6 from "./components/detail6/main.vue";
import detail7 from "./components/detail7/main.vue";
import detail8 from "./components/detail8/main.vue";
import detail9 from "./components/detail9/main.vue";
import detail10 from "./components/detail10/main.vue";
import detail11 from "./components/detail11/main.vue";
import detail12 from "./components/detail12/main.vue";
import detail13 from "./components/detail13/main.vue";
import detail14 from "./components/detail14/main.vue";
import detail15 from "./components/detail15/main.vue";
import detail16 from "./components/detail16/main.vue";
import detail17 from "./components/detail17/main.vue";
import detail18 from "./components/detail18/main.vue";

export default {
  name: "test",
  mixins: [mixinPage, resToken],
  components: {
    Anchor,
    detail2,
    detail3,
    detail4,
    detail5,
    detail6,
    detail7,
    detail8,
    detail9,
    detail10,
    detail11,
    detail12,
    detail13,
    detail14,
    detail15,
    detail16,
    detail17,
    detail18,
  },

  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "standingBookDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      newTime: "",
      activeNames: [],
      tableData: {},
      anchorArray: [
        // { tar: "#detail1", title: "商品信息" },
        // { tar: "#detail2", title: "采购：采购单" },
        // { tar: "#detail3", title: "采购：入库单" },
        // { tar: "#detail4", title: "采购：退货单" },
        // { tar: "#detail5", title: "采购：工差单" },
        // { tar: "#detail6", title: "销售：项目" },
        // { tar: "#detail7", title: "销售：竞价单" },
        // { tar: "#detail8", title: "销售：议价单" },
        // { tar: "#detail9", title: "销售：备货申请单" },
        // { tar: "#detail10", title: "销售：销售订单" },
        // { tar: "#detail11", title: "销售：发货申请单" },
        // { tar: "#detail12", title: "销售：售后申请单" },
        // { tar: "#detail13", title: "销售：售后退货单" },
        // { tar: "#detail14", title: "销售：退货单" },
        // { tar: "#detail15", title: "销售：工差单" },
        // { tar: "#detail16", title: "供应商详情" },
        // { tar: "#detail17", title: "业务公司详情" },
        // { tar: "#detail18", title: "企业客户详情" },
      ],
    };
  },
  mounted() {
    // console.log(11111,this.row)
    this.activeNames = [];
    for (let i = 1; i < 20; i++) {
      this.activeNames.push(i + "");
    }

    this.initData();
  },
  methods: {
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async initData() {
      this.loading = true;

      const res = await asyncRequest.standbookdetail({
        id: this.$route.query.id,
      });
      if (res && res.code === 0 && res.data) {
        console.log(res);
        this.tableData = res.data;
        this.anchorArrayFn(this.tableData);

        this.getNewTime();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },

    anchorArrayFn(obj) {
      let arr = [];
      let flag = true;
      let {
        //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
        orderCode,

        spuCode,
        skuCode,
        order_type,
        projectNo,
        infoNo,
        bargainNo,
        purchease_id,
        sale_id,
        outCode,
        returnCode,
        thNo,
        returnGoodCode,
        sale_diff_id,
        cgdNo,
        wsm_in_code,
        cgdReturnCode,
        cgd_diff_id,
        supplierNo,
        companyNo,
        customer_code,
      } = obj;
      (order_type ?? "") != "" && ((spuCode ?? "") != "" || (skuCode ?? "") != "")
        ? arr.push({ tar: "#detail1", title: "商品信息" })
        : (flag = false);
      (cgdNo ?? "") != ""
        ? arr.push({ tar: "#detail2", title: "采购单" })
        : (flag = false);
      //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示
      (cgdNo ?? "") != ""
        ? arr.push({ tar: "#detail3", title: "采购入库单" })
        : (flag = false);
      //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示
      (cgdNo ?? "") != ""
        ? arr.push({ tar: "#detail4", title: "采购退货单" })
        : (flag = false);
      //通过采购单编号去查询所有列表、当采购单编号为空时，所有涉及字段不展示
      (cgdNo ?? "") != ""
        ? arr.push({ tar: "#detail5", title: "采购工差单" })
        : (flag = false);
      (projectNo ?? "") != ""
        ? arr.push({ tar: "#detail6", title: "项目单" })
        : (flag = false);
      (infoNo ?? "") != ""
        ? arr.push({ tar: "#detail7", title: "竞价单" })
        : (flag = false);
      (bargainNo ?? "") != ""
        ? arr.push({ tar: "#detail8", title: "议价单" })
        : (flag = false);
      (purchease_id ?? "") != ""
        ? arr.push({ tar: "#detail9", title: "备货申请单" })
        : (flag = false);
      (sale_id ?? "") != ""
        ? arr.push({ tar: "#detail10", title: "销售订单" })
        : (flag = false);
      //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
      (orderCode ?? "") != ""
        ? arr.push({ tar: "#detail11", title: "销售发货申请单" })
        : (flag = false);
      //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
      (orderCode ?? "") != ""
        ? arr.push({ tar: "#detail12", title: "销售售后申请单" })
        : (flag = false);
      //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
      (orderCode ?? "") != ""
        ? arr.push({ tar: "#detail13", title: "销售售后退货单" })
        : (flag = false);
      //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
      (orderCode ?? "") != ""
        ? arr.push({ tar: "#detail14", title: "销售退货单" })
        : (flag = false);
      //通过订单编号去查询所有列表、当订单编号为空时，所有涉及字段不展示
      (orderCode ?? "") != ""
        ? arr.push({ tar: "#detail15", title: "销售工差单" })
        : (flag = false);
      (supplierNo ?? "") != ""
        ? arr.push({ tar: "#detail16", title: "供应商详情" })
        : (flag = false);
      (companyNo ?? "") != ""
        ? arr.push({ tar: "#detail17", title: "业务公司详情" })
        : (flag = false);
      (customer_code ?? "") != ""
        ? arr.push({ tar: "#detail18", title: "企业客户详情" })
        : (flag = false);

      this.anchorArray = arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.purchaseOrderDetail {
}
</style>
