<template>
<div style="padding: 0 10px;">
  <baseTitle title="费用分摊详情"></baseTitle>
  <el-form :model="formData" ref="form" class="query-form" label-width="auto">
    <el-row>
      <el-col :span="24">
        <el-form-item label="分摊名称">
          <span>{{ formData.shareName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="分摊月份">
          <span>{{ formData.apportionmentMonth }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="分摊汇总" name="first" v-loading="loading">
      <allocation-summary-detail-moblie :allocation-name="formData.shareName" />
    </el-tab-pane>
    <el-tab-pane label="分摊明细" name="second">
      <expense-detail-moblie/>
    </el-tab-pane>
  </el-tabs>
  <div v-if="shareData.taskId">
    <baseTitle title="审核意见"></baseTitle>
    <el-form-item prop="auditOpinion">
      <el-input
          v-model="auditOpinion"
          :rows="3"
          type="textarea"
          placeholder="请输入审核意见"
      />
    </el-form-item>
  </div>
  <div class="approval-record">
    <div class="approval-title">
      <baseTitle title="审批记录"></baseTitle>
      <div class="diagram">
        <div class="base-title">流程图</div>
        <el-switch
            v-model="changeDiagram"
            style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
        />
      </div>
    </div>
    <div class="process">
      <operation-render
          v-if="shareProcessViewer&& shareData.operationList && shareData.operationList.length > 0&&!changeDiagram"
          :operation-list="shareData.operationList"
          :state="shareData.state"/>
      <process-diagram-viewer v-if="shareProcessViewer&&changeDiagram" id-name="shareProcess"/>
    </div>
  </div>
  <opinion-moblie v-if="shareData.taskId" :formData="shareData.formData" :taskId="shareData.taskId"
                  :taskUserOptionList="shareData.taskUserOptionList"
           v-model:value="auditOpinion"></opinion-moblie>
</div>
</template>

<script setup lang="jsx">
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
import {ElNotification} from "element-plus";
import {useProcessStore} from '@/stores/processStore.js';
import {getAllocationDetail} from "@/api/expense-manage";
import AllocationSummaryDetailMoblie from './AllocationSummaryDetailMoblie.vue'
import ExpenseDetailMoblie from './ExpenseDetailMoblie.vue'
import OpinionMoblie from '@/views/project-management/mobledetail/OpinionMoblie.vue'
const changeDiagram = ref(false)
const processStore = useProcessStore()
const route = useRoute()
const shareData = ref({})
const formData = ref({})
const auditOpinion = ref('')
const shareProcessViewer = ref(true)
const loading = ref(false)
const activeName = ref('first')
// const activeName = ref('second')

const getDetail = async () => {
  const id = route.query.id
  shareProcessViewer.value = false
  const {code, data, msg} = await getAllocationDetail(id)
  if (code === 1000) {
    shareData.value = data
    formData.value = data.formData
    processStore.setDesign(data)
    processStore.runningList.value = data.runningList;
    processStore.endList.value = data.endList;
    processStore.noTakeList.value = data.noTakeList;
    processStore.refuseList.value = data.refuseList;
    processStore.passList.value = data.passList;
    nextTick(() => {
      shareProcessViewer.value = true
    })
  } else {
    ElNotification({
      title: '提示',
      message: msg,
      type: 'error'
    })
  }
}


const handleClick = (tab) => {
  if (tab.index == 0) {
    getDetail()
  }
}
getDetail()
</script>
<style scoped lang="scss">
:deep(.el-table--fit ) {
  width: 100%;
  height: 479px !important;
}

:deep(.el-tabs__nav-scroll) {
  width: 100%;
  display: flex;

  .el-tabs__nav {
    display: flex;
    flex: 1;

    .el-tabs__item {
      flex: 1;
      font-size: 16px;
    }

    .is-active {
      color: black;
      //background-color: #DED0B2;
    }
  }
}
</style>
