<template>
  <div>
    <el-row
      class="bg-white"
      style="height: 80px"
      align="middle"
      justify="space-around"
    >
      <el-col
        :span="3"
        class="flex align-center justify-around"
      >
        <el-image
          :src="expense"
          style="width: 50px;height: 50px"
        />
        <el-text style="font-size: 20px;font-weight: 550;color: #409eff">项目收支</el-text>
      </el-col>
      <el-col :span="21">
        <el-row align="middle">
          <el-col :span="6">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectMessage.name }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目名称</el-text>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectAmount }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目金额</el-text>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ collectionAmount }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目收款</el-text>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ projectPaySum }}
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>项目支出</el-text>
            </el-row>
          </el-col>
          <el-col
            :span="3"
            :offset="2"
          >
            <el-button
              text
              icon="Menu"
              size="large"
              style="font-size: 20px"
              @click="openProjectList"
            >项目列表</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row
      class="mt-5"
      style="height: 750px"
    >
      <el-col
        :span="24"
        class="bg-white"
        style="padding-left: 20px"
      >
        <el-tabs
          v-model="listSort"
          class="demo-tabs"
          @tab-click="changeSort"
        >
          <el-tab-pane
            label="实施工时"
            :name="1"
          >
            <Hour ref="hourOut" />
          </el-tab-pane>
          <el-tab-pane
            label="项目费用"
            :name="2"
          >
            <project-cost
              ref="costOut"
              @refresh="refreshSummary"
            />
          </el-tab-pane>
          <el-tab-pane
            label="项目收款"
            :name="3"
          >
            <payment ref="paymentOut" />
          </el-tab-pane>
          <el-tab-pane
            label="项目费用汇总"
            :name="4"
          >
            <CostSum ref="sumOut" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-drawer
      v-model="listDisplay"
      title="项目列表"
    >
      <div
        style="height: 680px"
        class="bg-white"
      >
        <el-form @submit.prevent>
          <el-row style="height: 45px">
            <el-col
              :span="22"
              :offset="1"
            >
              <el-form-item>
                <el-input
                  v-model="condition.name"
                  :suffix-icon="Search"
                  placeholder="请输入项目名称"
                  size="large"
                  clearable
                  @keyup.enter="nameSearch"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="height: 500px">
            <el-row
              v-for="item in listData"
              :key="item.ID"
              style="height: 70px;margin-top: 12px"
              align="middle"
            >
              <el-col
                :span="16"
                :offset="1"
              >
                <el-row style="height: 40px">
                  <el-text
                    style="font-size: 18px"
                    :line-clamp="1"
                    tag="b"
                  >{{ item.name }}</el-text>
                </el-row>
                <el-row style="height: 30px">
                  <el-text
                    :line-clamp="1"
                    style="font-size: 12px;"
                    type="info"
                  >
                    负责人：{{ item.secondPrincipalName }}
                  </el-text>
                </el-row>
              </el-col>
              <el-col
                :span="6"
                class="flex justify-end"
              >
                <el-button
                  :type="buttonType(item.state)"
                  round
                  size="large"
                  @click="incomeExpenses(item.code)"
                >收支信息</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <el-row>
          <el-col
            :span="22"
            :offset="1"
            class="flex justify-end align-center"
          >
            <el-pagination
              v-show="projectTotal > 6"
              v-model:current-page="condition.pageInfo.page"
              background
              layout="prev, pager, next"
              :total="projectTotal"
              :page-size="6"
              @change="changePage"
            />
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { getProjectList, getProjectMessage, queryProjectExpense } from '@/api/project'
import Hour from './components/hour.vue'
import CostSum from './components/costSum.vue'
// import Reimburse from './components/reimburse.vue'
// 引入pinia
import { collectionOperate } from '@/pinia/collection/Collection'
import { codeOperate } from '@/pinia/code/code'
import { reimburseOperate } from '@/pinia/reimbursement/Reimbursement'
import { hourOperate } from '@/pinia/hour/Hour'
import { payData } from '@/pinia/cost/cost'
// eslint-disable-next-line no-unused-vars
import Payment from '@/view/finance/financeAnalysis/components/payment.vue'
import expense from '@/assets/expenses.png'
import { queryProjectMonthFee } from '@/api/cost'
import ProjectCost from './components/projectCost.vue'
defineOptions({
  name: 'FinanceAnalysis'
})
// 项目列表
const listDisplay = ref(false)
const openProjectList = () => {
  listDisplay.value = true
}
const pay = payData()
// 数据
const payment = collectionOperate()
const symbol = codeOperate()
const submit = reimburseOperate()
const hour = hourOperate()
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 6
  },
  name: '',
  time: '',
  state: 0
})
const listData = reactive([])
const projectTotal = ref(0)
const projectMessage = reactive({})
const listSort = ref(1)
const projectSum = ref(0)
const paySum = ref(0)
// 计算属性
const buttonType = computed(() => (state) => {
  const obj = {
    1: 'info',
    2: 'warning',
    3: 'primary',
    4: 'success',
    5: 'danger',
  }
  return obj[state]
})
const projectAmount = computed(() => {
  const price = ref(parseInt(projectMessage.projectPrice))
  if (price.value < 10000) {
    return price.value + '元'
  } else {
    const tenThousand = (price.value / 10000).toFixed(4)
    return parseFloat(tenThousand) + '万元'
  }
})
const projectPaySum = computed(() => {
  const price = ref(parseInt(paySum.value))
  if (price.value < 10000) {
    return price.value + '元'
  } else {
    const tenThousand = (price.value / 10000).toFixed(4)
    return parseFloat(tenThousand) + '万元'
  }
})
const collectionAmount = computed(() => {
  const price = ref(projectSum.value)
  // const price = ref(4892703)
  if (price.value < 10000) {
    return price.value + '元'
  } else {
    const tenThousand = (price.value / 10000).toFixed(4)
    return parseFloat(tenThousand) + '万元'
  }
})
// 方法
onMounted(() => {
  projectList(condition)
})
const projectList = (condition) => {
  listData.length = 0
  getProjectList(condition).then(res => {
    if (res.code === 0) {
      const list = res.data.list
      projectTotal.value = res.data.total
      listData.push(...list)
      console.log(listData)
      symbol.changeCode(list[0].code)
      getMainMessage(list[0].code)
    }
  })
}

