<template>
  <div>

    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">
            <div class="searchwrap" style="display: flex;align-items: center;">
              <div>
                <el-input v-model="select.number" placeholder="Parameter Encoding"></el-input>
              </div>
              <div>
                <el-button type="primary" size="small" @click="select.page=1,getList()">search</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="resetSearch">reset</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="editParameter('add')">add</el-button>
              </div>
            </div>
          </div>

        </lx-header>
      </div>
    </div>
    <xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange"
      @pageSizeChange="pageSizeChange" :table-item="table_item">
      <template v-slot:btns>
        <el-table-column align='center' fixed="right" label="Operate" width="180" header-align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editParameter('editor',scope.row.id)">edit</el-button>
            <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px" @confirm="deleteList(scope.row.id)" title="Are you sure to delete it?">
              <el-button type="danger" size="small" slot="reference">delete</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <add-parameter ref="addParameter" @refresh="getList"></add-parameter>
  </div>
</template>

<script>
  import addParameter from './components/addParameter.vue';
  import {
    listparameter,
    del
  } from "@/api/system/dictionary.js";
  export default {
    components: {
      addParameter
    },
    data() {
      return {
        select: {
          number: '',
          page: 1,
          page_size: 10,
          sort_name:'sort',
          sort_type:'ASC',
          type:''
        },
        total: 0,
        list: [],
        table_item: [{
            type: 'index',
            width: 50,
            fixed: 'left'
          }, {
            prop: 'number',
            label: 'Parameter Encoding',
            align: 'left',
            width:240,
          }, {
            prop: 'name',
            label: 'Parameter Name',
            align: 'left',
            width:240,
          },
          {
            prop: 'remark',
            label: 'Remark',
            align: 'left'
          },
          {
            prop: 'sort',
            label: 'Sort',
            align: 'left',
            width: 120
          }
        ]

      }
    },
    created() {
      if (this.$route.path) {
        let path = this.$route.path.split("_")
        this.select.type = path[1]
      }
      this.getList()
    },
    methods: {
      editParameter(type, id) {
        if (type == 'editor') {
          this.$refs.addParameter.id = id
        }
        this.$refs.addParameter.setType(this.select.type)
        this.$refs.addParameter.type = type
        this.$refs.addParameter.isShow = true
      },
      pageIndexChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e) {
        this.select.page_size = e
        this.select.page = 1
        this.getList()
      },
      resetSearch() {
        this.select.page = 1
        this.select.number = ''
        this.getList()
      },
      async getList() {
        const res = await listparameter({...this.select})
        this.list = res.data
        this.total = res.total
      },
      deleteList(id) {
        var that = this;
        del(id).then(response => {
          this.$Message.success('操作成功');
          this.getList()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
