<template>
  <el-dialog title="额外支出" v-model="show" width="800px">
    <el-button
      class="mb-5px"
      type="primary"
      size="small"
      @click="
        form.extraPay.push({
          extraPayType: undefined,
          extraPayMoney: 0,
          dictType: 'extra_pay_type',
          editabled: true
        })
      "
    >
      添加额外支出
    </el-button>
    <el-table :data="form.extraPay" border size="small">
      <el-table-column type="index" width="50" />
      <el-table-column prop="extraPayType" label="费用类型" width="200px">
        <template #default="{ row }">
          <el-select
            v-if="row.editabled"
            v-model="row.extraPayType"
            size="small"
            placeholder="其他费用类型"
            filterable
          >
            <el-option
              v-for="item in extraPayOptions"
              :key="item.id"
              :label="item.extraPayName"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="extraPayMoney" label="费用金额" width="180px">
        <template #default="{ row }">
          <el-input-number
            v-if="row.editabled"
            v-model="row.extraPayMoney"
            size="small"
            :controls="false"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="{ row }">
          <el-input v-if="row.editabled" v-model="row.remark" size="small" placeholder="备注信息" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60px">
        <template #default="{ row, $index }">
          <Icon
            icon="ep:remove-filled"
            class="text-red-500"
            v-if="row.editabled"
            @click="handleRemove('extraPay', $index)"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DialogExtraPay">
import { signAddPay, getSignExtraPayList } from '@/api/clue/sign'
import * as ExtraFeeApi from '@/api/clue/extraFee'

const extraPayOptions = ref([])
const message = useMessage() // 消息弹窗

const show = ref(false)
function open(id) {
  show.value = true
  resetForm(id)
  getFormList()
  getOptions()
}
defineExpose({
  open
})

const form = ref({})
function resetForm(id) {
  form.value = {
    signId: id,
    extraPay: []
  }
}

function getFormList() {
  getSignExtraPayList({ id: form.value.signId }).then((data) => {
    form.value.extraPay = data.map((it) => ({
      ...it,
      editabled: false
    }))
  })
}

const formLoading = ref(false)
async function onSubmit() {
  // 校验表单
  if (form.value.extraPay.length) {
    if (form.value.extraPay.some((it) => !it.extraPayType || it.extraPayMoney == null)) {
      message.info('请想额外支出信息填写完整！')
      return
    }
  } else {
    message.info('请添加额外支出')
    return
  }
  // 提交请求
  formLoading.value = true
  try {
    const params = {
      signId: form.value.signId,
      extraPay: form.value.extraPay.filter((it) => it.editabled)
    }
    await signAddPay(params)
    message.success('添加额外支出成功！')
    getFormList()
  } finally {
    formLoading.value = false
  }
}

function handleRemove(type, index) {
  form.value[type].splice(index, 1)
}

function getOptions() {
  ExtraFeeApi.getExtraFeeSimpleList().then((data) => {
    extraPayOptions.value = data
  })
}
</script>

<style lang="scss" scoped></style>
