<template>
  <div class="add">
    <el-button @click="addBtn" size="small">添加项目</el-button>
    <el-dialog
      title="选择项目"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <Search style="margin-bottom:16px" @searchActive="searchActive" @clearData="clearData" />
      <table1 v-if="projectList" :layout="tablecols" :custom="false" :checkbox="true" :data="projectList" height="40vh"
        @checkboxCallBack="checkboxCallBack">
      </table1>
      <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-evenly">
        <div>
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addProject" size="small" :disabled="!this.selectProject==true">确定添加</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Search from '@/components/search/index'
import table1 from '@/components/table/index'
export default {
  name: '',
  data() {
    return {
      dialogVisible:false,
      tablecols:'',
      projectList:'',
      selectProject:'',
      condition:''
    };
  },
  components:{Search , table1},
  computed:{
  },
  watch:{
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).projectListTable.tablecols
  },
  methods: {
    async getProjectList() {
      let res = await this.$api.requested({
        "id": 20220906154803,
        "version":1,
        "content": {
          "nocache":true,
          "sa_salesforecastbillid":this.$route.query.id,
          "where":{
              "condition":this.condition
          }
        }
      })
      this.projectList = res.data
      console.log(this.projectList);
      
    },
    async addProject() {
      if(!this.selectProject) return
      let idArr = this.selectProject.map(item => item.sa_projectid)
      let res = await this.$api.requested({
        "id": 20220913154403,
        "version":1,
        "content": {
            "sa_salesforecastmodelid":this.$route.query.id2,
            "sa_salesforecastbillid":this.$route.query.id,
            "sa_projectids": idArr
        }
      })
      this.tool.showMessage(res,() => {
        this.dialogVisible = false
        this.$emit('addSuccess')
        this.getProjectList()
      })
      
    },
    addBtn() {
      this.getProjectList()
      this.dialogVisible = true
    },
    checkboxCallBack(data) {
      console.log(data);
      this.selectProject = data
    },
    handleClose() {
      this.dialogVisible = false
    },
    searchActive(data) {
      this.condition = data
      this.getProjectList()
    },
    clearData() {
      this.condition = ''
      this.getProjectList()
    }
  },
};
</script>

<style scoped>
  /deep/.el-dialog__body {
    padding-bottom: 0;
  }
</style>
