<template>
  <div>
    <el-toolbar>
      <el-button @click="addSiteConfig" :priv="`com.zving.cms.Site.Edit.${siteID}`">
        <i class="fa fa-plus" aria-hidden="true"></i>新建</el-button>
      <!-- <el-button @click="editSiteConfig" :disabled="!siteID || siteID=='root' || selectedRows.length<1">
        <i class="fa fa-edit" aria-hidden="true"></i>编辑</el-button> -->

        <el-col :span="10" class="search-box-r tool-search-box-r">
          <el-input v-model="searchName" placeholder="请输入配置项代码或名称" class="search-bar-algin-toolbar" @keyup.enter.native="search"></el-input>
          <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
        </el-col>

    </el-toolbar>
    <div class="padding-top-bottom-intab scroll">

    <el-table :data="siteConfigs" :data-read-url="loadSiteConfigs" :auto-get-data="false" :page-size="20" tooltip-effect="dark" ref="siteConfigsTable" style="width: 100%" @selection-change="selectionChange">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column prop="code" label="配置项代码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="配置项名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="value" label="配置项值" show-overflow-tooltip></el-table-column>
      <el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="right" width="80">
        <template slot-scope="scope">
          <el-button type="text"  @click.stop="editSiteConfig(scope.row)" title="编辑" :priv="`com.zving.cms.Site.Edit.${siteID}`">
            <i class="fa fa-edit f16"></i>
          </el-button>
          <el-button type="text"  @click.stop="deleteSiteConfig(scope.row)" title="删除" :priv="`com.zving.cms.Site.Edit.${siteID}`">
            <i class="fa fa-remove f16"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
      <siteConfig-dialog :show.sync="itemDialogModal" :siteID="siteID" :code="itemCode" @callback="search"></siteConfig-dialog>
  </div>
</template>
<script>
import siteConfigDialog from './SiteConfigDialog.vue'
import util from '@src/common/util.js'
export default {
  data() {
    return {
      searchName: '',
      siteConfigs: [],
      selectedRows: [],
      itemDialogModal: false,
      itemCode: null
    }
  },
  // watch: {
  //   siteID(val) {
  //     this.search()
  //   }
  //  }
  methods: {
    searcha(val) {
    // console.log(val)
    },
    addSiteConfig() {
      this.itemCode = null
      this.itemDialogModal = true
    },
    editSiteConfig(row) {
      row && row.code && this.selectedRows.splice(0, 1, row)
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      this.itemCode = this.selectedRows[0].code
      this.itemDialogModal = true
    },
    async deleteSiteConfig(row) {
      row && row.code && this.selectedRows.splice(0, 1, row)
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择要删除的记录', '提示', {
          type: 'info'
        })
        return
      }
      let codes = []
      this.selectedRows.forEach(function(row) {
        codes.push(row.code)
      })
      try {
        await this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/sites/${this.siteID}/configs?codes=` + codes.join(','))
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.search()
        }
      } catch (e) {

      }
    },
    selectionChange(selection) {
      this.selectedRows = selection
    },
    search() {
      this.$refs.siteConfigsTable.getData()
    },
    init() {
      this.$refs.siteConfigsTable.getData()
    },
    loadSiteConfigs() {
      return [
        `/ui/sites/${this.siteID}/configs`,
        {
          params: {
            name: this.searchName
          }
        }
      ]
    }
  },
  props: {
    siteID: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  components: {
    'siteConfig-dialog': siteConfigDialog
  }
}
</script>
<style scoped>
.search-content {
  padding: 0 10px 10px 0;
  text-align: right;
}
</style>
