<template>
   <div class="layout-no-flex">
    <el-row class="row-full">
      <el-col :span="6">
        <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      </el-col>
      <el-col :span="18" class="tar">
        <span class="data-count-label">当前已收集表单<i>{{model.useCount}}份</i></span> <!-- <el-button><i class="fa fa-arrow-right"></i> 导出所有数据</el-button> -->
      </el-col>
    </el-row>
    <div class="formdata-main">
      <h3 class="form-title" v-text="model.name"></h3>
      <el-tabs v-model="currentTab" class="customformdata-tab">
        <el-tab-pane label="数据" name="datalist">
          <tab-item-datalist :model="model"></tab-item-datalist>
        </el-tab-pane>
        <el-tab-pane label="报表" name="report">
          <tab-item-datareport v-if="typeof model.name === 'string'" :model="model"></tab-item-datareport>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import DataList from './components/customformDataList.vue'
import DataReport from './components/customformDataReport.vue'
export default {
  name: 'CustomformData',
  props: {
    ID: {
      required: true
    }
  },
  components: {
    'tab-item-datalist': DataList,
    'tab-item-datareport': DataReport
  },
  data() {
    return {
      currentTab: 'datalist',
      model: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadModelData()
    })
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async loadModelData() {
      let res = await axios.get(`/ui/customforms/${this.ID}`)
      if (res.data.status === 1) {
        this.model = res.data.data
      }
    }
  }
}
</script>
<style scoped>
  .row-full{
    flex: 1;
  }
  .data-count-label{}
  .data-count-label i {
    font-style: normal;
    margin-left:15px;
    font-size:18px;
    color: #28B06E;
  }
  .formdata-main {
    position: relative;
  }
  .form-title{
    width: 80%;
    font-size: 17px;
    padding-left: 5px;
    color: #444;
    font-weight:normal;
    line-height: 50px;
    position:absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
<style>
  .customformdata-tab .el-tabs__nav {
    float: right;
  }
</style>
