<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="ggXin==false && detbox==false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商户意向管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">意向客户管理</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <div>
            <el-form :model="formSel" :inline="true">
              <el-form-item label="客户名称">
                <el-input v-model="formSel.intentCustomerName" placeholder="请输入" style="width:168px" />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>

        </div>
        <div style="margin:20px 0;">
          <el-button style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
            @click="addbuss">新增</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column label="序号" min-width="60">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column label="意向客户名称" prop="intentCustomerName" min-width="150" />
          <el-table-column label="手机号" prop="phone" min-width="150" />
          <el-table-column label="意向租赁类型" prop="leaseType" min-width="120" />
          <el-table-column label="意向租赁周期" prop="leaseCycle" min-width="120" />
          <el-table-column label="意向租金(月)" prop="rentalRent" min-width="120" />
          <el-table-column label="意向区域" prop="intentionRegion" min-width="150" />
          <el-table-column label="操作" min-width="180" fixed="right">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                查看
              </div>
              <div class="tableBtn greens" @click="bianjilist(scope.row)">
                编辑
              </div>
              <div class="tableBtn greens" @click="delGuan(scope.row)" >
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next,total" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

      </div>
    </div>
    <!-- 新增 -->
    <div class="zhuti" v-if="ggXin">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商户寻租管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">{{edit?'新增':'编辑'}}</span></div>
      </div>
      <div style="margin-top: 30px;">
        <TitleWithCircle title="意向信息"></TitleWithCircle>
        <div style="padding: 20px 20px 20px 0;">
          <el-form ref="AddFromOne"  :model="ruleForm" :rules="rulesOne" label-width="150px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="意向租赁类型" prop="leaseType">
                  <el-select v-model="ruleForm.leaseType" placeholder="请选择" style="width:100%">
                    <el-option label="商铺" value="商铺" />
                    <el-option label="场地" value="场地" />
                    <el-option label="广告位" value="广告位" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="意向租赁周期" prop="leaseCycle">
                  <el-input v-model="ruleForm.leaseCycle" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="意向租金(月)" prop="rentalRent" :rules="getCoordinateRules('rentalRent')">
                  <el-input v-model.number="ruleForm.rentalRent" placeholder="请输入" >

                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="意向经营类型" prop="operationType">
                  <el-input v-model="ruleForm.operationType" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="意向区域" prop="intentionRegion">
                  <el-input v-model="ruleForm.intentionRegion" placeholder="请输入" />

                </el-form-item>
              </el-col>
            </el-row>
            <TitleWithCircle title="商家信息"></TitleWithCircle>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="intentCustomerName">
                  <el-input v-model="ruleForm.intentCustomerName" placeholder="请输入" />
                </el-form-item>
              </el-col>
