<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="'年度目标' + mainData.year + '年'"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        :turnPageId="20220901132502"
        idname="sa_salestargetbillid"
        ownertable="sa_salestargetbill"
        delApiId="20221118103402"
        tags=""
        :tabs="['人员目标详情','详细信息']"
        :statusCheck="[{key:'status',value:'已下达'}]"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)"
        @onTabClick="onTabClick">
      <div slot="customOperation">
        <!-- 此区域提供了自定义操作按钮 -->

        <issue :data="mainData" @onSuccess="onSuccess"></issue>
        <adjustment :data="mainData" @onSuccess="onSuccess" ></adjustment>
        <close v-if="mainData.status === '已下达'" :data="mainData" @onClose="onSuccess"></close>
        <importFile class="inline-16"  accept=".xlsx" :folderid="folderid" :bindData="{ownertable:'sa_salestargetbill',ownerid:'',usetype:'default'}" @onImportSuccess="onImportSuccess">
          <a class="error-link" v-if="errorurl" :href="errorurl" slot="errorFile">下载错误数据</a>
        </importFile>
      </div>

      <div slot="slot0">
        <targetTable ref="list" class="container normal-panel">
          <template  v-slot:editTarget="scope">
            <editTarget v-if="tool.checkAuth($route.name,'update')" style="display:inline" :year="mainInfo.year" :data="scope.data" @onSuccess="onSuccess"></editTarget>
          </template>
<!--          <template  v-slot:del="scope">
            <ondel v-if="tool.checkAuth($route.name,'delete')" :data="scope.data" @onSuccess="onSuccess"></ondel>
          </template>-->
        </targetTable>
      </div>
      <div slot="slot1">
        <detail_information ref="detailed"></detail_information>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import add from './components/add.vue'
import ondel from './components/del.vue'
import editTarget from './components/editTarget.vue'
import importFile from './components/importFile.vue'

import targetTable from './components/table.vue'
import detail_information from './modules/detailedInformation/index'
import issue from '../issue'
import adjustment from '../adjustment'
import close from '../close'
export default {
  components:{
    targetTable,
    add,
    ondel,
    editTarget,
    importFile,
    detail_information,
    issue,
    adjustment,
    close
  },
  data () {
    return {
      mainData:{},
      mainAreaData:[],
      mainInfo:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      errorurl:null
    }
  },
  methods:{
    onTabClick () {
      // setTimeout(e=>{
      //   this.$refs.list.queryData(this.mainData.year)
      // },2000)
      // console.log(this.$refs.list)
      this.$nextTick(e=>{
        this.$refs.list? this.$refs.list.queryData(this.mainData.year):''
        this.$refs.detailed? this.$refs.detailed.detailedList(this.mainData):''
      })
    },
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id": 20220901140402,
        "content": {
          "sa_salestargetbillid": id
        }
      })
      this.mainData = res.data
      console.log(this.mainData)
      this.$refs.list.queryData(this.mainData.year)
      /*this.$refs.detailed.detailedList(this.mainData)*/
      this.changeDataStructure()
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = false
      this.$router.replace({path:'/personalTarget_edit',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    changeDataStructure(){
      let that = this
      this.mainAreaData = [
        {
          label:'年度',
          value:this.mainData.year
        },
        {
          label:'编制方式',
          value:this.mainData.targettype
        },
        {
          label:'人员数',
          value:this.mainData.peoplecount
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '新建':
                style = {color:'#3874f6'}
                break;
              case '已下达':
                style = {color:'#52c41a'}
                break;
              case '关闭':
                style = {color:'#333333'}
                break;
              default:
                break;
            }
            return style
          }
        }
      ]
    },
    onSuccess () {
      console.log("执行")
     this.queryMainData(this.$route.query.id)
    },
    async onImportSuccess (res) {
      let attachmentid = res.data.attachmentids[0]
      const res1 = await this.$api.requested({
        "id": 20220913092702,
        "content": {
          "attachmentid":attachmentid,
          "sa_salestargetbillid":this.$route.query.id,
          "year":this.mainData.year
        },
      })
      if (res1.msg !== '成功') { 
        this.errorurl = res1.msg
      } else {
        this.errorurl = null
      }
      this.tool.showMessage(res1,()=>{
        this.mainData()
      })
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
    console.log("人员目标id"+this.$route.query.id)
  },
  created () {
    /*this.onlyread = this.$route.query.type === 'onlyread'?true:false*/
  }
}

</script>
<style>
</style>