<template>
  <div class="add-project">
      <el-button type="primary" size="small" @click="dialogVisible=true">添加</el-button>
      <!--选择项目弹框-->
      <el-dialog
        title="选择项目目标"
        :visible.sync="dialogVisible"
        width="50%">
        <div class="base-info">
          <div class="year">
            <span style="margin-right:16px">年度:</span>
            <el-date-picker v-model="year" disabled type="date" format="yy" size="small" placeholder="选择年度" />
          </div>
        </div>
        <div class="content">
          <p style="margin-bottom:16px">请编辑项目</p>
          <Search style="margin-bottom:16px" @searchActive="searchActive" @clearData="clearData" />
          <Table
                ref="tables" 
                v-if="projectList" 
                :layout="tablecols" 
                :data="projectList" 
                :checkbox="true" 
                :custom="false" 
                height="calc(100vh - 495px)"
                @checkboxCallBack="checkboxCallBack">
          </Table>
        </div>
        <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="next" size="small" :disabled="!selectProject">下一步</el-button>
          </div>
        </span>
      </el-dialog>
      <!--添加目标弹窗-->
      <el-dialog
        title="添加项目目标"
        :visible.sync="dialogVisible2"
        width="80%"
        v-if="dialogVisble2=true">
        <div class="content">
          <tableLayout :layout="tablecols2" :custom="true" :data="selectProject">
            <template v-slot:customcol="scope">
                <div v-if="scope.column.columnname == 'baseTarget'" class="base-target">
                  <input type="text" @input="baseTargetChange($event,scope.column.data)">
                </div>
                <div v-if="scope.column.columnname == 'doubleTarget'" class="base-target">
                  <input type="text" @input="dealTargetChange($event,scope.column.data)">
                </div>
                <div v-if="scope.column.columnname == 'dealTime'">
                  <el-date-picker
                    type="month"
                    placeholder="请选择月份"
                    size="small"
                    :ref="scope.column.data.projectnum"
                    @input="timeChange($refs[scope.column.data.projectnum],$event,scope.column.data)"
                    :picker-options="{
                      disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7
                      },
                    }" >
                  </el-date-picker>
                </div>
                <div v-if="scope.column.columnname == 'projectnum' || scope.column.columnname == 'projectname'">{{scope.column.data[scope.column.columnname]}}</div>
            </template>
          </tableLayout>
        </div>
        <span slot="footer" class="dialog-footer" style="display:flex;justify-content: space-evenly">
          <div>
            <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
            <el-button @click="prenv" size="small">上一步</el-button>
            <el-button type="primary" @click="submit" size="small">确认添加</el-button>
          </div>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import Search from '@/components/search/index'
import Table from '@/components/table/index'
export default {
  name: '',
  data() {
    return {
      params: {
        "id": 20220905151902,
        "content": {
            "where": {
                "condition": "" 
            }
        },
      },
      tablecols:'',
      tablecols2:'',
      dialogVisible: false,
      dialogVisible2: false,
      year:this.$route.query.year,
      selectProject:'',
      projectList:''
    };
  },
  components: { Search , Table },
  computed:{
  },
  watch:{
  },
  created() {
    this.getProjectList()
    this.tablecols = this.tool.tabelCol(this.$route.name).projectTable.tablecols
    this.tablecols2 = this.tool.tabelCol(this.$route.name).addProjectTargetTable.tablecols
  },
  methods: {
    /* 获取已有的项目数据 */
    async getProjectList() {
      let res = await this.$api.requested(this.params)
      
      this.projectList = res.data
    },
    handleClose() {
      this.dialogVisible = false
    },
    checkboxCallBack(data) {
      console.log(data);
      this.selectProject = data
    },
    next() {
      if(!this.selectProject) return
      this.dialogVisible = false
      this.dialogVisible2 = true
    },
    prenv() {
      this.dialogVisible = true
      this.dialogVisible2 = false
    },
    /* 基本目标更改 */
    baseTargetChange(val,data) {
      data.baseTarget = val.target.value
    },
    /* 挑战目标更改 */
    dealTargetChange(val,data) {
      data.doubleTarget = val.target.value
    },
    /* 预计时间 */
    timeChange(el,val,data) {
      let dateNumber = new Date(val)
      let y = dateNumber.getFullYear()
      let m = dateNumber.getMonth() + 1
      el.$el.querySelector('input').value = y + '-' + m
      data.dealTime = m
    },
    /* 搜索 */
    searchActive(data) {
      this.params.content.where.condition = data
      this.getProjectList()
    },
    /* 取消搜索 */
    clearData() {
      this.params.content.where.condition = ''
      this.getProjectList()
    },
    /* 提交 */
    async submit() {
      try {
        let temp = this.selectProject.map(item => {
          if(!item.sa_projectid || !item.baseTarget || !item.doubleTarget || !item.dealTime) throw '111'
          return {
            "sa_projectid": item.sa_projectid,
            "target_l": item.baseTarget,
            "target_h": item.doubleTarget,
            "month": item.dealTime
          }
        })
        let res = await this.$api.requested({
          "id": 20220905154102,
          "content": {
            "year": this.$route.query.year,
            "hrid": this.$route.query.id,
            // "sa_salestargetbillid":2,//可不传
            "project": temp
          }
        })
        this.tool.showMessage(res,() => {
          this.dialogVisible = false
          this.dialogVisible2 = false
          this.selectProject = []
          this.$emit('addSuccess')
          console.log(this.$refs.tables.$refs.tables.list);
          
          this.$refs.tables.$refs.tables.clearSelection()
        })
      } catch(err) {
        this.$notify({
          title:'提示',
          message:'请完整填写数据',
          type:'warning'
        })
      }
    }
  },
};
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  .base-info {
    display: flex;
    align-items: center;
  }
  .base-info .type {
    display: flex;
    align-items: center;
    margin-left: 60px;
  }
  .content {
    margin: 40px 0 16px 0;
  }
  /deep/.el-dialog__body {
    padding: 10px 20px 0 20px;
  }
  /deep/.dialog-footer {
    margin-top: 20px;
  }
  .base-target {
    width: 100%;
    padding: 0 15px;
    border: 1px solid #c0c4cc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    border-radius: 5px;
    background: #ffffff;
  }
  .base-target input {
    border: 0 none;
    outline: none;
    height: 32px;
    width: 100%;
  }
</style>
