<template>
  <div class="container" id="index-app">
    <div class="center-container">
      <!-- 下拉弹出框，并设置两个按钮，第一个按钮作为弹出按钮 -->
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            <div>
              <el-button style="margin-left: 20px" size="small" type="primary" >财务费用明细</el-button>
              <el-button style="margin-left: 50px" size="small" type="primary" >恢复默认</el-button>
            </div>
          </template>
          <div class="form-box gray-background" style="margin-top: 5px; padding-top: 5px">
            <el-form label-width="150px" :model="formLabelAlign" :rules="formRules">
              <el-row>
                <el-col :span="6" >
                  <el-form-item label="办公费" title="办公费" prop="officeExpense">
                    <el-input v-model="formLabelAlign.officeExpense" placeholder="办公费" >
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="差旅费" title="差旅费" prop="travelExpense">
                    <el-input v-model="formLabelAlign.travelExpense" placeholder="差旅费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="工资及福利保险" title="工资及福利保险" prop="salaryInsur">
                    <el-input v-model="formLabelAlign.salaryInsur" placeholder="工资及福利保险">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="其他管理费" title="其他管理费" prop="otherMgmtExpense">
                    <el-input v-model="formLabelAlign.otherMgmtExpense" placeholder="其他管理费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="汽车费用" title="汽车费用" prop="carExpense">
                    <el-input v-model="formLabelAlign.carExpense" placeholder="汽车费用">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col >
                <el-col :span="6">
                  <el-form-item label="管理-业务招待费" title="管理-业务招待费" prop="mgmtBizEntFee">
                    <el-input v-model="formLabelAlign.mgmtBizEntFee" placeholder="管理-业务招待费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="管理-折旧费" title="管理-折旧费" prop="mgmtDeprecExpense">
                    <el-input v-model="formLabelAlign.mgmtDeprecExpense" placeholder="管理-折旧费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="咨询与审计费" title="咨询与审计费" prop="consultAuditFee">
                    <el-input v-model="formLabelAlign.consultAuditFee" placeholder="咨询与审计费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="标书费用" title="标书费用" prop="tenderCost">
                    <el-input v-model="formLabelAlign.tenderCost" placeholder="标书费用">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item  label="房租费" title="房租费" prop="rentExpense">
                    <el-input v-model="formLabelAlign.rentExpense" placeholder="房租费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="工资" title="工资" prop="salary">
                    <el-input v-model="formLabelAlign.salary" placeholder="工资">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="检验检查费" prop="inspectFee">
                    <el-input v-model="formLabelAlign.inspectFee" placeholder="检验检查费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="销售-交通与差旅费" title="交通与差旅费" prop="transTravelExpense">
                    <el-input v-model="formLabelAlign.transTravelExpense" placeholder="交通与差旅费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="其他销售费" title="其他销售费" prop="otherSalesExpense">
                    <el-input v-model="formLabelAlign.otherSalesExpense" placeholder="其他销售费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="投标费用" title="投标费用" prop="biddingCost">
                    <el-input v-model="formLabelAlign.biddingCost" placeholder="投标费用">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="销售-业务费" title="销售-业务费" prop="bizFee">
                    <el-input v-model="formLabelAlign.bizFee" placeholder="销售-业务费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="销售-业务招待费" title="销售-业务招待费" prop="salesBizEntFee">
                    <el-input v-model="formLabelAlign.salesBizEntFee" placeholder="销售-业务招待费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="运输装卸费" title="运输装卸费" prop="transpHandlingFee">
                    <el-input v-model="formLabelAlign.transpHandlingFee" placeholder="运输装卸费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="制造-折旧费" title="制造-折旧费" prop="manufDeprecExpense">
                    <el-input v-model="formLabelAlign.manufDeprecExpense" placeholder="制造-折旧费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="利息支出" title="利息支出" prop="interestExpense">
                    <el-input v-model="formLabelAlign.interestExpense" placeholder="利息支出">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="手续费" title="手续费" prop="handlingFee">
                    <el-input v-model="formLabelAlign.handlingFee" placeholder="手续费">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="贴现利息" title="贴现利息" prop="discInterest">
                    <el-input v-model="formLabelAlign.discInterest" placeholder="贴现利息">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="财务-其他费用" title="财务-其他费用" prop="otherFinExpenses">
                    <el-input v-model="formLabelAlign.otherFinExpenses" placeholder="财务-其他费用">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="存货机会成本" title="存货机会成本" prop="invOpCost">
                    <el-input v-model="formLabelAlign.invOpCost" placeholder="存货机会成本">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="税金" title="税金" prop="tax">
                    <el-input v-model="formLabelAlign.tax" placeholder="税金">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 总计的form -->
      <div class="total-box gray-background" style="margin-top: 5px; padding-top: 5px;">
        <el-form label-width="130px" class="" :model="totalForm" >
          <el-row>
            <el-col :span="6">
              <el-form-item label="财务点数合计" title="财务费用合计">
                <el-input :disabled="true" v-model="totalForm.totalFinExpenses" placeholder="财务费用合计">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item label="厂价金额合计" title="厂价金额合计">
                <el-input :disabled="true" v-model="totalForm.totalFactoryAmount" placeholder="厂价金额合计">
                  <template slot="append">￥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item label="成本金额合计" title="成本金额合计">
                <el-input :disabled="true" v-model="totalForm.totalActualAmount" placeholder="成本金额合计">
                  <template slot="append">￥</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" >
              <el-form-item title="">
                            <span slot="label">
                                 合计差异
									<el-tooltip :content="'总差异 = (厂价金额合计 - 成本金额合计) / 厂价金额合计'" placement="top">
										<i class="el-icon-question"></i>
									</el-tooltip>
								</span>
                <el-input :disabled="true" v-model="totalForm.totalDifferenceValue" placeholder="总差异">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 添加物料和计算数据的按钮div -->
      <div class="button-box">
        <el-button type="text" >添加物料</el-button>
        <el-button type="text" >计算数据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const commonRule = [
  { required: true, message: '不能为空值，可填0', trigger: 'blur' },
  { pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,3})?$/, message: '格式有误，只能为数字格式', trigger: 'blur' }
];

