<template>
<!-- 申请账号审批/申请启用审批 弹窗 -->
  <div class="apply-approval-dialog">
    <el-dialog
      :visible.sync="isApplyApprovalDialogShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="`申请${applyInfo.applyType===0?'启用':'账号'}审批`"
      @close="closeDialog"
      width="889px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <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
            v-model="applyInfo.applyData[0].ApplyReasons"
            disabled
            :rows="3"
          />
        </div>
        <div class="apply-form">
          <div class="apply-status">
            <span>审批状态</span>
             <el-radio-group v-model="applyStatus">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2" class="color-hint">驳回</el-radio>
            </el-radio-group>
          </div>
          <div class="reject-reason" v-if="applyStatus===2">
            <span>驳回理由</span>
            <textarea
              v-model="rejectReason"
              placeholder="请输入驳回理由"
              :rows="3"
            />
          </div>
        </div>
      </div>
      <div class="foot-container">
        <el-button type="primary" @click="handleApprove">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {applyApprovalList} from "../config";
import{etaTrialInterence}from '@/api/modules/crmApi.js';
export default {
  props:{
    isApplyApprovalDialogShow:{//弹窗显示
      type:Boolean,
      default:false
    },
    applyInfo:{//申请信息 applyType 0 申请启用 1 申请账号
      type:Object,
      default:()=>{
        return {
          applyType:0,
          applyData:[{ApplyReasons:''}]
        }
      }
    }
  },
  data() {
    return {
      applyStatus:1,//审批状态
      rejectReason:'',//驳回理由
      columnList:applyApprovalList,//表格列
      tableLoading:false,
      tableData:[]
    };
  },
  watch:{
    isApplyApprovalDialogShow(val){
      if(val){
        this.getTableData()
      }
    }
  },
  methods: {
    async handleApprove(){
      //提交这条审批
      let res = null
      if(this.applyStatus===1){
        res = await etaTrialInterence.agreeApply({
          ApprovalId:this.tableData[0].ApprovalId
        })
      }else{
        if(!this.rejectReason.length){
          this.$message.warning('请填写驳回理由')
          return
        }
        res = await etaTrialInterence.rejectApply({
          ApprovalId:this.tableData[0].ApprovalId,
          RejectReason:this.rejectReason
        })
      }
      if(res.Ret!==200) return 
      this.$message.success(this.applyStatus===1?'通过成功':'驳回成功')
      this.$emit('approved')
      this.closeDialog()
    },
    closeDialog(){
      //清空数据什么的
      this.applyStatus=1
      this.rejectReason=''
      this.$emit("update:isApplyApprovalDialogShow", false);
    },
    getTableData(){
      this.tableLoading = true
      this.tableData = this.applyInfo.applyData
      this.$nextTick(()=>{
        this.tableLoading=false
      })
    },
  },
};
</script>
<style lang="scss">
.apply-approval-dialog{
  .apply-status{
    .el-radio{
      //更改单选框的样式
    .el-radio__inner{
      background: transparent;
      &::after{
        width:6px;
        height:6px;
        background-color: #409EFF;
      }
    }
    }
  }
  .color-hint{
    //更改驳回的样式
    &.is-checked{
      .el-radio__inner{
        border-color: #C54322;
        &::after{
          background-color: #C54322;
        }
      }
      .el-radio__input{
        &.is-checked{//我真服了
          +.el-radio__label{
            color: #C54322;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.apply-approval-dialog{
  .dialog-container{
    /* .table-wrap{} */
    .apply-reason{
      margin-top:30px;
      padding-bottom:30px;
      border-bottom: 1px dashed #DCDFE6;
    }
    .apply-form{
      margin-top:30px;
      /* .apply-status{} */
      .reject-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>
