<template>
  <div class="stu-sop-step">
    <div class="page-wrap">
      <p class="split-line"></p>
      <t-tabs v-model="curStep" placement="left" class="m-t-20px">
        <t-tab-panel
          v-for="item in tabs"
          :key="item.taskKey"
          :value="item.value"
          :label="item.label"
        >
          <t-form
            ref="form"
            colon
            :label-width="labelWidth"
            class="cur-step-view"
          >
            <t-row :gutter="[0, 10]">
              <t-col
                :span="
                  fullWidthCodes.includes(config.code) ? 12 : config.span || 6
                "
                v-for="config in curFormConfig"
                :key="config.id"
              >
                <DynamicFormItem
                  :config="config"
                  :labelWidth="labelWidth"
                ></DynamicFormItem>
              </t-col>
            </t-row>
          </t-form>
          <s-buttons
            confirmText="提交"
            @cancel="router.back()"
            class="m-t-50px"
          ></s-buttons>
        </t-tab-panel>
      </t-tabs>
    </div>
  </div>
</template>

<script setup name="SopStep">
import { ref, computed } from 'vue';
import DynamicFormItem from '../../components/dynamic-form-item/index.vue';
import { useRouter } from 'vue-router';
import testData from '../test2';
const router = useRouter();
const labelWidth = ref(230);
const fullWidthCodes = ref([
  'TABLE',
  'FORM_GROUP_TITLE',
  'TEXTAREA',
  'ONLY_TITLE',
  'DEVICE_OUT_TABLE',
  'DEVICE_IN_TABLE',
]);
const form = ref();

// const curStep = ref('f_usertask_jwc_project');
const curStep = ref('项目内审');
let allSteps = ref([
  ...testData.flowTaskHistoryList,
  testData.currFlowTaskResult,
]);
let tabsArr = [
  ...testData.flowTaskHistoryList.map((item) => {
    return { value: item.taskName, label: item.taskName };
  }),
  {
    value: testData.currFlowTaskResult.taskName,
    label: testData.currFlowTaskResult.taskName,
  },
];
let tabs = ref(tabsArr);
const curFormConfig = computed(() => {
  return allSteps.value.find((item) => item.taskName === curStep.value)
    .formProperty;
});
const submitHandle = () => {
  form.value.validate().then(async (result) => {
    alert(result);
    if (result === true) {
    }
  });
};
const back = () => {
  history.back();
};
</script>

<style lang="less" scoped>
.stu-sop-step {
  .page-wrap {
    .split-line {
      border-bottom: 1px dashed #ddd;
      margin: 30px 0 10px;
    }
    .cur-step-view {
      // padding: 20px 0;
    }
  }
}
</style>
