<template>
  <el-card class="mt-6">
    <template #header>
      <div>
        <el-form>
          <el-form-item required style="margin-bottom: 0px">
            <template #label>
              <h3>服务类别设置</h3>
            </template>
            <div class="flex items-center w-1/2">
              <el-input
                v-model="state.serviceCategory.name"
                placeholder="请输入服务类别名称"
                clearable
              ></el-input>
              <el-button class="ml-4" type="primary" plain @click="handleSubmit"
                >确认添加</el-button
              >
              <el-button link type="danger" :icon="Warning"
                >要开启服务商功能，必须设置这一项</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table :data="state.serviceCategory.list" style="width: 100%">
      <el-table-column label="服务类别名称" prop="" width="">
        <template #default="{ row }">
          <el-input
            v-model="row.name"
            placeholder="请输入服务类别名称"
            clearable
            @blur="handleEdit(row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" width="">
        <template #default="{ row }">
          <el-button link type="primary" @click="onSetupRequest(row)"
            >服务商申请设置</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <ComponentDialogSetupRequest
    v-model:show="state.visible"
    :id="state?.rowData?.id"
  ></ComponentDialogSetupRequest>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { emit } from "process";
import { reactive, defineEmits } from "vue";
import ComponentDialogSetupRequest from "./DialogSetupRequest.vue";

const state = reactive({
  serviceCategory: {
    name: "", // 服务类别名称,
    list: []
  },
  visible: false,
  rowData: {}
});
const emits = defineEmits(["success"]);
const handleEdit = row => {
  if (!row.name) {
    return ElMessage.error("类别名称不能为空");
  }
  request
    .post("/articleService/serviceProvider/serveCategory/update", row)
    .then(resp => {
      ElMessage.success(resp.message);
      getTableList();
    });
};
const handleSubmit = () => {
  if (!state.serviceCategory?.name) {
    return ElMessage.error("类别名称不能为空");
  }
  request
    .post("/articleService/serviceProvider/serveCategory", {
      name: state.serviceCategory?.name
    })
    .then(resp => {
      ElMessage.success(resp?.message);
      getTableList();
      state.serviceCategory.name = undefined;
    });
};
const getTableList = () => {
  request.get("/articleService/serviceProvider/serveCategories").then(resp => {
    state.serviceCategory.list = resp.data;
  });
};
const handleDelete = id => {
  request
    .post("/articleService/serviceProvider/serveCategory/delete", {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getTableList();
    });
};

const onSetupRequest = rowData => {
  state.rowData = rowData;
  console.log(state.rowData);

  state.visible = true;
};

const init = () => {
  getTableList();
};
init();
</script>
