<template>
    <hc-new-dialog v-model="isShow" is-table widths="666px" title="修改项目支付项" :loading="saveLoading" @save="modalSave">
        <el-scrollbar class="hc-dialog-scrollbar">
            <el-form ref="formRef" class="p-2" label-position="left" label-width="auto" :model="formModel" :rules="formRules">
                <el-form-item label="支付项编号：">
                    <el-input v-model="formModel.payNumber" />
                </el-form-item>
                <el-form-item label="支付项名称：">
                    <el-input v-model="formModel.payName" />
                </el-form-item>
                <el-form-item label="支付项类型：">
                    <el-select v-model="formModel.payType" block>
                        <el-option v-for="item in payOptions" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                </el-form-item>
                <el-form-item class="nowrap" label="合同计算公式：">
                    <el-input v-model="formModel.contractFormulaIds" class="flex-1" disabled />
                    <el-link type="primary" class="ml-2 line-height-normal" @click="formulaClick">添加公式</el-link>
                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
                </el-form-item>
                <el-form-item class="nowrap" label="变更计算公式：">
                    <el-input v-model="formModel.updateFormulaIds" disabled class="flex-1" />
                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
                </el-form-item>
                <el-form-item class="nowrap" label="本期计算公式：">
                    <el-input v-model="formModel.currentFormulaIds" disabled class="flex-1" />
                    <el-link type="primary" class="ml-2 line-height-normal">添加公式</el-link>
                    <el-link type="danger" class="ml-2 line-height-normal">删除公式</el-link>
                </el-form-item>
                <el-form-item label="是否为扣款项：">
                    <el-select v-model="formModel.isDeduct" block>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否加粗：">
                    <el-select v-model="formModel.isBoldText" block>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否手动输入：">
                    <el-select v-model="formModel.isManualInput" block>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示百分比：">
                    <el-select v-model="formModel.isShowPercent" block>
                        <el-option label="是" :value="1" />
                        <el-option label="否" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付项适用类型：">
                    <el-select v-model="formModel.payApplicableType" block>
                        <el-option v-for="item in payAppOptions" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排序号：">
                    <el-input v-model="formModel.sort" />
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input v-model="formModel.remarks" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
    </hc-new-dialog>
    <HcFormula v-model="isFormulaShow" />
</template>

<script setup>
import { ref, watch } from 'vue'
import HcFormula from './formula.vue'
import payApi from '~api/project/debit/contract/pay.js'
import { getArrValue, getObjValue } from 'js-fast-way'
import { useAppStore } from '~src/store'
import { getDictionary } from '~api/other'
const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})
//事件
const emit = defineEmits(['finish', 'close'])
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})
//获取节点详情
const getDetail = async (id)=>{
    const { error, code, data } = await payApi.getProDetail({
       id,
    })
    if (!error && code === 200) {
        formModel.value = getObjValue(data)
   
    } else {
        formModel.value = {}
    }
}
//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
    getDetail(ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        console.log('处理数据')
        gePayType()
        gePayAppType()
    }
})

//弹窗表单
const formRef = ref(null)
const formModel = ref({ })
const formRules = ref({})
const saveLoading = ref(false)
const modalSave = async () => {
    emit('finish')
    saveLoading.value = true
    const { error, code, msg } = await payApi.updateProList({
          ...formModel.value,
       
        })
        //判断状态
        saveLoading.value = false
        if (!error && code === 200) {
            window?.$message?.success(msg)
         
        }
}

//公式
const isFormulaShow = ref(false)
const formulaClick = () => {
    isFormulaShow.value = true
}
//获支付项类型
const payOptions = ref([])
const gePayType = async () => {
    const { data } = await getDictionary({
        code: 'meter_pay_type',
    })
    payOptions.value = getArrValue(data)
    payOptions.value.forEach((ele)=>{
        ele.dictKey = Number(ele.dictKey)
    })
}
//获支付项适用类型
const payAppOptions = ref([])
const gePayAppType = async () => {
    const { data } = await getDictionary({
        code: 'meter_pay_applicable_type',
    })
    payAppOptions.value = getArrValue(data)
    payAppOptions.value.forEach((ele)=>{
        ele.dictKey = Number(ele.dictKey)
    })
}
</script>
