<template>
  <div >
    <div class="container normal-panel el-row" >
      <div class="borderRight el-col el-col-12">
        <div class="container"></div>
        <list ref="list" @rowShow="rowShow">
        </list>
      </div>
      <div class="el-col el-col-12">
        <div >
          <add :disabled="disabled" :data="list" @addSuccess="onSuccess" style="margin-left: 2%"></add>
        </div>
        <div>
          <details_list ref="listDetails" :id="optiontypeid">
            <template v-slot:edit="scope">
              <edit v-if="tool.checkAuth($route.name,'update')"  :data="scope.data" :classname="classname" @updateSuccess="onSuccess" :type="'text'" ></edit>
              <el-divider direction="vertical"></el-divider>
            </template>
            <template v-slot:del="scope">
              <del_option v-if="tool.checkAuth($route.name,'delete')"  :data="scope.data"   :type="'text'" @delSuccess="onSuccess" ></del_option>
            </template>
          </details_list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from './modules/list.vue'
import edit from './modules/edit'
import del_option from './modules/delete'
import details_list from './modules/detailsList'
import add from './modules/add'
export default {
  data(){
    return {
      optiontypeid:'',
      disabled:true,
      list:[],
      classname:''
    }
  },
  components:{
    list,
    edit,
    del_option,
    details_list,
    add
  },
  methods:{
    onSuccess () {
     this.$refs.list.queryOptions()
     this.$refs.listDetails.detailsList()
    },
    rowShow(row){
      console.log(row)
      this.optiontypeid = row.optiontypeid
      console.log(this.optiontypeid)
      this.disabled = false
      this.list = row
      console.log("列表信息")
      console.log(this.list)
      this.classname = row.remarks
    }
  }
}

</script>
<style>
  .borderRight{
    border-right: 1px solid #ccc;;
  }
</style>