<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="`${mainData.title}`"
        :oldFormPath="{edit:'HManagement/salesForecastTemplate/modules'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20220906150203"
        delApiId="20220906150603"
        idname="sa_salesforecastmodelid"
        tags=""
        :tabs="['预测提报记录']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <release v-if="tool.checkAuth($route.name,'release')" :data="mainData" @onSuccess="onSuccess" :disabledFlag="disabledFlag"></release>
        <finish v-if="tool.checkAuth($route.name,'cancel')" :data="mainData" @onSuccess="onSuccess"></finish>
      </div>
      <div slot="slot0" >
        <el-row :gutter="10"> 
          <el-col :span="24">
            <forecastList ref="forecast" @tableRowClick="onTableClick"></forecastList>
          </el-col>
          <el-col :span="24">
            <div style="border-bottom:1px solid #f1f2f3;margin-bottom:16px;margin-top:16px"></div>
          </el-col>
          <el-col :span="24">
            <submitDetail ref="project"></submitDetail>
          </el-col>
        </el-row>
        <!-- <submitDetail ref="submitDetail"></submitDetail> -->
      </div>
      
    </basicDetails>
  </div>
</template>

<script>
import forecastList from './forecastList.vue'
import submitDetail from './project.vue'
import release from './release.vue'
import finish from './finish.vue'

export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      disabledFlag:false
    }
  },
  components:{
    forecastList,
    submitDetail,
    finish,
    release
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20220906150303,
        "content": {
          "sa_salesforecastmodelid":this.$route.query.id
        }
      })
      this.mainData = res.data
      // this.$refs['forecast'].listData(this.$route.query.id,1)
      this.changeDataStructure()
    },
    changeDataStructure() {
      let that = this
      /*月度提报周期*/
      function test (){
        let val = ''
        that.mainData.taskdayschange.forEach((e,index) => {
          if (index === that.mainData.taskdayschange.length -1){
            val += `每月${e}日`
          }else {
            val += `每月${e}日,`
          }

        })
        return val
      }
      /*月度提报开始时间*/
      function startTime (){
        let val = ''
        that.mainData.periodpointchange.forEach((e,index) => {
          if (index === that.mainData.periodpointchange.length -1){
            val += `每月${e}日`
          }else {
            val += `每月${e}日,`
          }

        })
        return val
      }
      /*发布范围*/
      function translate () {
        let val = ''
        that.mainData.roles.forEach((e,index) => {
          if (index === that.mainData.roles.length -1){
            val += `${e.rolename}`
          }else {
            val += `${e.rolename},`
          }
        })
        return val
      }
      this.mainAreaData = [
        {label:'提报要求',value:this.mainData.remarks},
        {label:'提报类型',value:this.mainData.isrepeat == 1 ?'月度提报':'单次提报'},
        {label:'提报开始时间',value:this.mainData.isrepeat === 0?this.mainData.begdate.split(' ')[0]:startTime()},
        {label:'提报截止时间',value:this.mainData.isrepeat === 0?this.mainData.enddate.split(' ')[0]:test()},
        {label:'发布范围',value:translate()},

        /*{label:'预测金额',value:this.mainData.outamountsum},
        {label:'负责人',value:this.mainData.createby},*/
        {
          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
          }
        },
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/salesForecastDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    },
    onTableClick (row) {
      this.disabledFlag = true
      this.$refs['project'].listData(row.sa_salesforecastbillid)

    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>