<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 14:02:40
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-08 15:24:08
 * @FilePath     : j:\公司\haoban-4\src\components\company\auth-commit-success.vue
 -->
<!--
  提交审核
  <auth-commit :admin-list="adminList" :reason="reason" @changeStep="changeStep" @returnStep="returnStep"></auth-commit>
  import authCommitSuccess from '@/components/company/auth-commit.vue';
 -->
<template>
  <div class="auth-commit-admin">
    <common-alert-tip :width="'328px'" :tip-content="tipContent" class="m-b-32"></common-alert-tip>
    <el-form :model="commitForm" :rules="rules" ref="commitForm" label-width="100px" class="dialog-form">
      <el-form-item label="申请事项" prop="commitName">
        <el-input class="w-198" v-model="commitForm.commitName" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请理由" prop="auditReason">
        <limit-textarea :input-width="298" :input-value.sync="commitForm.auditReason" :holder="'请输入申请理由'" :get-by-type="'word'" :max-length="50"></limit-textarea>
      </el-form-item>
      <el-form-item label="审核人" prop="">
        <div class="flex flex-wrap audit-admin-body">
          <template v-for="(item, index) in commitForm.auditAdmin">
            <span class="audit-admin" :key="index+'admin'">
              {{item.clerkName | formatWord}}（{{item.nationCode +'-'+ item.phoneNumber}}）
            </span>
          </template>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
       <el-button type="primary" :loading="loadBtn" @click="submitForm('commitForm')">提交审核</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import commonAlertTip from '@/components/common/common-alert-tip.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import { _throttle } from '@/common/js/public';
export default {
  name: 'AuthCommit',
  components: {
    commonAlertTip,
    limitTextarea
  },
  props: {
    reason: {
      type: String,
      default: ''
    },
    adminList: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tipContent: '提交商户绑定审核，经审核员同意后绑定成功',
      commitForm: {
        commitType: 1,
        commitName: '商户授权',
        auditReason: this.reason || '',
        auditAdmin: []
      },
      rules: {
        auditReason: [
          {
            required: true,
            message: '请输入申请理由',
            trigger: 'blur'
          }
        ]
      },
      loadBtn: false
    };
  },

  mounted() {
    const that = this;
    that.commitForm.auditAdmin = JSON.parse(JSON.stringify(that.adminList));
  },
  methods: {
    /**
     * @description: 取消
     * @author: 无尘
     */
    cancel() {
      const that = this;
      that.$emit('returnStep');
    },
    /**
     * @description: 提交审核
     * @param {String} form
     * @author: 无尘
     */
    submitForm: _throttle( function(form) {
      const that = this;
      that.loadBtn = true;
      that.$refs[form].validate(valid => {
        if (valid) {
          that.toCommitPost();
        } else {
          that.loadBtn = false;
          return false;
        }
      });
    }, 5000),
    toCommitPost() {
      const that = this;
      that.$emit('changeStep', that.commitForm.auditReason);
      that.$nextTick(()=>{
        that.loadBtn = false;
      });
    },
    /**
     * @description: 路由跳转
     * @param {String} path
     * @author: 无尘
     */
    changeRoute(path) {
      this.$router.push(path);
    },
  },
  watch: {
    adminList(val) {
      const that = this;
      that.commitForm.auditAdmin = JSON.parse(JSON.stringify(val));
    }
  }
};
</script>
<style lang="less" scoped>
.auth-commit-admin {
  width: 400px;
  margin: 0 auto;
  .color-49c958 {
    color: #49c958;
  }
  .font-60 {
    font-size: 60px;
  }
  .m-t-12 {
    margin-top: 12px;
  }
  .m-t-28 {
    margin-top: 28px;
  }
  .m-b-32 {
    margin-bottom: 32px;
  }
  .w-198 {
    width: 198px;
  }
  .audit-admin-body {
    min-width: 500px;
    .audit-admin {
      position: relative;
      color: #606266;
      font-size: 14px;
      padding: 0 8px;
      margin-bottom: 10px;
      &:nth-child(2n) {
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 10px;
          width: 0;
          height: 14px;
          border-left: 1px solid #dcdfe6;
        }
      }
    }
  }
}
</style>
