<!--流量策略-->
<template>
  <div class="pd10">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <div style="display: flex">
        <el-form-item label="筛选">
          <el-input v-model="searchContent" placeholder="请输入内容"></el-input>
        </el-form-item>
        <div
          style="display: flex; justify-content: space-between; flex-grow: 1"
        >
          <el-form-item>
            <!-- <el-button  type="primary" class="ml10" icon="el-icon-search" @click="steady">查询</el-button> -->
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="ml10"
              @click="add"
              icon="el-icon-plus"
              >新增</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table
      stripe
      :data="tableData"
      border
      :height="height + 'px'"
      header-cell-class-name="table_header"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="name"
        label="策略名"
      ></el-table-column>
      <el-table-column align="center" prop="flag" label="策略类型">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.flag === 0">定制</el-tag>
          <el-tag type="primary" v-if="scope.row.flag === 1">默认通用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="updateBy"
        label="修改人"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="updateTime"
        label="修改时间"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="comPerData"
        label="普通占比(%)"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="warnPerData"
        label="预警占比(%)"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="alertPerData"
        label="告警占比(%)"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="deleteData(scope.row)"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--新增策略弹框-->
    <el-dialog
      :close-on-click-modal="false"
      :title="title + '策略'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="策略名称:" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="策略类型:" class="top" prop="flag">
          <el-select
            v-model="formData.flag"
            placeholder="请选择类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in tcoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="普通占比(%):" class="mt10" prop="comPerData">
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-grow: 2;
              "
            >
              <el-input
                v-model="formData.comPerData"
                style="width:50%"
              ></el-input>
              <el-select
                v-model="formData.comList"
                multiple
                collapse-tags
                placeholder="请选择"
             
              >
                <el-option
                  v-for="item in listOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="预警占比(%):" class="mt10" prop="warnPerData">
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-grow: 2;
              "
            >
              <el-input
                v-model="formData.warnPerData"
                style="width:50%"
              ></el-input>
              <el-select
                v-model="formData.warnList"
                multiple
                collapse-tags
                placeholder="请选择"
             
              >
                <el-option
                  v-for="item in listOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="告警占比(%):" class="mt10" prop="alertPerData">
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-grow: 2;
              "
            >
              <el-input
                v-model="formData.alertPerData"
                style="width:50%"
              ></el-input>
              <el-select
                v-model="formData.alertList"
                multiple
                collapse-tags
                placeholder="请选择"
              
              >
                <el-option
                  v-for="item in listOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitData('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import flow from "@/api/device/flow";
import { dicData } from "@/assets/commjs/dictypeData";

export default {
  name: "flowmage",
  data() {
    return {
      dialogVisible: false,
      type: 0, //0新增 1修改
      search: "",
      searchContent: "",
      height: "",
      form: {},

      formData: {
        name: "",
        flag: 1,
        comPerData: null,
        warnPerData: null,
        alertPerData: null,
        comList: [],
        warnList: [],
        alertList: [],
      },
      stashList: [],
      rules: {
        name: [
          { required: true, message: "请输入流量策略名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        flag: [
          { required: true, message: "策略类型不可为空", trigger: "blur" },
        ],
        comPerData: [
          { required: true, message: "普通占比不可为空", trigger: "blur" },
        ],
        warnPerData: [
          { required: true, message: "预警占比不可为空", trigger: "blur" },
        ],
        alertPerData: [
          { required: true, message: "告警占比不可为空", trigger: "blur" },
        ],
      },
      tcoptions: [
        {
          value: 0,
          label: "定制",
        },
        {
          value: 1,
          label: "默认通用",
        },
      ],
      tableData: [],
      title: "",
      listOptions: [],
    };
  },
  watch: {
    searchContent: {
      handler(newValue, oldValue) {
        let self = this;
        if (newValue) {
          //这里要从暂存的所有数据中过滤 放到展示的数组中
          self.tableData = self.stashList.filter((item) => {
            return item.name.includes(newValue);
          });
        } else {
          self.tableData = self.stashList;
        }
      },
      deep: true,
    },
  },
  created() {
    this.getList();
    this.getDevFun();
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {

    this.height = window.sessionStorage.getItem("appheight") - 65;
          
        },
    //改变页触发方法
       // 表单重置
      resetForm2() {
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
    },
    //修改方法
    handleClick(row) {
      this.type = 1;
      flow.getFlowStrategyById(row.id).then((res) => {
        this.formData = {
          id: res.data.id,
          name: res.data.name,
          flag: res.data.flag,
          comPerData: res.data.comPerData,
          warnPerData: res.data.warnPerData,
          alertPerData: res.data.alertPerData,
          comList: res.data.comList,
          warnList: res.data.warnList,
          alertList: res.data.alertList,
        };
      }),
        (this.dialogVisible = true);
      this.title = "修改";
    },
    //删除方法
    deleteData(row) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          flow.deleteRateOfFlowStrategy(row.id).then((response) => {
            if (response.code === "A0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.resetForm2()
    },
    //新增
    add() {
      this.type = 0;
      (this.formData = {
        name: "",
        flag: 1,
        comPerData: null,
        warnPerData: null,
        alertPerData: null,
        comList: [],
        warnList: [],
        alertList: [],
      }),
        (this.dialogVisible = true);
      this.title = "新增";
    },
    //提交
    submitData(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (
            this.formData.comList == [] ||
            this.formData.warnList == [] ||
            this.formData.alertList.length == []
          ) {
            this.$message.warning("装置功能不可为空");
            return;
          }
          if (this.type === 0) {
            flow.addRateOfFlowStrategy(this.formData).then((response) => {
              if (response.code === "A0000") {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.getList();
              }
            });
          } else {
            flow.updateRateOfFlowStrategy(this.formData).then((response) => {
              if (response.code === "A0000") {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //获取主列表
    getList() {
      flow.getFlowStrategyList().then((response) => {
        if (response.code === "A0000") {
          this.tableData = response.data;
          this.stashList = this.tableData; //暂存数组  当搜索为空时候  数组展示所有数据
        }
      });
    },

    //获取所有装置功能
    getDevFun() {
      let code = "Dev_Fun";
      this.listOptions = dicData(code, []);
    },
  },
};
</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>
