<template>
  <div class="com-formual">
    <el-form
      :inline="true"
      :model="queryForm"
      v-if="type == 1"
      class="demo-form-inline"
    >
      <el-form-item label="类型:">
        <el-select
          v-model="queryForm.type"
          placeholder="请选择类型"
          size="large"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="变名称:">
        <el-input
          v-model="queryForm.name"
          placeholder="请填写变量名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onBtnSearch">
          <svg-icon icon-class="search" /> 搜索</el-button
        >
        <el-button type="primary" @click="onBtnCreate">
          <svg-icon icon-class="plus" /> 新增变量</el-button
        >
      </el-form-item>
    </el-form>
    <el-form
      :inline="true"
      :model="queryForm"
      v-if="type == 2"
      class="demo-form-inline"
    >
      <!-- <el-form-item label="类型:">
            <el-select v-model="queryForm.type"  placeholder="请选择类型" size="large" style="width:100%;">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
          </el-form-item>
      <el-form-item label="变名称:">
        <el-input
          v-model="queryForm.name"
          placeholder="请填写变量名称"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <!-- <el-button type="primary" @click="onBtnSearch">
          <svg-icon icon-class="search" /> 搜索</el-button
        > -->
        <el-button type="primary" @click="onBtnConst">
          <svg-icon icon-class="plus" /> 新增常量</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      style="width: 100%"
      header-row-class-name="headerBg"
      empty-text="没有数据信息"
    >
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="code" label="编码" align="left" />
      <el-table-column prop="name" label="名称" align="left" />
      <el-table-column
        prop="value"
        label="取值"
        v-if="type == 1"
        show-overflow-tooltip
        align="left"
        min-width="150"
      />
      <!-- <el-table-column prop="intro" label="介绍" show-overflow-tooltip	 align="left" min-width="150"/> -->
      <el-table-column label="操作" align="center" width="250">
        <template #default="scope">
          <div class="btns">
            <el-button type="primary" size="mini" @click="btnPicked(scope.row)"
              ><svg-icon icon-class="confirm" />使用</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="btnOnEdit(scope.row.id, scope.row)"
              ><svg-icon icon-class="edit" />编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="btnOnDelete(scope.row.id)"
              ><svg-icon icon-class="delete" />删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        v-model:currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      v-el-drag-dialog
      width="300"
      custom-class="prod-verify"
      :title="title"
      @closed="handleDialogClosed"
    >
      <dataInfo
        ref="dataInfoRef"
        :id="dataId"
        :type="type"
        @onClose="onClose"
      ></dataInfo>
    </el-dialog>
  </div>
</template>

<script>
import { searchParams, deleteParams } from "@/api/params";
import elDragDialog from "@/directive/el-drag-dialog";
import dataInfo from "./dataInfo";

export default {
  name: "searchParams",
  emits: ["onPicked", "onData"],
  directives: { elDragDialog },
  components: {
    dataInfo,
  },
  props: {
    type: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    type: {
      handler(val) {
        console.log(val);
        this.queryForm.type = val;
        this.onBtnSearch();
      },
      immediate: true,
      deep: true,
    },
    dataList: {
      handler(newVal, oldVal) {
        newVal.forEach((item, index) => {
          if (JSON.stringify(item) !== JSON.stringify(oldVal[index])) {
            this.$emit("onData", item);
          }
        });
        // Add any additional logic you need here
      },
      deep: true,
    },
    /* onData */
  },
  data() {
    return {
      dataId: 0,
      dialogVisible: false,
      title: "创建变量",
      queryForm: {
        page: 1,
        pageSize: 10,
        name: "",
        status: 5,
        type: 1,
      },
      typeList: [
        {
          value: 1,
          name: "变量",
        },
        {
          value: 2,
          name: "常量",
        },
      ],
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
    };
  },
  mounted() {
    // this.onBtnSearch();
  },
  methods: {
    handleDialogClosed() {
      // 清空 dataInfo 组件内的表单
      if (this.$refs.dataInfoRef) {
        this.$refs.dataInfoRef.resetForm(); // 假设 dataInfo 组件有一个 resetForm 方法
      }
    },
    onClose(e) {
      let _this = this;
      _this.dialogVisible = false;
      _this.onBtnSearch();
    },

    btnOnDelete(e) {
      let _this = this;
      let par = {
        id: e,
      };
      _this
        .$confirm("您是否确认删除该记录？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          deleteParams(par).then((res) => {
            _this.search();
          });
        })
        .catch(() => {});
    },

    onBtnCreate(e) {
      let _this = this;
      _this.dataId = 0;
      _this.title = "创建变量";
      _this.dialogVisible = true;
    },

    btnOnEdit(id, row) {
      this.title = row.type == 1 ? "修改变量" : "修改常量";
      this.$nextTick(() => {
        this.dataId = id;
        this.dialogVisible = true;
      });
    },

    onBtnSearch(e) {
      let _this = this;
      _this.queryForm.page = 1;
      _this.search();
    },
    btnPicked(e) {
      this.$emit("onPicked", e);
    },
    //搜索
    search() {
      let _this = this;
      searchParams(_this.queryForm).then((res) => {
        if (!res) return;
        _this.dataList = res.data.dataList;
        _this.recordCount = res.data.totalRecord;
        _this.pageTotal = res.data.pageTotal;
      });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
    /* 新增常量 */
    onBtnConst() {
      let _this = this;
      _this.dataId = 0;
      _this.type = 2;
      _this.title = "创建常量";
      _this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
