<template>
  <div class="projectDetail pagePadding">
    <div class="projectDetail-main" v-if="powers.some((i) => i == '007')">
      <div class="share-a" v-if="powers.some((i) => i == '063')">
        <el-tooltip effect="dark" content="分享项目" placement="top">
          <el-button
            @click="copyToClip('good-share')"
            type="primary"
            :size="'mini'"
            icon="el-icon-position"
            circle
          ></el-button>
        </el-tooltip>
      </div>
      <el-tabs v-model="projectTabs">
        <el-tab-pane label="新建项目" name="0" v-if="queryType === 'add'">
          <add-form
            v-if="newTime !== ''"
            :newTime="newTime"
            :id="queryId"
            :type="queryType"
            :sitem="sitem"
            @refresh="refresh"
          />
        </el-tab-pane>
        <el-tab-pane label="项目详情" name="1" v-if="queryType !== 'add'">
          <el-collapse v-model="projectNames" style="margin: -18px 0 0 0">
            <el-collapse-item title="项目详情" name="0">
              <add-form
                v-if="newTime !== ''"
                :newTime="newTime"
                :id="queryId"
                :type="queryType"
                :sitem="sitem"
                @refresh="refresh"
              />
            </el-collapse-item>
            <el-collapse-item
              title="设置项目毛利率"
              name="1"
              v-if="powers.some((i) => i == '061')"
            >
              <gross-form
                v-if="newTime !== ''"
                :newTime="newTime"
                :id="queryId"
                :type="queryType"
                :sitem="sitem"
                @refresh="initForm()"
              />
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="商品反馈详情" name="2" v-if="queryType !== 'add'">
          <back-good-show
            :id="queryId"
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="queryType"
            :sitem="sitem"
            @refresh="initForm()"
          />
        </el-tab-pane>
        <el-tab-pane
          label="方案制作"
          name="3"
          v-if="
            queryType !== 'add' &&
            (status === '3' || status === '4' || status === '5' || status === '6')
          "
        >
          <set-plan
            :id="queryId"
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="queryType"
            :sitem="sitem"
            @refresh="initForm()"
            @resGoodOk="initForm()"
          />
        </el-tab-pane>

        <el-tab-pane label="审批记录" name="4" v-if="queryType !== 'add'">
          <process-time-line
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="'PRO'"
            :orderCode="queryId"
          />
        </el-tab-pane>

        <el-tab-pane label="流程图" name="5"  v-if="queryType !== 'add'" >
          <flow-chart process_id="14" type="PRO" :orderCode="queryId"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/project";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import addForm from "./components/addForm";
import grossForm from "./components/grossForm";
import backGoodShow from "./components/backGoodShow";
import setPlan from "./components/setPlan";
import urlConfig from "@/apis/url-config";
export default {
  name: "projectDetail",
  mixins: [resToken],
  components: {
    addForm,
    grossForm,
    backGoodShow,
    setPlan,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find((item) => item.menu_route == "projectDetail") ||
        {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },

  data() {
    return {
      statusList: [],

      size: "small",
      projectTabs: "1",
      projectNames: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      newTime: "",
      loading: false,
      queryType: "",
      queryId: "",
      status: "",
      sitem: null,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.projectTabs = type === "add" ? "0" : "1";
      this.loading = true;
      if (this.queryType === "add") {
        this.sitem = {};
        this.getNewTime();
      } else {
        await this.initData();
      }

      this.loading = false;
    },
    // 点击业务审核的保存按钮

    async examForm(e) {
      console.log(e);
      if (!this.loading) {
        let model = {
          activity_code: this.queryId,
          status: e.state === "1" ? "1" : "8",
          remark: e.remark,
        };
        await this.setstatus("提交产品部门审核", model);
      }
    },
    async setstatus(detail, model) {
      await this.$confirm(`确定要${detail}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.actstatus(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "提交成功！",
              message: "",
            });
            await this.initForm();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    handleClick(row) {
      console.log(row);
    },
    copyToClip() {
      console.log(urlConfig);
      let url = `${urlConfig.webUrl}${this.queryId}`;
      console.log(url);
      let aux = document.createElement("input");
      aux.setAttribute("value", url);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      this.$message.warning("分享链接已成功复制至粘贴板！");
    },
    async refresh(e) {
      this.routeReGoto("project", {});
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        projectNo: this.queryId,
      });
      this.loading = false;
      console.log(data);
      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>
.projectDetail {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .projectDetail-main {
    // overflow-y: scroll;
    position: relative;
    padding: 10px;
    height: 100%;
    width: 100%;
    .share-a {
      position: absolute;
      top: 10px;
      right: 16px;
      z-index: 2;
    }
  }
  .projectDetail-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 12px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
