<template>
  <div style="padding: 0.5% 0.5%">
    <el-row>
      <el-col :span="24">
        <!--终端型号-->
        <span style="font-weight: ; font-size: 14px">终端型号:</span>
        <el-select v-model="teriminal" placeholder="请选择终端型号">
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!--终端状态-->
        <span style="font-weight: ; font-size: 14px">终端状态:</span>
        <el-select v-model="teriminalstatus" placeholder="请选择终端状态">
          <el-option
            v-for="item in teriminalstatusoption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!--通讯状态-->
        <span style="font-weight: ; font-size: 14px">通讯状态:</span>
        <el-select v-model="state" placeholder="请选择通讯状态">
          <el-option
            v-for="item in stateoption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!--程序版本-->
        <span style="font-weight: ; font-size: 14px">程序版本:</span>
        <el-select v-model="program" placeholder="请选择程序版本">
          <el-option
            v-for="item in programoption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="el-icon-upload2">导出</el-button>
        <el-button type="primary" icon="el-icon-check">批量升级</el-button>
        <span style="font-weight: ; font-size: 14px">数据筛选:</span>
        <el-input
          v-model="search"
          placeholder="输入关键字筛选"
          @input="filert"
          clearable
          @clear="clear"
          style="width: 10%"
        />
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 0.5%">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        v-loading="loading"
        highlight-current-row
        :load="load"
        lazy
        :expand-row-keys="expandRow"
        @selection-change="handleSelectionChange"
        :height="tableheight + 'px'"
        :header-cell-style="{
          height: '25px',
          top: '0px',
          padding: '0px',
        }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          :selectable="selected"
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="name"
          label="电网拓扑"
          :show-overflow-tooltip="true"
          width="200"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="devType"
          label="终端型号"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="versionName"
          label="版本号"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="protocol"
          label="协议版本"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="versionDate"
          label="版本日期"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="runFlag"
          label="终端状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.runFlag === 0">投运</el-tag>
            <el-tag type="primary" v-if="scope.row.runFlag === 1"
              >热备用</el-tag
            >
            <el-tag type="primary" v-if="scope.row.runFlag === 2">停运</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          prop="comFlag"
          label="通讯状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.comFlag === 0">中断</el-tag>
            <el-tag type="primary" v-if="scope.row.comFlag === 1">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          prop="updateUser"
          label="升级人员"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          prop="updateTime"
          label="最新升级时间"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          min-width="150"
          width="260"
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.level == 4"
              type="primary"
              size="mini"
              @click="updateprogram(scope.row)"
              >升级</el-button
            >
            <el-button
              v-if="scope.row.level == 4"
              :disabled="scope.row.state == 1 ? true : false"
              type="primary"
              size="mini"
              @click="queryview(scope.row)"
              >日志查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--升级日志查看-->
      <el-dialog
        :close-on-click-modal="false"
        :title="title + '#终端升级日志查看'"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <el-table
          stripe
          :data="logtableData"
          border
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column
            prop="date"
            align="center"
            label="序号"
            width="88"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="目标版本"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="升级结果"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="升级时间"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="升级人员"
          ></el-table-column>
        </el-table>
      </el-dialog>
      <!--升级弹窗-->
      <el-dialog
        :close-on-click-modal="false"
        :title="protitle + '#终端程序升级'"
        :visible.sync="prodialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-col v-for="(item, index) in percentageoption" :key="index">
          <span style="font-weight: bold; font-size: 14px">{{ item.name }}</span
          >:
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="item.percentage"
            :status="item.status"
            :format="format"
          ></el-progress>
        </el-col>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import { getheight } from "@/assets/commjs/common";
