<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
                <!-- 客户名单 -->
                <el-popover
                placement="bottom"
                width="662"
                trigger="hover">
                    <el-table max-height="600" border :data="rollcallarr">
                        <el-table-column width="100" property="date" label="姓名">
                            <template slot-scope="scope">
                                {{ scope.row.lastName}}{{scope.row.firstName}}
                            </template>
                        </el-table-column>
                        <el-table-column width="200" property="lastName" label="拼音">
                            <template slot-scope="scope">
                                {{ pinyingxing(scope.row.lastName) }}/{{  pinyingxing(scope.row.firstName) }}
                            </template>
                        </el-table-column>
                        <el-table-column width="50" property="sex" label="性别">
                            <template slot-scope="scope">
                                {{ scope.row.sex==0?'男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column width="110" property="birthDay" label="生日">
                            <template slot-scope="scope">
                                {{ fgarr(scope.row.birthDay) }}
                            </template>
                        </el-table-column>
                        <el-table-column width="200" property="idCardNo" label="身份证号码">
                            <template slot-scope="scope">
                                {{ scope.row.idCardNo }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button style="margin-left: 10px;" type="primary" slot="reference">移上查看客户名单</el-button>
                    <!-- <span slot="reference" style="cursor: pointer;margin-left: 20px;">"移上查看客户名单"</span> -->
                </el-popover>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="OpCarTouristGuideGroundData.diId" clearable filterable
                                placeholder="团组选择" :disabled="isShow" @change="DiIdSelectChange">
                                <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="出访时间:" label-width="160px">
                            <el-input placeholder="出访时间" v-model="VisitDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访人数:" label-width="160px">
                            <el-input placeholder="出访人数" v-model="delegationInfo.visitPNumber" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访天数:" label-width="160px">
                            <el-input placeholder="出访天数" v-model="delegationInfo.visitDays" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="OP提成等级:" prop="tourCode" label-width="160px">
                            <el-select v-model="delegationInfo.opRoyaltyLv" clearable filterable placeholder="等级"
                                :disabled="true">
                                <el-option v-for="item in opRoyaltyLvList" :key="item.id" :label="item.name + '元'"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 75%;">
                        <el-form-item label="Op提成等级说明:" prop="opRoyaltyRemark" label-width="160px">
                            <el-input placeholder="Op提成等级说明" v-model="delegationInfo.opRoyaltyRemark" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>

                </div>
            </el-form>
            <el-form :model="OpCarTouristGuideGroundData" ref="OpCarTouristGuideGroundData"
                :rules="OpCarTouristGuideGroundDataRules" label-width="100px" class="demo-ruleForm">
                <div>
                    <el-form-item label="费用名称:" prop="priceName" label-width="160px">
                            <el-input placeholder="费用名称" v-model="OpCarTouristGuideGroundData.priceName">
                            </el-input>
                        </el-form-item>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;display: flex;">
                        <div style="width: 70%;">
                            <el-form-item label="地区:" prop="area" label-width="160px">
                                <!-- <el-autocomplete
                            popper-class="el-autocomplete-suggestion"
                            :popper-append-to-body="false"
                            class="inline-input"
                            size="medium"
                            v-model.trim="OpCarTouristGuideGroundData.area"
                            :fetch-suggestions="querySearch"
                            @select="selectarea"
                            ></el-autocomplete> -->
                                <el-select v-model="OpCarTouristGuideGroundData.area" clearable filterable
                                    placeholder="地区">
                                    <el-option v-for="(item, index) in restaurants" :key=index :value="item.id"
                                        :label="item.value"></el-option>
                                </el-select>
                                <!-- <el-input placeholder="地区" v-model="OpCarTouristGuideGroundData.area">
                            </el-input> -->
                            </el-form-item>
                        </div>
                        <div style="width: 27%;margin-left: 3%;">
                            <el-form-item prop="priceType" label-width="0">
                                <el-select v-model="OpCarTouristGuideGroundData.priceType" placeholder="费用标识">
                                    <el-option v-for="item in options" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务时间起:" prop="serviceStartTime" label-width="160px">
                            <el-date-picker v-model="OpCarTouristGuideGroundData.serviceStartTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="服务时间起">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务时间止:" prop="serviceEndTime" label-width="160px">
                            <el-date-picker v-model="OpCarTouristGuideGroundData.serviceEndTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="服务时间止">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务公司:" prop="serviceCompany" label-width="160px">
                            <el-input placeholder="服务公司" v-model="OpCarTouristGuideGroundData.serviceCompany">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="地接导游:" prop="serviceGuide" label-width="160px">
                            <el-input placeholder="地接导游" v-model="OpCarTouristGuideGroundData.serviceGuide">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系电话:" prop="serviceTel" label-width="160px">
                            <el-input placeholder="联系电话" v-model="OpCarTouristGuideGroundData.serviceTel">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="Bus名称:" prop="busName" label-width="160px">
                            <el-input placeholder="Bus名称" v-model="OpCarTouristGuideGroundData.busName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系电话:" prop="busTel" label-width="160px">
                            <el-input placeholder="联系电话" v-model="OpCarTouristGuideGroundData.busTel">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
                            <el-select v-model="OpCarTouristGuideGroundData.orbitalPrivateTransfer" clearable filterable
                                placeholder="费用标识">
                                <el-option :key=0 :value="0" label="公转"></el-option>
                                <el-option :key=1 :value="1" label="私转"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="Bus描述:" prop="busDescription" label-width="160px">
                            <el-input type="textarea" :rows="2" placeholder="Bus描述"
                                v-model="OpCarTouristGuideGroundData.busDescription"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="服务描述:" prop="serviceDescription" label-width="160px">
                            <el-input type="textarea" :rows="2" placeholder="服务描述"
                                v-model="OpCarTouristGuideGroundData.serviceDescription"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpCarTouristGuideGroundData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <el-button @click="EscAdd">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { dE } from '@fullcalendar/core/internal-common';
import { pinyin } from 'pinyin-pro';
export default {
    data() {
        return {
            title: "新增Op费用",
            token: '',
            userId: 0,
            isShow: false,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            OpCarTouristGuideGroundData: {
                status: 0,
                id: 0,
                diId: 0,
                area: '',
                serviceCompany: '',
                serviceGuide: '',
                serviceTel: '',
                busName: '',
                busDescription: '',
                busTel: '',
                serviceStartTime: '',
                serviceEndTime: '',
                serviceDescription: '',
                orbitalPrivateTransfer: 0,
                createUserId: 0,
                remark: '',
                priceType: 0,
                priceName:'',
            },
            IsAuditGM: 0,
            VisitDate: '',
            opRoyaltyLvList: [],
            transformDateFormat: function (value) {

                // 将value转换为Date对象
                var date = new Date(value);
                // 获取年、月、日
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                // 将月份和日期转换为两位数的格式

                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                // 返回格式化后的日期字符串
                return year + '-' + month + '-' + day;
            },
            OpCarTouristGuideGroundDataRules: {
                area: [
                    { required: true, message: '请输入地区', trigger: ['blur', 'change'] },
                ],
                serviceCompany: [
                    { required: true, message: '请输入服务公司', trigger: ['blur', 'change'] },
                    { validator: this.validateSpecialChars, message: '非法字符', trigger: ['blur', 'change'] }
                ],
                serviceGuide: [
                    { required: true, message: '请输入服务导游', trigger: ['blur', 'change'] },
                    { validator: this.validateSpecialChars, message: '非法字符', trigger: ['blur', 'change'] }
                ],
                serviceTel: [
                    { required: true, message: '请输入导游地接联系电话', trigger: ['blur', 'change'] },
                    { validator: this.validatePhone, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
                ],
                busName: [
                    { required: true, message: '请输入Bus名称', trigger: ['blur', 'change'] },
                    { validator: this.validateSpecialChars, message: '非法字符', trigger: ['blur', 'change'] }
                ],
                busTel: [
                    { required: true, message: '请输入车公司联系电话', trigger: ['blur', 'change'] },
                    { validator: this.validatePhone, message: '请输入有效的电话号码', trigger: ['blur', 'change'] }
                ],
                serviceStartTime: { required: true, message: '请输入服务时间起', trigger: ['blur', 'change'] },
                serviceEndTime: { required: true, message: '请输入服务时间止', trigger: ['blur', 'change'] },
                orbitalPrivateTransfer: { required: true, message: '请选择费用表示', trigger: ['blur', 'change'] },
                priceType: [{ required: true, message: '请选择费用类型', trigger: ['blur', 'change'] },
                { validator:function(rule,value,callback){
                            if(Number(value) == 0){
                                   callback(new Error("请选择费用类型"));
                            }else{
                                   callback();
                            }
                          }, trigger: 'blur'
                },],
                priceName: { required: true, message: '请输入费用名称', trigger: ['blur', 'change'] },
            },
            restaurants: [],
            options: [],
            rollcallarr:[],
            
        }
    },
    methods: {
        // 验证特殊字符
        validateSpecialChars(rule, value, callback) {
            console.log(value);
            let truearr=[]
            const pattern =/^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
            for (let i = 0; i < value.length; i++) {
                const char = value[i];
                if (pattern.test(char)) {
                    truearr.push(true)
                }else{
                    truearr.push(false)
                }
            }
            if (truearr.includes(true)) {
                callback();
            }else{
                callback(new Error(rule.message || '非法字符'));
            }
        },

        // 验证电话号码
        validatePhone(rule, value, callback) {
            // 允许数字、+、-、(、)和空格
            const pattern = /^[0-9+\-()\s]+$/;
            if (value && !pattern.test(value)) {
                callback(new Error(rule.message || '电话号码格式不正确'));
            } else {
                callback();
            }
        },

        //拼音
        pinyingxing(val){
            return pinyin(val, { toneType: 'none' }).toUpperCase();
        },
        //fenge
        fgarr(val){
            val=val+""
            return val.split(' ')[0]
        },
        //地区提示
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value.replace("  ", "").toLowerCase().match(queryString.toLowerCase());
            };
        },
        //获取地区
        OpCarCityResult() {
            var url = "/api/Groups/OpCarCityResult"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.restaurants = res.data.data;
                    that.restaurants = that.restaurants.map((terminal) => {
                        return {
                            id: terminal.id,
                            value: terminal.country + '  ' + terminal.city,
                        };
                    });
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        ///
        selectarea(val) {
            console.log(this.OpCarTouristGuideGroundData.area);
            console.log(val);
        },
        //获取客户名单info
        PostTourClientListByDiId(val) {
            this.rollcallarr=[];
            var that = this
            var url = "/api/Groups/PostTourClientListByDiId"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    diid: val?val:that.OpCarTouristGuideGroundData.diId,
                    pageId:104,
                    userId:233
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.rollcallarr=res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //初始化下拉框
        initializeSelect() {
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    dataType: 70,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.opRoyaltyLvList = res.data.data;
                    var url = "/api/Groups/DecreasePaymentsSelect"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            userId: that.userId,
                            ctId: 79
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.delegationInfoList = res.data.data.groupName;
                            that.PostTourClientListByDiId()
                            for (let index = 0; index < that.delegationInfoList.length; index++) {
                                if (that.delegationInfoList[index].id == that.OpCarTouristGuideGroundData.diId) {
                                    that.delegationInfo = that.delegationInfoList[index];
                                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                                    that.delegationInfo.opRoyaltyLv = that.delegationInfo.opRoyaltyLv
                                    break;
                                }
                            }
                        }
                    })
                }
            })
            //团组下拉框绑定


        },
        DiIdSelectChange(val) {
            var that = this;
            for (let index = 0; index < that.delegationInfoList.length; index++) {
                if (that.delegationInfoList[index].id == that.OpCarTouristGuideGroundData.diId) {
                    that.delegationInfo = that.delegationInfoList[index];

                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                    break;
                }
            }
            setTimeout(function () {
                that.PostTourClientListByDiId(val);
            },1000)
        },
        //根据Id获取单挑数据及C表数据
        QueryCarTouristGuideGroundById() {
            var url = "/api/Groups/QueryCarTouristGuideGroundById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.OpCarTouristGuideGroundData.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var CreditCardPayment = res.data.data.creditCardPayment;
                    var carTouristGuideGround = res.data.data.carTouristGuideGround;
                    if (CreditCardPayment != null) {
                        that.IsAuditGM = CreditCardPayment.isAuditGM;
                    }

                    that.OpCarTouristGuideGroundData.area = parseInt(carTouristGuideGround.area) ? Number(carTouristGuideGround.area) : "";
                    that.OpCarTouristGuideGroundData.serviceCompany = carTouristGuideGround.serviceCompany;
                    that.OpCarTouristGuideGroundData.serviceGuide = carTouristGuideGround.serviceGuide;
                    that.OpCarTouristGuideGroundData.serviceTel = carTouristGuideGround.serviceTel;
                    that.OpCarTouristGuideGroundData.busName = carTouristGuideGround.busName;
                    that.OpCarTouristGuideGroundData.busDescription = carTouristGuideGround.busDescription;
                    that.OpCarTouristGuideGroundData.busTel = carTouristGuideGround.busTel;
                    that.OpCarTouristGuideGroundData.serviceStartTime = carTouristGuideGround.serviceStartTime;
                    that.OpCarTouristGuideGroundData.serviceEndTime = carTouristGuideGround.serviceEndTime;
                    that.OpCarTouristGuideGroundData.serviceDescription = carTouristGuideGround.serviceDescription;
                    that.OpCarTouristGuideGroundData.orbitalPrivateTransfer = carTouristGuideGround.orbitalPrivateTransfer;
                    that.OpCarTouristGuideGroundData.remark = carTouristGuideGround.remark;
                    that.OpCarTouristGuideGroundData.priceType = carTouristGuideGround.priceType;
                    that.OpCarTouristGuideGroundData.priceName = carTouristGuideGround.priceName;
                }
            })
        },
        addBtn() {
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.OpCarTouristGuideGroundData.diId == null || this.OpCarTouristGuideGroundData.diId == undefined || this.OpCarTouristGuideGroundData.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    const that = this;
                    that.$refs.OpCarTouristGuideGroundData.validate((valid) => {
                        if (valid) {
                            var url = "/api/Groups/OpCarTouristGuideGround"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                // data: that.OpCarTouristGuideGroundData
                                data: {
                                    status: that.OpCarTouristGuideGroundData.status,
                                    id: that.OpCarTouristGuideGroundData.id,
                                    diId: that.OpCarTouristGuideGroundData.diId,
                                    area: that.OpCarTouristGuideGroundData.area.toString(),
                                    serviceCompany: that.OpCarTouristGuideGroundData.serviceCompany,
                                    serviceGuide: that.OpCarTouristGuideGroundData.serviceGuide,
                                    serviceTel: that.OpCarTouristGuideGroundData.serviceTel,
                                    busName: that.OpCarTouristGuideGroundData.busName,
                                    busDescription: that.OpCarTouristGuideGroundData.busDescription,
                                    busTel: that.OpCarTouristGuideGroundData.busTel,
                                    serviceStartTime: that.OpCarTouristGuideGroundData.serviceStartTime,
                                    serviceEndTime: that.OpCarTouristGuideGroundData.serviceEndTime,
                                    serviceDescription: that.OpCarTouristGuideGroundData.serviceDescription,
                                    orbitalPrivateTransfer: that.OpCarTouristGuideGroundData.orbitalPrivateTransfer,
                                    createUserId: that.OpCarTouristGuideGroundData.createUserId,
                                    remark: that.OpCarTouristGuideGroundData.remark,
                                    priceType: that.OpCarTouristGuideGroundData.priceType,
                                    priceName: that.OpCarTouristGuideGroundData.priceName,
                                }
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    setTimeout(() => {
                                        that.$router.push('/home/CarTouristGuideGroundId?diId=' + that.OpCarTouristGuideGroundData.diId + '')
                                    }, 3000);
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/CarTouristGuideGroundId",
                query: {
                    diId: this.OpCarTouristGuideGroundData.diId
                }
            })
        },
        QueryPriceType(){
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    "dataType": 83
                    }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.options = res.data.data;
                }
                that.options.push({
                    id: 0,
                    name: '请选择'
                });
            })

        }
    },
    created() {
        this.OpCarCityResult()
    },
    mounted() {
        this.QueryPriceType();
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.initializeSelect();
        this.OpCarTouristGuideGroundData.diId = parseInt(this.$route.query.DiId)
        this.OpCarTouristGuideGroundData.id = this.$route.query.id
        this.OpCarTouristGuideGroundData.createUserId = this.userId

        if (this.OpCarTouristGuideGroundData.id != null && this.OpCarTouristGuideGroundData.id != undefined && this.OpCarTouristGuideGroundData.id != 0) {
            this.QueryCarTouristGuideGroundById();
            this.title = "修改Op费用";
            this.OpCarTouristGuideGroundData.status = 2
            this.isShow = true
        } else {
            this.OpCarTouristGuideGroundData.status = 1
            this.title = "新增Op费用"
            this.isShow = false
        }

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;

}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car_add .el-date-editor.el-input {
    width: 100%;
}

.car_add .el-select {
    width: 100%;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>