<template>
  <div class="pd10">
    <!--查询条件    版本维护-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="装置系列:">
        <el-select
          v-model="formInline.devType"
          placeholder="请选择终端类型"
          clearable
        >
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选数据:">
        <el-input
        style="  width: 250px;"
          v-model="formInline.searchValue"
          placeholder="请输入版本号,版本协议或描述筛选"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="el-icon-plus" @click="add"
          >新 增</el-button
        >
        <el-button type="primary" class="el-icon-search" @click="queryData"
          >查 询</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          header-cell-class-name="table_header"
          highlight-current-row
          border
          stripe
          :row-config="{ isCurrent: true, isHover: true }"
          :row-class-name="rowClassName"
          :height="vh + 'px'"
          style="width: 100%"
        >
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="number"
            label="序号"
            width="70"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="devType"
            label="装置系列"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="name"
            label="版本号"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="protocol"
            label="版本协议"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="date"
            label="版本日期"
            min-width="100"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="updateBy"
            label="修改人员"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            min-width="100"
            prop="updateTime"
            label="修改时间"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.updateTime.replace("T", " ") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="remark"
            label="描述"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="versionType"
            label="版本类型"
            width="100"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="fileName"
            label="文件名称"
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="versionFlag"
            label="状态"
            width="180"
          >
            <template slot-scope="scope">
              <el-radio-group
                v-model="scope.row.versionFlag"
                size="mini"
                @change="checkbox(scope.row)"
              >
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="0">未启用</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"  icon="el-icon-edit"
                @click="editData(scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini" icon="el-icon-delete"
                @click="DeleteData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="mt10"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNum"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!--弹窗框-->
    <el-dialog :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"

    >
      <el-form ref="form" :rules="rules" :model="formData" label-width="100px" >
        <el-form-item label="版本号:" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入版本号"
          ></el-input>
        </el-form-item>
        <el-form-item label="协议版本:" class="top" prop="protocol">
          <el-input
            v-model="formData.protocol"
            placeholder="请输入协议版本"
          ></el-input>
        </el-form-item>
        <el-form-item label="版本日期:" class="top" prop="date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formData.date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="装置系列:" class="top" prop="devType">
          <el-select
            v-model="formData.devType"
            placeholder="请选择装置系列"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in teriminaloption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本类型:" class="top" prop="versionType">
          <el-input
            v-model="formData.versionType"
            placeholder="请输入版本类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述:" class="top" prop="remark">
          <el-input
            type="textarea"
            v-model="formData.remark"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>

        <el-form-item label="升级文件:"  class="top">
          <el-upload
            ref="upload"
            class="upload-demo"
            action=""
            :headers="headers"
            name="file"
            multiple
            :limit="1"
            accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
          >
            <div style="display: flex">
              <el-input style="width:100%"
                v-model="formData.filename"
                placeholder="请上传文件"
              ></el-input>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-upload2"
                class="ml20"
                style="display: inline; float: right"
                >点击上传</el-button
              >
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="CRC校验:" class="top" prop="crc">
          <el-input
            v-model="formData.crc"
            placeholder="请输入CRC校验"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" >保存</el-button>
          <el-button>取消</el-button>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          v-if="this.title == '新增装置'"
          @click="addData"
          >保 存</el-button
        >
        <el-button type="primary" v-else @click="upData">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProgramVersion,
  addProgramVersion,
  updateProgramVersion,
  delProgramVersion,
  updateVersionFlag,
} from "@/api/BusinessAdministrator/TerminalMaintenance";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  name: "versioningmage",
  data() {
    return {
      vh: undefined,
      formInline: {
        devType: "",
        searchValue: "",
        pageNum: 1,
        pageSize: 20,
      },
      total: 2,
      teriminaloption: "",
      height: "",
      dialogVisible: false,
      tableData: [],
      //表单
      formData: {
        id: "",
        name: "",
        protocol: "",
        date: "",
        devType: "",
        versionType: "",
        remark: "",
        crc: "",
        file: "",
        filename: "",
      },
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
        // {
        //   name: "food2.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      title: "",
      headers: {
        Authorization: window.sessionStorage.getItem("cntoken"),
      },
      rules: {
        name: [{ required: true, message: "请输入版本号", trigger: "blur" }],
        protocol: [{ required: true, message: "请输入协议版本", trigger: "blur" }],
        devType: [
          { required: true, message: "请选择装置系列", trigger: "change" },
        ],
        date: [{ required: true, message: "请选择日期", trigger: "change" }],
        crc: [{ required: true, message: "请输入CRC校验", trigger: "blur" }],
        remark: [{ required: true, message: "请输入描述", trigger: "blur" }],
        versionType: [
          { required: true, message: "请输入版本类型", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {

    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.queryData();
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {

          this.vh = window.sessionStorage.getItem("appheight") - 96;
        },
    //获取类型
    getclassificationData() {
      //监测点等级
      this.teriminaloption = dicData("Dev_Series", []);
    },
    //序号
    rowClassName({ row, rowIndex }) {
      row.number = rowIndex + 1;
    },
    //查询
    queryData() {
      getProgramVersion(this.formInline).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleChange(file, fileList) {
      // console.log(file, fileList);
      this.fileList = fileList;
      this.formData.filename = file.name;
      //获取上传文件大小
      let imgSize = Number(file.size / 1024 / 1024);

      if (imgSize > 8) {
        this.$msgbox({
          title: "",
          message: "文件大小不能超过8MB,请重新上传。",
          type: "warning",
        });
        return;
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.queryData();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.queryData();
    },
    //切换
    checkbox(row) {
      // console.log(row);
      let data = {
        id: row.id,
        versionFlag: row.versionFlag,
      };
      updateVersionFlag(data)
        .then((res) => {
          if ((res.code == "A0000")) {
            this.$message({
              type: "success",
              message: res.message,
            });
          }
          this.queryData();
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: res.message,
          });
        });
    },
    //删除
    DeleteData(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: row.id,
          };
          delProgramVersion(data).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.queryData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
     // 表单重置
     resetForm() {

      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.resetForm();
      // console.log(this.tableData);
      this.teriminaloption.forEach((item) => {
        this.tableData.forEach((data) => {
          if (data.devType == item.id) {
            data.devType = item.name;
          }
        });
      });
    },
    //修改
    editData(row) {
      // console.log(row);
      this.title = row.devType + "装置修改";
      this.formData = row;
      this.formData.filename = row.fileName;
      this.dialogVisible = true;
      this.teriminaloption.forEach((item) => {
        if (item.name == row.devType) {
          this.formData.devType = item.id;
        }
      });
    },
    //保存提交
    upData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const form = new FormData();
          form.append("id", this.formData.id);
          form.append("name", this.formData.name);
          form.append("protocol", this.formData.protocol);
          form.append("date", this.formData.date);
          form.append("devType", this.formData.devType);
          form.append("versionType", this.formData.versionType);
          form.append("remark", this.formData.remark);
          form.append("crc", this.formData.crc);
          form.append(
            "filename",
            this.formData.filename == undefined ? "/" : this.formData.filename
          );
          this.fileList.forEach((item) => {
            form.append("file", item.raw);
          });
          // console.log(form);
          updateProgramVersion(form)
            .then((res) => {
              if ((res.code == "A0000")) {
                this.$message({
                  type: "success",
                  message: res.message,
                });
              }
              this.dialogVisible = false;
              this.queryData();
            })
            .catch((err) => {
              //console.log(err);
            });
        }
      });
    },
    //新增
    add() {
      this.title = "新增装置";
      this.formData = {};
      this.fileList = [];
      this.dialogVisible = true;
    },
    //保存提交
    addData() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const form = new FormData();
          form.append("name", this.formData.name);
          form.append("protocol", this.formData.protocol);
          form.append("date", this.formData.date);
          form.append("devType", this.formData.devType);
          form.append("versionType", this.formData.versionType);
          form.append("remark", this.formData.remark);
          form.append("crc", this.formData.crc);
          form.append(
            "filename",
            this.formData.filename == undefined ? "/" : this.formData.filename
          );
          this.fileList.forEach((item) => {
            form.append("file", item.raw);
          });

          addProgramVersion(form)
            .then((res) => {
              if ((res.code == "A0000")) {
                this.$message({
                  type: "success",
                  message: res.message,
                });
              }
              this.dialogVisible = false;
              this.queryData();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
// ::v-deep .el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }

</style>
