<template>
  <div>
    <el-card shadow="naver">
      <el-row :gutter="10">
        <el-button
          type="primary"
          :icon="Plus"
          @click="
            () => {
              state.subsidyId = undefined;
              state.visibleSubsidy = true;
            }
          "
          >新增</el-button
        >
        <el-button type="primary" @click="state.visibleTarget = true"
          >补贴对象管理</el-button
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6"></el-col>
      </el-row>
      <el-table :data="state.list" style="width: 100%" class="mt-6">
        <el-table-column
          label="服务项目"
          :formatter="v => v.category.categoryName"
        >
        </el-table-column>
        <el-table-column prop="houseServicePrice" label="上门服务补贴金额">
        </el-table-column>
        <el-table-column prop="nonHouseServicePrice" label="非上门服务补贴金额">
        </el-table-column>
        <el-table-column prop="targets" label="补贴对象">
          <template #default="{ row }">
            <div>
              <div v-for="(item, index) in row.targets" :key="item.id">
                <el-text> {{ index + 1 }}、{{ item.name }} </el-text>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="备注信息"> </el-table-column>

        <el-table-column prop="" label="操作" width="130">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row.id)"
              >编辑</el-button
            >

            <el-popconfirm
              title="确定要删除吗?"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <DialogSubsidyTarget v-model:show="state.visibleTarget" />
    <DialogEditSubsidy
      v-model:show="state.visibleSubsidy"
      @success="getList"
      :id="state.subsidyId"
    />
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

import { reactive } from "vue";

import DialogSubsidyTarget from "./components/DialogSubsidyTarget.vue";
import DialogEditSubsidy from "./components/DialogEditSubsidy.vue";
const state = reactive({
  list: [],
  subsidyId: undefined,
  visibleTarget: false,
  visibleSubsidy: false
});
const getList = () => {
  request.get("mallService/mechanism/subsidy/services").then(resp => {
    state.list = resp.data;
  });
};

const handleDelete = id => {
  request
    .post("mallService/mechanism/subsidy/service/delete", {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};
const handleEdit = id => {
  state.visibleSubsidy = true;
  state.subsidyId = id;
};
const initData = () => {
  getList();
};
initData();
</script>
