<template>
  <div class="add">
    <el-button @click="dialogVisible=true" type="text" size="small" v-if="type=='project'">添加</el-button>
    <el-button @click="dialogVisible=true" size="small" v-else>添加产品</el-button>
    <!--添加产品-->
    <el-dialog title="添加产品" append-to-body :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div style="display:flex;margin-bottom:20px" v-if="type=='project'">
        <span style="margin-right:20px"> 项目编号: {{data1.data.projectnum}}</span>
        <span>项目名称: {{data1.data.projectname}}</span>
      </div>
      <div style="display:flex;margin-bottom:20px" v-else>
        <span>请选择你的产品</span>
      </div>
      <el-select v-model="idArr" @change="selectChange" multiple placeholder="请选择" size="small">
        <el-option v-for="(item,index) in productList" :key="index" :label="item.itemclassfullname"
          :value="item.itemclassid">
        </el-option>
      </el-select>
      <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" :disabled="!selectProject == true" size="small">确定添加</el-button>
        </div>
      </span>
    </el-dialog>
    <!--编辑产品数据-->
    <el-dialog title="添加产品" append-to-body :visible.sync="dialogVisible2" width="60%" :before-close="handleClose2">
      <div style="display:flex;margin-bottom:20px" v-if="type=='project'">
        <span style="margin-right:20px"> 项目编号: {{data1.data.projectnum}}</span>
        <span>项目名称: {{data1.data.projectname}}</span>
      </div>
      <div style="display:flex;margin-bottom:20px" v-else>
        <span>请编辑产品数据</span>
      </div>
      <readHeaderTable :layout="tablecols" :custom="true" :data="selectProject">
        <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname != 'itemclassfullname'" class="base-target">
              <input type="text" @input="baseTargetChange($event,scope.column.data,scope.column.columnname)">
            </div>
            <div v-else>
              {{scope.column.data[scope.column.columnname]}}
            </div>
        </template>
      </readHeaderTable>
      <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 type="primary" @click="editNum" size="small">确定提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import readHeaderTable from './readHeaderTable'
export default {
  name: '',
  data () {
    return {
      dialogVisible: false,
      dialogVisible2:false,
      /* 选中的产品 */
      selectProject:'',
      idArr: ''
    };
  },
  components:{readHeaderTable},
  props: ['data1', 'productList','tablecols','type'],
  computed: {
  },
  watch: {

  },
  methods: {
    addProject () {
      if(!this.selectProject) return 
      this.dialogVisible = false
      this.dialogVisible2 = true
    },
    /* 编辑产品数据 */
    async editNum() {
      try {
        this.selectProject.forEach(item => {
          if(typeof item.invoiceamount != 'string' || typeof item.orderamount  != 'string' || typeof item.outamount  != 'string') throw '111'
        })   
        console.log(this.selectProject);
        
        let res = await this.$api.requested({
            "id": 20220906155003,
            "version":1,
            "content": {
                "sa_salesforecastmodelid":this.$route.query.id2,
                "sa_salesforecastbillid":this.type == 'project' ? this.data1.data.sa_salesforecastbillid : this.$route.query.id,
                "sa_projectid": this.type == 'project' ? this.data1.data.sa_projectid : 0,
                "itemclassinfos": this.selectProject
            }
        })
        this.tool.showMessage(res,() => {
          this.$emit('addSuccess')
          this.dialogVisible2 = false
          this.idArr = ''
          this.selectProject = []
        })
      } catch (err) {
        this.$notify({
          title:'提示',
          message:'请填写必填项',
          type:'warning'
        })
      }
         
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleClose2() {
      this.dialogVisible2 = false
    },
    selectChange(data) {
      this.selectProject = data.map(item => {
        let result = this.productList.find(item2 => {
          return item2.itemclassid == item
        })
        console.log(result);
        return {
          sa_salesforecastid:0,
          itemclassnum:result.itemclassnum,
          itemclassfullname:result.itemclassfullname,
          orderqty:0,
          orderamount:0,
          invoiceqty:0,
          invoiceamount:0,
          outqty:0,
          outamount:0,
        }
      })
    },
    /* 基本目标更改 */
    baseTargetChange(val,data,name) {
      data[name] = val.target.value
    },
  },
};
</script>

<style scoped>
/deep/.el-select {
  width: 100% !important;
}
/deep/.el-dialog__body {
  padding-bottom: 0 !important;
}
.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>
