<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="selectData.name" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">增加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="dataList.comList" style="width: 100%">
      <el-table-column prop="field_id" label="ID号" width="100%" />
      <el-table-column prop="field_name" label="领域名" width="" />
      <!-- <el-table-column prop="algorithemFields" label="包含算法" /> -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="data.selectData.count * 2"
    />
  </div>
  <!-- 点击编辑后弹出一个对话框 -->
  <el-dialog v-model="data.isShow" title="编辑信息">
    <el-form :model="data.active">
      <!-- <el-form-item label="ID号" label-width="50px">
        <el-input v-model="data.active.field_id" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="领域" label-width="50px">
        <el-input v-model="data.active.field_name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="update">更新</el-button>
        <el-button type="primary" @click="cancel"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 点击增加后弹出一个对话框 -->
  <el-dialog v-model="data.isShow1" title="增加内容">
    <el-form :model="data.active1">
      <!-- <el-form-item label="ID号" label-width="50px">
        <el-input v-model="data.active.field_id" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="领域" label-width="50px">
        <el-input v-model="data.active1.field_name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="add2">增加</el-button>
        <el-button type="primary" @click="cancel"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineComponent, reactive, computed, toRefs, ref, watch } from "vue";
import { getAllAlgorithm } from "@/request/api";
import {
  getAllField,
  updateField,
  deleteField,
  addField,
} from "../request/api";
import { InitData } from "../type/fields";
import type { fieldsData } from "../type/fields";
import { isComputedPropertyName } from "typescript";

const data = reactive(new InitData());
//数据的解构，很神奇，会分别将data的两个属性赋给{}里的两个元素

let { selectData, list } = toRefs(data);

getAllField().then((res) => {
  data.list = res.data;
  data.selectData.count = res.data.length;
});
const dataList = reactive({
  comList: computed(() => {
    return data.list.slice(
      (data.selectData.page - 1) * data.selectData.pagesize,
      data.selectData.page * data.selectData.pagesize
    );
  }),
});

const currentChange = (page: number) => {
  data.selectData.page = page;
};
//查询
const onSubmit = () => {
  let arr: fieldsData[] = [];
  //将场景的描述删除，不需要后面那个判断条件
  if (data.selectData.name) {
    arr = data.list.filter((value) => {
      return value.field_name.indexOf(data.selectData.name) !== -1;
    });
  } else {
    arr = data.list;
  }
  data.selectData.count = arr.length;
  data.list = arr;
};
watch([() => data.selectData.name], () => {
  if (data.selectData.name == "") {
    getAllField().then((res) => {
      data.list = res.data;
      data.selectData.count = res.data.length;
    });
  }
});

const handleEdit = (row: fieldsData) => {
  console.log(row);
  data.active = row;
  data.isShow = true;
};

const add = (row: fieldsData) => {
  console.log(row);
  //data.active =row
  data.isShow1 = true;
};

const update = () => {
  // console.log(data.active)
  updateField(data.active).then((res) => {
    //console.log(res)
    //    getAllField().then((res) => {
    //    data.list = res.data;
    //    data.selectData.count = res.data.length
    // });
  });
  data.isShow = false;
};
const add2 = () => {
  addField(data.active1).then((res) => {
    console.log(res);
    getAllField().then((res) => {
      data.list = res.data;
      data.selectData.count = res.data.length;
    });
  });
  data.isShow1 = false;
};
const handleDelete = (row: any) => {
  deleteField(row).then((res) => {
    console.log(res);
    getAllField().then((res) => {
      data.list = res.data;
      data.selectData.count = res.data.length;
    });
  });
};
const cancel = () => {
  //console.log(data.active)
  data.isShow = false;
};
</script>

<style scoped></style>
