<template>
    <basic-container>
        <el-drawer
        title=""
        append-to-body
        :visible.sync="drawer"
        size="70%"
        :wrapperClosable="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        class="examineDialog">
            <div class="companyTitle">
                <div class="title">
                    <h2>{{row.companyName}}</h2>
                    <p><span>所属市场：{{companyInfo.stationName}}</span><span>邀请码：{{row.inviteCode}}</span></p>
                </div>
                <div class="btn">
                    <el-button type="primary" size="small" @click="reviewHandelClick('0')">审核通过</el-button>
                    <el-button type="info" size="small" @click="reviewHandelClick('1')">审核不通过</el-button>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用工单位信息" name="companyInfo">
                    <el-form ref="form" :model="companyInfo" label-width="150px">
                        <el-form-item label="社会信用代码:">
                            <el-input v-model="companyInfo.companyTid" :disabled="true" ></el-input>
                        </el-form-item>
                        <el-form-item label="用工单位:">
                            <el-input v-model="companyInfo.companyName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="法人:">
                            <el-input v-model="companyInfo.masterName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号:">
                            <el-input v-model="companyInfo.masterIdentity" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="法人电话:">
                            <el-input v-model="companyInfo.masterPhone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="注册电话:">
                            <el-input v-model="companyInfo.telphone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="行业:">
                            <!-- <el-input v-model="companyInfo.tradeId" :disabled="true"></el-input> -->
                            <el-select v-model="companyInfo.tradeId" placeholder="请选择" :disabled="true">
                                <el-option
                                    v-for="(item,index) in tradeDic"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所在地区:">
                            <jl-city-cascader
                            :disabled="true"
                            v-model="companyInfo.cityId"
                            ></jl-city-cascader>
                        </el-form-item>
                        <el-form-item label="详细地址:">
                            <el-input v-model="companyInfo.companyAddress" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="服务设置" name="serviceInfo">
                    <ul class="serviceInfo">
                        <li v-for="(item,index) in configData" :key="index">
                            <div>{{item.name}}</div>
                            <span v-if="item.type == 1 && item.value == 0">停用</span><span v-else-if="item.type == 1 && item.value == 1">启用</span>
                            <span v-if="item.type == 4 && item.value == 1">未缴</span><span v-if="item.type == 4 && item.value == 0">已缴</span><span v-if="item.type == 4 && item.value == 2">免缴</span>
                            <span v-if="item.type == 3 && item.value == 0">停用</span><span v-if="item.type == 3 && item.value == 1">启用</span>
                            <span v-if="item.type == 2 && item.value == 0">关闭</span><span v-if="item.type == 2 && item.value == 1">开启</span>
                            <span v-if="item.type == 5 && item.value == 0">未签</span><span v-if="item.type == 5 && item.value == 1">已签</span>
                            <span v-if="item.type == 6 && item.value == 0">关闭</span><span v-if="item.type == 6 && item.value == 1">开启</span>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="服务费信息" name="serviceChargeInfo">
                    <div class="serviceChargeInfo">
                        <p class="tips">服务费：是企业享受二项服务（发工资和投商保）的费用，启用之后需新的订单才会生效。</p>
                        <el-table :data="serviceData" border>
                            <el-table-column label="产品">
                                <template>服务费</template>
                            </el-table-column>
                            <el-table-column label="服务费" prop="serveCost">
                                <template v-slot="{ row }">{{ moneyFormat(row.serveCost) }}元</template>
                            </el-table-column>
                            <el-table-column label="状态" prop="isEnabled">
                                <template v-slot="{ row }">
                                <span v-if="row.isEnabled === 0">停用</span>
                                <span v-else-if="row.isEnabled === 1">启用</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="附件" name="enclosure">
                    <avue-form
                        :option="option"
                        v-model="companyInfo"
                        ref="form"
                        @submit="formSubmit"
                        :upload-after="uploadAfter"
                        :upload-error="uploadError"
                        :upload-before="beforeAvatarUpload"
                        @on-load="onLoad"
                    >
                        <template slot="motoleyUrl">
                            <el-upload
                                    class="companyList-upload"
                                    list-type="picture-card"
                                    :auto-upload="true"
                                    :file-list="imgList"
                                    :limit="4"
                                    :action="mutiPutFile"
                                    :on-preview="handlePictureCardPreview"
                                    :on-exceed="handleImgLimit"
                                    :on-success="handleImgSuccess"
                                    :on-remove="handleImgRemove"
                                    :before-remove="beforeRemove"
                                    :before-upload="beforeAvatarUpload"
                                    :disabled="true"
                                >
                                    <i class="el-icon-plus"></i>
                            </el-upload>
                        </template>

                    </avue-form>
                    <i class="el-icon-download" @click="downloadAllClick('enclosure')">下载全部</i>
                </el-tab-pane>
                <el-tab-pane label="签发电子签章" name="contractOn">
                   <avue-form
                        :option="optionContractOn"
                        v-model="companyInfo"
                        ref="form"
                        @submit="formSubmit"
                        :upload-after="uploadAfter"
                        :upload-error="uploadError"
                        :upload-before="beforeAvatarUpload"
                        @on-load="onLoad"
                        disbled
                    >
                    </avue-form>
                    <i class="el-icon-download" @click="downloadAllClick('contractOn')">下载全部</i>
                </el-tab-pane>
                <el-tab-pane label="操作记录" name="operationRecord">
                    <company-config-record :data="record"></company-config-record>
                </el-tab-pane>
            </el-tabs>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-drawer>
    </basic-container>
