<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="施工材料" name="first">
      <el-container>
        <el-main>
          <el-form ref="elForm" :rules="uploadRules" size="medium" label-width="100px">
            <bns-file-list-tabs :items="items.applicationForCommencementFiles"/>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" @click="submitForm('form')" v-preventReClick="5000">提交</el-button>
          <el-button @click="cancel()">取消</el-button>
        </el-footer>
      </el-container>


    </el-tab-pane>
    <el-tab-pane label="审批信息" name="second">
      <bns-timeline-tabs :items="items.approvalInfo" :show-type=1 :is-examine=false :btn-show="true" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import BnsEquipDetailsTabs from '@/components/pro-tabs/bns-equip-details-tabs.vue'
import uploadFile from '@/views/pro/admissionRequest/uploadFile.vue'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import BnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'

export default {
  components: { BnsFileListTabs, BnsTimelineTabs, BnsEquipDetailsTabs, uploadFile },
  data() {
    return {
      activeName: 'first',
      items: {
        proName: '',
        applicationForCommencementFiles: [],
        otherFiles: [],
        approvalInfo: []
      },
      uploadRules: {
        completionApplyFiles: [
          { required: true, message: '请上传完工申请单', trigger: 'blur' }
        ],
        otherFiles: [
          { required: true, message: '请上传其他附件', trigger: 'blur' }
        ]
      },
      accept: '.png, .jpg, .jpeg, .gif, .bmp'
    }
  },
  methods: {
    //上传组件-图片查看
    picturePreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.$tab.closePage()
    }
  }

}
</script>
<style scoped lang="scss">
.el-header, .el-footer {
  color: #333;
  line-height: 60px;
  text-align: right;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  line-height: 660px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
