<template>
<!-- 新增申请 提示弹窗 弹窗 -->
  <div class="add-apply-hint-dialog">
    <el-dialog
      v-if="isAddApplyHintShow"
      :visible.sync="isAddApplyHintShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="提示"
      @close="handleApprove(false)"
      width="889px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <p class="hint">{{hintText}}</p>
        <div class="table-wrap">
          <el-table :data="tableData" border v-loading="tableLoading">
            <el-table-column v-for="column in columnList" :key="column.label"
              align="center"
              :prop="column.key"
              :label="column.label"
              :min-width="column.minWidth"
            />
          </el-table>
        </div>
        <div class="apply-reason" v-if="applyInfo.applyType===0">
          <p>申请理由</p>
          <textarea
            placeholder="请输入申请理由"
            v-model="applyReason"
            :rows="3"
          />
        </div>
      </div>
      <div class="foot-container">
        <template v-if="applyInfo.applyType===0">
          <el-button type="primary" @click="handleApprove">申请启用</el-button>
          <el-button @click="handleApprove(false)">取 消</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="closeDialog">知道了</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import{etaTrialInterence}from '@/api/modules/crmApi.js';
import {applyApprovalList,textMap} from "../config"
export default {
  props:{
    isAddApplyHintShow:{//弹窗显示
      type:Boolean,
      default:false
    },
    applyInfo:{//申请信息 
      type:Object,
      default:()=>{
        return {
          applyType:1,//0 账号禁用 1 信息重复
          applyData:[]
        }
      }
    }
  },
  computed:{
  },
  watch:{
    isAddApplyHintShow(val){
      if(val){
        this.getTableData()
        this.hintText = textMap[this.applyInfo.applyType]
      }
    }
  },
  data() {
    return {
      tableData:[],
      applyData:[],
      dataIndex:0,
      columnList:applyApprovalList,
      applyReason:'',
      tableLoading:false,
      hintText:'',
    };
  },
  methods: {
    closeDialog(){
      //清空数据什么的
      this.applyReason=''
      this.tableData=[]
      this.applyData=[]
      this.dataIndex=0
      this.$emit("closeDialog");
      if(this.applyInfo.applyType===0){
        this.$emit('overBannedList')
        return
      }
      if(this.applyInfo.applyType===1){
        this.$emit('overRepeatList')
        return
      }
      
    },
    getTableData(){
      //console.log('getTableData:applyType',this.applyInfo.applyType)
      this.tableLoading = true
      //如果是申请启用,则只展示一条数据
      if(this.applyInfo.applyType===0){
        this.applyData = this.applyInfo.applyData
        this.tableData = [this.applyData[0]]
        this.dataIndex = 0
      }
      //如果是申请信息重复,则展示全部数据
      else{
        this.tableData = this.applyInfo.applyData
        this.dataIndex = 0
      }
      this.$nextTick(()=>{
        this.tableLoading=false
      })
    },
    async handleApprove(getNext=true){
      if(getNext){
        // if(!this.applyReason.length){
        //   this.$message.warning('请输入申请理由')
        //   return
        // }
        const {UserName,CompanyName,Position,Mobile} = this.applyData[this.dataIndex]
        //调用申请接口
        const res = await etaTrialInterence.applyEnable({
          UserName,CompanyName,Position,Mobile,
          ApplyReasons:this.applyReason
        })
        if(res.Ret!==200) return 
        this.$message.success('提交成功')
        //申请成功 在父页面将该记录删除
        this.$emit('applyActiveSuccess',this.applyData[this.dataIndex]) 
      }
      this.applyReason=''
      this.getNextTableData()
    },
    getNextTableData(){
      this.dataIndex++
      const length = this.applyData.length
      if(length-1>=this.dataIndex){
        this.tableData = [this.applyData[this.dataIndex]]
      }else{
        this.closeDialog()
      }
    }
  },
};
</script>

<style scoped lang="scss">
.add-apply-hint-dialog{
  .dialog-container{
    .table-wrap{
      margin-top:20px;
    }
    .apply-reason{
      margin-top:30px;
    }
    textarea{
      width:100%;
      margin-top: 10px;
      padding:10px;
      border-radius: 4px;
      box-sizing: border-box;
      border-color: #DCDFE6;
    }
  }
  .foot-container{
    text-align: center;
    padding-bottom: 40px;
    margin-top: 60px;
  }
}
</style>