</template>
<script>
import {getStation } from "@/api/manage/station";
import {getDetail} from "@/api/manage/company";
import { getTradeDic } from "@/api/manage/trade";
import { moneyFormat } from "@/util/money";
import { getConfigListNew } from "@/api/manage/companyRecord";
import companyConfigRecord from "../companyConfigRecordNew";
import Axios from "axios";
import { putFile } from "@/api/resource/oss";
import {
    getConfigNew,
    review,
    downloadList
  } from "@/api/manage/company";
const accept = [
  "image/png",
  "image/jpeg",
  "image/svg+xml",
  "image/gif",
  "image/x-photoshop",
];
export default {
    components: { companyConfigRecord },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        activeName: 'companyInfo',
        downloadUrls:'',
        formEnclosure:{},
        drawer:false,
        companyInfo:{},
        row:{},
        inviteCode:null,
        tradeDic:[],
        configData:[],
        companyId: null,
        tenantId: null,
        serviceData: [],
        record:[],
        mutiPutFile: putFile(),
        imgList:[],
        option: {
            labelWidth: 200,
            menuBtn:false,
            column: [
            {
                type: "upload",
                label: "法人身份证（人像）",
                span:12,
                showFileList: false,
                disabled:true,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "identityUrl4Id",
                action: putFile(),
                viewDisplay: false,
                rules: [
                    {
                    required: true,
                    message: "请上传法人身份证（人像）",
                    },
                ],
            },
            {
                type: "upload",
                label: "法人身份证（国徽）",
                span: 12,
                disabled:true,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "identityUrl5Id",
                action: putFile(),
                viewDisplay: false,
                rules: [
                    {
                    required: true,
                    message: "请上传法人身份证（国徽）",
                    },
                ],
                // tip:'上传图片大小限制2M以内',
            },
            {
                type: "upload",
                label: "营业执照",
                span: 12,
                disabled:true,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                accept,
                canvasOption: {},
                headers: [],
                data: [],
                size: "small",
                prop: "authUrlId",
                action: putFile(),
                viewDisplay: false,
                rules: [
                    {
                    required: true,
                    message: "请上传营业执照照片",
                    },
                ],
                    // tip:'上传图片大小限制2M以内',
            },

            {
                type: "upload",
                label: "授权委托书",
                disabled:true,
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "letterOfAttorneyUrl",
                action: putFile(),
                viewDisplay: false,
                rules: [
                    {
                    required: true,
                    message: "请上传授权委托书",
                    },
                ],
                // tip:'上传图片大小限制2M以内',
            },
            {
                label: "招聘简章",
                disabled:true,
                formslot:true,
                span:24,
                prop:'motoleyUrl',
                rules: [
                  {
                    required: true,
                    message: "请上传招聘简章",
                  },
                ],
                viewDisplay: false,
            },
            ]
        },
        optionContractOn: {
            labelWidth: 200,
            menuBtn:false,
            column: [
            {
                type: "upload",
                label: "电子签章申请表",
                span: 12,
                showFileList: false,
                disabled:true,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                accept,
                canvasOption: {},
                headers: [],
                data: [],
                size: "small",
                prop: "signSrcUrl",
                action: putFile(),
                viewDisplay: false,

                rules: [
                    {
                    required: true,
                    message: "请上传电子签章申请表",
                    },
                ],
                // tip:'上传图片大小限制2M以内',
            },
            {
                type: "upload",
                disabled:true,
                label: "电子签章章模",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "templateUrl",
                action: putFile(),
                viewDisplay: false,
                rules: [
                    {
                    required: true,
                    message: "电子签章章模",
                    },
                ],
                // tip:'上传图片大小限制2M以内',
            },
            ]
        }
      };
    },
    methods:{
        moneyFormat,
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //下载全部
        downloadAllClick(name){
            this.downloadUrls = '';
            if(name == 'enclosure'){
                this.downloadUrls += this.companyInfo.identityUrl4Id + ',';
                this.downloadUrls += this.companyInfo.identityUrl5Id + ',';
                this.downloadUrls += this.companyInfo.authUrlId + ',';
                this.downloadUrls += this.companyInfo.letterOfAttorneyUrl + ',';
                this.downloadUrls += this.companyInfo.motoleyUrl;
            }else{
                this.downloadUrls += this.companyInfo.signSrcUrl + ',';
                this.downloadUrls += this.companyInfo.templateUrl;
            }
            window.open(downloadList(this.downloadUrls));
        },
        //审核接口
        reviewHandelClick(status){
            if(status == 1){
                this.$prompt('原因：', '审核不通过', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[^\d.]/g,
                inputErrorMessage: '请输入暂不发放原因',
                }).then(({ value }) => {
                 review(this.companyId,status,value).then((res) => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                     this.drawer = false;
                     this.$emit("refresh")
                    })
                }).catch(() => {

                });
            }else{
                review(this.companyId,status,'').then((res) => {
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.drawer = false;
                this.$emit("refresh")
            });
            }

        },
        /*多张图片上传*/

        handleImgLimit(){
            this.$message.warning('当前最多上传4张图片');
        },
        handleImgSuccess(res){
            if(res.code==200){
                this.imgList.push({url:res.data.link});

            var str="";
            for(var i=0;i<this.imgList.length;i++){
                str+=this.imgList[i]['url']+",";
            }
            if(str.length>0){
                str=str.substr(0,str.length-1);
            }
            this.companyInfo.motoleyUrl=str;
            }
            else{
                this.$message.error('上传失败');
            }

        },
        handleImgRemove(file){
            let index=0;
            for(let i in this.imgList){
                if(this.imgList[i]['uid']==file.uid){
                index=i;
                break;
                }
            }
            this.imgList.splice(index,1);
            var str="";
            for(var i=0;i<this.imgList.length;i++){
                str+=this.imgList[i]['url']+",";
            }
            if(str.length>0){
                str=str.substr(0,str.length-1);
            }
            this.companyInfo.motoleyUrl=str;
        },
        //获取企业服务配置
        getConfig() {
            this.loading = true;
            Axios.all([
                getConfigListNew(this.companyId,0),
                getConfigNew(this.companyId),
            ]).then(
            Axios.spread((record, config) => {
                this.record = record.data.data;
                this.configData = config.data.data.config;
                this.serviceData = config.data.data.fee;
                this.loading = false;
            })
            );
            },
        /*打开drawer*/
        openDialog (row) {
            this.companyId = row.id;
            this.tenantId = row.tenantId;
            this.inviteCode = row.inviteCode;
            this.row = row;
            this.drawer = true;
            this.imgList = [];
            getTradeDic(true).then((res) => {
                this.tradeDic = res.data.data;
            });
            getDetail(row.id).then((res) => {
                this.loading = false;
                this.companyInfo = res.data.data;
                // if(this.form.tradeId==1){
                //     this.form.tradeId='';
                //     this.tradeId = this.form.tradeId;
                // }
                if(this.companyInfo.motoleyUrl!=""){
                    var strList=this.companyInfo.motoleyUrl.split(',');
                for(var i in strList){
                    this.imgList.push({url:strList[i]})
                }
                }
                getStation().then((res)=>{
                    let getStationList = res.data.data;
                    getStationList.forEach((ele) => {
                        if(row.stationId == ele.stationId){
                            this.companyInfo.stationName = ele.stationName;
                        }
                    });
                })
            });
            this.getConfig();


        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
}
</script>
<style lang="scss">
    .examineDialog .companyTitle{
        border-bottom: 2px solid #e7e7e7;
        margin-bottom: 30px;
        display: flex;
    }
    .examineDialog .el-drawer__header{
        padding: 0;
        margin: 0;
    }
    .examineDialog .companyTitle p span{
        margin-right: 20px;
    }
    .examineDialog .companyTitle h2{
        margin: 0;
        padding: 0;
    }
    .examineDialog .companyTitle .title{
        width: 85%;
    }
    .examineDialog .companyTitle .btn{
        margin-top: 40px;
    }
    .examineDialog .el-form-item{
        float: left;
        width: 35%;
    }
    .examineDialog .el-cascader,.examineDialog .el-select{
        width: 100%;
    }
    .examineDialog .el-input__suffix{
        display: none;
    }
    .examineDialog .serviceInfo li{
        display: flex;
        height: 50px;
        background-color: #F5F7FA;
        border-radius: 10px;
        margin-top: 20px;
        line-height: 50px;
    }
    .examineDialog .serviceInfo li div{
        width: 60%;
        margin-left: 20px;
    }
    .examineDialog .serviceInfo li span{
        color: #409EFF;
    }
    .examineDialog .serviceChargeInfo .tips{
        line-height: 30px;
        color: #ff0000;
    }
    .examineDialog .el-icon-download{
        color: #1989fa;
        cursor: pointer;
        position: relative;
        right: -120px;
        top: 0;
    }
    .v-modal{
        z-index: -1 !important;
    }
</style>

