<template>
  <normalLayout>
    <div slot="content" class=" normal-panel el-row" >
      <div class="borderRight el-col el-col-12">
        <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') && scope.data.siteid"  :data="scope.data" :classname="classname" @updateSuccess="onSuccess" :type="'text'" ></edit>
            </template>
            <template v-slot:del="scope">
              <del_option v-if="tool.checkAuth($route.name,'delete') && scope.data.siteid"  :data="scope.data"   :type="'text'" @delSuccess="onSuccess" ></del_option>
            </template>
          </details_list>
        </div>
      </div>
    </div>
  </normalLayout>
</template>

<script>
import {mapGetters} from 'vuex'

import normalLayout from '@/components/normal-basic-layout/normal.vue'
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'
import { log } from '@antv/g2plot/lib/utils'
export default {
  data(){
    return {
      optiontypeid:'',
      disabled:true,
      list:[],
      classname:'',
    }
  },
  components:{
    normalLayout,
    list,
    edit,
    del_option,
    details_list,
    add
  },
  computed:{
    ...mapGetters({
      activeApp:'activeApp',
    })
  },
  methods:{
    onSuccess () {
     this.$refs.list.queryOptions(true)
      this.$refs.listDetails.detailsList()
    },
    rowShow(row){
      this.optiontypeid = row.optiontypeid
      this.disabled = false
      this.list = row
      this.classname = row.remarks
    }
  }
}

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