<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <p>添加数据类型</p>
        <el-form
          style="margin-top: 10px"
          :inline="false"
          :model="dataType"
          status-icon
          :rules="rules"
          ref="dataTypeForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataType.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公式">
            <el-input
              v-model="dataType.expression"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="采集方法" prop="method">
            <el-select v-model="dataType.method">
              <el-option label="485" value="0"></el-option>
              <el-option label="PLC" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值类型" prop="method">
            <el-select v-model="dataType.valueType">
              <el-option label="模拟量" value="0"></el-option>
              <el-option label="开光量" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="description">
            <el-input v-model="dataType.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addDataType('dataTypeForm')"
              >添加</el-button
            >
            <el-button @click="resetForm('dataTypeForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <template>
        <el-card style="margin-top: 10px" class="box-card">
          <p>数据类型</p>
          <el-table :data="allDataTypes" style="width: 100%">
            <el-table-column label="ID" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名称" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="采集方法" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.method == 0">485</span>
                <span v-if="scope.row.method == 1">PLC</span>
              </template>
            </el-table-column>
            <el-table-column label="值类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.valueType == 0">模拟量</span>
                <span v-if="scope.row.valueType == 1">开关量</span>
              </template>
            </el-table-column>
            <el-table-column label="公式" width="280">
              <template slot-scope="scope">
                <span>{{ scope.row.expression }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="280">
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template> </el-table-column
            ><el-table-column label="创建时间" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.updateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="修改数据类型"
            :visible.sync="dialogVisible"
            width="70%"
            :close-on-click-modal="false"
            :show-close="false"
          >
            <el-container>
              <el-main>
                <el-form
                  ref="updateDataTypeForm"
                  style="margin-top: 10px"
                  :model="editDataType"
                  status-icon
                  :rules="rules"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="名称" prop="apiUrl">
                    <el-input v-model="editDataType.name" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="公式" prop="username">
                    <el-input v-model="editDataType.expression" />
                  </el-form-item>

                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="editDataType.remark"
                      autocomplete="off"
                    />
                  </el-form-item>
                  <el-form-item label="采集方法" prop="method">
                    <el-select v-model="editDataType.method">
                      <el-option label="全部" value="ALL"></el-option>
                      <el-option label="查看" value="GET"></el-option>
                      <el-option label="添加" value="PUT"></el-option>
                      <el-option label="修改" value="POST"></el-option>
                      <el-option label="删除" value="DELETE"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="updateDataType('updateDataTypeForm')"
                      >确认</el-button
                    >
                    <el-button @click="cancel()">取消</el-button>
                  </el-form-item>
                </el-form>
              </el-main>
            </el-container>
          </el-dialog>
        </el-card>
      </template></el-main
    ></el-container
  >
</template>

  </el-main>
</el-container>
  
</template>
<script>
export default {
  computed: {
    allDataTypes() {
      return this.$store.getters.allDataTypes;
    },
  },
  data() {
    return {
      dialogVisible: false,
      dataType: {
        name: "",
        expression: "",
        method: "0",
        valueType: "0",
        remark: "",
      },
      editDataType: {
        name: "",
        expression: "",
        method: "",
        valueType: "",
        remark: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.editDataType = row;
      this.dialogVisible = true;
    },
    cancel() {
      // this.$store.dispatch('role/getAllRoles')
      //  this.$store.dispatch('user/getAllUsers')
      this.dialogVisible = false;
    },

    updateDataType(formName) {
      console.log("start to update DataType-1", this.editDataType);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("start to update DataType0", this.editUser);

          this.$store
            .dispatch("dataType/updateDataType", this.editDataType)
            .then((res) => {
              if (res.data.success) {
                this.$message({ message: "修改接口信息成功", type: "success" });
                this.editDataType = res.data.data;
                this.$store.dispatch("DataType/getAllallDataTypes");
              } else {
                console.log("修改接口信息失败!", res);
                this.$message({
                  message: "修改接口信息失败!" + res.data.info,
                  type: "error",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除此数据类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("dataType/deleteDataType", row)
            .then((res) => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$store.dispatch("dataType/getAllDataTypes");
              } else {
                this.$message({
                  message: "删除失败!" + res.data.info,
                  type: "error",
                });
              }
            })
            .catch((error) => {
              this.$message({
                message: "删除失败!" + res.data.info,
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addDataType(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("start to add dataType0", this.dataType);
          this.$store
            .dispatch("dataType/addDataType", this.dataType)
            .then((res) => {
              if (res.data.success) {
                this.$message({ message: "添加权限成功", type: "success" });
                this.$store.dispatch("dataType/getAllDataTypes");
              } else {
                console.log("添加权限失败!", res);
                this.$message({
                  message: "添加权限失败!" + res.data.info,
                  type: "error",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    console.log("created");
    this.$store.dispatch("dataType/getAllDataTypes");
  },
};
</script>