<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="号码">
            <el-input v-model="number" placeholder="请输入号码" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="type" placeholder="请选择状态">
              <el-option label="拦截" value="1"></el-option>
              <el-option label="放行" value="2"></el-option>
              <el-option label="全部" value=""></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button type="primary" @click="getNumList()">搜索</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!--表格-->
      <el-main class="tableBox">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button
              @click="addShow = true"
              status="primary"
              content="新建规则"
              icon="fa fa-plus"
            ></vxe-button>
            <!-- <vxe-button
              @click="reportShow = true"
              status="warning"
              content="批量导入"
              icon="fa fa-plus"
            ></vxe-button> -->
            <vxe-button
              @click="reset"
              content="刷新"
              icon="fa fa-plus"
            ></vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          border
          resizable
          keep-source
          show-overflow
          highlight-hover-row
          ref="xTable"
          :data="tableData"
          :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
        >
          <vxe-table-column field="number" title="号码" />
          <vxe-table-column title="位数">
            <template #default="{ row }">
              <span>{{ row.number.length }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态">
            <template #default="{ row }">
              <span v-if="row.type === 1">拦截</span>
              <span v-else-if="row.type === 2">放行</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="createTime" title="创建时间" />
          <vxe-table-column title="操作">
            <template #default="{ row }">
              <vxe-button @click="editList(row)">编辑</vxe-button>
              <vxe-button @click="removeList(row)">删除</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- <vxe-pager :loading="loading" :current-page="pageNum" :page-size="pageSize" :total="total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange" /> -->
        <el-pagination
          style="float: right; margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
    <!-- 新增弹窗 -->
    <el-dialog title="新增" :visible.sync="addShow" @close="dialogClose">
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="号码">
          <el-input v-model="addForm.number" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="位数">
          <el-input
            :value="addForm.number.length"
            disabled
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="addForm.type"
            placeholder="请选择状态"
            style="width: 300px"
          >
            <el-option label="拦截" :value="1"></el-option>
            <el-option label="放行" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible.sync="editShow">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="号码">
          <el-input
            v-model="editForm.number"
             disabled
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="位数">
          <el-input
            :value="editForm.number.length"
            disabled
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="editForm.type"
            placeholder="请选择状态"
            style="width: 300px"
          >
            <el-option label="拦截" :value="1"></el-option>
            <el-option label="放行" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary" @click="editClick">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入弹窗 -->
    <el-dialog title="编辑" :visible.sync="reportShow">
      <el-upload
        class="upload-demo"
        :limit="1"
        :multiple="false"
        drag
        action="#"
        :on-change="fileChange"
        :auto-upload="false"
        show-file-list
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div style="margin-top: 30px">
        <el-button @click="reportShow = false">取 消</el-button>
        <el-button type="primary" @click="reportClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { post, get } from "@/api/common";
export default {
  name: "Index",
  data() {
    return {
      type: "",
      loading: false,
      number: "",
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      addShow: false,
      editShow: false,
      reportShow: false,
      addForm: {
        number: "",
        type: "",
      },
      editForm: {
        number:"",
        id: "",
        type: "",
      },
      file: null,
    };
  },
  mounted() {
    this.getNumList();
  },
  methods: {
    // 分页查询
    getNumList() {
      let form = {
        number: this.number,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.type,
      };
      get("/fictitious/list", form).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    //   编辑数据
    editList(item) {
      this.editShow = true;
      let {type ,id,number} = item
      this.editForm.id = id;
      this.editForm.number = number;
      this.editForm.type = type
    },
    editClick() {
      let {type ,id} =  this.editForm
      let formData = new FormData()
      formData.append('id',id)
      formData.append('type',type)
      post("/fictitious/update", formData).then((res) => {
        if (res.code === 10000) {
          this.editShow = false;
          this.$message.success('修改成功');
          this.getNumList();
        }
      });
    },
    // 删除数据
    removeList(item) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let { id } = item;
        let ids = [];
        ids.push(id);
        post("/fictitious/delete", {
          ids: ids,
        }).then((res) => {
          if (res.code === 10000) {
            this.$message.success("删除成功");
            this.getNumList();
          }
        });
      });
    },
    //   新增数据
    addList() {
      console.log(this.addForm.number.length)
      if (this.addForm.number === "") {
        this.$message.error('号码不能为空')
        return false;
      }
      if (this.addForm.type === "") {
        this.$message.error('状态不能为空')
        return false;
      }
    if (this.addForm.number.length >4) {
        this.$message.error('号码不能超过四位')
        return false;
      }
      post("/fictitious/create", this.addForm).then((res) => {
        if (res.code === 10000) {
          this.$message.success('添加成功');
          this.getNumList();
          this.addShow = false;
          this.addForm.number = "";
          this.addForm.type = " ";
        }
      });
    },
    //   重置
    reset() {
      this.number = "";
      this.type = "";
      this.authType = "";
      this.pageNum = 1;
      this.pageSize = 10;
      this.getNumList();
    },
    //   上传文件
    fileChange(file) {
      this.file = file.raw;
    },
    //   确认上传
    reportClick() {
      this.$confirm("此操作将导入该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let formData = new FormData();
        formData.append("file", this.file);
        post("/number_segment/batchImport", formData).then((res) => {
          if (res.code === 10000) {
            this.$message.success("导入成功");
            this.file = null;
            this.reportShow = false;
            this.getNumList();
          }
        });
      });
    },
    //   分页切换数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getNumList();
    },
    //   分页切换页码
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getNumList();
    },
    dialogClose(){
          this.addForm.number = "";
          this.addForm.type = " ";
    }
  },
};
</script>

<style lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  padding: 10px 10px;

  form {
    margin: auto;

    .el-form-item {
      margin: 5px 5px;
    }
  }
}

.tableBox {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;

  .block {
    .el-pagination {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>
