<template>
  <div class="ui-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="过滤筛选:" prop="searchValue">
        <el-input
          v-model="queryParam.searchValue"
          placeholder=""
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="接入网络方式" prop="netType">
              <el-select v-model="queryParam.netType" placeholder="请选择接入网络方式" clearable size="small">
                <el-option
                  v-for="dict in netTypeList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>-->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>

      <el-form-item style="float: right; margin-right: 20px">
        <el-button
          @click="handleAdd()"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          >新增字典</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-table
        stripe
        id="deviceTable"
        ref="multipleTable"
        :data="tableData"
        @header-click="sort"
        v-loading="loading"
        border
        :header-cell-style="{
          //background:'#5E95E8',
          //color:'#FFFFFF',
          height: '25px',
          top: '0px',
          padding: '0px',
        }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
        style="top: 5px"
      >
        <el-table-column
          align="center"
          sortable
          prop="name"
          label="表名称"
          column-key="date"
        ></el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="anotherName"
          label="表别名"
        ></el-table-column>

        <el-table-column
          align="center"
          sortable
          prop="updateTime"
          label="修改时间"
        >
          <template slot-scope="scope">
            <span type="primary" size="small">{{
              scope.row.updateTime == null ? "/" : scope.row.updateTime
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="380">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              icon="el-icon-search"
              size="mini"
              >查看</el-button
            >
            <el-button
              @click="EditClick(scope.row)"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="DeleteClick(scope.row)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row style="margin-top: 10px; text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNum"
        :page-sizes="[10, 20, 25, 30, 50]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </el-row>

    <!--新增/修改-->
    <el-dialog :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      width="20%"
      
      center
      @close="cancel()"
    >
      <el-form :model="form" ref="form" :inline="true" label-width="80px">
        <el-form-item label="名称:" prop="name">
          <el-input
            style="width: 200px"
            v-model="form.name"
            placeholder="请填写名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="别名:" prop="anotherName">
          <el-input
            style="width: 200px"
            v-model="form.anotherName"
            placeholder="请填写别名"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :v-if="dialogFormVisible" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false"
      title="字典信息"
      :visible.sync="openTable"
      width="90%"
      heigth="80%"
      
      center
    >
      <el-form :model="queryParamDia" ref="queryFormDia" :inline="true">
        <el-form-item label="过滤筛选:" prop="searchValue">
          <el-input
            v-model="queryParamDia.searchValue"
            placeholder="请输入字典名称或别名"
            clearable
            size="small"
            @keyup.enter.native="handleQueryDia"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQueryDia"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDia"
            >重置</el-button
          >
        </el-form-item>

        <el-form-item style="float: right; margin-right: 20px">
          <el-button
            @click="handleAddDia()"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            >新增字段</el-button
          >
        </el-form-item>
      </el-form>
      <el-row>
        <el-table
          stripe
          id="deviceTable"
          ref="multipleTable"
          :data="tableDataDia"
          @header-click="sort"
          v-loading="loading"
          border
          :header-cell-style="{
            //background:'#5E95E8',
            //color:'#FFFFFF',
            height: '25px',
            top: '0px',
            padding: '0px',
          }"
          :row-style="{ height: '25px' }"
          :cell-style="{ padding: '0px' }"
          style="top: 5px"
        >
          <el-table-column
            align="center"
            sortable
            prop="name"
            label="表名称"
            column-key="date"
          ></el-table-column>
          <el-table-column
            align="center"
            sortable
            prop="anotherName"
            label="表别名"
          ></el-table-column>

          <el-table-column
            align="center"
            sortable
            prop="updateTime"
            label="修改时间"
          >
            <template slot-scope="scope">
              <span type="primary" size="small">{{
                scope.row.updateTime == null ? "/" : scope.row.updateTime
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <el-button
                @click="EditClickDia(scope.row)"
                type="primary"
                size="mini"
                icon="el-icon-edit"
                >编辑</el-button
              >
              <el-button
                @click="DeleteClickDia(scope.row)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row style="margin-top: 10px; text-align: right">
        <el-pagination
          @size-change="handleSizeChangeDia"
          @current-change="handleCurrentChangeDia"
          :current-page="pageDataDia.pageNum"
          :page-sizes="[10, 20, 25, 30, 50]"
          :page-size="pageDataDia.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageDataDia.total"
        >
        </el-pagination>
      </el-row>

      <el-dialog :close-on-click-modal="false"
        width="30%"
        :title="title"
        :visible.sync="innerVisible"
        
        append-to-body
      >
        <el-form
          :model="formDia"
          ref="formDia"
          :inline="true"
          label-width="80px"
        >
          <el-form-item label="名称:" prop="name">
            <el-input
              style="width: 200px"
              v-model="formDia.name"
              placeholder="请填写名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="别名:" prop="anotherName">
            <el-input
              style="width: 200px"
              v-model="formDia.anotherName"
              placeholder="请填写别名"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button :v-if="dialogFormVisible" @click="cancelDia"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitFormDia">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addDict, updateDict, deleteDict } from "@/api/energy/dict.js";

export default {
  name: "dictManage",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,

      /*netTypeList:[{id:1,name:'4G'},{id:2,name:'无线'}],*/
      // 表格数据
      tableData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      dialogFormVisible: true,

      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParam: {
        searchValue: undefined,
        pid: 0,
        pageNum: 1,
        pageSize: 20,
      },
      pageData: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      // 表单参数
      options: [
        { value: 0, label: "表字段" },
        { label: "表名称", value: 1 },
        { label: "数据集", value: 2 },
      ],
      form: {
        id: "",
        name: "",
        anotherName: "",
        pid: 0,
      },
      classList: [],

      formType: 0,

      formDia: {
        id: "",
        name: "",
        anotherName: "",
        pid: "",
      },
      tableDataDia: [],
      openTable: false,

      pageDataDia: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      queryParamDia: {
        searchValue: undefined,
        pid: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      diaPid: undefined,

      innerVisible: false,

      // 表单校验
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        anotherName: [
          { required: true, message: "别名不能为空", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getList();
  },
  methods: {
    /** 查询网关列表 */
    getList() {
      this.loading = true;
      this.queryParam.pageNum = this.pageData.pageNum;
      this.queryParam.pageSize = this.pageData.pageSize;
      getList(this.queryParam).then((response) => {
        this.tableData = response.data.records;
        this.pageData.total = response.data.total;
        this.pageData.pageSize = response.data.size;
        this.pageData.pageNum = response.data.current;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    cancelDia() {
      this.open = false;
      this.resetDia();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },

    resetDia() {
      this.resetForm("formDia");
    },
    resetForm(form) {
      if (this.$refs[form]) {
        this.$refs[form].resetFields();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.formType = 0; //新增
      this.title = "新增字典数据";
      this.form.name = "";
      this.form.anotherName = "";
      this.form.pid = this.diaPid;
    },

    //新增字段的
    handleAddDia() {
      this.innerVisible = true;
      this.formType = 0; //新增
      this.title = "新增字段数据";
      this.formDia.name = "";
      this.formDia.anotherName = "";
      this.formDia.pid = this.diaPid;
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.formType == 1) {
            updateDict(this.form).then((response) => {
              if (response.code == "A0000") {
                this.$message({ message: "修改成功", type: "success" });
                this.open = false;
                this.getList();
              }
            });
          } else {
            this.form.pid = 0;
            addDict(this.form).then((response) => {
              if (response.code == "A0000") {
                this.$message({ message: "新增成功", type: "success" });
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },

    submitFormDia: function () {
      this.$refs["formDia"].validate((valid) => {
        if (valid) {
          if (this.formType == 1) {
            updateDict(this.formDia).then((response) => {
              if (response.code == "A0000") {
                this.$message({ message: "修改成功", type: "success" });
                this.innerVisible = false;
                this.getListDia();
              }
            });
          } else {
            addDict(this.formDia).then((response) => {
              if (response.code == "A0000") {
                this.$message({ message: "新增成功", type: "success" });
                this.innerVisible = false;
                this.getListDia();
              }
            });
          }
        }
      });
    },

    //点击获取字典类型表头字段等属性
    sort(column, event) {
      this.orderBy = column.order;
      this.sortBy = column.property;
      console.log(this.orderBy + "=============" + this.sortBy);
      this.getList();
    },

    //查看表下字段集
    handleClick(row) {
      this.openTable = true;
      this.queryParamDia.pid = row.id;
      this.diaPid = row.id;
      this.resetDia();
      this.getListDia();
    },
    getListDia() {
      this.loading = true;
      this.queryParamDia.pageNum = this.pageDataDia.pageNum;
      this.queryParamDia.pageSize = this.pageDataDia.pageSize;
      getList(this.queryParamDia).then((response) => {
        this.tableDataDia = response.data.records;
        this.pageDataDia.total = response.data.total;
        this.pageDataDia.pageSize = response.data.size;
        this.pageDataDia.pageNum = response.data.current;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQueryDia() {
      this.getListDia();
    },
    /** 重置按钮操作 */
    resetQueryDia() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //详情修改
    EditClick(row) {
      this.formType = 1;
      this.open = true;
      this.title = row.name + "详情修改";
      this.dialogFormVisible = true;

      this.form.id = row.id;
      this.form.name = row.name;
      this.form.anotherName = row.anotherName;
    },

    EditClickDia(row) {
      this.formType = 1;
      this.innerVisible = true;
      this.title = row.name + "详情修改";
      this.dialogFormVisible = true;

      this.formDia.id = row.id;
      this.formDia.name = row.name;
      this.formDia.anotherName = row.anotherName;
    },
    //详情删除
    DeleteClick(row) {
      this.$confirm("确认删除" + row.name + "吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDict(row.id).then((response) => {
            if ((response.code = "A0000")) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    DeleteClickDia(row) {
      this.$confirm("确认删除" + row.name + "吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDict(row.id).then((response) => {
            if ((response.code = "A0000")) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getListDia();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //分页
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageData.pageNum = val;
      this.getList();
    },

    //分页
    handleSizeChangeDia(val) {
      this.pageDataDia.pageSize = val;
      this.getListDia();
    },
    handleCurrentChangeDia(val) {
      this.pageDataDia.pageNum = val;
      this.getListDia();
    },
  },
};
</script>

<style scoped>
.ui-container {
  padding: 30px;
  height: 100%;
  width: 100%;
}
</style>
