<template>
  <section class="app-container">
    <el-row>
      <el-col :span="4">
        <region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
      </el-col>
      <el-col :span="20">
        <el-form :inline="true" size="small" v-show="showSearch">
          <el-form-item label="产品">
            <el-select v-model="queryParams.productId" clearable placeholder="请选择" @change="queryProductIdChange">
              <el-option v-for="item in queryProductSelectList" :key="item.id" :label="item.productName" :value="item.productId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="节点">
            <el-select v-model="queryParams.nodeDataId" clearable placeholder="请选择">
              <el-option v-for="item in queryNodeSelectList" :key="item.id" :label="item.nodeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户">
            <el-select v-model="queryParams.userId" clearable placeholder="请选择" @change="queryUserIdChange">
              <el-option v-for="item in queryUserSelectList" :key="item.id" :label="item.nickName" :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目">
            <el-select v-model="queryParams.projectId" clearable placeholder="请选择">
              <el-option v-for="item in queryProjectSelectList" :key="item.id" :label="item.projectName" :value="item.projectId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备SN">
            <el-input v-model="queryParams.nodeId" placeholder="请输入设备SN" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" 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>
        <el-row class="mb8">
          <el-col :span="1.5">
            <el-button size="mini" type="primary" icon="el-icon-set-up" @click="handleOTAUpdate">批量升级</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" prop="nodeId" label="节点SN">
          </el-table-column>
          <el-table-column align="center" prop="deviceId" label="设备SN">
          </el-table-column>
          <el-table-column align="center" prop="productName" label="产品名称">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="所属客户">
          </el-table-column>
          <el-table-column align="center" prop="projectName" label="所属项目">
          </el-table-column>
          <el-table-column align="center" prop="nowVersion" label="当前软件版本">
          </el-table-column>
          <el-table-column align="center" prop="version" label="可升级软件版本">
          </el-table-column>
          <el-table-column align="center" prop="onUpdateTime" label="上次升级时间">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleOneOTAUpdate(scope.row)">
                升级
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
  </section>
</template>

<script>
import Region from "@/components/Region";

import { list, OTAUpdate, OTAUpdates } from "@/api/firmware/firmwareupdate";
import { select as projectSelect } from "@/api/hardware/project";
import { select as productSelect } from "@/api/hardware/product";
import { productNodeList, productNodeSelect } from "@/api/hardware/productNode";
import { userSelect } from "@/api/system/user";


export default {
  name: "FirmwareUpdate",
  components: {
    Region,
  },
  data () {
    return {
      showSearch: true,
      queryProductSelectList: [],
      queryNodeSelectList: [],
      queryUserSelectList: [],
      queryProjectSelectList: [],
      value: '',
      options: '',
      input: '',
      ids: [],
      // 表格数据
      tableData: null,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created () {
    productSelect().then(({ code, msg, select }) => {
      if (code == 200) {
        this.queryProductSelectList = select;
      } else {
        this.$message.error(msg);
      }
    })
    userSelect().then(({ code, msg, select }) => {
      if (code == 200) {
        this.queryUserSelectList = select;
      } else {
        this.$message.error(msg);
      }
    })
    this.getList();
  },
  methods: {
    queryProductIdChange (productId) {
      delete this.queryParams.nodeId;
      productNodeSelect({ productId }).then(({ code, msg, select }) => {
        if (code == 200) {
          this.queryNodeSelectList = select;
        } else {
          this.$message.error(msg);
        }
      })
    },
    queryUserIdChange (userId) {
      delete this.queryParams.projectId;
      projectSelect({ userId }).then(({ code, msg, select }) => {
        if (code == 200) {
          this.queryProjectSelectList = select;
        } else {
          this.$message.error(msg);
        }
      })
    },
    selectdRegionCode ({ code }) {
      this.queryParams.provinceCode = code;
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleOneOTAUpdate ({ productId, nodeId, deviceId }) {
      this.$confirm(`是否确认升级${deviceId}?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.OTAUpdate([{ productId, nodeId, deviceId }])
      }).catch((res) => { });
    },
    handleOTAUpdate () {
      if (this.ids.length) {
        let snap = this.ids.map(({ productId, nodeId, deviceId }) => {
          return { productId, nodeId, deviceId }
        });
        const h = this.$createElement;
        this.$confirm(`是否确认批量升级\r\n${snap.map(v => v.deviceId).join(',\r\n')}?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.OTAUpdate(snap);
        }).catch((res) => { });

      } else {
        let snap = Object.assign({}, this.queryParams);
        delete snap.pageNum;
        delete snap.pageSize;
        this.OTAUpdates(snap);
      }
    },

    OTAUpdate (device) {
      OTAUpdate({ device }).then(({ code, msg }) => {
        if (200 == code) {
          this.msgSuccess(msg)
        } else {
          this.msgError(msg)
        }
      })
    },
    OTAUpdates (deviceNode) {
      OTAUpdates(deviceNode).then(({code, msg}) => {
        if (200 == code) {
          this.msgSuccess(msg)
        } else {
          this.msgError(msg)
        }
      })
    },
    resetQuery () {
      this.queryParams = { pageNum: 1, pageSize: 10 };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      console.log(selection)
      this.ids = selection;
    },
    getList () {
      list(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    handleUpdate () { },
  }

}
</script>

<style>
</style>