<template>
  <div class="add-approval-wrap">
   <!--  {{tableData}} -->
    <el-table :data="tableData" :row-class-name="tableRowClassName" v-loading="pageLoading" border>
      <!-- 序号 -->
      <el-table-column
        type="index"
        width="50"
        label="序号"
        align="center"
      />
      <!-- 姓名 -->
      <el-table-column label="姓名" min-width="100">
        <template slot-scope="{row}">
          <el-input v-model="row.UserName" :disabled="row.isApply" placeholder="姓名"></el-input>
        </template>
      </el-table-column>
      <!-- 公司名称 -->
      <el-table-column label="公司名称" min-width="150">
        <template slot-scope="{row}">
          <el-input v-model="row.CompanyName" :disabled="row.isApply" placeholder="公司名称"></el-input>
        </template>
      </el-table-column>
      <!-- 职位 -->
      <el-table-column label="职位" min-width="100">
        <template slot-scope="{row}">
          <el-input v-model="row.Position" :disabled="row.isApply" placeholder="职位"></el-input>
        </template>
      </el-table-column>
      <!-- 手机号码 -->
      <el-table-column label="手机号码" min-width="120">
        <template slot-scope="{row}">
          <el-input v-model.trim="row.Mobile" :disabled="row.isApply" placeholder="手机号码"></el-input>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="text" size="small" @click="addTableData">添加</el-button>
          <el-button type="text" size="small" class="color-hint" 
            @click="deleteTableData($index)"
            v-if="(tableData.length>1&&!row.isApply)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="btn-wrap">
      <el-button type="primary" @click="handleApprove">提交申请</el-button>
      <el-button @click="cancelApprove">取 消</el-button>
    </div>
    <!-- 提示弹窗 -->
    <add-apply-hint-dialog 
      :isAddApplyHintShow.sync="isAddApplyHintShow"
      :applyInfo="applyInfo" 
      @overBannedList="checkApproveData([],repeatList,internalList)"
      @overRepeatList="checkApproveData([],[],internalList)"
      @applyActiveSuccess="updateTableData"
      @closeDialog="closeDialog"
      />
  </div>
</template>

