<template>
  <div class="app-container ">
    <div class="margin_top">
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">虚拟号段:</span>
          <el-input
            placeholder="请输入虚拟号段"
            style="width:200px"
            v-model="body.virtualNum"
            clearable
          ></el-input>
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            plain
            @click="handleSearch"
            >搜索</el-button
          >
          <el-button
            class="classitem"
            icon="el-icon-plus"
            type="warning"
            plain
            @click="handleAdd"
            >新增</el-button
          >
          <el-button
            icon="el-icon-delete"
            type="danger"
            plain
            @click="handleDelete"
            >删除</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="虚拟号段"
          width="250"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.virtualNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="号段说明" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.note }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <!--分页-->
    <div class="flexend">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <!-- 添加  弹框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      center
      width="55%"
    >
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="rule"
        label-position="right"
        label-width="80px"
      >
        <el-form-item
          label="虚拟号段"
          :label-width="formLabelWidth"
          size="small"
          prop="virtualNum"
          style="width:380px;margin:15px auto"
        >
          <el-input
            v-model="dataForm.virtualNum"
            autocomplete="off"
            placeholder="请输入虚拟号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="号段说明"
          :label-width="formLabelWidth"
          size="small"
          style="width:380px;margin:15px auto"
        >
          <el-input
            v-model="dataForm.note"
            autocomplete="off"
            type="textarea"
            placeholder="请输入号段说明"
            :autosize="{ minRows: 2, maxRows: 4 }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm"   :disabled="disabled" 
          >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { VirtualList, VirtualAdd, VirtualDel } from "@/api/virtualNum.js";

export default {
  data() {
    return {
      loading: false,
      dialogFormVisible: false, //控制是否打开面板
      formLabelWidth: "120px",
      body: {
        virtualNum: "", //虚拟号段
        current: 1, //当前页
        size: 10 //每页数量
      },
      tableData: [],
      dataForm: {
        virtualNum: "",
        note: ""
      },
      phone: [],
      rule: {
        virtualNum: [
          { required: true, message: "请输入虚拟号段", trigger: "blur" }
        ]
      },
      total: 10, //总数
      disabled: false,
      row: ""
    };
  },
  created() {
    this.getNum();
  },
  methods: {
    //新增按钮
    addVirtual() {
      this.dialogFormVisible = true;
    },

    //列表
    getNum() {
      this.loading = true;
      VirtualList(this.body).then(res => {
        this.loading = false;
        console.log(res.data, "00");
        this.tableData = res.data.data.records;
        this.body.size = res.data.data.size;
        this.body.current = res.data.data.current;
        this.total = res.data.data.total;
      });
    },
    //搜索按钮
    handleSearch() {
      this.body.current=1;
      this.getNum();
    },
    //新增按钮
    handleAdd() {
      this.dataform = "";
      this.disabled = false;
      this.dialogFormVisible = true;
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].resetFields();
      }
    },
    //新增
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.disabled = true;
          VirtualAdd(this.dataForm).then(res => {
            console.log(res, "//");
            if (res.data.status == 200) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.dialogFormVisible = false;
              this.getNum();
            } else {
              this.message({
                type: "error",
                message: res.data.message
              });
            }
          })
          .finally(() => this.disabled = false)
          console.log(this.dataForm, "/");
        }
      });
    },
    //删除按钮
    //删除API
    handleDelete() {
      const that = this;
      if (this.phone.length > 0) {
        that
          .$confirm("此操作将删除该手机号", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            VirtualDel(this.phone).then(res => {
              if (res.status === 200) {
                that.$message({
                  type: "success",
                  message: "删除成功"
                });
                this.getNum();
              } else {
                that.$message({
                  type: "error",
                  message: res.data.message
                });
              }
            });
          });
      } else {
        that.$message({
          type: "error",
          message: "请至少选择一项"
        });
      }
    },

    //分页
    handleSizeChange: function(val) {
      this.body.size = val;
      this.getNum();
    },

    handleCurrentChange: function(val) {
      this.body.current = val;
      this.getNum();
      console.log(val);
    },
    //多选
    handleSelectionChange(row) {
      console.log(row);
      let arryList = [];
      row.map(res => {
        let phoneNo = res.virtualNum;
        arryList.push(phoneNo);
      });
      this.phone = arryList;
      console.log(this.phone, "this.phone");
    }
  }
};
</script>

<style scoped>
.flex {
  display: flex;
  flex-direction: row;
  width: 90%;
  margin-bottom: 20px;
  justify-content: flex-start;
}
.flexend {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  width: 100%;
}

</style>
