<template>
  <div class="feed-summary-container">
    <div class="feed-summary-inner" v-if="!show">
      <div class="left-side-menu">
        <project-side-menu ref="profitloss" :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" v-model="defaultActive" @select="select">
          <template slot="盈亏分析对比-1">
            <img src="@/assets/images/projectCostLedger/icon_cost_detail_7.svg" alt="">
            <div class="project-sub-menu-title-text">盈亏分析对比</div>
          </template>
        </project-side-menu>
      </div>
      <div class="profitloss">
        <div class="search">
          <el-date-picker size="small" style="width: 140px"
            v-model="expenseDate"
            type="month"
            placeholder="选择月" @change="changetime"
            value-format="yyyy-MM"
            >
          </el-date-picker>
        </div>
        <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
        <div class="table-item">
          <el-table
            element-loading-text="Loading"
            :data="tableData"
            row-key="id"
            v-horizontal-scroll="'hover'"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            border
            v-if="!tableLoading"
            highlight-current-row
            :max-height="tableHeight"
          >
            <el-table-column label="序号" width="60" align="left" type="index"></el-table-column>
            <el-table-column label="名称" width="300" prop="cbName">
              <template slot-scope="scope">{{scope.row.cbName || '--'}}</template>
            </el-table-column>
            <el-table-column label="招标控制价" align="center">
              <el-table-column label="招标控制价合价" width="180" prop="tenderSumPrice">
                <template slot-scope="scope">{{changevalue(scope.row.tenderSumPrice)}}</template>
              </el-table-column>
              <el-table-column label="不含税招标合价" width="180" prop="taxExcludeTenderSumPrice">
                <template slot-scope="scope">{{changevalue(scope.row.taxExcludeTenderSumPrice)}}</template>
              </el-table-column>
              <el-table-column label="含税招标合价" width="180" prop="taxIncludeTenderSumPrice"><template slot-scope="scope">{{changevalue(scope.row.taxIncludeTenderSumPrice)}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="投标报价" align="center">
              <el-table-column label="投标报价合价" width="180" prop="bidSumPrice"><template slot-scope="scope">{{changevalue(scope.row.bidSumPrice)}}</template></el-table-column>
              <el-table-column label="不含税投标合价" width="180" prop="taxExcludeBidSumPrice"><template slot-scope="scope">{{changevalue(scope.row.taxExcludeBidSumPrice)}}</template></el-table-column>
              <el-table-column label="含税投标合价" width="180" prop="taxIncludebBidSumPrice"><template slot-scope="scope">{{changevalue(scope.row.taxIncludebBidSumPrice)}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="成本汇总" align="center">
              <el-table-column label="不含税成本合价" width="180" prop="taxExclusiveTotal"><template slot-scope="scope">{{changevalue(scope.row.taxExclusiveTotal)}}</template></el-table-column>
              <el-table-column label="成本税金合价" width="180" prop="cbTaxesTotal"><template slot-scope="scope">{{changevalue(scope.row.cbTaxesTotal)}}</template></el-table-column>
              <el-table-column label="含税成本合价" width="180" prop="taxInclusiveTotal"><template slot-scope="scope">{{changevalue(scope.row.taxInclusiveTotal)}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="造价指标（元/㎡）" align="center">
              <el-table-column label="招标控制价" width="180" prop="costTender"><template slot-scope="scope">{{changevalue(scope.row.costTender )}}</template></el-table-column>
              <el-table-column label="投标报价" width="180" prop="costBid"><template slot-scope="scope">{{changevalue(scope.row.costBid )}}</template></el-table-column>
              <el-table-column label="成本" width="180" prop="costExpense"><template slot-scope="scope">{{changevalue(scope.row.costExpense)}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="含税成本占比" width="180" prop="taxInclusiveExpenseProportion"><template slot-scope="scope">{{changevalue(scope.row.taxInclusiveExpenseProportion)}}</template></el-table-column>
            <el-table-column label="控制盈亏对比情况" align="center">
              <el-table-column label="含税合价偏差" width="180" prop="tenderSumPriceDeviation"><template slot-scope="scope">{{changevalue(scope.row.tenderSumPriceDeviation )}}</template></el-table-column>
              <el-table-column label="含税盈亏率" width="180" prop="tenderProfitLossRatio"><template slot-scope="scope">{{changevalue(scope.row.tenderProfitLossRatio)}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="投标报价盈亏对比情况" align="center">
              <el-table-column label="含税合价偏差" width="180" prop="bidSumPriceDeviation"><template slot-scope="scope">{{changevalue(scope.row.bidSumPriceDeviation)}}</template></el-table-column>
              <el-table-column label="含税盈亏率" width="180" prop="bidProfitLossRatio"><template slot-scope="scope">{{changevalue(scope.row.bidProfitLossRatio )}}</template></el-table-column>
            </el-table-column>
            <el-table-column label="实际成本费用" align="center">
              <el-table-column label="本月费用（含税）" width="180" prop="taxInclusiveExpense"><template slot-scope="scope">{{changevalue(scope.row.taxInclusiveExpense)}}</template></el-table-column>
              <el-table-column label="本月费用（不含税）" width="180" prop="taxExclusiveExpense"><template slot-scope="scope">{{changevalue(scope.row.taxExclusiveExpense)}}</template></el-table-column>
              <el-table-column label="截至本月费用（含税）" width="180" prop="sumTaxInclusiveExpense"><template slot-scope="scope">{{changevalue(scope.row.sumTaxInclusiveExpense)}}</template></el-table-column>
              <el-table-column label="截至本月费用（不含税）" width="180" prop="sumTaxExclusiveExpense"><template slot-scope="scope">{{changevalue(scope.row.sumTaxExclusiveExpense)}}</template></el-table-column>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <div class="no-data">
      <div class="no-data-box" v-if="show">
        <img :src="noData" alt="暂未获取物料数据（每月20号获取）" />
        <span>暂未获取物料数据（每月20号获取）</span>
      </div>
    </div>
  </div>
</template>
<script>
  import ProjectSideMenu from '@/views/projectCostLedger/detail/components/ProjectSideMenu'
  import { getAnalysislist, getProfitLossMenuTreeApi } from '@/api/projectCostLedger'
  import DskSkeleton from "@/components/DskSkeleton";
  export default {
    name: "orifitloss",
    props: {
      // 项目ID
      projectId: {
        type: String,
        required: true,
        default: ""
      },
      // 详情信息
      projectDetailInfo: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      projectDetailInfo: {
        handler(newValue) {
          this.comProjectDetailInfo = newValue ? newValue : {};
          this.init(this.comProjectDetailInfo);
        },
        deep: true,
        immediate: true
      },
      projectId: {
        handler(newValue) {
          this.comProjectId = newValue;
        },
        immediate: true
      }
    },
    components: {
      ProjectSideMenu,
      DskSkeleton
    },
    data() {
      return {
        // 加载数据列表
        tableLoading: true,
        noData: require("@/assets/images/detail/noData.png"),
        pickerOptions: {
          // disabledDate(time) {
          //   let istrue = true
          //   let month = new Date().getMonth()+1
          //   let year = new Date().getFullYear()
          //   let times = (year+5)+'-'+ month + '-01 ' + '00:00:00'
          //   istrue =  new Date().getTime() < time.getTime() && time.getTime() < new Date(times).getTime()
          //   return !istrue
          // },
        },
        menuOptions: {
          nodeName: "cbName",
          nodeValue: "id",
        },
        comProjectDetailInfo: {},
        comProjectId: "",
        defaultActive: "",
        menuTreeList: [],
        id: 0,
        expenseDate:'',
        tableData:[],
        tableHeight: window.innerHeight - 355,
        show:false,
      };
    },
    //可访问data属性
    created() {
      let month = new Date().getMonth() +1
      let year = new Date().getFullYear()
      this.expenseDate = year + '-' + (month>= 9? month:'0'+ month)

    },
    //计算集
    computed: {

    },
    //方法集
    methods: {
      changevalue(value){
        let str = parseFloat(value)?value:'--'
        return str
      },
      select(menuPath){
        try {
          this.tableLoading = true;
          this.id = menuPath
          this.defaultActive = menuPath
          let param = {
            id:this.id,
            expenseDate:this.expenseDate
          }
          getAnalysislist(param).then(res=>{
            this.tableData = res.data
          })
        } catch (error) {

        } finally {
          this.tableLoading = false;
        }
      },
      async init(detail = {}) {
        try {
          const { projectId, cbStage,cbType} = detail;
          if (!projectId) return;
          await this.getFeedSummaryMenuTree({
            projectId,
            cbStage,
            cbType
          });
        } catch (error) {

        } finally {
          this.tableLoading = false;
        }
      },
      async getFeedSummaryMenuTree(params) {
        try {
          const result = await getProfitLossMenuTreeApi(params);
          if (result.code == 200) {
            if(result.data.length === 0){
              this.show=true;
            }
            let arr = {}
            arr.cbName = '盈亏分析对比'
            arr.id = 0
            arr.children = result.data
            const _tempArray = [arr];
            this.menuTreeList = _tempArray;
            await this.$nextTick()
            this.$refs['profitloss'].$refs['customElMenu'].open(_tempArray[0].id)
            this.defaultActive = result.data[0].id
            this.select(result.data[0].id)
          }
        } catch (error) {

        }
      },
      changetime(val){
        this.select(this.id)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .feed-summary-container {
    width: 100%;
    height: 100%;

    .feed-summary-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      .left-side-menu {
        width: 220px;
        min-width: 220px;
        height: 100%;
      }
      .profitloss{
        width: calc(100% - 220px);
        height: 100%;
        background: #fff;
        padding: 16px;
        .table-item{
          margin-top: 16px;
        }
        ::v-deep .el-scrollbar.el-table-horizontal-scrollbar {
          display: none !important;
        }
      }
    }
    .no-data {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      text-shadow: 0px 0px 10px rgba(0, 37, 106, 0.10000000149011612);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid #eeeeee;
      .no-data-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 64px;
          height: 79px;
          margin-bottom: 16px;
        }
      }
    }
  }
</style>
