<script setup>
import { computed, reactive, ref } from "vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {
  getTechnologyDemandUpdateStatus,
  updateDemandProcess,
} from "@/api/admin/agent/service/technology-demand";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

import { useI18n } from "vue-i18n";

const { t } = useI18n();
const active = ref(0); /*active step index*/
const updateStatusList = ref([]); /*update status list*/
const route = useRoute();
const router = useRouter();

//未结题原因描述
const reason = ref("");

// steps title, description, id
const steps = reactive([
  {
    title: computed(() => t("admin.table.cooperationMemo")),
    description: computed(() => t("admin.table.cooperationMemo")),
    id: 1,
  },
  {
    title: computed(() => t("admin.table.customerConfirmSolution")),
    description: computed(() => t("admin.table.customerConfirmSolution")),
    id: 2,
  },
  {
    title: computed(() => t("admin.table.signServiceContract")),
    description: computed(() => t("admin.table.signServiceContract")),
    id: 3,
  },
  {
    title: computed(() => t("admin.table.endTopic")),
    description: computed(() => t("admin.table.endTopic")),
    id: 4,
  },
  {
    title: computed(() => t("admin.table.notEndTopic")),
    description: computed(() => t("admin.table.notEndTopic")),
    id: 5,
  },
]);

const getUpdateStatus = async (demandId) => {
  const resp = await getTechnologyDemandUpdateStatus({
    demandId,
  });
  updateStatusList.value = resp.data.sort((a, b) => a.sort - b.sort);
  const reverseIndex = updateStatusList.value.findLastIndex(
    (item) => item.status === "1"
  );
  active.value = reverseIndex === -1 ? 0 : reverseIndex;
};

const goToStep = (index) => {
  if (
    (active.value === 3 && index === 4) ||
    (active.value === 4 && index === 3)
  ) {
  } else {
    active.value = index;
  }
};
const close = () => {
  router.go(-1);
};
const submit = () => {
  // 当前步骤的表单
  const form = updateStatusList.value[active.value];
  console.log(active.value);
  console.log(form);
  // 当active.value !== 4 时, files 字段不能为空
  // 当 active.value ===2 或 3 时remark 字段不能为空
  if (active.value !== 4 && !form.files) {
    ElMessage.error(t("tips.pleaseUploadFile"));
    return;
  }
  if ((active.value === 2 || active.value === 3) && !form.remark) {
    ElMessage.error(t("tips.pleaseFillInAmount"));
    return;
  }

  if (active.value === 4 && !form.remark) {
    ElMessage.error(t("tips.pleaseFillInReason"));
    return;
  }

  updateDemandProcess({
    ...updateStatusList.value[active.value],
    status: "1",
  })
    .then((resp) => {
      ElMessage.success(t("admin.common.operationSuccess"));
      // if (active.value <= 3) {
      //   active.value += 1;
      // }
    })
    .catch(() => {})
    .finally(() => {
      getUpdateStatus(route.query.id);
      // active.value = updateStatusList.value.findIndex((item) => item.status === "1") + 1;
      //   反向从列表中查找index
    });
};

if (route.query.id) {
  getUpdateStatus(route.query.id);
} else {
  router.go(-1);
}
</script>

<template>
  <div class="app-container">
    <h2 class="page-title">{{ t("admin.common.demandStatus") }}</h2>
    <div style="width: 80%; margin: 0 auto">
      <el-steps :active="active" finish-status="finish" process-status="finish">
        <el-step
          v-for="(item, index) in steps"
          :key="item.id"
          :status="active === 4 && index === 3 ? 'wait' : ''"
          :style="`cursor: ${
            (active === 4 && index === 3) || (active === 3 && index === 4)
              ? 'not-allowed'
              : 'pointer'
          }`"
          :title="item.title"
          @click="goToStep(index)"
        >
          <!--            :status="active === 4 ? 'error' : ''"-->
        </el-step>
      </el-steps>
      <div v-if="updateStatusList.length" class="steps-content">
        <template
          v-for="(item, index) in steps.slice(0, active + 1)"
          :key="item.id"
        >
          <div
            v-if="
              !(index === 3 && updateStatusList[4].status !== '0') &&
              !(index === 4 && updateStatusList[3].status !== '0')
            "
            :class="`step-item ${active === index ? 'active' : ''}`"
          >
            <h3 class="title">{{ index + 1 }}.{{ item.title }}</h3>
            <div class="form-wrap">
              <el-form :model="updateStatusList[0]" label-position="top">
                <el-row v-if="index !== 4" justify="space-between">
                  <el-col :span="12">
                    <el-form-item :label="t('admin.table.uploadFile')">
                      <file-upload v-model="updateStatusList[index].files" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      v-if="index === 2 || index === 3"
                      :label="t('admin.form.amount')"
                    >
                      <el-input-number
                        v-model="updateStatusList[index].remark"
                        :controls="false"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item v-else :label="t('tips.reasonDescription')">
                  <el-input
                    v-model="updateStatusList[index].remark"
                    :rows="5"
                    type="textarea"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="updateStatusList[index].updateTime" class="upload-time">
              <span>{{ t("admin.table.uploadTime") }}：</span>
              <span>{{ updateStatusList[index].updateTime }}</span>
            </div>
          </div>
        </template>
      </div>
      <div class="steps-action">
        <el-button @click="close"> {{ t("common.close") }}</el-button>
        <el-button
          v-if="
            updateStatusList.length &&
            updateStatusList[3]?.status === '0' &&
            updateStatusList[4]?.status === '0'
          "
          type="primary"
          @click="submit"
          >{{ t("admin.broker.saveCurrentStep") }}
        </el-button>

        <template v-if="updateStatusList[active]?.status === '1'">
          <el-button
            v-if="active <= 1"
            @click="
              () => {
                active += 1;
              }
            "
          >
            {{ t("admin.common.nextStep") }}
          </el-button>
          <el-button
            v-if="active === 2"
            @click="
              () => {
                active = 3;
              }
            "
            >{{ t("admin.table.endTopic") }}
          </el-button>
          <el-button
            v-if="active === 2"
            @click="
              () => {
                active = 4;
              }
            "
            >{{ t("admin.table.notEndTopic") }}
          </el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-title {
  text-align: center;
}

.steps-content {
  margin-top: 36px;

  .step-item {
    border-radius: 12px;
    //min-height: 240px;
    border-bottom: 1px solid #ebeef5;
    padding: 12px 24px;

    &.active {
      background-color: rgba(0, 255, 127, 0.03);
    }

    .title {
      margin: 0;
      text-align: end;
      font-size: 22px;
      font-weight: 700;
      color: #169bd5;
    }

    .form-wrap {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-top: 16px;

      :deep(.el-form) {
        width: 100%;
      }

      :deep(.el-form-item__label) {
        font-size: 24px;
        font-weight: 700;
      }
    }

    .upload-time {
      text-align: end;
      font-size: 14px;
      color: #909399;
    }
  }
}

.steps-action {
  margin-top: 20px;
  display: flex;
  justify-content: end;
}
</style>
