<template>
	<sc-dialog v-model="visible" width="80%" top="10vh" @closed="$emit('closed')">
		<template v-slot:header>
			<el-tabs v-model="activeName" @tab-change="tabChange">
				<el-tab-pane label="采购申请信息" name="purchase"></el-tab-pane>
				<template v-for="(label, key, index) in stepDic" v-bind:key="index">
					<el-tab-pane v-if="form[handlerKey(key)] && form[handlerKey(key)].id" :label="`${label}单`" :name="key"></el-tab-pane>
				</template>
			</el-tabs>
		</template>

		<el-scrollbar>
			<el-tabs v-model="activeName">
				<el-tab-pane name="purchase">
					<el-collapse v-model="collapseActives">
						<el-collapse-item title="基本信息" name="purchase_basic">
							<scApply :id="form.id" :lg="12" disabled></scApply>
						</el-collapse-item>
						<el-collapse-item title="流程跟踪" name="purchase_tracking">
							<template v-if="form.processInstanceId">
								<tracking ref="purchaseTracking" :processInstanceId="form.processInstanceId"></tracking>
							</template>
						</el-collapse-item>
					</el-collapse>
				</el-tab-pane>

				<template v-for="(label, key, index) in stepDic" v-bind:key="index">
          <el-tab-pane v-if="form[handlerKey(key)] && form[handlerKey(key)].id" :name="key">
					  <el-collapse v-model="collapseActives">
              <el-collapse-item title="基本信息" :name="`${key}_basic`">
                <scHandler ref="scHandler" :id="form.id" :mode="key" :lg="12" disabled></scHandler>
						  </el-collapse-item>
              <el-collapse-item title="流程跟踪" :name="`${key}_tracking`">
                <template v-if="form[handlerKey(key)].processInstanceId">
                  <tracking :ref="`${key}Tracking`" :processInstanceId="form[handlerKey(key)].processInstanceId"></tracking>
							  </template>
              </el-collapse-item>
					  </el-collapse>
          </el-tab-pane>
				</template>
			</el-tabs>
		</el-scrollbar>
	</sc-dialog>
</template>

<script>
	import { stepDic } from "@/views/procurement/process/main";
	import scApply from "@/components/scChengTou/purchase/apply";
	import scHandler from "@/components/scChengTou/purchase/handler";
	import Tracking from "@/components/scChengTou/purchase/tracking";

	export default {
		emits: ["closed"],
		components: {
			scApply,
			scHandler,
			Tracking
		},

		data() {
			return {
				stepDic,
				visible: false,
				activeName: "purchase",

				collapseActives: ["purchase_basic", "purchase_tracking"],
				form: {}
			}
		},

		methods: {
			handlerKey(mode) {
				const modeArray = mode.split("purchase_")[1].split("_");
				const suffixArray = modeArray.slice(1);
				return modeArray[0] + suffixArray.map(str => this.$TOOL.capitalizeWords(str)).join("");
			},

			// 显示
			open() {
				this.visible = true;
				return this;
			},

			// 表单注入数据
			setData(data) {
				this.form = Object.assign({}, data);
				data.processInstanceId && this.$nextTick(() => this.$refs.purchaseTracking.getToken());
			},

      tabChange(e) {
        if (this.collapseActives.findIndex(c => c.includes(e)) == -1) {
          this.collapseActives.push(`${e}_basic`);
          this.collapseActives.push(`${e}_tracking`);
          
				  this.form[this.handlerKey(e)].processInstanceId && this.$refs[`${e}Tracking`][0].getToken();
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.sc-dialog:deep(.el-dialog) {
  .el-dialog__header {
    padding: 0;

    &::after {
      display: none;
    }

    .sc-dialog__headerbtn button {
      margin-left: 0;
    }

    .el-tabs {
      flex-basis: 100%;
      --el-tabs-header-height: 50px;

      .el-tabs__header {
        margin-bottom: 0;

        .el-tabs__nav-wrap::after {
          height: 1px;
        }

        .el-tabs__item {
          padding-bottom: 10px;
        }
      }

      .el-tabs__content {
        display: none;
      }
    }
  }

  .el-dialog__body {
    padding-top: var(--el-dialog-padding-primary);
    padding-bottom: 0;

    .el-tabs .el-tabs__header {
      display: none;
    }

    .el-tabs__content .el-collapse {
      --el-collapse-header-height: 40px;
      --el-collapse-header-font-size: 14px;
      border-top: none;
      border-bottom: none;

      .el-collapse-item__header {
        width: calc(100% - 16px);
        padding-left: 16px;
        border-bottom-color: transparent;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);

        .el-icon {
          display: none;
        }
      }

      .el-collapse-item__header.is-active {
        border-bottom-style: dashed;
        border-bottom-color: #dcdcdc;
      }

      .el-collapse-item__wrap {
        display: block !important;
        height: 0px;
        border-bottom: none;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.78, 0.14, 0.15, 0.86);

        .el-collapse-item__content {
          padding-bottom: 0;

          .el-form {
            padding: 0;
          }
        }
      }

      .el-collapse-item.is-active .el-collapse-item__wrap {
        height: auto;
        padding: 16px 30px 16px 24px;
        opacity: 1;
      }
    }
  }

  .el-dialog__footer {
    display: none;
  }
}
</style>