<!-- 
  TODO 费用审批流程步骤
 -->
<template>
  <SysDialog
    class="approval"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    :width="getSysDialogWidth"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <template v-if="isApprovalStatusDtoList">
        <div class="approval-content">
          <div
            class="approval-item flex"
            v-for="(stepsItem, stepsIndex) in getStepList"
            :key="stepsIndex"
          >
            <div class="flex-1">
              <el-steps :active="stepsItem.length">
                <el-step
                  :title="`申请第${stepsItem[stepsItem.length - 1]?.applyCount}次`"
                  status="success"
                >
                  <template #description>
                    <div class="approval-time">
                      申请时间：{{ stepsItem[stepsItem.length - 1]?.createTime }}
                    </div>
                  </template>
                </el-step>
                <el-step
                  v-for="item in stepsItem"
                  :title="`${item.title}（${item.feeApprovalStatusName}）`"
                  :description="item.description"
                  :status="item.status"
                >
                  <template #description>
                    <div class="approval-description">
                      {{ item.description }}
                    </div>
                    <div
                      v-show="item.approvalTime"
                      class="approval-description back-c"
                    >
                      审批时间：{{ item.approvalTime }}
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div>
          <!-- 审批内容 -->
          <div class="approval-actions" v-show="isEdit">
            <el-form
              ref="approvalProcedureFormRef"
              :model="approvalProcedureparams"
              :rules="approvalProcedureState.rulesForm"
              label-width="90px"
            >
              <el-form-item label="审批状态:" prop="feeApprovalStatus">
                <el-select
                  v-model="approvalProcedureparams.feeApprovalStatus"
                  placeholder="请选择审批状态"
                >
                  <el-option
                    v-for="item in feeApprovalStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-button
                  type="primary"
                  class="btn"
                  :loading="approvalProcedureState.feeNoticeLoading"
                  @click="onFeeNoticeShow"
                >
                  查看比对结果
                </el-button>
              </el-form-item>
              <el-form-item label="备注:" prop="remark" :rules="remarkRules">
                <el-input
                  v-model="approvalProcedureparams.remark"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </el-form-item>
            </el-form>
          </div>
          <!-- <template v-if="isApprovalStatus">
          </template>
          <template v-else>
            <el-empty :description="getDescription" />
          </template> -->
        </div>
      </template>
      <template v-else>
        <el-empty description="暂无数据" />
      </template>
    </template>
    <template #defineFooter>
      <div class="customer-feeSet-footer">
        <el-button :type="isEdit ? 'danger' : ''" @click="onclose">
          {{ isEdit ? "取消" : "关闭" }}
        </el-button>
        <template v-if="isEdit">
          <el-button
            type="primary"
            @click="onconfirm"
            :loading="dialog.confirmLoading"
            v-show="isApprovalStatus"
          >
            确定
          </el-button>
        </template>
      </div>
    </template>
  </SysDialog>
  <!-- 客户费用设置提示 -->
  <FeeNoticeShow
    ref="feeNoticeShowRef"
    :customer-fee-set-compare-list="
      approvalProcedureState.customerFeeSetCompareList
    "
    :is-edit="false"
  />
</template>
<script lang="ts" setup>
import type { ListIitem } from "@/api/base/BaseDataModel";
import SysDialog from "@/components/SysDialog.vue";
import { useApprovalProcedure } from "@/composables/customerFeeApproval/useApprovalProcedure";
import useDialog from "@/hooks/useDialog";
import { reactive } from "vue";
import FeeNoticeShow from "@/views/customerfeeset/FeeNoticeShow.vue";

interface Props {
  /**
   * 审批状态列表
   */
  feeApprovalStatusList: ListIitem[];
  /**
   * 是否编辑
   */
  isEdit?: boolean;
}
// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
  isEdit: true,
});
const emit = defineEmits(["confirmApproval"]);
// 弹框一些配置
const getBindValue = reactive({
  top: "13vh",
  title: "审批",
  width: 660,
  height: 0,
  isFooter: true,
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();

const {
  show,
  onclose,
  onconfirm,
  approvalProcedureState,
  approvalProcedureparams,
  feeNoticeShowRef,
  approvalProcedureFormRef,
  onFeeNoticeShow,
  getStepList,
  isApprovalStatus,
  isApprovalStatusDtoList,
  getSysDialogWidth,
  remarkRules
} = useApprovalProcedure(onClose, onShow, setLoading, emit, props);

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.approval {
  .approval-content {
    padding: 13px 12px 0 12px;
    .approval-item {
      padding: 6px 0 10px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #dcdfe6;
      &:last-child {
        border-bottom: none;
      }
      .approval-time {
        flex-basis: 175px;
        font-size: 14px;
        line-height: 38px;
      }
      .approval-description {
        font-size: 14px;
        &.back-c {
          margin-top: 6px;
          color: black;
        }
      }
    }
    .approval-actions {
      padding-top: 10px;
      .btn {
        margin-left: 15px;
      }
    }
  }
}
</style>
