<script setup>


import {getListByName,getHomeVo} from "@/api/report/index";
import {timeFormat} from "@/utils/util";
//项目列表
const projectList = ref([])
//项目id
let reportId = ref(null)
const router = useRouter();

const cardList = ref([
  {
    icon: 'Document',
    iconTitle: null,
    node:'review',
    title: '报审填报',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: null,
    iconTitle: '1',
    node:'first',
    title: '一审作业',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: null,
    iconTitle: '2',
    title: '二审作业',
    node:'second',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: null,
    iconTitle: '3',
    title: '三审作业',
    node:'third',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: 'Avatar',
    iconTitle: null,
    title: '领导审批',
    node:'Lead',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: 'Tickets',
    iconTitle: null,
    title: '定案表',
    node:'original',
    one: false,
    oneText:null,
    time: null
  },
  {
    icon: "List",
    iconTitle: null,
    title: '审计报告',
    one: false,
    node:'audit',
    oneText:null,
    time: null
  },
])
const query =ref({
  name:null
})
const reportHomeVo =ref({})
const loading = ref(false)
const getHomeVoFun = async(val)=>{
  loading.value=true;
  const res = await getHomeVo(val)
  reportHomeVo.value=res;
  cardList.value.forEach((s)=>{
    s.one=false;
    s.oneText=null;
    s.time=null;
  })
  if(res.node !== "initial"){
    cardList.value[0].node = 'review'
    cardList.value.forEach(s=>{
     let data=  res.flows.filter(x=>s.node === x.reportLink)
      if(data.length > 0){
        data =data[0]
        s.one=true;
        s.oneText=data.approverState?(data.approverState==="start"?'开始':'结束'):"已编辑";
        s.time=data.approverState==="start"? timeFormat(data.areportTime):timeFormat(data.applicantTime);
      }
    })
  }else{
    cardList.value[0].node = 'initial'
    cardList.value[0].one=true;
    cardList.value[0].oneText="已编辑";
    cardList.value[0].time=timeFormat(res.applicantTime);
  }
  loading.value=false
}

const pushControl = (id=null,node = null) => {
  if(id && node){
    if(reportHomeVo.value.reportType === "结算项目"){
      router.push({
        path:`/report/edit/controlPrice`,
        query: {
          isEnd:true,
          id:id,
          node:node,
          backPath:"/report/reportProject"
        }
      });
    }else{
      router.push({
        path:`/report/edit/controlPrice`,
        query: {
          isEnd:false,
          id:id,
          node:node,
          backPath:"/report/reportProject"
        }
      });
    }
  }else{
    router.push({
      path:`/report/edit/controlPrice`,
      query: {
        isEnd:false,
        backPath:"report/reportProject"
      }
    });
  }
}

const pushEndControl = (id=null,node = null) => {
  router.push({
    path:`/report/edit/controlPrice`,
    query: {
      isEnd:true,
      backPath:"report/reportProject"
    }
  });
}


const getListByNameFun = async()=>{
  projectList.value=await getListByName(query.value)
}
const inputGetList = async (val)=>{
  projectList.value=await getListByName({"name":val})
}


watch(()=>reportId.value,(val)=>{
  if(val){
    getHomeVoFun(val)
  }
},{deep:true,immediate:true})

getListByNameFun();
</script>

<template>
  <el-header>
    <div>
      <el-row :gutter="20" class="mt-20" style="margin-left: 20px">
        <el-button type="primary" @click="pushControl">控制价项目报审</el-button>
        <el-button type="primary" @click="pushEndControl">结算项目报审</el-button>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form label-width="80" class="mt-10">
            <el-form-item label="项目名称">
              <el-select  remote  :remote-method="inputGetList" filterable placeholder="请输入项目名称" v-model="reportId" clearable>
                <template #header>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <span class="truncate-text" title="项目名称">项目名称</span>
                    </el-col>
                    <el-col :span="4">项目类别</el-col>
                    <el-col :span="6">
                      <span class="truncate-text" title="审计单位名称">审计单位</span>
                    </el-col>
                    <el-col :span="6">项目单位</el-col>
                  </el-row>
                </template>

                <el-option v-for="item in projectList" :value="item.id" :label="item.reportName">
                  <el-row :gutter="20">
                    <el-col :span="8" class="truncate-cell" :title="item.reportName">{{item.reportName}}</el-col>
                    <el-col :span="4">{{item.reportType}}</el-col>
                    <el-col :span="6" class="truncate-cell" :title="item.auditUnit">{{item.auditUnit}}</el-col>
                    <el-col :span="6" class="truncate-cell" :title="item.projectUnit">{{item.projectUnit}}</el-col>
                  </el-row>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getListByNameFun">
            <template #icon>
              <icon name="el-icon-Search"
              />
            </template>
            查询
          </el-button>
          <el-button>重置</el-button>
        </el-col>
      </el-row>
    </div>
  </el-header>
  <el-main>
    <div style="padding-top: 20px" v-loading="loading">
      <hr style="border-color: rgba(232,232,232,0.67);opacity: 0.2">
      <div class="flex v-center" style="height:30px;margin-bottom: 10px">
        <h3>项目整体要求</h3>
      </div>
      <el-row style="font-size: 12px">
        <el-col :span="6" class="text-center">
          <span class="mr-20" style="color: gray">项目名称</span>{{reportHomeVo.reportName}}
        </el-col>
        <el-col :span="6">
          <span class="mr-20" style="color: gray">项目类型</span>{{ reportHomeVo.projectType }}
        </el-col>
        <el-col :span="6">
          <span class="mr-20" style="color: gray">送审金额</span>{{reportHomeVo.reportMoney}}元
        </el-col>
        <el-col :span="6">
          <span class="mr-20" style="color: gray">日期</span>{{timeFormat(reportHomeVo.applicantTime)}}
        </el-col>
      </el-row>
      <hr style="border-color: rgba(232,232,232,0.67);opacity: 0.2">
    </div>
    <div style="width: 96%;margin:0 auto" v-loading="loading">
      <el-card class="content-card" v-for="(item,index) in cardList" :key="index" @click="pushControl(reportId,item.node)">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="flex">
              <div class="card_icon">
                <el-icon :color="'#5C5C97'"  style="font-size: 30px;text-align: center">
                  <component v-if="item.icon" :is="item.icon"/>
                  <span v-else>{{ item.iconTitle }}</span>
                </el-icon>
              </div>
              <div style="padding-left: 10px;font-size: 13px;line-height: 40px">{{ item.title }}</div>
            </div>
          </el-col>
          <el-col :span="10">
            <div :class="item.one?'card_div_succeed':'card_div'">{{ item.oneText }}</div>
          </el-col>
          <el-col :span="10">
            <div :class="'card_div'">{{  item.time }}</div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <p>控制价项目、结算项目报审，在选择项目以后，可以查看报审进展情况</p>
  </el-main>
</template>

<style scoped lang="scss">
.content-card {
  height: 90px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.card_div_succeed {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: red;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: white;
}

.card_div {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: #E8E8E8;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}

.card_icon {
  background-color: #EAEDF7;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  place-items: center;
  color: 19257D;

}

.truncate-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
