<template>
<basic-container>
    <el-drawer
    title=""
    append-to-body
    :visible.sync="drawer"
    size="70%"
    class="checkDialog"
    :wrapperClosable="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    >
        <div class="tips" v-show="entranceFlag == 'fail'">
            <span>审核不通过原因：</span>{{form.remarks}}
        </div>
        <avue-form
            :option="option"
            v-model="form"
            ref="form"
            @submit="formSubmit"
            :upload-after="uploadAfter"
            :upload-error="uploadError"
            :upload-before="beforeAvatarUpload"
            @on-load="onLoad"
        >
            <template slot="stationId" slot-scope="{}">
                <el-input
                    placeholder=""
                    v-model="form.stationName"
                    :disabled="true">
                </el-input>
            </template>
            <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"
                    >
                        <i class="el-icon-plus"></i>
                </el-upload>
      </template>
            <template slot-scope="{}" slot="tradeId">
                <el-select v-model="form.tradeId" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in tradeDic"
                        :key="index"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot="cityId" slot-scope="{ disabled }">
                <jl-city-cascader
                :disabled="disabled"
                v-model="form.cityId"
                ></jl-city-cascader>
            </template>
        </avue-form>
        <div class="serviceSettings">
            <h2>服务设置</h2>
                <div class="serviceSetBox" v-for="(item,index) in configData" :key="index">
                    <div v-if="item.type == 5" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>合同<span v-if="item.value == 0">未签</span><span v-else-if="item.value == 1">已签</span></h3>
                            <p>合同是平台与企业签订的合作合同，详细记录了合作细节，是平台与企业合作关系的重要依据。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text" @click="configSubmit(item)">
                                <span v-if="item.value == 0">已签</span>
                                <span v-else-if="item.value == 1">未签</span>
                            </el-button>
                        </div>
                    </div>
                    <div v-else-if="item.type == 4" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>保证金<span v-if="item.value == 1">未缴</span><span v-if="item.value == 0">已缴</span><span v-if="item.value == 2">免缴</span></h3>
                            <p>保证金是保证平台权益和企业权益的重要担保，企业不缴纳保证金不可以发布任务。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text" v-if="item.value != 2" @click="configPay(item, 'free')">免缴</el-button>
                            <el-button type="text" v-if="item.value != 0" @click="configPay(item, 'yes')">已缴</el-button>
                            <el-button type="text" v-if="item.value != 1" @click="configPay(item, 'no')">未缴</el-button>
                        </div>
                    </div>
                    <div v-else-if="item.type == 1" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>商保<span v-if="item.value == 0">停用</span><span v-if="item.value == 1">启用</span></h3>
                            <p>是保障员工安全的重要手段，减少了企业的用工风险。为企业开通商保后，企业不为员工投保则不可以录用相应员工。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text"  @click="configSubmit(item)">
                                <span v-if="item.value == 1">停用</span><span v-if="item.value == 0">启用</span>
                            </el-button>
                        </div>
                    </div>
                    <div v-else-if="item.type == 6" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>电子合同<span v-if="item.value == 0">关闭</span><span v-if="item.value == 1">启用</span></h3>
                            <p>电子合同是企业与员工签订的合作协议，详细记录了用工要求与责任，是企业与员工合作关系的重要依据。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text" v-if="item.value == 1" @click="configSubmit(item)">关闭</el-button>
                            <el-button type="text" v-if="item.value == 0"  @click="configOpenElec(item)">启用</el-button>
                        </div>
                    </div>
                    <div v-else-if="item.type == 2" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>先开票<span v-if="item.value == 0">停用</span><span v-if="item.value == 1">启用</span></h3>
                            <p>打开先开票服务，企业可不支付订单就可以申请开发票，请谨慎设置。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text"  @click="configSubmit(item)">
                                <span v-if="item.value == 1">停用</span><span v-if="item.value == 0">启用</span>
                            </el-button>
                        </div>
                    </div>
                    <div v-else-if="item.type == 3" class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>银联代发<span v-if="item.value == 0">停用</span><span v-if="item.value == 1">启用</span></h3>
                            <p>银联代发是线上发放工资的一种方式。设置为打开状态，企业工资可以使用线上待发渠道发放。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text"  @click="configSubmit(item)">
                                <span v-if="item.value == 1">停用</span><span v-if="item.value == 0">启用</span>
                            </el-button>
                        </div>
                    </div>
                    <div v-else class="showFlag">
                        <div class="serviceSetTitle" >
                            <h3>合同{{item}}<span>未签</span><span>已签</span></h3>
                            <p>合同是平台与企业签订的合作合同，详细记录了合作细节，是平台与企业合作关系的重要依据。</p>
                        </div>
                        <div class="serviceSetBtn">
                            <el-button type="text">
                                <span >已签</span>
                                <span>未签</span>
                            </el-button>
                        </div>
                    </div>
                </div>
                <!-- <el-divider @click="showMore = !showMore" class="moreBtn">更多 ︾</el-divider>
                <div style="margin-top: 20px;">
                    <el-collapse-transition>
                        <div v-show="showMore">
                            <div class="serviceSetBox">
                                <div class="serviceSetTitle">
                                    <h3>先开票<span>关闭</span></h3>
                                    <p>合同是平台与企业签订的合作合同，详细记录了合作细节，是平台与企业合作关系的重要依据。</p>
                                </div>
                                <div class="serviceSetBtn">
                                    <el-button type="text">开启</el-button>
                                     <el-button type="text">关闭</el-button>
                                </div>
                            </div>
                            <div class="serviceSetBox">
                                <div class="serviceSetTitle">
                                    <h3>银联代发<span>启用</span></h3>
                                    <p>合同是平台与企业签订的合作合同，详细记录了合作细节，是平台与企业合作关系的重要依据。</p>
                                </div>
                                <div class="serviceSetBtn">
                                    <el-button type="text">启用</el-button>
                                    <el-button type="text">停用</el-button>
                                </div>
                            </div>
                        </div>
                    </el-collapse-transition>
                </div> -->
            </div>
        </div>
        <div class="serviceCharge">
            <div class="company-config-title">
                <h2>服务费信息</h2>
                <div class="company-config-title-tool">
                    <el-button type="text" icon="el-icon-circle-plus-outline" @click="serviceVisible = true">添加新服务</el-button>
                </div>
            </div>
            <el-table :data="serviceData" border>
                <div slot="empty">请在右上角添加新服务</div>
                <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-column label="操作">
                    <template v-slot="{ row }">
                    <el-button size="small" type="text" :disabled="row.isEnabled === 1" @click="serverEnable(row)">启用
                    </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footerBtn">
            <el-button type="info" size="small" :loading="saveLoading" @click="saveBtnClick('form')" v-if="entranceFlag == 'fail'">仅保存</el-button>
            <el-button type="info" size="small" :loading="saveLoading" @click="saveBtnClick('form')" v-else><span v-if="entranceFlag == 'pause'">保存至待完善</span><span v-else>仅保存</span></el-button>
            <el-button type="primary" size="small" :loading="submitLoading" @click="submitBtnClick('form')"><span v-show="entranceFlag == 'fail'">重新</span>提交审核</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-dialog :visible.sync="serviceVisible" append-to-body @closed="serviceClosed">
            <avue-form ref="serviceForm" v-model="serviceForm" :option="serviceOption" @reset-change="emptytChange"
                @submit="serviceSubmit">
                <template v-slot:id>
                <span>服务费</span>
                </template>
            </avue-form>
        </el-dialog>
    </el-drawer>
