<template>
  <div>
    <el-dialog title="补贴对象管理" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item
            label="补贴对象名称"
            prop="name"
            :rules="{
              required: true,
              message: '请输入补贴对象名称',
              trigger: 'blur'
            }"
          >
            <div class="flex w-1/2">
              <el-input
                v-model="form.name"
                placeholder="请输入补贴对象名称"
                clearable
              ></el-input>
              <el-button class="ml-4" type="primary" @click="handleAdd"
                >添加</el-button
              >
            </div>
          </el-form-item>
        </el-form>

        <el-table :data="list" style="width: 100%" class="mt-6">
          <el-table-column prop="name" label="补贴对象名称" width="width">
            <template #default="{ row }">
              <el-input
                v-model="row.name"
                placeholder="请输入补贴对象名称"
                clearable
                @blur="handleChangeName(row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="100">
            <template #default="{ row }">
              <el-popconfirm
                title="确定要删除吗?"
                @confirm="handleDelete(row.id)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          > -->
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getList();
    } else {
      resetForm();
    }
  }
);

const form = reactive({
  name: ""
});
const list = ref([]);

const formRef = ref();
const handleAdd = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    request.post("mallService/mechanism/subsidy/target", form).then(resp => {
      form.name = "";
      ElMessage.success(resp.message);
      getList();
    });
  });
};
const handleChangeName = row => {
  if (!row.name) {
    return ElMessage.error("补贴对象名称不能为空");
  }
  request
    .post("mallService/mechanism/subsidy/target/update", {
      id: row.id,
      name: row.name
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};

const handleDelete = id => {
  request
    .post("mallService/mechanism/subsidy/target/delete", {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};

const getList = () => {
  request.get("mallService/mechanism/subsidy/targets").then(resp => {
    list.value = resp.data;
  });
};
const resetForm = () => {
  formRef.value.resetFields();
};
</script>
