<template>
  <div class="pd10">
    <el-form :inline="true" 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-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="add"
              icon="el-icon-plus"
              >新增</el-button
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基础套餐" name="first">
        <el-col :span="24">
          <el-table
            stripe
            :data="tableData"
            header-cell-class-name="table_header"
            border
            :height="height + 'px'"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column
              align="center"
              prop="name"
              label="套餐名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="flow"
              label="套餐流量(MB)"
            ></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="type" label="套餐类型">
              <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.type === 0"
                  >基础套餐</el-tag
                >
                <el-tag type="primary" v-if="scope.row.type === 1"
                  >扩展套餐</el-tag
                >
              </template>
            </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 label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="edit(scope.row)"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >修改</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-col>
      </el-tab-pane>
      <el-tab-pane label="扩展套餐" name="second">
        <el-col :span="24">
          <el-table
            stripe
            :data="tableDataExtend"
            header-cell-class-name="table_header"
            border
            :height="height + 'px'"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column
              align="center"
              prop="name"
              label="套餐名"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="flow"
              label="套餐流量(MB)"
            ></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="type" label="套餐类型">
              <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.type === 0"
                  >基础套餐</el-tag
                >
                <el-tag type="primary" v-if="scope.row.type === 1"
                  >扩展套餐</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column align="center" 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 label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="edit(scope.row)"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >修改</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-col>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :close-on-click-modal="false"
      :title="title + '套餐'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="formd" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="套餐名称:" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="套餐流量:" class="top" prop="flow">
          <el-input v-model.number="formData.flow"></el-input>
        </el-form-item>
        <el-form-item label="套餐类型:" class="top" prop="type">
          <el-select
            v-model="formData.type"
            :disabled="falg"
            placeholder="请选择套餐类型"
            @change="relationEvent"
            style="width: 100%"
          >
            <el-option
              v-for="item in tclxoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </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 erjitcoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </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";
export default {
  name: "packagemanage",
  components: {},
  data() {
    return {
      falg: false,
      dialogVisible: false,
      searchContent: "",
      height: null,
      type: 0, //0.新增 1.修改
      formData: {
        name: "",
        flow: null,
        type: 0,
        flag: 1,
      },
      activeName: "first",
      tcoptions: [],
      tclxoptions: [
        { id: 0, name: "基础套餐" },
        { id: 1, name: "扩展套餐" },
      ],
      erjitcoptions: [
        { id: 0, name: "其他" },
        { id: 1, name: "默认套餐" },
      ],
      tableData: [],
      search: "",
      tableDataExtend: [],
      stashList: [],
      stashListExtend: [],
      title: "",
      rules: {
        name: [
          { required: true, message: "请输入套餐名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        flow: [
          { required: true, message: "请输入套餐流量", trigger: "blur" },
          { type: "number", message: "流量必须为数字值", trigger: "blur" },
        ],
        type: [{ required: true, message: "套餐类型不为空", trigger: "blur" }],
        flag: [{ required: true, message: "默认类型不为空", trigger: "blur" }],
      },
    };
  },
  watch: {
    searchContent: {
      handler(newValue, oldValue) {
        let self = this;
        if (newValue) {
          //这里要从暂存的所有数据中过滤 放到展示的数组中
          self.tableData = self.stashList.filter((item) => {
            return item.name.includes(newValue);
          });

          self.tableDataExtend = self.stashListExtend.filter((item) => {
            return item.name.includes(newValue);
          });
        } else {
          self.tableData = self.stashList;
          self.tableDataExtend = self.stashListExtend;
        }
      },
      deep: true,
    },
  },
  created() {
    this.getList();
  },
  mounted() {
   
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.height = window.sessionStorage.getItem("appheight") - 110;
          
        },
    handleClick() {
      if (this.activeName === "first") {
        this.formData.type = 0;
      } else {
        this.formData.type = 1;
      }
      this.relationEvent();
    },

    //修改方法
    edit(row) {
      this.falg = true;
      this.dialogVisible = true;
      this.type = 1;
      this.title = "修改";
      this.formData.name = row.name;
      this.formData.flow = row.flow;
      this.formData.type = row.type;
      this.formData.flag = row.flag;
      this.formData.id = row.id;
    },
    //删除方法
    deleteData(row) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          flow.deleteRateOfFlowData(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()
    },
     // 表单重置
     resetForm2() {
      if (this.$refs["formd"]) {
        this.$refs["formd"].resetFields();
      }
    },
    //新增
    add() {
      this.falg = false;
      this.formData.name = "";
      this.formData.flow = "";
      this.formData.flag = 0;
      this.type = 0;
      this.dialogVisible = true;
      this.title = "新增";
    },
    //提交
    submitData(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.type === 0) {
            flow.addRateOfFlowData(this.formData).then((response) => {
              if (response.code === "A0000") {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.getList();
              }
            });
          } else {
            flow.updateRateOfFlowData(this.formData).then((response) => {
              if (response.code === "A0000") {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.falg = false;
                this.getList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    relationEvent() {
      if (this.formData.type === 0) {
        this.erjitcoptions = [
          { id: 0, name: "其他" },
          { id: 1, name: "默认套餐" },
        ];
      } else {
        this.erjitcoptions = [
          { id: 0, name: "当月生效" },
          { id: 1, name: "连续生效" },
        ];
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取主界面列表
    getList() {
      flow.getList().then((response) => {
        if (response.code === "A0000") {
          this.tableData = response.data.filter((item) => {
            if (item.type === 0) {
              return item;
            }
          });

          this.tableDataExtend = response.data.filter((item) => {
            if (item.type === 1) {
              return item;
            }
          });

          this.stashList = this.tableData; //暂存数组  当搜索为空时候  数组展示所有数据
          this.stashListExtend = this.tableDataExtend;
        }
      });
    },
  },
};
</script>
<style  lang="less" scoped>
@import url("../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
.prop {
  font-weight: 600;
}
::v-deep .el-table__body-wrapper.is-scrolling-none {
  height: 227px !important;
}
// ::v-deep .table_header {
//   height: 35px !important;
// }
</style>