<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="data.selectData" class="demo-form-inline">
        <el-form-item label="场景名称">
          <el-input v-model="data.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 style="margin-left: 600px" type="primary" @click="onAdd"
            >新增场景</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="display-box">
      <el-table
        :data="dataList.comList"
        :border="parentBorder"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div m="5">
              <p m="t-0 b-2">场景ID: {{ props.row.usecase_id }}</p>
              <p m="t-0 b-2">场景名称: {{ props.row.usecase_name }}</p>
              <!-- <p m="t-0 b-2">所属领域: {{ props.row.fieldStr }}</p>
                <p m="t-0 b-2">适用场景: {{ props.row.userStr }}</p> -->

              <!-- <h3>算法详细描述</h3> -->
              <!-- <el-table :data="data.list" :border="childBorder"> -->
              <!-- <el-table-column label="算法名称" prop="name" />
                  <el-table-column label="所属领域" prop="state" />
                  <el-table-column label="应用场景" prop="city" />
                  <el-table-column label="Address" prop="address" />
                  <el-table-column label="Zip" prop="zip" /> -->
              <!-- </el-table> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场景ID" prop="usecase_id" />
        <el-table-column label="场景名称" prop="usecase_name" />
        <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>
      <div class="example-pagination-block">
        <el-pagination
          @current-change="currentChange"
          @size-change="sizeChange"
          layout="prev, pager, next"
          :total="data.selectData.count"
        />
      </div>
      <el-dialog v-model="data.isShow" title="编辑场景">
        <el-form :model="data.active">
          <el-form-item label="场景名称" label-width="100px">
            <el-input v-model="data.active.usecase_name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="data.isShow = false">Cancel</el-button>
            <el-button type="primary" @click="updateUsecase">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog v-model="data.isAddShow" title="新增场景">
        <el-form :model="data.addList">
          <el-form-item label="场景名称" label-width="100px">
            <el-input v-model="data.addList.usecase_name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="data.isAddShow = false">Cancel</el-button>
            <el-button type="primary" @click="addUsecase"> Confirm </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getAllAlgorithm,
  getAllField,
  getAllUse,
  updatePostAlgorithm,
  addPostAlgorithm,
  deleteAlgorithm,
  deleteUse,
  addUse,
  updateUse,
} from "@/request/api";
import { reactive, toRefs, ref, computed, watch } from "vue";
import { InitData } from "../type/use";
import type { usecaseInt } from "../type/use";
import { ElMessage, ElMessageBox } from "element-plus";

// import { watch } from "fs";
const parentBorder = ref(true);
const childBorder = ref(true);
const data = reactive(new InitData());

getAllUse().then((res) => {
  console.log(res);
  data.list = res.data;
  // 总条数
  data.selectData.count = res.data.length;
});

// const data = reactive()
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 sizeChange = (pagesize: number) => {
  data.selectData.pagesize = pagesize;
};

const onSubmit = () => {
  // console.log(data.selectData.name);
  // console.log(data.selectData.description);
  // 定义查询之后要展示的数据
  let arr: usecaseInt[] = [];
  if (data.selectData.name) {
    arr = data.list.filter((value) => {
      return value.usecase_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 == "") {
    getAllUse().then((res) => {
      data.list = res.data;
      // console.log(res.data.length);

      // console.log("打印展示列表");
      // console.log(data.list);
      // 总条数
      data.selectData.count = res.data.length;
    });
  }
});
const handleEdit = (row: usecaseInt) => {
  // data.active = row
  // console.log(row);
  data.active = {
    usecase_id: row.usecase_id,
    usecase_name: row.usecase_name,
  };
  data.isShow = true;
};

const handleDelete = (row: usecaseInt) => {
  ElMessageBox.confirm(
    "proxy will permanently delete the file. Continue?",
    "Warning",
    {
      confirmButtonText: "OK",
      cancelButtonText: "Cancel",
      type: "warning",
    }
  )
    .then(() => {
      // console.log("打印要删除算法");
      // console.log(row);
      deleteUse(row).then((res) => {
        if (res.status == 200) {
          getAllUse().then((res) => {
            data.list = res.data;
            // console.log(res.data.length);

            // console.log("打印展示列表");
            // console.log(data.list);
            // 总条数
            data.selectData.count = res.data.length;
          });
          ElMessage({
            type: "success",
            message: "Delete completed",
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

const updateUsecase = () => {
  // console.log(data.active);
  // let obj: any = data.list.find(
  //   (value) => value.algorithm_id == data.active.algorithm_id
  // );
  // let obj: any;
  // console.log("打印obj");

  // console.log(obj);

  // obj.algorithm_name = data.active.algorithm_name;
  // obj.algorithm_description = data.active.algorithm_description;
  // obj.fieldList = data.active.fieldList;
  // // obj.fieldList = data.fieldList.filter(value=>data.active.fieldList.indexOf(value.field_id)!== -1)
  // obj.useList = data.active.useList;
  // obj.fieldStr = "";
  // obj.userStr = "";

  console.log("打印所选值");
  console.log(dataList.comList);

  updateUse(data.active).then((res) => {
    console.log(res);

    console.log(data.active);
    getAllUse().then((res) => {
      data.list = res.data;
      // console.log(res.data.length);

      // console.log("打印展示列表");
      // console.log(data.list);
      // 总条数
      data.selectData.count = res.data.length;
    });
  });
  data.isShow = false;
};

const onAdd = () => {
  data.isAddShow = true;
  data.addList.usecase_name = "";
};

const addUsecase = () => {
  console.log(data.addList);
  addUse(data.addList).then((res) => {
    console.log(res);

    getAllUse().then((res) => {
      data.list = res.data;
      // console.log(res.data.length);

      // console.log("打印展示列表");
      // console.log(data.list);
      // 总条数
      data.selectData.count = res.data.length;
    });

    data.isAddShow = false;
  });
};
</script>

<style scoped></style>
