<template>
  <div style="display:inline">
    <el-button size="small" style="width:120px" type="primary" @click="onShow">设 置</el-button>
    <el-drawer class="auth-container" title="授权报表列表" append-to-body :visible.sync="dialogTableVisible" size="50%">
      <div class="container">
      <Add @onSuccess="addOnsuccess" :data="data"></Add>
      <el-row>
        <el-col :span="24">
          <el-table
            :header-cell-style="{background:'#EEEEEE',color:'#333'}"
            :data="data"
            stripe
            size="mini"
            style="width: 100%"
            border>
            <el-table-column
              prop="name"
              label="分类名称">
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="分类描述">
            </el-table-column>
            <el-table-column
              prop="value"
              label="比例">
              <template slot-scope="scope">
                {{ scope.row.value * 100 }}%
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <Edit class="inline-16" :allData="data" :data="scope.row" @onSuccess="addOnsuccess"></Edit>
                <el-button type="text" size="mini" @click="deleteRow(scope.row)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import Add from './add.vue'
import Edit from './edit.vue'
export default {
  props:['data'],
  components:{Add,Edit},
  data () {
    return {
      dialogTableVisible:false,
      list:[],
      total:0,
      value:'',
    }
  },
  created () {

  },
  methods:{
    addOnsuccess () {
      this.$emit('onSuccess')
    },
    onShow () {
      this.dialogTableVisible = true
    },
    async deleteRow (data) {
      this.$confirm('确认删除当前设置吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(async () => {
        let temp = this.data.filter(item => {
          return item.name != data.name
        })
        let res = await this.$api.requested({
          "classname": "webmanage.site.site",
          "method": "updateSite_Parameter",
          "content": {
              "project_occupancy_ratio": temp ? temp : []
          },
        })
        this.tool.showMessage(res,() => {
          this.$emit('onSuccess')
        })
        console.log(temp);
      })
    }
  }
}

</script>
<style>
.auth-container .el-tabs--border-card{
  box-shadow: none !important;
}
.auth-container .el-tabs--border-card>.el-tabs__content{
  padding: 0;
}
</style>