<template>
  <div v-loading="loading" class="budgeting">
    <div class="tableBody">
      <div class="titBox">
        <div class="ysxxBox">
          <h4>预算信息</h4>
          <span v-show="!isAudit" style="color:#999999">（说明：<span style="color:#E13737;font-size: 20px;">“*”</span>需提交明细附件）</span>
        </div>
        <div>单位：<span style="color: #684EFF;">元</span></div>
      </div>
      <div class="table">
        <div class="myTh">
          <div style="width: 10%;" />
          <div style="width: 20%;">项目</div>
          <div style="width: 5%;">序号</div>
          <div style="width: 15%;">子项</div>
          <div style="width: 15%;">预算金额</div>
          <div style="width: 15%;">附 件</div>
          <div style="width: 10%;">占比销售</div>
          <div style="width: 10%;">占比支出</div>
        </div>
        <div style="position: relative;">
          <div
            style="height: 100%;width:10%;text-align: center;color:#666666;"
            class="firstColum"
          >
            成本
          </div>
          <div
            v-for="(item, index) in cbList"
            :key="index"
            class="feiyong"
          >
            <div style="width: 20%;;color:#666666 ;" class="myTd">
              {{ item.budgetType }}
            </div>
            <div style="width: 5%;;color:#666666 ;" class="myTd">
              {{ item.sortNo }}
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <span
                v-show="item.needDetail === '0'"
                style="color: red;margin-right: 0.2vw;"
              >*</span>
              {{ item.budgetChildType }}
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <input
                v-model="item.budgetAmount"
                placeholder="请填写金额整数"
                class="ysje"
                @change="handleNumChange"
              >
              <el-popover
                v-if="checkPop(item)"
                placement="top-start"
                title=""
                width="200"
                trigger="hover"
              >
                <div slot="reference">
                  <i class="el-icon-warning" style="color: red" />
                </div>
                <span style="color: red">{{ item.content }}</span>
              </el-popover>
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <!-- 上传附件 -->
              <el-upload
                class="upload-demo"
                :action="$constant.BASE_URI + '/FileController/upload'"
                :http-request="myRequest"
                :limit="1"
                :file-list="item.file"
                :on-remove="onRemove"
              >
                <img
                  src="../../../projectDashboard/img/jia.svg"
                  alt=""
                  @click="getFileItem(item, index)"
                >
                <div slot="file" slot-scope="{file}">
                  <a :href="file.url">{{ file.name }}</a>
                  <span v-if="!isAudit" class="el-upload-list__item-actions">
                    <i class="el-icon-delete" @click="handlePictureRemove(file,item.file)" />
                  </span>
                </div>
              </el-upload>
              <span
                v-if="item.file.length === 0 && item.needDetail === '0'"
                style="color: #E13737;margin-left: 0.3vw;"
              >请上传明细附件</span>
            </div>
            <div style="width: 10%;;color:#666666 ;" class="myTd">
              {{ item.saleRate ? item.saleRate + '%' : '' }}
            </div>
            <div style="width: 10%;;color:#666666 ;" class="myTd">
              {{ item.costRate ? item.costRate + '%' : '' }}
            </div>
          </div>
        </div>
        <div class="firstTr feiyong">
          <div style="width: 10%;color: #E09F46;">
            成本小计
          </div>
          <div style="width: 20%;" />
          <div style="width: 5%;" class="" />
          <div style="width: 15%;" class=" " />
          <div
            style="width: 15%;color: #E09F46;padding-left: 0.5vw;"
            class="sjfsys"
          >
            <div>
              {{ cbhj }}
            </div>
          </div>
          <div style="width: 15%;" />
          <div style="width: 10%;" class="sjfsys">
            <div>
              {{ cbhjSaleRate ? cbhjSaleRate + '%' : '' }}
            </div>
          </div>
          <div style="width: 10%;" class="sjfsys">
            <div>
              {{ cbhjCostRate ? cbhjCostRate + '%' : '' }}
            </div>
          </div>
        </div>

        <div style="position: relative;">
          <div
            style="height: 100%;width:10%;text-align: center;color:#666666;"
            class="firstColum"
          >
            费用
          </div>
          <div
            v-for="(item, index) in fyList"
            :key="index"
            class="feiyong"
          >
            <!-- <div
                        style="width: 10%;text-align: center;color:#666666;"
                        class="firstColum"
                    ></div> -->
            <div style="width: 20%;;color:#666666 ;" class="myTd">
              {{ item.budgetType }}
            </div>
            <div style="width: 5%;;color:#666666 ;" class="myTd">
              {{ item.sortNo }}
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <span
                v-show="item.needDetail === '0'"
                style="color: red;margin-right: 0.2vw;"
              >*</span>
              {{ item.budgetChildType }}
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <input
                v-model="item.budgetAmount"
                placeholder="请填写金额整数"
                class="ysje"
                @change="handleNumChange"
              >
              <el-popover
                v-if="checkPop(item)"
                placement="top-start"
                title=""
                width="200"
                trigger="hover"
              >
                <div slot="reference">
                  <i class="el-icon-warning" style="color: red" />
                </div>
                <span style="color: red">{{ item.content }}</span>
              </el-popover>
            </div>
            <div style="width: 15%;;color:#666666 ;" class="myTd">
              <!-- 上传附件 -->
              <el-upload
                class="upload-demo"
                :action="$constant.BASE_URI + '/FileController/upload'"
                :http-request="fyRequest"
                :limit="1"
                :file-list="item.file"
                :on-remove="fyRemove"
              >
                <img
                  src="../../../projectDashboard/img/jia.svg"
                  alt=""
                  @click="getfyFileItem(item, index)"
                >
                <div slot="file" slot-scope="{file}">
                  <a :href="file.url">{{ file.name }}</a>
                  <span v-if="!isAudit" class="el-upload-list__item-actions">
                    <i class="el-icon-delete" @click="handlePictureRemoveFy(file,item.file)" />
                  </span>
                </div>
              </el-upload>
              <span
                v-show="item.file.length === 0 && item.needDetail === '0'"
                style="color: #E13737;margin-left: 0.3vw;"
              >请上传明细附件</span>
            </div>
            <div style="width: 10%;;color:#666666 ;" class="myTd">
              {{ item.saleRate ? item.saleRate + '%' : '' }}
            </div>
            <div style="width: 10%;;color:#666666 ;" class="myTd">
              {{ item.costRate ? item.costRate + '%' : '' }}
            </div>
          </div>
        </div>
        <div class="firstTr feiyong">
          <div style="width: 10%;color: #E09F46;">
            费用小计
          </div>
          <div style="width: 20%;" />
          <div style="width: 5%;" class="" />
          <div style="width: 15%;" class=" " />
          <div
            style="width: 15%;color: #E09F46;padding-left: 0.5vw;"
            class="sjfsys"
          >
            <div>
              {{ fyhj }}
            </div>
          </div>
          <div style="width: 15%;" />
          <div style="width: 10%;" class="sjfsys">
            <div>
              {{ fyhjSaleRate ? fyhjSaleRate + '%' : '' }}
            </div>
          </div>
          <div style="width: 10%;" class="sjfsys">
            <div>
              {{ fyhjCostRate ? fyhjCostRate + '%' : '' }}
            </div>
          </div>
        </div>
        <div class="firstTr feiyong">
          <div style="width: 10%;color: #E09F46;">
            项目支出项总计
          </div>
          <div style="width: 20%;" />
          <div style="width: 5%;" class="" />
          <div style="width: 15%;" class=" " />
          <div
            style="width: 15%;color: #E09F46;padding-left: 0.5vw;"
            class="sjfsys"
          >
            <div>
              {{ costAll }}
            </div>
          </div>
          <!--          <div style="width: 15%;" />-->
          <!--          <div style="width: 10%;" class="sjfsys">-->
          <!--            <div>-->
          <!--              {{ profit }}-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div style="width: 10%;" class="sjfsys">-->
          <!--            <div>-->
          <!--              {{ profitRate }}-->
          <!--            </div>-->
          <!--          </div>-->
        </div>

        <div class="lirunBox">
          <div class="lirun">
            <div
              style="width: 10%;color: #684EFF;padding-left: 2.5%;font-weight: 600"
            >
              项目利润
            </div>
            <div style="width: 20%;" />
            <div style="width: 5%;" />
            <div style="width: 15%;" />
            <div
              style="width: 15%;color: #684EFF;font-size: 0.6vw;font-weight: 600;padding-left: 0.5vw;"
            >
              {{ profit }}
            </div>
            <div style="width: 15%;" />
            <div style="width: 10%;" />
            <div style="width: 10%;" />
          </div>
          <div class="lurunLine" />
          <div class="lirun">
            <div
              style="width: 10%;color: #684EFF;padding-left: 2.5%;font-weight: 600"
            >
              利润率
            </div>
            <div style="width: 20%;" />
            <div style="width: 5%;" />
            <div style="width: 15%;" />
            <div
              style="width: 15%;color: #684EFF;font-size: 0.6vw;font-weight: 600;padding-left: 0.5vw;"
            >
              {{ profitRate ? profitRate + '%' : '' }}
            </div>
            <div style="width: 15%;" />
            <div style="width: 10%;" />
            <div style="width: 10%;" />
          </div>
        </div>
      </div>
    </div>