</basic-container>
</template>
<script>
import { putFile } from "@/api/resource/oss";
import {getDetail,detailNew} from "@/api/manage/company";
import { moneyFormat, toCent } from "@/util/money";
import {getStation } from "@/api/manage/station";
import { getTradeDic } from "@/api/manage/trade";
import lodash from "lodash";
import { getConfigList } from "@/api/manage/companyRecord";
import Axios from "axios";
import { check18IdCardNo } from "@/util/validate";
import {
    getConfigNew,
    setConfig,
    addService,
    serviceEnable,
    whetherSignService,
  } from "@/api/manage/company";
const accept = [
  "image/png",
  "image/jpeg",
  "image/svg+xml",
  "image/gif",
  "image/x-photoshop",
];
let telphoneFlag = {flag:true};
export default {
    data () {
        const validateTradeId=(rule,value,callback)=>{
            if(value==''){
                callback(new Error('请选择所属行业'));
            }else{
                callback();
            }
        }

    return {
        dialogImageUrl: '',
        dialogVisible: false,
        serviceVisible: false,
        configData:[],
        information:{},
        tradeDic:[],
        saveLoading:false,
        submitLoading:false,
        form:{},
        entranceFlag:'',
        companyId: null,
        tenantId: null,
        configForm: {},
        serviceForm: {},
        record: [],
        loading:false,
        tradeId:"",
        serviceData: [],
        drawer: false,
        checkForm: {},
        serviceOption: {
          menuPosition: "right",
          labelWidth: 120,
          column: [
            {
              type: "select",
              label: "产品",
              prop: "id",
              formslot: true,
              span: 24,
            },
            {
              type: "number",
              label: "服务费金额",
              prop: "serveCost",
              precision: 2,
              rules: [{ required: true, message: "请输入服务费金额" }],
              span: 24,
            },
            {
              type: "select",
              label: "计量单位",
              prop: "serveUnit",
              dataType: "number",
              dicData: [{ value: 0, label: "元/人·次" }],
              rules: [{ required: true, message: "请选择计量单位" }],
              span: 24,
            },
          ],
        },
        checkRules: {
            name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          companyName: [
            { required: true, message: '请输入用工单位', trigger: 'blur' },
          ],
          trade: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        imgList:[],
        showMore: false,
        mutiPutFile: putFile(),
        option: {
        labelWidth: 200,
        menuBtn:false,
        group: [
            {
            label: "基本信息",
            prop: "baseInfo",
            arrow: false,
            column: [
              {
                label: "所属市场",
                prop: "stationId",
                disabled:true,
                span: 12,
                formslot: true,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "",
                    trigger: "blur",
                  },
                ],
              },
              {
                type: "select",
                label: "行业",
                size: "small",
                prop: "tradeId",
                formslot: true,
                span: 12,
                rules: [
                {
                    required:true,validator:validateTradeId,trigger:'blur'
                  }
                ],
                filterable: true,
              },
              {
                label: "用工单位",
                prop: "companyName",
                span: 12,
                display: true,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入用工单位",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "统一社会信用代码",
                prop: "companyTid",
                disabled:true,
                span: 12,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入统一社会信用代码",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "法人姓名",
                prop: "masterName",
                span: 12,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入法人姓名",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "身份证号",
                prop: "masterIdentity",
                span: 12,
                 rules: [
                    {
                        required: true,
                        whitespace: true,
                        message: "请输入身份证号",
                    },
                    {
                        validator: (rule, value, callback) => {
                        if (check18IdCardNo(value)) {
                            callback();
                        } else {
                            callback(new Error("身份证格式不正确"));
                        }
                        }
                    },
                    ],
              },
              {
                label: "法人电话",
                prop: "masterPhone",
                span: 12,
              },
              {
                type: "input",
                label: "注册电话",
                prop: "telphone",
                disabled:telphoneFlag.flag,
                span: 12,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请填写注册电话",
                    trigger: "blur",
                  },
                ],
              },
              {
                type: "input",
                label: "所在地区",
                span: 12,
                display: true,
                prop: "cityId",
                formslot: true,
                rules: [
                  {
                    required: true,
                    message: "请选择所在地区",
                  },
                ],
              },
              {
                label: "详细地址",
                prop: "companyAddress",
                span: 12,
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: "请输入详细地址",
                    trigger: "blur",
                  },
                ],
              },
            ],
          },
          {
            label: "附件上传",
            prop: "attachmentUpload",
            arrow: false,
            column: [
            {
                type: "upload",
                label: "法人身份证（人像）",
                span:12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "identityUrl4Id",
                action: putFile(),
                viewDisplay: false,
            },
            {
                type: "upload",
                label: "法人身份证（国徽）",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                canvasOption: {},
                headers: [],
                data: [],
                accept,
                size: "small",
                prop: "identityUrl5Id",
                action: putFile(),
                viewDisplay: false,
                // tip:'上传图片大小限制2M以内',
            },
            {
                type: "upload",
                label: "营业执照",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                accept,
                canvasOption: {},
                headers: [],
                data: [],
                size: "small",
                prop: "authUrlId",
                action: putFile(),
                viewDisplay: false,
                // tip:'上传图片大小限制2M以内',
            },
              {
                type: "upload",
                label: "授权委托书",
                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,
                // tip:'上传图片大小限制2M以内',
            },
            {
                type: "upload",
                label: "电子签章申请表",
                span: 12,
                showFileList: false,
                listType: "picture-img",
                multiple: false,
                propsHttp: {
                    res: "data",
                    url: "link",
                },
                accept,
                canvasOption: {},
                headers: [],
                data: [],
                size: "small",
                prop: "signSrcUrl",
                action: putFile(),
                viewDisplay: false,
                // tip:'上传图片大小限制2M以内',
            },
            {
                type: "upload",
                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,
                // tip:'上传图片大小限制2M以内',
            },
            {
                label: "招聘简章",
                formslot:true,
                span:24,
                prop:'motoleyUrl',
                viewDisplay: false,
            },
            ]
            }
        ]
      }
    }
    },
    methods:{
        moneyFormat,
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        /*多张图片上传*/
        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.form.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.form.motoleyUrl=str;
            },
        serverEnable(row) {
            this.loading = true;
            serviceEnable(row.id, this.companyId)
            .then(() => {
                this.$message({ type: "success", message: "操作成功！" });
                this.getConfig();
            })
            .catch(() => {
                this.getConfig();
            });
        },
        serviceSubmit(form, done) {
            form.serveCost = toCent(form.serveCost);
            form.companyId = this.companyId;
            form.tenantId = this.tenantId;
            addService(form)
            .then(() => {
                this.$message({ type: "success", message: "操作成功！" });
                this.getConfig();
                this.serviceVisible = false;
                done();
            })
            .catch(() => {
                done();
            });
        },
        /*开启电子合同服务*/
        configOpenElec(row) {
            whetherSignService(this.companyId).then((res) => {
            if (res.data.data) {
                const data = lodash.cloneDeep(row);
                data.value = 1;
                setConfig(data)
                .then(() => {
                    this.$message({ type: "success", message: "操作成功！" });
                    this.getConfig();
                })
                .catch(() => {
                    this.getConfig();
                });
            }
            else {
                this.$message.error('企业未开通【电子签章】，不能开启【电子合同】')
            }

            }).catch((error) => {
            this.$message.error(error)
            })
        },
        //合同
        configSubmit(row) {
            const data = lodash.cloneDeep(row);
            data.value = data.value ? 0 : 1;
            if(row.type == 2 && row.value == 0){
                this.$confirm('开启<font color="#409EFF"> 先开票 </font>服务，则会在企业付款之前开发票，确定开启？', '提示', {
                    confirmButtonText: '开启',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString:true,
                    }).then(() => {
                    setConfig(data)
                        .then((res) => {
                            this.$message({ type: "success", message: res.data.msg });
                            this.getConfig();
                        })
                        .catch(() => {
                            this.getConfig();
                        });
                    }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                    });
            }else{
                if(row.type == 3 && row.value == 1){
                    this.$confirm('停用<font color="#409EFF"> 银联代发 </font>服务，企业发工资则不可以使用线上代发功能，确定停用吗？', '提示', {
                        confirmButtonText: '停用',
                        cancelButtonText: '取消',
                        dangerouslyUseHTMLString:true,
                        }).then(() => {
                        setConfig(data)
                            .then((res) => {
                                this.$message({ type: "success", message: res.data.msg });
                                this.getConfig();
                            })
                            .catch(() => {
                                this.getConfig();
                            });
                        }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                        });
                }else{
                    setConfig(data)
                    .then((res) => {
                        this.$message({ type: "success", message: res.data.msg });
                        this.getConfig();
                    })
                    .catch(() => {
                        this.getConfig();
                    });
                }

            }

        },
        /*免缴保证金*/
        configPay(row, type) {
            const data = lodash.cloneDeep(row);
            if (type == "free") {//免缴--2
            data.value = 2;
            } else if (type == "yes") {//已缴 --0
            data.value = 0;
            } else if (type == "no") {//未缴--1
            data.value = 1;
            }

            setConfig(data)
            .then(() => {
                this.$message({ type: "success", message: "操作成功！" });
                this.getConfig();
            })
            .catch(() => {
                this.getConfig();
            });
        },
        //获取企业服务配置
        getConfig() {
            this.loading = true;
            Axios.all([
                getConfigList(this.companyId),
                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;
            })
            );
        },
        //仅保存
        saveBtnClick(){
            let flag = true;
            //this.form.remarks = '保存';
            let saveFlag = this.form.status;
            if(this.entranceFlag == 'pause'){
                saveFlag = 3;
            }
            detailNew(flag,this.form,saveFlag).then((res) => {
                this.$message({
                message: res.data.msg,
                    type: 'success'
                });
                this.drawer = false;
                this.$emit('refresh');
            });
        },
        //提交按钮
        submitBtnClick(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let flag = false;
                if(this.serviceData.length > 0){
                    //this.form.remarks = '提交审核';
                    detailNew(flag,this.form).then((res) => {
                        this.drawer = false;
                        this.$emit('refresh');
                        this.$message.success(res.msg);
                    });

                }else{
                    this.$message.error("至少需要添加1条服务费信息！");
                }

            } else {
                console.log('error submit!!');
                return false;
            }
        });
        },
        formSubmit(val){
            console.log(val);
        },
        tradeIdChange(val){
            this.form.tradeId = val;
        },
        /*打开drawer*/
        openDialog (row,flag) {
            this.entranceFlag = flag;
            if(flag == 'fail'){
                this.option.group[0].column[7].disabled = false;
            }else{
                this.option.group[0].column[7].disabled = true;
            }
            this.drawer = true;
            getTradeDic(true).then((res) => {
                this.tradeDic = res.data.data;
            });
            this.imgList = [];
            this.companyId = row.id;
            this.tenantId = row.tenantId;
            getDetail(row.id).then((res) => {
                this.loading = false;
                this.form = res.data.data;
                if(this.form.cityId==0){
                    this.form.cityId='';
                }
                if(this.form.tradeId==1){
                    this.form.tradeId='';
                    this.tradeId = this.form.tradeId;
                }
                getStation().then((res)=>{
                    let getStationList = res.data.data;
                    getStationList.forEach((ele) => {
                        if(this.form.stationId == ele.stationId){
                            this.form.stationName = ele.stationName
                        }
                    });
                })
                this.getConfig();
                if(this.form.motoleyUrl!=""){
                    var strList=this.form.motoleyUrl.split(',');
                for(var i in strList){
                    this.imgList.push({url:strList[i]})
                }
                }
            })
        },
    submit() {
      this.$message.success('当前数据' + JSON.stringify(this.form))
    }
    },
}
</script>
<style>
    .checkDialog .el-drawer__header{
        padding: 0;
        margin: 0;
    }
    .checkDialog .el-drawer__close-btn{
        margin-right: 20px;
        margin-top: 10px;
    }
    .checkDialog .el-upload--picture-card{
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px!important;
        text-align: center;
        background-color: #ffffff;
    }
    .checkDialog .el-upload-list--picture-card .el-upload-list__item{
        width: 178px;
        height: 178px;
        line-height: 178px!important;
    }
    .checkDialog  h2{
        font-size: 16px;
        font-weight: 400;
        color: rgb(46, 45, 45);
        border-bottom: 1px solid #e7e7e7;
        line-height: 50px;
    }
    .serviceSettings{
        padding: 0 20px;
    }
    /* .checkDialog .information .baseInformation,.attachmentUpload,.serviceSettings{
        border-bottom: 1px solid #c7c7c7;
    } */
    .checkDialog .information .el-form--inline .el-form-item{
        margin-right: 10px;
        margin-bottom: 20px;

    }
    .checkDialog .information .el-input__inner{
        width: 280px;
    }
    .checkDialog .information .el-form-item__label{
        width: 200px;
    }
    .checkDialog .serviceSetBox{
        display: flex;
        height: 80px;
        width: 96%;
        padding: 0 2%;
        background-color: #F5F7FA;
        border-radius: 10px;
        margin-bottom: 10px;
    }
       .checkDialog .serviceSetBox .showFlag{
           width: 100%;
           display: flex;
       }
    .checkDialog .serviceSetTitle{
        width:97%;
    }
    .checkDialog .serviceSetTitle h3{
        font-weight: 400;
        font-size: 16px;
        padding:0;
        margin: 0;
        margin-top: 10px;
    }
    .checkDialog .serviceSetTitle p{
        padding: 0;
        margin: 0;
        margin-top: 10px;
        font-size: 14px;
    }
    .checkDialog .serviceSetTitle h3 span{
        display: inline-block;
        margin-left: 20px;
        padding: 2px 10px;
        border: 1px solid #5379f7;
        border-radius: 5px;
        font-size: 12px;
        color:#5379f7;
    }
    .checkDialog .serviceSetBtn{
        line-height: 80px;
        display: flex;
    }
    .checkDialog .moreBtn{
        cursor: pointer;
        margin: 20px 0 10px 0 !important;
    }
    .checkDialog .tips{
        padding-bottom: 30px;
    }
    .checkDialog .tips span{
        color: #ff0000;
    }
    .footerBtn{
        position: fixed;
        bottom: 20px;
        left: 48%;
    }
    .serviceCharge{
        margin-bottom: 150px;
        margin-top: 50px;
    }
    .company-config-title {
        font-size: 18px;
        line-height: 40px;
        height: 40px;
    }

    .company-config-title-tool {
        float: right;
    }
    .companyConfig-title-tip{
        font-size: 14px;
        color: red;
    }
    .companyConfig-title-text{
        font-size: 14px;
    }
</style>