<el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                <el-input v-model.number="ruleForm.phone" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
                          <el-col :span="12">
                            <el-form-item label="身份证号码" prop="idCardNumber">
                              <el-input v-model="ruleForm.idCardNumber" placeholder="请输入" />
                            </el-form-item>
                          </el-col>
            <el-col :span="12">
                            <el-form-item label="身份证有效期" prop="idCardValidStart">
                            <el-date-picker v-model="ruleForm.idTime" type="daterange" range-separator="至"
                              start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" style="width:100%" @change="idCardchange"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                                      <el-col :span="12">
                                        <el-form-item label="身份证照片(正面)" prop="idCardPhotoFront">
                                          <upimg filePath="yixiang" inputtype="idCardPhotoFront" :value="ruleForm.idCardPhotoFront"
                                            @changimg="e=>changimg(e,'idCardPhotoFront')" :limit="1" ></upimg>

                                        </el-form-item>
                                      </el-col>
                                    </el-row>
                                    <el-row :gutter="20">
                                                  <el-col :span="12">
                                                    <el-form-item label="身份证照片(反面)" prop="idCardPhotoBack">
                                                      <upimg filePath="yixiang" inputtype="idCardPhotoBack" :value="ruleForm.idCardPhotoBack"
                                                        @changimg="e=>changimg(e,'idCardPhotoBack')" :limit="1" ></upimg>
                                                    </el-form-item>
                                                  </el-col>
                                                </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item>
                  <div style="margin-top: 20px">
                    <el-button style="background-color: #3F9B6A;color: #fff"
                      @click="addCheck">确 定</el-button>
                   <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                     @click="closeFn">取 消</el-button>

                  </div>

                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </div>
    </div>
    <!-- 查看 -->

    <div class="zhuti" v-if='detbox'>
          <div style="height:58px;line-height:58px;">
            <div style="color:#0006"> <span>商户寻租管理</span> <span style="padding:0 5px;">></span> <span
                style="color:#000000e6">查看</span></div>
          </div>

              <div style="margin-top: 30px;" class="editcss">
                <TitleWithCircle title="意向信息"></TitleWithCircle>
                <div style="padding: 20px;">
                  <el-form :model="secondData" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-row :gutter="20">
                      <el-col :span="12">



                        <el-form-item label="意向租赁类型" prop="leaseType">
                          <div  class="duiqi">{{secondData.leaseType}}</div>

                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="意向租赁周期" prop="leaseCycle">
                          <div  class="duiqi">{{secondData.leaseCycle}}</div>

                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="意向租金(月)" prop="rentalRent">
                          <div  class="duiqi">{{secondData.rentalRent}}</div>

                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                           <el-form-item label="意向经营类型" prop="operationType">
                          <div  class="duiqi">{{secondData.operationType}}</div>

                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="意向区域" prop="intentionRegion">
                            <div  class="duiqi">{{secondData.intentionRegion}}</div>
                        </el-form-item>
                      </el-col>

                    </el-row>
              <TitleWithCircle title="商家信息"></TitleWithCircle>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="intentCustomerName">
                      <div  class="duiqi">{{secondData.intentCustomerName}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号" prop="phone">
                      <div  class="duiqi">{{secondData.phone}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证号码" prop="idCardNumber">
                      <div  class="duiqi">{{secondData.idCardNumber}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证有效期">
                      <div  class="duiqi">{{secondData.idCardValidStart}}-{{secondData.idCardValidEnd}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证照片(正面)" prop="idCardPhotoFront">
                    <!-- {{idCardPhotoFront}} -->
                    <!-- <el-image :src="$baseURL +secondData.idCardPhotoFront" style="width:140px;height:140px;"></el-image> -->
                    <div style="display: flex;">
                      <allimg  :src="secondData.idCardPhotoFront" fit="contain" style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;"/>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证照片(反面)" prop="idCardPhotoBack">
                    <div style="display: flex;">
                      <allimg  :src="secondData.idCardPhotoBack" fit="contain" style="width: 112px;height: 112px;border: 1px dotted #dcdfe6;border-radius: 2px;overflow: hidden;margin: 0 10px 10px 0;"/>
                    </div>
                    <!-- idCardPhotoBack -->
                    <!-- <el-image :src="$baseURL +secondData.idCardPhotoBack" style="width:140px;height:140px;"></el-image> -->
                  </el-form-item>
                </el-col>
              </el-row>
                  </el-form>
                </div>
              </div>
    <el-row :gutter="20">
                        <el-col :span="12">
                            <div style="padding-left:160px;">
                             <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                               @click="detbox = false">取消</el-button>
                            </div>

                        </el-col>
                      </el-row>
        </div>
  </div>
</template>

<script>
  import {
    uploadUrl,
    token
  } from '@/utils/request'
  import {
    icManAll,
    icManAdd,
    icManEdit,
    icManDel,
    
  } from '../../../api/icManagement';
  import upimg from "@/components/ImageUpload/index";
  import TitleWithCircle from '@/components/top/index';
  import allimg from '@/components/chakan/allimg.vue';
  export default {
    components: {
      upimg,
      TitleWithCircle,
      allimg
    },
    data() {
      return {
        detbox: false, // 详情
        edit: true, // 编辑
        action: uploadUrl, // 上传图片
        myHeaders: {
          'Authorization-admin': token
        },
        ggXin: false, // 新增
        formSel: {
          intentCustomerName: '',
          pageNumber: 0,
          pageSize: 10,
        },
        ruleForm: {
         intentCustomerName:'', //意向客户名称
         leaseType:'',//租赁类型
         leaseCycle:'',//租赁周期
         rentalRent:null,//意向租金
         operationType:'',//经营类型
         intentionRegion:'',//意向区域
         idCardNumber:'',//身份证号
        idCardType:'',//证件类型
        phone:null,//手机号
        idTime:[],
        idCardValidStart:'',//身份证有效开始时间
        idCardValidEnd:'',//身份证有效结束时间
        idCardPhotoFront:'',//身份证照片(正面)
        idCardPhotoBack:'',//身份证照片(反面)
        },

        businessStartDate: [],
        secondData: {},
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [],
        pageindex: {
          pageNumber: 0,
          pageSize: 10,
        },
        rulesOne: {

          intentCustomerName: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }, ],
          leaseType: [{
            required: true,
            message: '请选择租赁类型',
            trigger: 'change'
          }],
          leaseCycle: [{
            required: true,
            message: '请输入租赁周期',
            trigger: 'blur'
          }, ],
          // rentalRent: [{
          //   required: true,
          //   message: '请输入意向租金(月)',
          //   trigger: 'blur'
          // },{
          //   pattern: /^(\d+|\d*\.\d{1,10})$/,
          //   message: `${coord}为整数或最多三位小数,trigger:'blur'`
          //   }],
          operationType: [{
            required: true,
            message: '请输入经营类型',
            trigger: 'blur'
          }, ],
          intentionRegion: [{
            required: true,
            message: '请输入意向区域',
            trigger: 'blur'
          }, ],
          idCardNumber: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }, ],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },{
            pattern: /^[0-9]+$/,
            message: '手机号只能包含数字',
            trigger: 'blur' ,
            }],
          idCardValidStart: [{
            required: true,
            message: '请选择身份证有效时间',
            trigger: 'change'
          }, ],
          idCardPhotoFront: [{
            required: true,
            message: '请输入身份证照片(正面)',
            trigger: 'change'
          }, ],
          idCardPhotoBack: [{
            required: true,
            message: '请选择身份证照片(反面)',
            trigger: 'change'
          }, ],
        },


      }
    },

    created() {
      this.getAll();
    },
    mounted() {},

    methods: {
getCoordinateRules(coord) {
  return [
     { required: true, message: `意向租金不能为空且必须是数字`, trigger: 'blur'},
     { pattern: /^(\d+|\d*\.\d{1,10})$/, message: `意向租金为整数或最多三位小数`, trigger: 'blur' },

  ]
},
      changimg(e,type) {
        this.ruleForm[type] = e
      },

idCardchange(e){

this.ruleForm.idCardValidStart = e[0]
this.ruleForm.idCardValidEnd = e[1]

},
      // 获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}`;
      },

      // 查询全数据
      async getAll() {
        const res = await icManAll(this.pageindex);
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      // 编辑确认
      async msgeditS() {
        await icManEdit(this.ruleForm);
        this.ggXin = false
        this.getAll()
      },
      bianjilist(item) {
        this.ruleForm = item
        this.ruleForm.idTime = []
        this.ruleForm.idTime[0] = item.idCardValidStart
        this.ruleForm.idTime[1] = item.idCardValidEnd
       if(this.edit){
         this.edit =false
       }
       this.ggXin = true
      },
      // 查询
      async onSubmit() {

        const res = await icManAll(this.formSel)
        this.currentPage =1
        this.tableData = res.data.content
        this.total = res.data.content.length
      },

      // 详情点击
       handleEditForm(item) {
        this.secondData = item
        this.detbox = true
      },
      // 新增
      addbuss() {
        this.ruleForm = {
         intentCustomerName:'', //意向客户名称
         leaseType:'',//租赁类型
         leaseCycle:'',//租赁周期
         rentalRent:'',//意向租金
         operationType:'',//经营类型
         intentionRegion:'',//意向区域
         idCardNumber:'',//身份证号
        idCardType:'',//证件类型
        idTime:[],
        phone:null,//手机号
        idCardValidStart:'',//身份证有效开始时间
        idCardValidEnd:'',//身份证有效结束时间
        idCardPhotoFront:'',//身份证照片(正面)
        idCardPhotoBack:'',//身份证照片(反面)
        }
         this.edit = true
        this.ggXin = true

      },
      // 新增确定
      addCheck() {
        this.$refs.AddFromOne.validate((valid) => {
          if (valid) {
             if(this.edit){
               icManAdd(this.ruleForm).then(res => {
                 this.$message({
                   message: '保存成功',
                   type: 'success'
                 })
                 this.getAll();
                 this.ggXin = false
                 this.$refs.AddFrom.resetFields()
               })
             }else{
               icManEdit(this.ruleForm).then(res => {
                 this.$message({
                   message: '修改成功',
                   type: 'success'
                 })
                 this.getAll();
                 this.ggXin = false
                 this.$refs.AddFrom.resetFields()
               })
             }

          } else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })

          }
        })
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      // 取消
      closeFn(val) {
         this.ggXin = false;
         this.getAll()
      },
      //删除管理列表
      delGuan(item) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除 '),
          ]),
          showCancelButton: true,
          showClose: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'oe-dialog-btn',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              icManDel({
                id: item.id
              }).then(res => {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getAll()
                done();
              })
            } else {
              done();
            }
          }
        })

      },
      // 重置按钮
      resetting() {
        this.formSel = {
          intentCustomerName: '',
          pageNumber: 0,
          pageSize: 10,
        }
        this.currentPage = 1
        this.getAll()
      },
    }
  }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }





  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }

  .greens {
    color: #3f9b6a;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3f9b6a;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /* background: #d3dce6; */
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  .dialog_css {
    padding: 0px;
  }

  .dialog_xin {
    padding: 0px;
  }

  /deep/.el-dialog__body {
    padding: 0px;
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
    padding: 0;
  }


 .el-row {
   margin-bottom: 16px;
 }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3f9b6a;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3f9b6a;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::v-deep .el-input__inner:focus {
    border: #3f9b6a 1px solid;
  }

  ::v-deep .el-input__inner:hover {
    border: #3f9b6a 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3f9b6a;
  }


  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */

  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的图标颜色 */
  ::v-deep .el-steps .el-step__icon.is-text.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }

  /* 修改未进行步骤的边框色 */
  ::v-deep .el-steps .el-step__line.is-wait {
    border-color: #eee;
    /* 修改为你想要的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__line {
    background-color: #3f9b6a;
    /* 修改线的颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__title {
    color: #fe7b6a;
    /* 修改进行中步骤的标题颜色 */
  }

  ::v-deep .el-steps .is-process .el-step__icon {
    color: #fff;
    /* 修改进行中步骤的图标颜色 */
    background: #3f9b6a;
    /* 修改进行中步骤图标的边框颜色 */
    border: 0px;
  }

  ::v-deep .el-step__icon-inner {
    line-height: 0;
  }

  /* 线条长度 */
  ::v-deep .el-step.is-vertical .el-step__line {
    top: 30px;
    height: 60px;
  }

  ::v-deep .moren {
    .el-input__inner {
      margin-top: 5px;
      padding: 0 20px;
    }
  }

  /deep/ .el-radio-group {
    margin-top: 11px;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #3f9b6a;
    background: #3f9b6a;
  }

  ::v-deep .el-col {
    padding: 0 !important;
  }

  /deep/ .el-radio-group {
    width: 100%;
  }

  .radio-right-side {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  /deep/ .radio-right-side .el-radio__label {
    display: flex;
    align-items: center;
  }

  /deep/ .radio-right-side .el-radio__inner {
    order: 1;
  }

  /deep/ .radio-right-side .el-radio__input {
    display: flex;
    order: 2;
  }

  /deep/ .radio-right-side {
    &:hover {
      color: #000;
    }
  }


  ::v-deep .setup {
    .el-steps {
      justify-content: center;
    }
  }

  ::v-deep .el-step__head.is-finish {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }

  ::v-deep .el-step__title.is-finish {
    color: #c0c4cc;
  }

  ::v-deep .el-step__title.is-process {
    color: #c0c4cc;
  }

  ::v-deep .el-tabs {
    width: 100%;
  }

  ::v-deep .setup {
    .el-step__main {
      margin-left: -17px;
    }

    .el-step__title.is-process {
      color: #3f9b6a;
    }

  }

  ::v-deep .el-pagination__jump {
    margin-top: 5px;
  }

  ::v-deep .linClass {
    .el-dialog__header {
      padding: 20px 20px 10px;
      font-size: 14px;
    }
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }

  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }

  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }

  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }

    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>