<!--    <div v-show="!isAudit" class="btnBox">-->
<!--      <div class="commit" @click="toClose">关 闭</div>-->
<!--      <div v-if="(proData.realValidStatus === '0' || proData.realValidStatus === '3') && !isDetail" v-loading="loading" class="commit" @click="toSave('0')">暂 存</div>-->
<!--      <div v-if="(proData.realValidStatus === '0' || proData.realValidStatus === '3') && !isDetail" v-loading="loading" class="submit" @click="toSave('1')">保 存</div>-->
<!--      <div v-if="proData.realValidStatus === '2' && !isDetail" class="submit" @click="toApplyChange()">变更申请</div>-->
<!--    </div>-->
  </div>
</template>
<script>
import Base from '@/views/base/base.vue'
import axios from 'axios'
import qs from 'qs'
import { upload } from '@/static/utils/channel'
import Constant from '@/static/utils/constant'
import BaseData from '@/views/base/baseData.vue'
import { data } from 'autoprefixer'
export default {
    name: 'Budgeting',
    mixins: [Base, BaseData],
    props: {
        proId: {
            type: String,
            default: ''
        },
        isDetail: {
            type: Boolean,
            default: false
        },
        isAudit: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['PRO_TYPE'],
            proData: {},
            loading: false,
            fyIndex: '',
            fileList: [],
            cbIndex: '',
            fyList: [],
            cbList: [],
            cbhj: 0,
            cbhjSaleRate: 0,
            cbhjCostRate: 0,
            fyhj: 0,
            fyhjSaleRate: 0,
            fyhjCostRate: 0,
            costAll: 0,
            profit: 0,
            profitRate: 0,
            hasNewTemplate: false,
            dialogApplyVisible: false,
            applyTitle: '',
            referenceId: '',
            auditType: '',
            formType: '',
            hasF:false,
        }
    },
    methods: {
        initData(hasNewTemplate) {
            this.hasNewTemplate = hasNewTemplate || false
            this.loading = true
            this.initProType().then(() => {
                this.getProData()
            })
        },
        getProData() {
            const _this = this
            this.proMainRequest('getDashboardByProId', { proId: this.proId }).then(res => {
                this.proData = res.data || {}
                this.proData.proTypeName = _this.ProTypeMap[this.proData.proType]
                this.getBudgetData()
            })
        },
        getBudgetData() {
            if (this.isAudit) {
                this.getRecord()
            } else {
                this.baseRequest('checkRecord', { proId: this.proId }).then(res => {
                    if (res.data) {
                        // 有记录 取记录
                        this.getRecord()
                    } else {
                        // 没有记录 取模板
                        this.getTemplate()
                    }
                })
            }
        },
        getRecord() {
            const _this = this
            if (_this.hasNewTemplate) {
                const postData1 = {
                    proType: this.proData.proType,
                    groupId: this.$common.currUser().groupId
                }
                const postData = {
                    proId: this.proId,
                    budgetType: '成本类'
                }
                const postData2 = {
                    proId: this.proId,
                    budgetType: '费用类'
                }
                Promise.all([
                    axios({
                        headers: {
                            'MVVM-Key': String(new Date().getTime()),
                            xx: 'anything'
                        },
                        url: _this.$constant.BASE_URI + '/BudgetMakingController/getRecord',
                        method: 'post',
                        data: qs.stringify(postData),
                        withCredentials: true
                    }).then(res => {
                        return res
                    }),
                    axios({
                        headers: {
                            'MVVM-Key': String(new Date().getTime()),
                            xx: 'anything'
                        },
                        url: _this.$constant.BASE_URI + '/BudgetMakingController/getRecord',
                        method: 'post',
                        data: qs.stringify(postData2),
                        withCredentials: true
                    }).then(res => {
                        return res
                    }),
                    axios({
                        headers: {
                            'MVVM-Key': String(new Date().getTime()),
                            xx: 'anything'
                        },
                        url: _this.$constant.BASE_URI + '/BudgetTemplateController/getByProTypeEffect',
                        method: 'post',
                        data: qs.stringify(postData1),
                        withCredentials: true
                    }).then(res => {
                        return res
                    })
                ]).then(array => {
                    const templateData1 = array[2].data.record1 || []
                    const templateData2 = array[2].data.record2 || []
                    const templateId = array[2].data.id
                    const data1 = array[0].data || []
                    const data2 = array[1].data || []
                    templateData1.forEach(item => {
                        item.file = []
                        item.budgetFile = ''
                        item.id = ''
                        item.templateId = templateId
                        const obj = data1.find(x => x.budgetChildType === item.budgetChildType)
                        if (obj) {
                            item.id = obj.id
                            item.budgetAmount = obj.budgetAmount
                            item.budgetFile = obj.budgetFile
                            const file = []
                            if (obj.budgetFile) {
                                file.push({
                                    id: obj.budgetFile,
                                    name: obj.budgetFileName,
                                    url: _this.$constant.BASE_URI + '/FileController/download/' + obj.budgetFile
                                })
                            }
                            item.file = file
                        }
                    })
                    templateData2.forEach(item => {
                        item.file = []
                        item.budgetFile = ''
                        item.id = ''
                        item.templateId = templateId
                        const obj = data2.find(x => x.budgetChildType === item.budgetChildType)
                        if (obj) {
                            item.id = obj.id
                            item.budgetAmount = obj.budgetAmount
                            item.budgetFile = obj.budgetFile
                            const file = []
                            if (obj.budgetFile) {
                                file.push({
                                    id: obj.budgetFile,
                                    name: obj.budgetFileName,
                                    url: _this.$constant.BASE_URI + '/FileController/download/' + obj.budgetFile
                                })
                            }
                            item.file = file
                        }
                    })
                    this.handleTableData(templateData1, templateData2)
                })
            } else {
                const postData = {
                    proId: this.proId,
                    budgetType: '成本类'
                }
                const postData2 = {
                    proId: this.proId,
                    budgetType: '费用类'
                }
                Promise.all([
                    axios({
                        headers: {
                            'MVVM-Key': String(new Date().getTime()),
                            xx: 'anything'
                        },
                        url: _this.$constant.BASE_URI + '/BudgetMakingController/getRecord',
                        method: 'post',
                        data: qs.stringify(postData),
                        withCredentials: true
                    }).then(res => {
                        return res
                    }),
                    axios({
                        headers: {
                            'MVVM-Key': String(new Date().getTime()),
                            xx: 'anything'
                        },
                        url: _this.$constant.BASE_URI + '/BudgetMakingController/getRecord',
                        method: 'post',
                        data: qs.stringify(postData2),
                        withCredentials: true
                    }).then(res => {
                        return res
                    })
                ]).then(array => {
                    const data1 = array[0].data || []
                    const data2 = array[1].data || []
                    data1.forEach(item => {
                        const file = []
                        if (item.budgetFile) {
                            file.push({
                                id: item.budgetFile,
                                name: item.budgetFileName,
                                url: _this.$constant.BASE_URI + '/FileController/download/' + item.budgetFile
                            })
                        }
                        item.file = file
                    })
                    data2.forEach(item => {
                        const file = []
                        if (item.budgetFile) {
                            file.push({
                                id: item.budgetFile,
                                name: item.budgetFileName,
                                url: _this.$constant.BASE_URI + '/FileController/download/' + item.budgetFile
                            })
                        }
                        item.file = file
                    })
                    this.handleTableData(data1, data2)
                })
            }
        },
        getTemplate() {
            const postData = {
                proType: this.proData.proType,
                groupId: this.$common.currUser().groupId
            }
            this.budgetTemplateRequest('getByProTypeEffect', postData).then(res => {
                if (res.data) {
                    const data1 = res.data.record1 || []
                    const data2 = res.data.record2 || []
                    const templateId = res.data.id
                    data1.forEach(item => {
                        item.file = []
                        item.budgetFile = ''
                        item.id = ''
                        item.templateId = templateId
                    })
                    data2.forEach(item => {
                        item.file = []
                        item.budgetFile = ''
                        item.id = ''
                        item.templateId = templateId
                    })
                    this.handleTableData(data1, data2)
                } else {
                    this.loading = false
                }
            })
        },
        handleTableData(data1, data2) {
            this.cbList = []
            this.fyList = []
            this.costAll = 0
            this.profit = 0
            this.profitRate = 0
            let pa1 = 0;
            let pa2 = 0;
            // 销售金额
            const saleAmount = this.proData.signStatus === '3' ? parseInt(this.proData.totalAmount || 0) : parseInt(this.proData.preSales || 0)
            // 成本小计
            let costTotal = 0
            data1.forEach(item => {
                costTotal += parseInt(item.budgetAmount || 0)
            })
            // 费用小计
            let costTotal2 = 0
            data2.forEach(item => {
                costTotal2 += parseInt(item.budgetAmount || 0)
            })
            // 项目支出项总计
            const costAll = costTotal + costTotal2
            // 项目利润
            const profit = saleAmount - costAll
            // 利润率
            const profitRate = ((profit / saleAmount) * 100).toFixed(2)
            // 成本列表
            data1.forEach(item => {
                if (item.budgetAmount && saleAmount) {
                    item.saleRate = ((parseInt(item.budgetAmount || 0) / saleAmount) * 100).toFixed(2)
                }
                if (item.budgetAmount && costAll) {
                    item.costRate = ((parseInt(item.budgetAmount || 0) / costAll) * 100).toFixed(2)
                }
                if(item.budgetAmount){
                    pa1 = pa1+1
                }
                this.cbList.push(item)
            })
            // 成本小计
            this.cbhj = costTotal
            this.cbhjSaleRate = saleAmount ? ((costTotal / saleAmount) * 100).toFixed(2) : 0
            this.cbhjCostRate = costAll ? ((costTotal / costAll) * 100).toFixed(2) : 0
            // 费用列表
            data2.forEach(item => {
                if(item.budgetAmount){
                    pa2= pa2+1
                }
                if (item.budgetAmount && saleAmount) {
                    item.saleRate = ((parseInt(item.budgetAmount || 0) / saleAmount) * 100).toFixed(2)
                }
                if (item.budgetAmount && costAll) {
                    item.costRate = ((parseInt(item.budgetAmount || 0) / costAll) * 100).toFixed(2)
                }
                this.fyList.push(item)
            })
            // 费用小计
            this.fyhj = costTotal2
            this.fyhjSaleRate = saleAmount ? ((costTotal2 / saleAmount) * 100).toFixed(2) : 0
            this.fyhjCostRate = costAll ? ((costTotal2 / costAll) * 100).toFixed(2) : 0
            this.costAll = costAll
            this.profit = profit
            this.profitRate = profitRate
            this.loading = false
            if(data1.length===pa1&&data2.length===pa2){
                this.hasF = false
            }else{
                this.hasF = true
            }
            this.$emit('handleInfo',this.hasF)
        },
        handleNumChange() {
            this.handleTableData(this.cbList, this.fyList)
        },
        getFileItem(item, index) {
            this.cbIndex = index
        },
        getfyFileItem(item, index) {
            this.fyIndex = index
        },
        onRemove(file, fileList) {
            const index = this.cbList.findIndex(x => x.budgetFile === file.id)
            this.cbList[index].file = []
        },
        handlePictureRemove: function(file, fileList) {
            // console.log(file, fileList)
            const index2 = fileList.indexOf(file)
            const index = this.cbList.findIndex(x => x.budgetFile === file.id)
            fileList.splice(index, 1)
            this.cbList[index].budgetFile = ''
            this.cbList[index].file = []
        },
        handlePictureRemoveFy: function(file, fileList) {
            // console.log(file, fileList)
            const index = this.fyList.findIndex(x => x.budgetFile === file.id)
            fileList.splice(index, 1)
            this.fyList[index].budgetFile = ''
            this.fyList[index].file = []
        },
        myRequest(param) {
            this.loading = true
            upload(param, true).then((res) => {
                if (res.key === 200) {
                    this.cbList[this.cbIndex].budgetFile = res.data
                    this.cbList[this.cbIndex].file.push({ id: res.data, name: res.name, url: res.url })
                } else {
                    this.$message.error('文件上传失败')
                }
                this.loading = false
            })
        },
        fyRemove(file, fileList) {
            const index = this.fyList.findIndex(x => x.budgetFile === file.id)
            this.fyList[index].file = []
        },
        fyRequest(param) {
            this.loading = true
            upload(param, true).then((res) => {
                if (res.key === 200) {
                    this.fyList[this.fyIndex].budgetFile = res.data
                    this.fyList[this.fyIndex].file.push({ id: res.data, name: res.name, url: res.url })
                } else {
                    this.$message.error('文件上传失败')
                }
                this.loading = false
            })
        },
        toApplyChange() {
            const _this = this
            const postData = {
                proId: _this.proId
            }
            _this.loading = true
            _this.baseRequest('checkAudit', postData).then(res => {
                _this.loading = false
                if (res.data.key === 200) {
                    this.referenceId = _this.proId
                    this.auditType = Constant.AUDIT_TYPE.PRO_BUDGET_CHANGE
                    this.applyTitle = '预算变更申请'
                    this.formType = 'BudgetChange'
                    this.dialogApplyVisible = true
                } else if (res.data.key === 503) {
                    _this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                }
            })
        },
        toSave(type) {
            const _this = this
            const list = []
            list.push(..._this.cbList)
            list.push(..._this.fyList)
            if (type !== '0') {
                const obj = list.find(x => x.needDetail === '0' && !x.budgetFile)
                if (obj) {
                    _this.$message({
                        type: 'warning',
                        message: '带*号子项需上传附件'
                    })
                    return
                }
            }
            if (this.loading) return
            this.loading = true
            setTimeout(() => {
                this.loading = false
            }, this.$constant.DATE_PATTERN.OUT_TIME)
            const postData = {
                list: JSON.stringify(list),
                type: type,
                userId: _this.$common.currUser().id,
                groupId: _this.$common.currUser().groupId,
                proId: _this.proId
            }
            _this.loading = true
            _this.baseRequest('addOrEdit', postData).then(res => {
                _this.loading = false
                if (res.data.key === 200) {

                    // _this.$message({
                    //     type: 'success',
                    //     message: '提交成功'
                    // })
                    // _this.$emit('closeDialog')
                } else if (res.data.key === 503) {
                    _this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                }
            })
        },
        toClose() {
            this.$emit('closeDialog')
        },
        handleApplyClose() {
            this.dialogApplyVisible = false
        },
        handleApplyCommit() {
            this.dialogApplyVisible = false
            this.toSave('2')
        },
        checkPop(item) {
            console.log(item)
            if (item.upperLimit && item.upperLimitValue) {
                console.log(item.budgetAmount)
                console.log(item.upperLimitValue)
                console.log(item.budgetAmount > item.upperLimitValue)
                if (item.upperLimit === '定额' && item.budgetAmount > item.upperLimitValue) {
                    item.content = '该项预算已超出预算设定的定额' + item.upperLimitValue
                    return true
                }
                if (item.upperLimit === '占比销售额') {
                    const all = this.proData.signStatus === '3' ? this.proData.totalAmount : this.proData.preSales
                    if (((item.budgetAmount / all) * 100).toFixed(2) > item.upperLimitValue) {
                        item.content = '该项预算已超出预算设定的占比销售额' + item.upperLimitValue + '%'
                        return true
                    }
                }
                return false
            } else {
                return false
            }
        },
        proMainRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProMainDashboardController', opUrl, postData, 'project')
        },
        budgetTemplateRequest(opUrl, postData) {
            return this.$channel.globleRequest('BudgetTemplateController', opUrl, postData, 'project')
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('BudgetMakingController', opUrl, postData, 'project')
        }
    }
}
</script>
<style lang="scss">
.budgeting {
    .tit {
        margin: 0 1vw;
        padding-bottom: 1vw;
        color: #51449d;
        font-size: 0.8vw;
        border-bottom: 1.5px solid #cccccc;
    }
    .ObjBox {
        margin: 0 1vw;
        .dashboard {
            background: #f5f5f5;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25vw;
            padding: 1.25vw 0.83vw;
            color: #999999;
        }
    }
    .tableBody {
        margin: 0 1vw;
        .titBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .ysxxBox {
                display: flex;
                align-items: center;
            }
        }
        .table {
            width: 100%;
            // margin: 1vw 4%;
            // min-height: 90%;
            background: white;
            border-radius: 2px;
            padding-bottom: 1vw;
            width: 98%;
            margin: 0 1%;
            font-size: 12px;
            .myTh {
                width: 100%;
                background: #f5f5f5;
                padding: 0.5vw 0;
                color: #999999;
                border-bottom: 1px solid rgba(153, 153, 153, 0.3);
                display: flex;
                div {
                    text-align: left;
                }
            }
            .firstTr {
                width: 100%;
                padding: 0.5vw 0;
                display: flex;
                justify-items: center;
                align-items: center;
                text-align: center;
                border-bottom: 1.5px solid rgba(153, 153, 153, 0.3);
            }
            .firstColum {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .feiyong {
                width: 100%;
                // padding: 0.5vw 0;
                display: flex;
                .yszb {
                    display: flex;
                    color: rgba(153, 153, 153, 1);
                    div {
                        width: 50%;
                        text-align: left;
                    }
                }
                .sjfsys {
                    display: flex;
                    justify-content: flex-start;
                    color: #e09f46;
                }
                .myTd {
                    position: relative;
                    left: 10%;
                    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
                    padding: 0.5vw 0;
                    display: flex;
                    align-items: center;
                }
                .sjfsHjZb {
                    text-align: center !important;
                }
                .ysje {
                    border: 1px solid #cccccc;
                    width: 90%;
                    border-radius: 2px;
                    padding: 5px;
                    font-size: 12px;
                    &::-webkit-input-placeholder {
                        font-size: 12px;
                        color: #cccccc;
                    }
                }
            }
            .chengben {
                border: none !important;
            }
            .lirunBox {
                background: #f4f2ff;
                padding: 0.5vw;
                .lirun {
                    width: 100%;
                    margin: 0.5vw 0;
                    display: flex;
                }
                .lurunLine {
                    width: 95%;
                    margin-left: 2.5%;
                    height: 1.7px;
                    background: rgba(142, 129, 213, 0.7);
                }
            }
        }
    }
    .btnBox {
        display: flex;
        position: absolute;
        bottom: -2vw;
        right: 0;
        .commit {
            background: #e3defc;
            color: #684eff;
            border-radius: 0.2vw;
            padding: 0.4vw 1vw;
            margin-right: 0.5vw;
            cursor: pointer;
        }
        .submit {
            background: #684eff;
            color: white;
            border: 1px solid #8e81d5;
            border-radius: 0.2vw;
            padding: 0.4vw 1vw;
            cursor: pointer;
        }
        .commit:hover {
            background: #eae9ef;
            color: #503dbc;
        }
        .submit:hover {
            background: #7a64f8;
            color: white;
            border: 1px solid #7f75b6;
        }
    }
    // .upload-demo {
    //     .el-upload {
    //         display: none !important;
    //     }
    // }
}
</style>