export default {
  name: "index-app",
  data() {
    return {
      formLabelAlign: {
        officeExpense: 0.022,
        travelExpense: 0.011,
        salaryInsur: 0.394,
        otherMgmtExpense: 0.373,
        carExpense: 0.010,
        mgmtBizEntFee:0.156,              //管理-业务招待费
        mgmtDeprecExpense: 0.016,         //管理-折旧费
        consultAuditFee: 0.026,           //咨询审计费
        tenderCost: 0.023,                //标书费用
        rentExpense: 0.052,               //房租费
        salary: 0.239,                    //工资
        inspectFee: 0.016,                //检验检测费
        transTravelExpense: 0.020,        //交通与差旅费
        otherSalesExpense: 0.073,         //其他销售费
        biddingCost: 0.134,               //投标费用
        bizFee: 1.183,                    //销售-业务费
        salesBizEntFee: 0.098,            //销售-业务招待费
        transpHandlingFee: 0.621,         //运输装卸费
        manufDeprecExpense: 0.217,        //制造-折旧费
        interestExpense: 0.436,           //利息支出
        handlingFee: 0.108,                 //手续费
        discInterest: 0.363,                //贴现利息
        otherFinExpenses: 0.197,            //财务-其他费用
        invOpCost: 0.031,                   //存货机会成本
        tax: 1.5,                           //税金
      },
      formLabelAlignDefault: {
        officeExpense: 0.022,
        travelExpense: 0.011,
        salaryInsur: 0.394,
        otherMgmtExpense: 0.373,
        carExpense: 0.010,
        mgmtBizEntFee:0.156,              //管理-业务招待费
        mgmtDeprecExpense: 0.016,         //管理-折旧费
        consultAuditFee: 0.026,           //咨询审计费
        tenderCost: 0.023,                //标书费用
        rentExpense: 0.052,               //房租费
        salary: 0.239,                    //工资
        inspectFee: 0.016,                //检验检测费
        transTravelExpense: 0.020,        //交通与差旅费
        otherSalesExpense: 0.073,         //其他销售费
        biddingCost: 0.134,               //投标费用
        bizFee: 1.183,                    //销售-业务费
        salesBizEntFee: 0.098,            //销售-业务招待费
        transpHandlingFee: 0.621,         //运输装卸费
        manufDeprecExpense: 0.217,        //制造-折旧费
        interestExpense: 0.436,           //利息支出
        handlingFee: 0.108,                 //手续费
        discInterest: 0.363,                //贴现利息
        otherFinExpenses: 0.197,            //财务-其他费用
        invOpCost: 0.031,                   //存货机会成本
        tax: 1.5,                           //税金
      },
      totalForm: {
        totalFinExpenses: 0,
        totalFactoryAmount: 0,
        totalActualAmount: 0,
        totalDifferenceValue: 0
      },
      formRules: {
        officeExpense: commonRule,
        travelExpense: commonRule,
        salaryInsur: commonRule,
        otherMgmtExpense: commonRule,
        carExpense: commonRule,
        mgmtBizEntFee: commonRule,
        mgmtDeprecExpense: commonRule,
        tenderCost: commonRule,
        rentExpense: commonRule,
        salary: commonRule,
        inspectFee: commonRule,
        transTravelExpense: commonRule,
        otherSalesExpense: commonRule,
        biddingCost: commonRule,
        bizFee: commonRule,
        consultAuditFee: commonRule,
        transpHandlingFee: commonRule,
        manufDeprecExpense: commonRule,
        interestExpense: commonRule,
        handlingFee: commonRule,
        discInterest: commonRule,
        otherFinExpenses: commonRule,
        invOpCost: commonRule,
        tax: commonRule,
        salesBizEntFee: commonRule
        // Add similar rules for other form fields
      },
    }
  },
  computed: {

  },
  created() {

  },

  mounted() {

  },
  methods: {
    async init () {

    },
    /**--------------表单验证函数------------**/
    validatePercentage(rule, value, callback) {
      const numValue = parseFloat(value);
      if (isNaN(numValue) || numValue < 0 || numValue > 100) {
        callback(new Error('Please enter a number between 0 and 100'));
      } else {
        callback();
      }
    },
  },
}
</script>

<style scoped lang="scss">
.center-container {
  width: 100%;
}

.gray-background {
  width: 98%;
  margin: auto;
  background-color: #f0f0f0; /* 浅灰色背景 */
  border-radius: 10px; /* 可以根据需要调整边框圆角 */
  backdrop-filter: blur(10px); /* 调整模糊度 */
  -webkit-backdrop-filter: blur(10px); /* 兼容性处理，适用于一些WebKit浏览器 */

}

.form-box .el-col {
  height: 55px;
}

.total-box .el-col {
  height: 42px;
}

.button-box .el-button {
  margin: 10px 80px 10px 0px;
}

.button-box {
  align-items: center;
  text-align: center;
  width: 98%;
  margin: 5px 10px 5px 10px;
  background-color: #f0f0f0; /* 浅灰色背景 */
  border-radius: 10px; /* 可以根据需要调整边框圆角 */
  backdrop-filter: blur(10px); /* 调整模糊度 */
  -webkit-backdrop-filter: blur(10px); /* 兼容性处理，适用于一些WebKit浏览器 */
}
</style>
