<script setup name="projectContentDialog">
import { ref, watch } from 'vue'

const
  props = defineProps({
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    data: Object
  }),
  form = ref({
    perIndicator: []
  }),
  formRef = ref(),
  rules = {
    mainContent: [{ required: true, message: '请输入项目主要内容' }],
    businessObject: [{ required: true, message: '请输入业务对象' }],
    perIndicator: [{ required: true, message: '请至少添加一个预期成效指标' }]
  },
  column = [
    {
      label: '预期成效指标名称',
      key: 'name',
      slot: 'name',
      width: 140
    },
    {
      label: '符号',
      key: 'symbol',
      slot: 'symbol'
    },
    {
      label: '数值',
      key: 'nums',
      slot: 'nums'
    },
    {
      label: '单位',
      key: 'unit',
      slot: 'unit'
    },
    {
      label: '操作',
      key: 'action',
      slot: 'action',
      width: 70
    }
  ],
  // 添加
  add = () => {
    form.value.perIndicator.push({})
  },
  del = (index) => {
    form.value.perIndicator.splice(index, 1)
  },
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    await formEl.validate(async (valid) => {
      if (valid) {
        const data = JSON.parse(JSON.stringify(form.value))
        emits('setContent', data)
        emits('close', true)
      }
    })
  },
  emits = defineEmits(['close', 'setContent'])
watch(
  () => props.visible,
  async (val) => {
    if (val && props.data) {
      form.value = JSON.parse(JSON.stringify(props.data))
    } else {
      formRef.value?.resetFields()
      form.value = {
        perIndicator: []
      }
    }
  }
)
</script>
<template>
  <el-dialog
    :model-value="visible"
    title="添加"
    :size="840"
    @close="emits('close')"
  >
    <el-form
      ref="formRef"
      label-suffix=":"
      :model="form"
      :rules="rules"
      label-width="160"
    >
      <el-form-item label="项目主要内容" prop="mainContent">
        <el-input
          v-model="form.mainContent"
          placeholder="请输入"
          maxlength="100"
        />
      </el-form-item>
      <el-form-item label="业务对象" prop="businessObject">
        <el-input
          v-model="form.businessObject"
          placeholder="请输入"
          maxlength="100"
        />
      </el-form-item>
      <el-button
        type="primary"
        plain
        icon="Plus"
        class="w-full mb-8"
        @click="add"
      >添加
      </el-button>
      <table-list
        :pagination="false"
        :column="column"
        :empty-temp="false"
        :data="form.perIndicator"
      >
        <template #name="{scope}">
          <el-form-item
            v-if="scope.$index>=0"
            :prop="`perIndicator[${scope.$index}].name`"
            :rules="[{required:true,message:' '}]"
            label-width="0"
            style="margin-bottom: 0"
          >
            <el-input
              v-model="form.perIndicator[scope.$index].name"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
        </template>
        <template #symbol="{scope}">
          <el-form-item
            v-if="scope.$index>=0"
            :prop="`perIndicator[${scope.$index}].symbol`"
            label-width="0"
            style="margin-bottom: 0"
          >
            <el-select v-model="form.perIndicator[scope.$index].symbol">
              <el-option label="等于" value="等于" />
              <el-option label="大于" value="大于" />
              <el-option label="大于等于" value="大于等于" />
              <el-option label="小于" value="小于" />
              <el-option label="小于等于" value="小于等于" />
            </el-select>
          </el-form-item>
        </template>
        <template #nums="{scope}">
          <el-form-item
            v-if="scope.$index>=0"
            :prop="`perIndicator[${scope.$index}].nums`"
            label-width="0"
            style="margin-bottom: 0"
          >
            <el-input-number
              v-model="form.perIndicator[scope.$index].nums"
              :controls="false"
              class="flex-1 mr-8"
              placeholder="请输入"
              @mousewheel.prevent
            />
          </el-form-item>
        </template>
        <template #unit="{scope}">
          <el-form-item
            v-if="scope.$index>=0"
            :prop="`perIndicator[${scope.$index}].unit`"
            label-width="0"
            style="margin-bottom: 0"
          >
            <el-input
              v-model="form.perIndicator[scope.$index].unit"
              placeholder="请输入"
              maxlength="10"
            />
          </el-form-item>
        </template>
        <template #action="{scope}">
          <a class="text-danger cursor-pointer" @click="del(scope.$index)">移除</a>
        </template>
      </table-list>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)">提交</el-button>
      <el-button @click="emits('close')">取消</el-button>
    </template>
  </el-dialog>
</template>
