<template>
  <div class="workbenchdetail">
    <div class="page-main clear" v-if="powers.some((i) => i == '007')">
      <div v-if="String(status) !== '1'">
        <search-not :placeholder="'招标任务已结束！'" />
      </div>
      <div v-else>
        <div class="left">
          <div class="left-main">
            <div class="left-card" v-if="sitem">
              <div class="page-main-title">需求信息</div>
              <ul class="page-main-ul clear">
                <li>需求单号：</li>
                <li>{{ queryId }}</li>
                <li>截止时间：</li>
                <li>{{ sitem.endtime }}</li>
                <li>剩余时间：</li>
                <li>{{ sitem.num }}{{ sitem.unit_name }}</li>
                <li>需求公司：</li>
                <li>{{ sitem.original_price }}元</li>
                <li>创建人：</li>
                <li>{{ sitem.salesman }}</li>
                <li>联系方式：</li>
                <li>{{ sitem.arrival_time }}</li>
              </ul>
            </div>
            <div class="left-card" v-if="sitem">
              <div class="page-main-title">活动要求</div>
              <ul class="page-main-ul clear">
                <li>项目预算：</li>
                <li>{{ sitem.good_name }}</li>
                <li>活动城市：</li>
                <li>{{ sitem.total_weight }}g</li>
                <li>需求项目：</li>
                <li>{{ sitem.is_addrs + "" === "1" ? "多地" : "一地" }}</li>
                <li>活动人数：</li>
                <li>{{ sitem.is_custom + "" === "1" ? "定制" : "非定制" }}</li>
                <li>活动需求：</li>
                <li>{{ sitem.use_desc }}</li>
                <li>活动时间：</li>
                <li>{{ sitem.remark }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="p-right">
          <el-collapse v-model="actives">
            <el-collapse-item title="评估预算函" name="1">
              <settlement-budget-letter title="预算" />
            </el-collapse-item>

            <el-collapse-item title="活动方案管理" name="2">
              <activity-scheme :isUpload="true" />
            </el-collapse-item>

            <el-collapse-item title="计划预算函管理" name="3">
              <plan-budget-letter />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/customerService/workbench";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import baseForm from "./components/baseForm";
import PlanBudgetLetter from "./components/planBudgetLetter/index.vue"
export default {
  name: "workbenchDetail",
  components: {
    baseForm,
    PlanBudgetLetter
  },

  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "workbenchDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      actives:["1","2","3"],
      num: 60,
      timer: null,
      loading: false,
      showModel: false,
      tableData: [],
      baseSitem: {},
      isDetail: false,
      modelId: 0,
      queryId: "",
      status: "",
      sitem: {},
      newTime: "",
      editId: "add",
      editType: "wait",
      parmValue: {
        page: 1,
        size: 100,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        projectNo: "",
        is_own: "1",
      },
    };
  },
  mounted() {
    this.initForm();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    async initForm() {
      this.editType = "wait";
      const { id } = this.$route.query;
      this.queryId = id;
      console.log(this.queryId);
      this.loading = true;

      await this.initData();
      await this.searchList();

      this.loading = false;
    },

    async initData() {
      const { code, message, data } = await asyncRequest.detail({
        infoNo: this.queryId,
      });
      if (code === 0) {
        const { status } = data;
        this.status = status;
        this.sitem = JSON.parse(JSON.stringify(data));

        const { can } = this.sitem;
        this.sitem.is_metal = "";
        this.sitem.can_id_arr = [];
        this.sitem.can_name = "";
        let can_name = "",
          can_id_arr = [],
          is_metal = false;
        can.forEach((e, i) => {
          can_name += i == 0 ? e.name : `_${e.name}`;
          can_id_arr.push(e.id);
          if (e.id === "6") {
            is_metal = true;
          }
        });
        this.sitem.is_metal = is_metal;
        this.sitem.can_id_arr = can_id_arr;
        this.sitem.can_name = can_name;
        this.getNewTime();
        await this.well_timer();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    async well_timer() {
      this.timer = setInterval(async () => {
        if (this.num !== 0) {
          this.num--;
        } else {
          if (this.timer) {
            const { code, status, message } = await this.repeat_initData();
            if (code === 0 && status + "" === "1") {
              this.num = 60;
            } else if (code === 0 && status !== "1") {
              this.status = status;
              this.clearTime();
            } else if (code >= 100 && code <= 104) {
              this.clearTime();
              await this.logout();
            } else {
              this.clearTime();
              this.$message.warning(message);
            }
          }
        }
      }, 1000);
    },
    clearTime() {
      if (this.timer) {
        clearInterval(this.timer);
        this.num = 0;
      }
    },
    async repeat_initData() {
      const { code, message, data } = await asyncRequest.detail({
        infoNo: this.queryId,
      });
      const { status } = data;
      const res = { code, status, message };

      return res;
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    openModal(bidNo, type) {
      const { id } = this.$route.query;
      this.queryId = id;
      this.editId = bidNo;
      this.editType = type;
      this.getNewTime();
    },
    // 刷新表格
    async searchList() {
      this.loading = true;
      this.parmValue.infoNo = this.queryId;

      const { code, data, message } = await asyncRequest.good_list(this.parmValue);
      if (code === 0) {
        const { list } = data;
        this.tableData = list;
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.workbenchdetail {
  //
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  box-sizing: border-box;
  overflow: hidden;

  .page-main {
    position: relative;
    background: #f2f2f2;
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    // padding:16px;
    .left {
      position: absolute;
      top: 16px;
      left: 16px;
      width: 220px;
      overflow: hidden;
      height: calc(100vh - 82px);
      .left-main {
        background: rgba(242, 242, 242, 1);
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        // background: #fff;
        height: calc(100vh - 82px);
        @include scrollBar();
      }
    }
    .p-right {
      top: 16px;
      right: 16px;
      padding:0px 10px 10px 10px;
      width: calc(100% - 258px);
      height: calc(100vh - 276px);
      overflow-y: scroll;
      background: #fff;
      overflow-x: hidden;
      position: absolute;
      @include scrollBar();
      .right-mian-wait {
        .title {
          height: 45px;
          font-size: 17px;
          line-height: 45px;
          box-sizing: border-box;
          padding: 0 16px;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
        }
        .main {
          text-align: center;
          line-height: 180px;
        }
      }
    }
    .bottom {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: #fff;
      width: calc(100% - 258px);
      height: 180px;
      min-height: 180px;
      overflow-y: scroll;
      overflow-x: hidden;
      @include scrollBar();
      padding: 16px;
    }
    .left-card,
    .right-card,
    .bottom-card {
      background: #fff;
      font-size: 12px;
      // padding:16px;
      line-height: 18px;
      margin: 8px 0 0 0;
      &:first-child {
        margin: 0;
      }
      .page-main-title {
        height: 45px;
        font-size: 17px;
        line-height: 45px;
        box-sizing: border-box;
        padding: 0 16px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
      .page-main-ul {
        padding: 10px 16px 16px 16px;
        li {
          float: left;
          font-size: 12px;
          line-height: 25px;

          &:nth-child(2n + 1) {
            width: 60px;
            text-align: right;
          }
          &:nth-child(2n + 2) {
            width: calc(100% - 60px);
          }
        }
      }
    }
  }
}
</style>
