<template>
  <div class="good-share" v-loading="loading">
    <div class="left">
      <div class="title">项目信息</div>
      <ul class="clear" v-show="sitem">
        <li>
          <div class="label">总预算：</div>
          <div class="label-main">{{ sitem.budget_total }}元</div>
        </li>
        <li>
          <div class="label">到货日期：</div>
          <div class="label-main">{{ sitem.arrtime }}</div>
        </li>
        <li>
          <div class="label">业务员：</div>
          <div class="label-main">{{ sitem.creater }}</div>
        </li>
        <li>
          <div class="label">购买方：</div>
          <div class="label-main">{{ sitem.company }}</div>
        </li>
        <li>
          <div class="label">项目编号：</div>
          <div class="label-main">{{ sitem.projectNo }}</div>
        </li>
        <li>
          <div class="label">项目名称：</div>
          <div class="label-main">{{ sitem.project_name }}</div>
        </li>
        <li>
          <div class="label">项目用途：</div>
          <div class="label-main">{{ sitem.use_desc }}</div>
        </li>
      </ul>
    </div>
    <div class="right">
      <change-back-good
        v-if="newTime !== '' && status === '2'"
        :newTime="newTime"
        :sitem="sitem"
        @refresh="initData()"
      />
      <show-back-good
        v-if="newTime !== '' && (status === '3' || status === '4'||status === '5' )"
        :newTime="newTime"
        :sitem="sitem"
        @refresh="initData()"
      />
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/good-share";
import resToken from "@/mixins/resToken";
import changeBackGood from "./components/changeBackGood";
import showBackGood from "./components/showBackGood";
export default {
  name: "goodShare",
  mixins: [resToken],
  components: {
    changeBackGood,
    showBackGood,
  },
  data() {
    return {
      currentRow: null,
      loading: true,
      status: "",
      radio: "",
      sitem: {},
      queryId: "",
      multipleSelection: [],
      tableData: [],
      newTime: "",
      statusoptions: [
        { value: "1", label: "待商品反馈" },
        { value: "2", label: "待项目反馈商品选择" },
        { value: "3", label: "待项目方案制定" },
        { value: "4", label: "待方案选择" },
        { value: "5", label: "项目结束" },
      ],
    };
  },

  mounted() {
    const { id } = this.$route.query;
    this.queryId = id;
    this.initData();
  },
  methods: {
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        projectNo: this.queryId,
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { status } = this.sitem;
        this.status = status;
        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>

<style lang="scss" scoped>
.good-share {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 100%;
  background: #f2f2f2;
  box-sizing: border-box;
  padding: 16px;
  .left {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    width: 290px;
    min-height: calc(100% - 32px);
    height: calc(100% - 32px);
    background: #fff;

    .title {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      color: #565656;
      padding: 0 16px;
      border-bottom: 1px solid #f2f2f2;
    }
    ul {
      padding: 16px;
      box-sizing: border-box;
      li {
        font-size: 14px;
        width: 100%;
        float: left;

        .label {
          float: left;
          width: 70px;
          text-align: right;
          height: 32px;
          line-height: 32px;
        }
        .label-main {
          float: left;
          width: 188px;
          text-align: right;
          min-height: 32px;
          padding: 4px 0;
          line-height: 24px;
        }
      }
    }
  }
  .right {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 1;
    width: calc(100% - 338px);
    min-height: 100%;
    height: 100%;
    // background: #fff;
  }
}
</style>
