<template>
  <div class="standard-index">
    <el-button @click="add" icon="el-icon-plus" size="small" type="primary">添加
    </el-button>
    <el-table stripe ref="table"
              style="margin-top: 15px"
              :height="tableHeight" v-loading="tableLoading" :data="dataList" border size="medium"
              row-key="id">
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
      <el-table-column min-width="100" show-overflow-tooltip prop="name" label="参数名称" align="center"/>
      <el-table-column min-width="100" show-overflow-tooltip prop="code" label="英文名称" align="center"/>
      <el-table-column min-width="100" show-overflow-tooltip prop="method" label="比对方式" align="center"/>
      <el-table-column min-width="100" show-overflow-tooltip prop="categoryOne" label="Ⅰ类" align="center">
        <template slot-scope="{row}">
          <span v-if="row.categoryOne">{{row.categoryOne}}mg/L</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" show-overflow-tooltip prop="categoryTwo" label="Ⅱ类" align="center">
        <template slot-scope="{row}">
          <span v-if="row.categoryTwo">{{row.categoryTwo}}mg/L</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" show-overflow-tooltip prop="categoryThree" label="Ⅲ类" align="center">
        <template slot-scope="{row}">
          <span v-if="row.categoryThree">{{row.categoryThree}}mg/L</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" show-overflow-tooltip prop="categoryFour" label="Ⅳ类" align="center">
        <template slot-scope="{row}">
          <span v-if="row.categoryFour">{{row.categoryFour}}mg/L</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" show-overflow-tooltip prop="categoryFive" label="Ⅴ类" align="center">
        <template slot-scope="{row}">
          <span v-if="row.categoryFive">{{row.categoryFive}}mg/L</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="160">
        <template slot-scope="{row}">
          <el-button @click="edit(row)" v-if="isAdmin||btnRule.some(btn=>btn=='edit')" type="primary" size="mini"
                     icon="el-icon-edit">修改
          </el-button>
          <el-button @click="drop(row)" v-if="isAdmin||btnRule.some(btn=>btn=='drop')" type="danger" size="mini"
                     icon="el-icon-delete">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-current">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        background
        layout="total, prev, pager, next, jumper"
        style="display: inline-block;"
        :total="count"
        @current-change="handleCurrentChange"
      />
    </div>
    <standardForm @successSubmit="visible=false;getAllList()" :visible="visible" v-if="visible" :data="data"
                  @handleClose="visible=false"></standardForm>
  </div>
</template>

<script>
  import api from '@/api/water/standard'
  import standardForm from './standardForm'
  import {mapGetters} from "vuex";

  export default {
    name: "standard-index",
    data() {
      return {
        visible: false,
        data: {},
        dataList: [],
        currentPage: 1,
        count: 0,
        pageSize: parseInt((document.body.clientHeight - 250 - 43) / 45),
        tableHeight: document.body.clientHeight - 250,
        tableLoading: false,
      }
    },
    components: {standardForm},
    computed: {
      ...mapGetters(["btnRule", "isAdmin"])
    },
    created() {
    },
    mounted() {
      this.tableLoading = true
      this.getAllList()
    },
    methods: {
      drop(row) {
        this.$confirm("确定要删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.tableLoading = true;
          api.drop({id:row.id}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getAllList();
          }).catch(e => {
            this.tableLoading = false;
          });
        });
      },
      add() {
        this.data = {
          method: '<='
        }
        this.visible = true
      },
      edit(row) {
        this.data = row
        this.visible = true
      },
      indexMethod(index) {
        return (index + 1) + ((this.currentPage - 1) * this.pageSize);
      },
      handleCurrentChange(val) {
        this.tableLoading = true
        this.currentPage = val
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList()
      },
      getAllList() {
        api.getAllList({page: this.currentPage, pageSize: this.pageSize}).then(res => {
          this.dataList = res.data.records ? res.data.records : []
          this.count = res.data.total
          this.tableLoading = false
        }).catch(e => {
          this.dataList = []
          this.tableLoading = false
        })
      },
    }
  }
</script>

<style lang="less">
  .standard-index {
    height: fit-content;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    padding: 15px;
  }
</style>
