<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="5" class="mb8">
        <el-col :span="24">
          <!-- v-hasPermi="['topology:index:add']" -->
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addTopology"
            >创建组态</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addJob"
            >定时任务</el-button
          >
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addDict"
            >字典</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card v-loading="loading">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="(item, index) of topologyList"
                :key="index"
              >
                <el-card :body-style="{ padding: '0px' }">
                  <div @click="previeData(item)">
                    <preview-to-img
                      :canvasData="changeJson(item.data)"
                      :width="'100%'"
                      :height="'20vh'"
                      :title="'点击预览'"
                    ></preview-to-img>
                  </div>
                  <div style="padding: 14px">
                    <el-row>
                      <el-col :span="19">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.name"
                          placement="top-start"
                        >
                          <span>{{ splitName(item.name) }}</span>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="4">
                        <span>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="显示/隐藏"
                            placement="top-start"
                          >
                            <!-- v-hasPermi="['topology:index:showhide']" -->
                            <el-switch
                              v-model="item.switchIt"
                              active-value="1"
                              inactive-value="0"
                              @change="handleSwitchItChange(item)"
                            ></el-switch>
                          </el-tooltip>
                        </span>
                      </el-col>
                    </el-row>

                    <div class="bottom clearfix">
                      <!-- <time class="time">2021-04-29 00:00:00</time> -->
                      <!-- v-hasPermi="['topology:index:edit']" -->
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-s-tools"
                        @click="uploadTopology(item)"
                        >修改组态</el-button
                      >
                      <!-- v-hasPermi="['topology:params:set']" -->
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-s-tools"
                        @click="handleAdd(item)"
                        >采集参数设置</el-button
                      >
                      <!-- v-hasPermi="['topology:index:delete']" -->
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="removeTopology(item.id)"
                        >删除</el-button
                      >
                      <!-- v-hasPermi="['topology:params:set']" -->
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-s-tools"
                        @click="handleMutual(item)"
                        >交互参数设置</el-button
                      >
                      <!-- v-hasPermi="['topology:index:deleteTopologyHandle']" -->
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="removeTopologyHandle(item.id)"
                        >清空原有配置</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="init()"
            />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <add-params ref="addParams" @ok="paramsSet"></add-params>
    <add-mutual ref="addMutual" @ok="mutualSet"></add-mutual>
  </div>
</template>

<script>
import AddParams from "./modules/AddParams.vue";
import AddMutual from "./modules/AddMutual.vue";
import PreviewToImg from "@/components/topology/PreviewToImg.vue";
import { deleteTopologyHandle, list, deleteTopology } from "@/api/topology.js";
export default {
  name: "ParamsConfig",
  props: {
    editorUrl: {
      type: String,
      default: () => {
        return "/toplogyView/workspace";
      },
    },
    previewUrl: {
      type: String,
      default: () => {
        return "/toplogyView/preview";
      },
    },
  },
  components: {
    AddParams,
    PreviewToImg,
    AddMutual,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      topologyList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    splitName(name) {
      if (name.length > 15) {
        return name.substr(0, 16) + "...";
      }
      return name;
    },
    handleSwitchItChange(row) {
      let text = row.switchIt === "0" ? "隐藏" : "显示";
      this.$confirm('确认要"' + text + '""' + row.name + '"吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          let params = {};
          params.switchIt = row.switchIt;
          params.id = row.id;
          return updateTopology(params);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.switchIt = row.switchIt === "0" ? "1" : "0";
        });
    },
    changeJson(data) {
      return JSON.parse(data);
    },
    previeData(row) {
      this.$router.push({
        path: this.previewUrl,
        query: {
          id: row.id,
        },
      });
    },
    async init() {
      this.loading = true;
      await list(this.queryParams).then((res) => {
        this.topologyList = res.rows;
        this.total = res.total;
      });
      this.loading = false;
    },
    uploadTopology(row) {
      this.$router.push({
        path: this.editorUrl,
        query: {
          id: row.id,
        },
      });
    },
    addTopology() {
      this.$router.push({
        path: this.editorUrl,
      });
    },
    addJob() {
      this.$router.push({
        path: "/toplogyView/job",
      });
    },
    addDict() {
      this.$router.push({
        path: "/toplogyView/dict/type",
      });
    },
    removeTopology(id) {
      this.$confirm("确认要删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteTopology(id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.init();
          }
        });
      });
    },
    removeTopologyHandle(id) {
      this.$confirm("确认要删除原有配置吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteTopologyHandle(id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除原有配置成功");
            this.init();
          }
        });
      });
    },
    paramsSet() {
      this.init();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      let params = JSON.parse(row.data);
      if (!params.websocket && !params.mqttUrl) {
        this.$message.warning("未设置webscoket或mqttUrl");
        return;
      }
      console.log(this.$refs);
      this.$refs.addParams.update(row);
    },
    handleMutual(row) {
      this.$refs.addMutual.init(row);
    },
    mutualSet() {
      this.init();
    },
  },
};
</script>
<style>
.el-col {
  margin-bottom: 10px;
}
</style>