<template>
  <div class="area">
    <!-- 查询   -->
    <query-conditions :formItems="searchList" @getQueryParams="handleQuery"></query-conditions>
    <!--  表格   -->
    <new-table :height="600" :title="title" :listData="areaList" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
      <template v-slot:right>
        <div>
          <el-button size="mini" type="primary"  v-if="hasPerm('area:add')" @click="dialogVisible = true">添加区域</el-button>

          <el-button size="mini" type="danger" v-if="hasPerm('area:del')" @click="delAll">批量删除</el-button>

        </div>
      </template>
      <template #handler="scope">
        <el-button size="mini" v-if="hasPerm('area:edit')" @click="edit(scope.row)" style="margin-right: 10px">编辑</el-button>
        <el-popconfirm
            title=" 确定要删除这个区域吗？"
            @confirm="del(scope.row)"
        >
          <el-button type="danger" v-if="hasPerm('area:del')" size="mini" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </new-table>
    <table-footer
        :totals="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @pageChange="pageChange"></table-footer>
    <!-- 新增编辑   -->
    <el-dialog
        :title="showType ? '编 辑' : '新 增'"
        :visible.sync="dialogVisible"
        width="20%">
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
            <el-form-item label="区域名称" prop="areaName">
              <el-input v-model="form.areaName"></el-input>
            </el-form-item>
            <el-form-item label="绑定IP" prop="publicUrl">
              <el-input v-model="form.publicUrl"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
        </span>
    </el-dialog>


  </div>
</template>

<script>
import { areaList, delArea, addArea, editArea } from '../../utils/api.js';
import { arrToIds } from '../../utils/index.js';
import QueryConditions from "@/components/bioSafety/QueryConditions";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
export default {
  name: "AreaAdmin",
  components: {
    QueryConditions,
    NewTable,
    TableFooter
  },
  data() {
    return {
      searchList: [
        {
          type: 'input',
          label: '区域搜索：',
          placeholder: '请输入区域',
          field: 'keyWord'
        },
      ],
      areaList: [],
      title: '监控区域列表',
      tableItems: [
        {
          prop: 'id',
          label: 'ID',
          minWidth: '50',
          slotName: 'id'
        },
        {
          prop: 'areaName',
          label: '区域名称',
          minWidth: '150',
          slotName: 'areaName'
        },
        {
          prop: 'publicUrl',
          label: '绑定IP',
          minWidth: '150',
          slotName: 'publicUrl'
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '150',
          slotName: 'remark'
        },
        {
          label: '操作',
          minWidth: '150',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: false,
        showSelect: true
      },
      pageNum: 1,
      pageSize: 20,
      total: 0,
      keyWord: '',
      selectList: [],
      showType: false,
      dialogVisible: false,
      rules: {
        areaName: [ { required: true, message: '区域名称不能为空', trigger: 'blur' } ],
        publicUrl: [ { required: true, message: 'IP不能为空', trigger: 'blur' } ],
      },
      form: {
        areaName: '',
        remark: '',
        publicUrl: '',
      }
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      this.init();
    },
    init() {
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        areaName: this.keyWord
      }
      areaList(params).then(res => {
        if(res.code === 10000) {
          this.areaList = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    handleQuery(data) {
      this.keyWord = data.keyWord ? data.keyWord : '';
      this.pageNum = 1;
      this.init()
    },
    // 编辑
    edit(row) {
      this.showType = true;
      this.form.areaName = row.areaName;
      this.form.remark = row.remark;
      this.form.id = row.id;
      this.form.publicUrl = row.publicUrl;
      this.dialogVisible = true;
    },
    // 删除
    del(row) {
      let params = {
        ids: row.id
      }
      delArea(params).then(res => {
        if(res.code === 10000) {
          this.init();
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 批量选择
    selectionChange(rows) {
      this.selectList = rows;
    },
    // 批量删除
    delAll() {
      if(this.selectList.length > 0) {
        this.$confirm('此操作将永久删除这些区域，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = arrToIds(this.selectList);
          let params = {
            ids: ids
          }
          delArea(params).then(res => {
            if(res.code === 10000) {
              this.init();
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
        // delArea()
      } else {
        this.$message.error('请勾选需要删除的区域');
        return;
      }
    },
    reset() {
      this.dialogVisible = false;
      this.form ={
        areaName: '',
        publicUrl: '',
        remark: '',
      }
      this.showType = false;
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.showType) {
            // 编辑
            let params = {
              id: this.form.id,
              areaName: this.form.areaName,
              publicUrl: this.form.publicUrl,
              remark: this.form.remark
            }
            editArea(params).then(res => {
              this.reset()
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            // 新增
            let params = {
              areaName: this.form.areaName,
              publicUrl: this.form.publicUrl,
              remark: this.form.remark
            }
            addArea(params).then(res => {
              this.reset();
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
  .area {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
</style>
