<template>
  <div class="app-container">
    <div>
      <div class="setting_title">税率设置</div>
      <el-divider></el-divider>

      <el-card shadow="never" class="my-card">
        <el-form class="my-form" ref="mainForm" :model="mainForm" label-width="120px" label-position="right">
          <el-form-item label="仓存费税率" prop="">
            <el-input v-model="mainForm.storageFeeTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="工程价差税率" prop="">
            <el-input v-model="mainForm.enginPriceDifTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="运输费税率" prop="">
            <el-input v-model="mainForm.transportTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="安装费税率" prop="">
            <el-input v-model="mainForm.installTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="库存商品税率" prop="">
            <el-input v-model="mainForm.stockTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
          <el-form-item label="押金通用比例" prop="">
            <el-input v-model="mainForm.depositTax" autocomplete="off" placeholder="请输入"
              ><i class="el-input__icon" slot="suffix">% </i></el-input
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="editFn">修改</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommonTaxGet, getCommonTaxConfig } from '@/api/finance/tax_rate'
export default {
  data() {
    return {
      mainForm: {
        storageFeeTax: null,
        enginPriceDifTax: null,
        transportTax: null,
        installTax: null,
        stockTax: null,
        depositTax: null
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //修改
    async editFn() {
      await getCommonTaxConfig({
        storageFeeTax: Number((this.mainForm.storageFeeTax / 100).toFixed(2)),
        enginPriceDifTax: Number((this.mainForm.enginPriceDifTax / 100).toFixed(2)),
        transportTax: Number((this.mainForm.transportTax / 100).toFixed(2)),
        installTax: Number((this.mainForm.installTax / 100).toFixed(2)),
        stockTax: Number((this.mainForm.stockTax / 100).toFixed(2)),
        depositTax: Number((this.mainForm.depositTax / 100).toFixed(2))
      })
      this.$message.success('修改成功')
      this.getData()
    },
    //获取税率数据
    async getData() {
      const res = await getCommonTaxGet()
      console.log(res)
      this.mainForm = {
        storageFeeTax: res.data.storageFeeTax * 100,
        enginPriceDifTax: res.data.enginPriceDifTax * 100,
        transportTax: res.data.transportTax * 100,
        installTax: res.data.installTax * 100,
        stockTax: res.data.stockTax * 100,
        depositTax: res.data.depositTax * 100
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.setting_title {
  padding-left: 0;
}
.tips {
  font-size: 14px;
}
.my-card {
  margin-top: 20px;
  .box {
    background: rgb(235, 240, 249);
    padding: 10px;
    font-size: 14px;
    margin: 20px 0;
    line-height: 18px;
    ::v-deep .el-link {
      vertical-align: unset;
    }
  }
}
.my-form {
  width: 450px;
  margin: 0 auto;
}
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.question {
  position: absolute;
  right: -30px;
  top: 0;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}
</style>
