<template>
  <div>
    <div class="container normal-panel sticky">
      <div class="flex-align-center flex-between normal-margin">
        <div class="flex-align-center" style="flex:1 0 auto">
          <p style="font-size:30px;font-weight:300">{{titleText?titleText:'##'}}</p>
          &nbsp;<tagTemp style="flex:1" ref="tag" :onwertable="idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess"></tagTemp>
        </div>
        <div class="flex-align-center">
          <cpEdit v-if="tool.checkAuth($route.name,'update')" :formPath="formPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpEdit>
          <div class="inline-16">
            <slot name="customOperation"></slot>
          </div>
          <div>
            <el-button :disabled="rowindex === 1" size="mini" icon="el-icon-arrow-left" @click="previous()"></el-button>
            <el-button :disabled="rowindex === total" size="mini" @click="next()"><i class="el-icon-arrow-right"></i></el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="box-sizing: border-box;padding:20px">
      <el-row :gutter="20">
        <el-col :span="19">
          <div class="container normal-panel normal-margin">
            <el-descriptions title="基本信息" :column="4" size="mini">
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" v-for="item in mainAreaData" :key="item.index" :label="item.label">{{item.value?item.value:'--'}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <tabTemp :tabs="tabs" :editData="editData" :idname="idname">
            <div :slot="'slot' + index" v-for="(tab,index) in tabs" :key="tab.index">
              <slot :name="'slot' + index"></slot>
            </div>
          </tabTemp>
          <slot name="custom"></slot>
        </el-col>
        <el-col :span="5">
          <follow-up :ownertable="idname"></follow-up>
          <group :ownertable="idname"></group>
        </el-col>
        
      </el-row>
    </div>
    
  </div>
</template>

<script>
import cpEdit from '../modules/cpEdit.vue'
import followUp from './modules/followUp/followUp.vue'
import tagTemp from './modules/tags/tag.vue'
import tabTemp from './modules/tabs/tab.vue'

import group from './modules/group/group.vue'

export default {
  props:['titleText','mainAreaData','turnPageId','idname','formPath','editData','tags','tabs'],
  data () {
    return {
      routerName:'',
      rowindex:0,
      total:0,
      param:{
        "id": '',
        "content": {
          "isExport":false,
          "pageNumber": 1,
          "pageSize": 1,
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  components:{
    cpEdit,
    followUp,
    group,
    tagTemp,
    tabTemp
  },
  methods:{
    async queryData (pageNumber) {
      this.param.id = this.turnPageId
      this.param.content.pageNumber = pageNumber
      const res = await this.$api.requested(this.param)
      this.total = res.total
      this.$emit('pageChange',res.data[0][this.idname],res.data[0].rowindex)
      this.$refs['tag'].queryTag()
    },
    next () {
      this.rowindex += 1
      this.queryData(this.rowindex)
      
    },
    previous () {
      this.rowindex -= 1
      this.queryData(this.rowindex)
      
    },
    onSuccess () {
      this.$emit('onEditSuccess')
    },
  },
  mounted () {
  },
  created () {
    this.routerName = this.$route.meta.title
    this.rowindex = Number(this.$route.query.rowindex)
  },
}

</script>
<style>
.detail__head__label{
  display: inline-block;
  width: 70px;
}
</style>
<style scoped>
.appname{
  display: inline;
  background: #FA8C19;
  color:#fff;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
}
.my-tabs{
  background:#eeeeee
}
.sticky{
  position: sticky;
  top:0;
}
</style>