<script>
import addApplyHintDialog from './compontents/addApplyHintDialog.vue';
import{etaTrialInterence}from '@/api/modules/crmApi.js';
export default {
  components: { addApplyHintDialog },
  data() {
    return {
      tableData:[{
        isApply:false
      }],
      isAddApplyHintShow:false,
      applyInfo:{},
      repeatList:[],
      pageLoading:false,
      internalList:[],
    };
  },
  methods: {
    addTableData(){
      this.tableData.push({isApply:false})
    },
    deleteTableData(index){
      this.tableData.splice(index,1)
    },
    tableRowClassName({row}){
      //提交后未通过的 账号已被禁止,账号已重复
      if(row.isApply===false&&row.isPass===false){
        return 'warning-row'
      }
      //提交前未校验通过的 四项数据未填写或填写错误
      if(row.isApply===false&&row.isChecked===false){
        return 'warning-row'
      }
      return ''
    },
    checkTableData(data){
      let phoneArr = []
      for(let i=0;i<data.length;i++){
        const item = data[i]
        //已经添加过的不再做校验 因为这条数据不会提交
        if(item.isApply) continue
        if((item.UserName&&!item.UserName.length)||!item.UserName){
          this.$message.warning(`请输入第${i+1}条数据的姓名`)
          return false
        }
        if((item.CompanyName&&!item.CompanyName.length)||!item.CompanyName){
          this.$message.warning(`请输入第${i+1}条数据的公司名称`)
          return false
        }
        if((item.Position&&!item.Position.length)||!item.Position){
          this.$message.warning(`请输入第${i+1}条数据的职位`)
          return false
        }
        if((item.Mobile&&!item.Mobile.length)||!item.Mobile){
          this.$message.warning(`请输入第${i+1}条数据的电话号码`)
          return false
        }
        if(phoneArr.indexOf(data[i].Mobile)===-1){
          phoneArr.push(data[i].Mobile)
        }else{
          //console.log('phoneArr',phoneArr)
          this.updateTableData(data[i],'update')
          this.$message.warning(`用户信息重复，请确认`)
          return false
        }
      }
      return true
    },
    async handleApprove(){
      if(this.pageLoading) return
      //检查数据
      if(!this.checkTableData(this.tableData)) return 
      //提交tableData中 isApply为false的
      const data = this.tableData.filter((item)=>{return !item.isApply})
      this.tableData = this.tableData.filter((item)=>{return item.isApply})
      data.forEach(item=>{
        delete item.isApply
        delete item.isPass
        delete item.isChecked
      })
      //说明该页数据全部已提交 直接跳转审批列表
      if(!data.length){
        this.$message.success('提交成功')
        this.$router.push('/etaApprovalList')
        return
      }
      //提交申请 data
      this.pageLoading = true
      const res = await etaTrialInterence.addApproval({List:data})
      this.pageLoading = false
      if(res.Ret!==200){
        !this.tableData.length&&this.addTableData()
        return
      }
      const {BannedList,//禁用的列表
             RepeatList,//重复的列表
             SuccessList,//成功返回的列表
             InternalList,//除ETA试用平台其他部门重复的列表
            } = res.Data
      //如果这次提交的data全部通过,则跳转回审批列表
      if(SuccessList&&SuccessList.length===data.length){
        this.$message.success('提交成功')
        this.$router.push('/etaApprovalList')
      }
      //如果没有全部通过 通过的设置isApply为true 没通过的执行checkApproveData
      else{
        const successList = SuccessList?SuccessList.map(item=>{
          item.isApply = true
          item.isPass = true
          return item
        }):[]
        const bannedList = BannedList?BannedList.map(item=>{
          item.isApply = false
          item.isPass = false
          return item
        }):[]
        const repeatList = RepeatList?RepeatList.map(item=>{
          item.isApply = false
          item.isPass = false
          return item
        }):[]
        const internalList = InternalList?InternalList.map(item=>{
          item.isApply = false
          item.isPass = false 
          return item
        }):[]
        this.tableData = this.tableData.concat(successList,bannedList,repeatList,internalList)
        !this.tableData.length&&this.addTableData()
        this.checkApproveData(bannedList,repeatList,internalList)
      }
    },
    checkApproveData(BannedList=[],RepeatList=[],InternalList=[]){
      if(BannedList.length){
        this.applyInfo.applyType = 0
        this.applyInfo.applyData = BannedList
        this.repeatList = RepeatList
        this.internalList = InternalList
      }else if(RepeatList.length){
        //展示全部信息
        this.applyInfo.applyType = 1
        this.applyInfo.applyData = RepeatList
        this.internalList = InternalList
      }
      if(!BannedList.length&&!RepeatList.length){
        if(InternalList.length){
          //展示轻提示
          this.$message.error('用户信息重复，请联系管理员或技术部门')
        }
        return 
      }
      this.$nextTick(()=>{
        this.isAddApplyHintShow = true
      })
    },
    updateTableData(data,type='remove'){
      //console.log('update',data)
      //手机号作为标识
      const index = this.tableData.findLastIndex((item)=>{return item.Mobile===data.Mobile})
      const tableItem = this.tableData[index]
      if(type==='remove'){
        /* tableItem.isApply = true
        tableItem.isPass = true
        this.tableData.splice(index,1,tableItem) */
        this.tableData.splice(index,1)
        //如果删掉的是最后一个
        if(!this.tableData.length){
          this.addTableData()
        }
      }else{
        tableItem.isChecked=false
        this.tableData.splice(index,1,tableItem)
      }      
    },
    cancelApprove(){
      //返回ETA试用列表
      this.$router.push('/etaTrialList')
    },
    closeDialog(){
      this.isAddApplyHintShow = false
    }
  },
  mounted(){
    if(sessionStorage.getItem('applyInfo')){
      const applyInfo = JSON.parse(sessionStorage.getItem('applyInfo'))
      sessionStorage.removeItem('applyInfo')
      const data = applyInfo.applyData[0]
      data.isApply = false
      //this.tableData.unshift(data)
      this.tableData=[data]
    }
  }
};
</script>

<style lang="scss">
.add-approval-wrap{
  .el-table .warning-row {
    background: #FEF0F0;
  }
}
</style>
<style scoped lang="scss">
.add-approval-wrap{
  padding:30px;
  background-color: #fff;
  border-radius: 4px;
  .color-hint{
    color: red;
  }
  .btn-wrap{
    margin-top:120px;
    text-align: center;
  }
}
</style>
