<template>
  <div class="dispatch-salary-advance">
    <el-form
        :inline="true"
        label-position="right"
        label-width="170px"
        :model="formLabelAlign"
        style="max-width: 90%"
        ref="ruleFormRef"
        :rules="rules"
        class="ruleFormRef"
    >
      <el-form-item label="最低预支额度" prop="minAmount">
        <el-input v-model="formLabelAlign.minAmount" type="number" />
      </el-form-item>
      <el-form-item label="无手续费当月累计限额" prop="freeAmount">
        <el-input v-model="formLabelAlign.freeAmount"  type="number" />
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item label="手续费" style="width: 1010px;" prop="fee">
        <el-table :data="formLabelAlign.fee">
          <el-table-column label="手续费" align="center" prop="serviceFee" >
            <template #default="{row}">
              {{row.serviceFee + '%'}}
            </template>
          </el-table-column>
          <el-table-column label="金额范围" align="center" prop="minAmount" >
            <template #default="{row}">
              {{row.minAmount + '-' + row.maxAmount}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="edit" @click="add(scope)" >编辑</el-button>
              <el-button link type="primary" icon="Delete" @click="delFee(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="add()" icon="Plus" style="width: 100%;border: 1px dashed #dcdfe6;margin-top: 6px;">新增</el-button>
      </el-form-item>
      <el-form-item style="width: 100%;">
        <div style="margin: 0 auto;">
          <el-button @click="resetForm">取消</el-button>
          <el-button @click="submitForm" type="primary" >提交</el-button>
        </div>
      </el-form-item>
    </el-form>

    <!-- 新增手续费 -->
    <el-dialog :title=title v-model="open" width="500px" append-to-body>
      <el-form ref="addDialogRef" :model="addForm" :rules="feeRules" label-width="110">
        <el-form-item label="手续费（%）" prop="serviceFee">
          <el-input v-model="addForm.serviceFee" placeholder="请输入手续费" maxlength="60"  />
        </el-form-item>
        <el-form-item label="最小值" prop="minAmount">
          <el-input v-model="addForm.minAmount" placeholder="请输入最小值" maxlength="60"  />
        </el-form-item>
        <el-form-item label="最大值" prop="maxAmount">
          <el-input v-model="addForm.maxAmount" placeholder="请输入最大值" maxlength="60"  />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>


import {salaryAdvanceInsert, salaryAdvanceSingle} from "@/api/dispatch";

const { proxy } = getCurrentInstance();

const list = ref([]);
const open = ref(false)
const id = proxy.$route.query.id || '' // 编辑时数据id
const code = proxy.$route.query.code || '' // 编辑时数据code
const title = ref();

const data = reactive({
  formLabelAlign: {
    minAmount:'',
    freeAmount:'',
    fee:[]
  },
  addForm:{},
  rules:{
    minAmount: [{required: true,message:"请输入最低预支额度",trigger:"blur"}],
    freeAmount: [{required: true,message:"请输入无手续费当月累计限额",trigger:"blur"}],
    fee: [{required: true,message:"请添加手续费",trigger:"blur"}],
  },
  feeRules:{
    serviceFee: [{required: true,message:"请输入手续费",trigger:"blur"}],
    minAmount: [{required: true,message:"请输入最小值",trigger:"blur"}],
    maxAmount: [{required: true,message:"请输入最大值",trigger:"blur"}],
  }
});

const { addForm,formLabelAlign,rules,feeRules } = toRefs(data);

if(code){
  getSalaryAdvance();
}
/** 新增、编辑手续费弹窗 */
function add(e){
  open.value= true;
  if(e){
    title.value = "编辑手续费"
    addForm.value = {...e.row};
  }else {
    addForm.value = {
      maxAmount: '',
      minAmount: '',
      serviceFee: ''
    }
    title.value = "新增手续费"
  }
}
/** 保存手续费 */
function submitDialog(){
  proxy.$refs.addDialogRef.validate((valid) => {
    if (!valid) return;
    let list = formLabelAlign.value.fee || []
    for (let i = 0;  i < list.length; i++) {
      if (list[i].serviceFee == addForm.value.serviceFee && list[i].id!=addForm.value.id) {
        return proxy.$modal.msgWarning(`手续费已存在!`);
      }
    }

    open.value= false
    if(title.value==='新增手续费'){
      formLabelAlign.value.fee.push({...addForm.value})
    }else {
      let list = formLabelAlign.value.fee
      for(let i = 0; i < list.length; i++) {
        if (list[i].id == addForm.value.id) {
          list[i] = addForm.value
        }
      }
      formLabelAlign.value.fee = list
    }

  })
}
/** 删除手续费 */
function delFee(row){
  formLabelAlign.value.fee.splice(row.$index, 1)
}
/** 取消 */
function resetForm(){
  proxy.$router.go(-1);
}
/** 提交 */
function submitForm(){
  proxy.$refs.ruleFormRef.validate(async (valid) => {
    if (!valid) return;
    const submitForm = {...formLabelAlign.value}
    submitForm.fee = JSON.stringify(submitForm.fee)
    salaryAdvanceInsert({...submitForm,code:code,}).then(res => {
      proxy.$modal.msgSuccess(res.code)
      const obj = { path: "/dispatch" };
      proxy.$tab.closeOpenPage(obj);
    })
  })
}
/** 获取当前派遣公司下设置的预支工资额度 */
function getSalaryAdvance(){
  salaryAdvanceSingle({code:code}).then(res => {
    if(res.data){
      if(res.data.salaryAdvanceParam){
        formLabelAlign.value = res.data.salaryAdvanceParam;
      }
      if(res.data.salaryAdvanceFee){
        formLabelAlign.value.fee = res.data.salaryAdvanceFee;
      }
    }
  })
}


</script>
<style lang="scss">
.dispatch-salary-advance {
  .el-form.ruleFormRef {
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .el-form-item {
      width: 30%;

      .el-input, .el-select, .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
        width: 100%;
      }
    }
  }
}
</style>
