<template>
  <el-card class="mt-6">
    <template #header>
      <div class="flex items-center">
        <h3 class="mr-3">申请所需审核资料</h3>
        <div class="flex items-center w-1/2">
          <el-input
            v-model="state.name"
            placeholder="请输入资料名称"
            clearable
          ></el-input>
          <el-select
            v-model="state.type"
            placeholder="请选择资料类型"
            filterable
            clearable
            class="w-1/2 ml-2"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.k"
              :value="item.v"
            />
          </el-select>
          <el-button class="ml-4" type="primary" plain @click="handleSubmit"
            >确认添加</el-button
          >
        </div>
      </div>
    </template>
    <el-table :data="state.profileTable">
      <el-table-column label="资料名称" prop="name" width="">
        <template #default="{ row, $index }">
          <el-input
            v-if="$index > 2"
            clearable
            v-model="row.name"
            @blur="handleEdit(row)"
          ></el-input>
          <el-text v-else>{{ row.name }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="资料类型" prop="type" width="">
        <template #default="{ row, index }">
          {{ typeList[row.setting.type].k }}
        </template>
      </el-table-column>
      <el-table-column label="填写说明（选填）" prop="description" width="">
        <template #default="{ row, index }">
          <el-input
            clearable
            v-model="row.setting.description"
            placeholder="输入填写说明展示在前端"
            @blur="handleEdit(row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="默认必须的资料" prop="required" width="">
        <template #default="{ row, $index }">
          <el-switch
            @change="handleEdit(row)"
            v-model="row.setting.required"
            :disabled="$index < 3"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button link type="danger" v-if="$index > 2">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { reactive } from "vue";

const typeList = [
  {
    k: "文本",
    v: 0
  },
  {
    k: "图片",
    v: 1
  },
  {
    k: "文档",
    v: 2
  }
];
const state = reactive({
  name: "",
  type: undefined,
  profileTable: []
});
const getTableData = () => {
  request.get("/articleService/serviceProvider/applyInfos").then(resp => {
    state.profileTable = resp.data;
  });
};
const handleSubmit = () => {
  if (!state.name) {
    return ElMessage.error("请输入资料名称");
  }

  if (state.type === undefined) {
    return ElMessage.error("请输入资料类型");
  }
  request
    .post("/articleService/serviceProvider/applyInfo", {
      name: state.name,
      setting: {
        type: state.type,
        required: false
      }
    })
    .then(resp => {
      ElMessage.success(resp.message);
      state.name = undefined;
      state.type = undefined;
      getTableData();
    });
};
const handleEdit = row => {
  request
    .post("/articleService/serviceProvider/applyInfo/update", row)
    .then(resp => {
      ElMessage.success(resp.message);
      getTableData();
    });
};
const handleDelete = id => {
  request
    .post("/articleService/serviceProvider/applyInfo/delete", { id })
    .then(resp => {
      ElMessage.success(resp.message);
      getTableData();
    });
};
const init = () => {
  getTableData();
};
init();
</script>
