<template>
  <div class="purchaseOrderDetail pagePadding">
    <el-tabs v-model="activeTabs">
      <el-tab-pane label="业务详情" name="1">
        <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
          <el-collapse-item title="销售订单信息" name="1">
            <show-data-table
              :newTime="newTime"
              v-if="newTime !== ''"
              :sitem="sitem"
              :columns="showColumns"
            >
              <template slot="supplier_name">
                <span>{{ sitem.supplier_name }}</span>
                <el-popover placement="top" width="300" trigger="hover">
                  <ul>
                    <li>
                      <span>销售方公司编号：</span><span>{{ sitem.supplierNo }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
              </template>
              <template slot="company">
                <span>{{ sitem.company }}</span>
                <el-popover placement="top" width="300" trigger="hover">
                  <ul>
                    <li>
                      <span>购买方公司编号：</span><span>{{ sitem.companyNo }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
              </template>

              <template slot="status">
                <el-tag
                  :size="'mini'"
                  :type="sitem.status == '0' ? 'warning' : ''"
                  v-text="
                    (statusOptions.find((item) => item.value == sitem.status) || {})
                      .label || '--'
                  "
                ></el-tag>
                <el-tooltip
                  class="fr"
                  v-if="sitem.status === '0'"
                  effect="dark"
                  content="已于供应商确认"
                  placement="top"
                >
                  <i class="el-icon-video-play tb-icon" @click="statusConfirm()"></i>
                </el-tooltip>
              </template>
              <template slot="order_type">
                <el-tag
                  :size="'mini'"
                  v-text="
                    (
                      cg_order_type_options.find((item) => item.id == sitem.order_type) ||
                      {}
                    ).label || '--'
                  "
                ></el-tag>
                <el-popover
                  placement="top"
                  width="300"
                  v-if="sitem.order_type === '1'"
                  trigger="hover"
                >
                  <ul>
                    <li>
                      <span>备库单编号：</span><span>{{ sitem.bkcode }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
                <el-popover
                  placement="top"
                  width="300"
                  v-if="sitem.order_type !== '1'"
                  trigger="hover"
                >
                  <ul>
                    <li>
                      <span>订单编号：</span><span>{{ sitem.orderCode }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
              </template>

              <!-- <template slot="wsm">
                <span>{{ sitem.wsm_supplier }}/{{ sitem.wsm_name }}</span>
                <el-popover placement="top" width="300" trigger="hover">
                  <ul>
                    <li>
                      <span>仓库公司编号：</span><span>{{ sitem.wsm_supplierNo }}</span>
                    </li>
                    <li>
                      <span>仓库名称编号：</span><span>{{ sitem.wsm_code }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
              </template> -->

              <template slot="gold_price">
                <div
                  v-if="
                    sitem.status == '0' &&
                    sitem.can[0].id == '6' &&
                    cost_detailArr.is_gold_price == '1'
                  "
                >
                  {{ sitem.gold_price }}
                </div>
                <div v-else>----</div>
              </template>
              <template slot="customer">
                <span>{{ sitem.customer.companyName }}</span>
                <el-popover
                  placement="top"
                  width="300"
                  trigger="hover"
                  v-if="sitem.order_type != 1"
                >
                  <ul>
                    <li>
                      <span>客户编号：</span><span>{{ sitem.customer.companyNo }}</span>
                    </li>
                  </ul>
                  <i class="el-icon-warning-outline fr" slot="reference"></i>
                </el-popover>
              </template>

              <template slot="addr_info">
                <el-table
                  :data="sitem.addr_info"
                  :size="'mini'"
                  border
                  stripe
                  style="width: 100%"
                >
                  <el-table-column
                    prop="receipt_quantity"
                    label="发货数量"
                    show-overflow-tooltip
                    width="150px"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="contactor"
                    label="收货人"
                    show-overflow-tooltip
                    width="100px"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="联系电话"
                    show-overflow-tooltip
                    width="140px"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="addr_code"
                    label="收货地址"
                    show-overflow-tooltip
                    min-width="500px"
                  >
                  </el-table-column>
                </el-table>
              </template>
            </show-data-table>
          </el-collapse-item>
          <el-collapse-item title="商品信息" name="2">
            <show-goods-data-table
              :newTime="newTime"
              v-if="newTime !== ''"
              :type="sitem.order_type"
              :skucode="sitem.skuCode"
              :spucode="sitem.spuCode"
              :iscgd="true"
            />
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <!-- <el-tab-pane label="审批记录" name="2">
        <process-time-line
          v-if="newTime !== ''"
          :newTime="newTime"
          :type="'CGD'"
          :orderCode="queryId"
        />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/purchaseOrder";
import { statusOptions, showColumns } from "./columns";
import { cg_order_type_options } from "@/assets/js/statusList";
import urlConfig from "@/apis/url-config";
import { mapGetters } from "vuex";
export default {
  name: "purchaseOrderDetail",
  mixins: [mixinPage, resToken],
  computed: {
    ...mapGetters(["business_companyNo"]),
    maxNo() {
      return this.business_companyNo;
    },
  },
  watch: {
    maxNo(val, oldval) {
      this.$notify({
        title: "供应商已发生变化",
        dangerouslyUseHTMLString: true,
        message: "5秒后，跳转至销售订单列表页！",
      });
      setTimeout(() => {
        this.routeReGoto("/purchaseOrder/index", {});
      }, 5000);
    },
  },
  data() {
    return {
      statusOptions,
      cg_order_type_options,
      fileUrl: urlConfig.baseURL,
      showColumns,
      activeTabs: "1",

      isMetal: false,
      finishStatus: "finish",
      activeNames: ["0", "1", "2", "3", "4", "5", "10"],
      sitem: null,
      status: "",
      newTime: "",
      loading: false,
      queryId: "",
    };
  },
  mounted() {
    this.queryId = this.$route.query.id;
    this.initData();
  },
  methods: {
    getNewTime() {
      this.newTime = new Date().valueOf();
    },

    async initData() {
      this.loading = true;
      const res = await asyncRequest.detail({ cgdNo: this.queryId });
      const { code, data, message } = await this.useResHandle(res);
      if (code === 0) {
        this.sitem = data;
        const { status, can } = this.sitem;
        this.status = status;
        if (can && can.length > 0) {
          this.sitem.class_cat = "";
          can.forEach((x, i) => {
            this.sitem.class_cat += i === 0 ? x.name : "/" + x.name;
          });
        }
        this.getNewTime();
      }
      this.loading = false;
    },

    async statusConfirm() {
      await this.$confirm(`确定已与供应商确认？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let model = {
            cgdNo: [this.sitem.cgdNo],
            status: "1",
          };
          const res = await asyncRequest.status(model);
          const { code, data, message } = await this.useResHandle(res);
          this.loading = false;
          if (code === 0) {
            this.$notify.success({
              title: "提交成功！",
              message: "",
            });
            await this.initData();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.purchaseOrderDetail {
}
</style>