import version from "@/api/device/version.js";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  data() {
    return {
      search: "",
      loading: false,
      dialogVisible: false,
      prodialogVisible: false,
      expandRow: [],
      filertData: {},
      treeData: {},
      treeData2: {},
      treeData3: {},
      treeData4: {},
      title: "",
      protitle: "",
      tableheight: "",
      device: 1,
      //终端型号
      teriminal: "",
      teriminaloption: [],
      //终端状态
      teriminalstatus: "",
      teriminalstatusoption: [
        { name: "全部", id: "" },
        { name: "投运", id: 0 },
        { name: "热备用", id: 1 },
        { name: "停运", id: 2 },
      ],
      //通讯状态
      state: "",
      stateoption: [
        { name: "全部", id: "" },
        { name: "正常", id: 1 },
        { name: "中断", id: 0 },
      ],
      //程序版本
      program: "",
      programoption: [],
      //列表
      tableData: [],

      //弹窗列表
      logtableData: [],
      status: "",
      //进度条对象
      percentageoption: [
        {
          name: "1号测试终端",
          status: "exception",
          percentage: 20,
        },
        {
          name: "2号测试终端",
          status: "warning",
          percentage: 50,
        },
        {
          name: "3号测试终端",
          status: "success",
          percentage: 90,
        },
      ],
    };
  },

  created() {
    this.getDevType();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.tableheight = getheight() * 2.18;
    }
    if (this.device == 1.25) {
      this.tableheight = getheight() * 1.72;
    }
    if (this.device == 1.5) {
      this.tableheight = getheight() * 1.93;
    }
    this.getList();
  },
  methods: {
    selected(row, index) {
      if (row.level !== 4) {
        return false; //不可勾选
      } else {
        return true; //可勾选
      }
    },
    //日志查看
    queryview(row) {
      this.title = row.name;
      this.dialogVisible = true;
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.prodialogVisible = false;
    },
    //升级操作
    updateprogram(row) {
      this.protitle = row.name;
      this.prodialogVisible = true;
    },
    format(percentage) {
      if (percentage <= 100 && percentage >= 90) {
        this.status = "success";
        return percentage === 100 ? "升级成功" : `${percentage}%`;
      } else if (percentage > 0 && percentage < 50) {
        this.status = "exception";
        return percentage <= 20
          ? "升级失败" + percentage + "%"
          : `${percentage}%`;
      } else if (percentage > 0 && percentage <= 50) {
        this.status = "warning";
        return percentage <= 50 ? "升级中断" : `${percentage}%`;
      }
    },
    //批量操作
    handleSelectionChange(val) {
    //  console.log(val);
    },
    //获取所有终端型号
    getDevType() {
      var code = "Dev_Type";
      this.teriminaloption = dicData(code, [], 1);
    },
    //查看主列表
    getList() {
      let a = new Date().getTime();
      let data = {
        comFlag: this.state,
        runFlag: this.teriminalstatus,
        devType: this.teriminal,
        version: this.program,
      };
      version.getList(data).then((response) => {
        if (response.code === "A0000") {
          this.filertData = JSON.parse(JSON.stringify(response.data));
          this.treeData = JSON.parse(JSON.stringify(response.data));
          this.treeData2 = JSON.parse(JSON.stringify(this.treeData));
          this.treeData3 = JSON.parse(JSON.stringify(this.treeData));
          this.treeData4 = JSON.parse(JSON.stringify(this.treeData));
          var data = response.data;
          data.forEach((m) => {
            delete m.children;
            m.hasChildren = true;
          });
          this.tableData = data;
        }
      });

      // this.tableData = response.data
    },
    load(tree, treeNode, resolve) {
      //console.log(tree)
      // console.log(treeNode)
      if (tree.level == 1) {
        var childrenData = [];
        for (var i = 0; i < this.treeData.length; i++) {
          if (tree.id == this.treeData[i].id) {
            childrenData = this.treeData[i].children;
            childrenData.forEach((n) => {
              delete n.children;
              n.hasChildren = true;
            });
            setTimeout(() => {
              resolve(childrenData);
            }, 30);
          }
        }
      } else if (tree.level == 2) {
        var childrenData = [];
        for (var i = 0; i < this.treeData2.length; i++) {
          for (var j = 0; j < this.treeData2[i].children.length; j++) {
            if (tree.id == this.treeData2[i].children[j].id) {
              childrenData = this.treeData2[i].children[j].children;
              childrenData.forEach((n) => {
                delete n.children;
                n.hasChildren = true;
              });
              setTimeout(() => {
                resolve(childrenData);
              }, 30);
            }
          }
        }
      } else if (tree.level == 3) {
        var childrenData = [];
        for (var i = 0; i < this.treeData3.length; i++) {
          for (var j = 0; j < this.treeData3[i].children.length; j++) {
            for (
              var k = 0;
              k < this.treeData3[i].children[j].children.length;
              k++
            ) {
              if (tree.id == this.treeData3[i].children[j].children[k].id) {
                childrenData =
                  this.treeData3[i].children[j].children[k].children;
                childrenData.forEach((n) => {
                  delete n.children;
                  n.hasChildren = false;
                });
                setTimeout(() => {
                  resolve(childrenData);
                }, 30);
              }
            }
          }
        }
      }
    },
    //input输入事件
    filert(value) {
      this.tableData = [];
      let handleTreeData = this.handleTreeData(this.filertData, value);
      this.setExpandRow(handleTreeData);
      this.expandRow = this.expandRow.join(",").split(",");
      this.tableData = handleTreeData;
    },
    //清除
    clear() {
      this.getList();
    },
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return [];
      }
      const array = [];
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false;
        for (let pro in treeData[i]) {
          if (typeof treeData[i][pro] == "string") {
            match |= treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }
        if (
          this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
          match
        ) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue),
          });
        }
      }
      return array;
    },
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.id);
          if (i.children.length) {
            this.setExpandRow(i.children);
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
  //background: $themeColor;
  background: rgb(105, 114, 122);
  color: aliceblue;
}
</style> >
