<template>
  <div>
    <el-container>
      <!--搜索-->
      <el-header class="searchBox">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="类型">
            <el-select v-model="type" filterable placeholder="请选择" clearable>
              <el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item :label="type===1 || type===2?'号码/号段':'归属地'" v-if="type!==''">
            <el-input v-if="type===1 || type===2" v-model="number" placeholder="请输入关键字" />
            <el-select v-model="number" filterable placeholder="请选择" clearable v-else-if="type===3" >
              <el-option v-for="item in provinceListAll" :key="item" :value="item" :label="item" />
          </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 v-if="row.type === 1">号码</span>
              <span v-else-if="row.type === 2">号段</span>
              <span v-else-if="row.type === 3">归属地</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态">
            <template #default="{ row}">
              <span v-if="row.state === 0">失效</span>
              <span v-else-if="row.state === 1">生效</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="authType" title="认证方式">
            <template #default="{ row}">
              <span v-if="row.authType === '0'">统一认证</span>
              <span v-else-if="row.authType === '1'">短信认证</span>
              <span v-else-if="row.authType === '2'">简单认证</span>
              <span v-else-if="row.authType === '3'">统一认证-升级</span>
              <span v-else-if="row.authType === '4'">短信认证-升级</span>
              <span v-else-if="row.authType === '5'">简单认证-升级</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="closeDialog">
      <el-form :model="addForm" label-width="100px">
        <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-option label="归属地" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="addForm.type===1 || addForm.type===2?'号码/号段':'归属地'" v-if="addForm.type !==''">
          <el-input v-if="addForm.type===1 || addForm.type === 2" v-model="addForm.number" style="width:300px"></el-input>
          <el-select v-model="addForm.number" filterable placeholder="请选择" clearable v-else-if="addForm.type===3" style="width:300px">
              <el-option v-for="item in provinceListAll" :key="item" :value="item" :label="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="认证方式">
          <el-select v-model="addForm.authType" placeholder="请选择认证方式" style="width:300px">
            <el-option label="统一认证" value='0'></el-option>
            <el-option label="短信认证" value='1'></el-option>
            <el-option label="简单认证" value="2"></el-option>
            <el-option label="统一认证-升级" value="3"></el-option>
            <el-option label="短信认证-升级" value="4"></el-option>
            <el-option label="简单认证-升级" value="5"></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" style="width:300px" disabled></el-input>
          <!-- <el-select v-model="editForm.number" filterable placeholder="请选择" clearable v-else-if="type===3"  disabled>
              <el-option v-for="item in provinceListAll" :key="item" :value="item" :label="item" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="类型">
          <el-select disabled v-model="editForm.type" placeholder="请选择类型" style="width:300px">
            <el-option label="号码" :value='1'></el-option>
            <el-option label="号段" :value="2"></el-option>
            <el-option label="归属地" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="认证方式">
          <el-select v-model="editForm.authType" placeholder="请选择认证方式" style="width:300px">
            <el-option label="统一认证" value='0'></el-option>
            <el-option label="短信认证" value='1'></el-option>
            <el-option label="简单认证" value="2"></el-option>
            <el-option label="统一认证-升级" value="3"></el-option>
            <el-option label="短信认证-升级" value="4"></el-option>
            <el-option label="简单认证-升级" value="5"></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: "",
        typeList: [{
          label: '号码',
          value: 1
        }, {
          label: "号段",
          value: 2
        },
        {label:'归属地',
        value:3} ],
        loading: false,
        number: "",

        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        addShow: false,
        editShow: false,
        reportShow: false,
        addForm: {
          number: "",
          authType: "",
          type: ""
        },
        editForm: {},
        file: null,
        provinceListAll: [
        "北京",
        "上海",
        "天津",
        "重庆",
        "黑龙江",
        "吉林",
        "辽宁",
        "内蒙古",
        "河北",
        "新疆",
        "甘肃",
        "青海",
        "陕西",
        "宁夏",
        "河南",
        "山东",
        "山西",
        "安徽",
        "湖北",
        "湖南",
        "江苏",
        "四川",
        "贵州",
        "云南",
        "广西",
        "西藏",
        "浙江",
        "江西",
        "广东",
        "福建",
        "台湾",
        "海南",
        "香港",
        "澳门",
      ]
      }
    },
    mounted() {
      this.getNumList()
    },
    methods: {
      // 分页查询
      getNumList() {
        let form = {
          number: this.number,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.type
        }
        get('/number_segment/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
        this.editForm = item
      },
      editClick() {
        let {
          authType,
          type,
          number,
          id
        } = this.editForm
        if (number === '') {
          this.$message.error('请填写手机号')
          return false
        }
        if (type === '') {
          this.$message.error('请选择类型')
          return false
        }
        if (authType === '') {
          this.$message.error('请选择认证方式')
          return false
        }
        if (type === 1) {
          if (!/^1[23456789]\d{9}$/.test(number)) {
            this.$message.error('手机号格式有误')
            return false
          }
        }
        if (type === 2) {
          if (number.length !== 4) {
            this.$message.error('请输入4位号段')
            return false
          }
        }
        let params = {
          authType: authType,
          type: type,
          number: number,
        }
        post('/number_segment/update/' + id, params).then(res => {
          if (res.code === 10000) {
            this.editShow = false
            this.$message.success(res.data)
            this.getNumList()
          }
        })
      },
      // 删除数据
      removeList(item) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let {
            id
          } = item
          let ids = []
          ids.push(id)
          post('/number_segment/delete', {
            ids: ids
          }).then(res => {
            if (res.code === 10000) {
              this.$message.success('删除成功')
              this.getNumList()
            }
          })
        })


      },
      //   新增数据
      addList() {
        if (this.addForm.number === '') {
          this.$message.error('请填写号码或归属地')
          return false
        }
        if (this.addForm.type === '') {
          this.$message.error('请选择类型')
          return false
        }
        if (this.addForm.authType === '') {
          this.$message.error('请选择认证方式')
          return false
        }
        if (this.addForm.type === 1) {
          if (!/^1[23456789]\d{9}$/.test(this.addForm.number)) {
            this.$message.error('手机号格式有误')
            return false
          }
        }
        if (this.addForm.type === 2) {
          if (this.addForm.number.length !== 4) {
            this.$message.error('请输入4位号段')
            return false
          }
        }
        post('/number_segment/create', this.addForm).then(res => {
          if (res.code === 10000) {
            this.addShow = false
            this.addForm.number = "";
            this.addForm.type = "";
            this.addForm.authType = "";
            this.$message.success(res.data)
            this.getNumList()
          }
        })
      },
      //   重置
      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()
      },
      closeDialog(){
        this.addForm.type = ""
        this.addForm.number = ""
        this.addForm.authType = ""
      }
    }
  }

</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>