const nameSearch = () => {
  condition.pageInfo.page = 1
  projectList(condition)
}
const changePage = (page) => {
  condition.pageInfo.page = page
  listData.length = 0
  getProjectList(condition).then(res => {
    if (res.code === 0) {
      const list = res.data.list
      projectTotal.value = res.data.total
      listData.push(...list)
    }
  })
}

const changeSort = () => {}

const incomeExpenses = (code) => {
  symbol.changeCode(code)
  getMainMessage(code)
  listDisplay.value = false
}

const paymentOut = ref()
// const reimburseOut = ref()
const hourOut = ref()

const sumOut = ref()

const costOut = ref()
const getMainMessage = (code) => {
  queryProjectExpense(code).then(res => {
    if (res.code === 0) {
      const summaryData = res.data
      const sumList = summaryData.collection
      let sum = 0
      sumList.forEach(item => {
        sum += parseFloat(item.collectionPrice)
      })
      projectSum.value = sum
      // 收款
      payment.changePaymentList(summaryData.collection)
      payment.changePaymentTotal(summaryData.collectionTotal)
      submit.changeReimburseList(summaryData.reimbursement)
      submit.changeReimburseTotal(summaryData.reimbursementTotal)
      hour.getTimeList({
        pageInfo: {
          page: 1,
          pageSize: 8
        },
        code: code,
        time: '',
        yearTime: '',
        people: 0
      })
      paymentOut.value.outsideChangePage()
      hourOut.value.outsideChangePage()
      pay.changeCostList(summaryData.projectFee)
      pay.changeCostTotal(summaryData.projectFeeTotal)
      sumOut.value.querySum()
      costOut.value.outsideChangePage()
    }
  })
  getProjectMessage(code).then(res => {
    if (res.code === 0) {
      Object.assign(projectMessage, res.data)
    }
  })
  queryProjectMonthFee('', '', code).then(res => {
    if (res.code === 0) {
      const payList = res.data
      let sum = 0
      payList.forEach(item => {
        sum += item.totalExpenditure
      })
      paySum.value = sum
    }
  })
}

// 刷新项目费用汇总
const refreshSummary = () => {
  sumOut.value.querySum()
}

</script>

<style lang="scss" scoped>
  .analysisTitle{
    font-size: 20px;
    font-weight: 520;
  }
  .iconStyle{
    width: 70px;
    height: 80px;
  }
  .countIcon{
    width: 28px;
    height: 28px;
  }
</style>
