<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <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">
          <el-form :inline="true" :model="formSel">
            <el-form-item label="客户名称">
              <el-input v-model="formSel.cereFollowDetails.cereCustomerInfo.intentCustomerName" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="客户级别">
              <el-select v-model="formSel.cereFollowDetails.cereCustomerInfo.customerLevel" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="意向资源名称">
              <el-input v-model="formSel.cereFollowDetails.cereCustomerInfo.ziyuanName" placeholder="请输入" style="width:168px;" />
            </el-form-item> -->
            <!-- <el-form-item label="意向资源类型">
              <el-select v-model="formSel.cereFollowDetails.cereCustomerInfo.type" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="商铺" value="sp" />
                <el-option label="广告位" value="gg" />
                <el-option label="场地" value="cd" />
              </el-select>
            </el-form-item> -->
          </el-form>
          <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-bottom: 20px;">
          <div>
            <el-button style="background-color: #3F9B6A;color: #fff"
             @click="gitOut">导出</el-button>
          </div>
        </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="150">
<template slot-scope="scope">
                {{scope.$index +1 }}
                 </template>
          </el-table-column>
          <el-table-column label="意向客户名称" min-width="150" prop="contractNumber">
            <template slot-scope="scope">
                            {{scope.row.cereFollowDetails.cereCustomerInfo.intentCustomerName}}
                             </template>
          </el-table-column>
          <el-table-column label="客户级别" min-width="150" prop="contractNumber">
            <template slot-scope="scope">
                            {{scope.row.cereFollowDetails.cereCustomerInfo.customerLevel}}
                             </template>
          </el-table-column>
         <el-table-column label="联系电话" min-width="150" prop="contractNumber">
           <template slot-scope="scope">
                           {{scope.row.cereFollowDetails.cereCustomerInfo.contactPhone}}
                            </template>
         </el-table-column>
          <el-table-column label="计划跟进日期" prop="telephone" min-width="200">

          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="150">
            <template slot-scope="scope">
              {{scope.row.status=='1'?'待谈判':scope.row.status=='2'?'谈判成功':'谈判失败'}}
               </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <div @click="details(0,scope.row)" class="tableBtn greens">查看</div>
              <div @click="dengji(scope.row)" class="tableBtn greens" v-if="scope.row.status =='1'">谈判登记</div>
              <div @click="delss(scope.row)" class="tableBtn greens" v-if="scope.row.status =='1'">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :hide-on-single-page='flag' background small size="mini" :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>
    <!-- 详情框 -->
    <el-dialog :visible.sync="detbox" custom-class='tongyong_css' style="padding: 0;" width="65%" center
      :close-on-click-modal="false" :show-close="false">
      <div style="padding:20px;">
        <div style="font-size: 14px;padding-bottom: 20px;color: #000;">{{steat?'详情页':'编辑页'}}</div>
        <div>
          <el-tabs v-model="xiangTabs" >
            <el-tab-pane label="基本信息" name="first">
              <div style="width: 100%">
                <el-form ref="form" :model="yixiangList" label-width="120px">
                  <el-form-item label="意向客户名称">
                    <el-input  v-model="yixiangList.intentCustomerName"  disabled  placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话">

                    <el-input  v-model="yixiangList.contactPhone" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="意向资源类型">
                    <el-select v-model="yixiangList.intentionalBusinessType" disabled>
                      <el-option label="商铺" value="商铺" />
                      <el-option label="场地" value="场地" />
                      <el-option label="广告位" value="广告位" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="客户级别">
                    <el-select v-model="yixiangList.customerLevel"   disabled>
                      <el-option label="A" value="A" />
                      <el-option label="B" value="B" />
                      <el-option label="C" value="C" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="证件类型">
                    <el-input  v-model="yixiangList.idCardType" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号码">
                    <el-input  v-model="yixiangList.idCardNumber"  disabled ></el-input>
                  </el-form-item>
                  <el-form-item label="身份证有效期">
                    <el-date-picker style="width: 100%;" v-model="idCardTime" value-format="yyyy-MM-dd HH:mm:ss" disabled
                      type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="身份证照片(正面)">
                      <img :src="yixiangList.idCardPhotoFront" alt=""  style="width:150px;height:150px;">

                  </el-form-item>
                  <el-form-item label="身份证照片(反面)">
               <img :src="yixiangList.idCardPhotoBack" alt=""  style="width:150px;height:150px;">
                  </el-form-item>
                  <el-form-item label="是否为法人">
                    <el-select v-model="yixiangList.isLegalPerson"  disabled>
                      <el-option label="是" value="1" />
                      <el-option label="否" value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="企业授权书">
                   <img :src="yixiangList.enterpriseAuthorization" alt=""  style="width:150px;height:150px;">
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="主体信息" name="second">
              <div style="width: 100%">
              <el-form ref="form" :model="yixiangList" label-width="140px">
                <el-form-item label="主体名称">
                  <el-input  v-model="yixiangList.subjectName" disabled></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码">

                  <el-input v-model="yixiangList.unifiedSocialCreditCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="yixiangList.type"  disabled>
                    <el-option label="个人" value="个人" />
                    <el-option label="企业" value="企业" />
                  </el-select>
                </el-form-item>
                <el-form-item label="法定代表人">
                  <el-input  v-model="yixiangList.legalRepresentative" disabled></el-input>
                </el-form-item>
                <el-form-item label="经营范围">
                  <el-input type="textarea"  v-model="yixiangList.businessScope" :rows="4" disabled></el-input>
                </el-form-item>
                <el-form-item label="注册资本">
                  <el-input   v-model="yixiangList.registeredCapital" disabled></el-input>
                </el-form-item>
                <el-form-item label="成立日期">
                  <el-input  v-model="yixiangList.establishmentDate" disabled></el-input>
                </el-form-item>
                <el-form-item label="住所">
                  <el-input v-model="yixiangList.address" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址">
                  <el-input  v-model="yixiangList.emailAddress"  disabled></el-input>
                </el-form-item>
                <el-form-item label="营业期限">
                  <el-date-picker style="width: 100%;" v-model="busTime" value-format="yyyy-MM-dd HH:mm:ss" disabled
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="营业执照">
                  <img :src="yixiangList.businessLicense" alt=""  style="width:150px;height:150px;">
                </el-form-item>
              </el-form>


              </div>
            </el-tab-pane>
            <el-tab-pane label="意向资源" name="there">
              <div style="width: 100%">
      <div style="border:1px solid #DCDFE6;font-size:14px;margin-bottom:10px;">
        <div style="padding:10px 20px;border-bottom:1px solid #DCDFE6;display:flex;justify-content: space-between;">
          <div>意向资源</div>
          <!-- <div class="greens">添加</div> -->
        </div>
        <div style="padding:20px;">
         <el-table :data="xiangData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}" style="width:100%">
         <el-table-column label="序号" min-width="150" >
           <template slot-scope="scope">
             {{scope.$index + 1}}
           </template>
         </el-table-column>
         <el-table-column label="资源编号" prop="id" min-width="180" >

         </el-table-column>
         </el-table-column>
         <el-table-column label="意向资源类型" min-width="180" >
           <template slot-scope="scope">
             {{scope.row.advertisingType ?scope.row.advertisingType:'商铺'}}
           </template>
         </el-table-column>


         <el-table-column label="意向租期" prop="leaseTerm" min-width="180">
         </el-table-column>
         <el-table-column label="意向租金(元)" prop="rent" min-width="180">
         </el-table-column>

         </el-table>
        </div>
      </div>


              </div>
            </el-tab-pane>
            <el-tab-pane label="跟进情况" name="four">
              <div style="width: 100%">
                <el-form ref="form" :model="genjingData" label-width="140px">
                  <el-form-item label="跟进人员">
                    <el-input  v-model="genjingData.textarea" disabled ></el-input>
                  </el-form-item>
                  <el-form-item label="跟进情况">
                    <el-select v-model="genjingData.currentStage" disabled>
                      <el-option label="未达成共识" value="继续跟进" />
                      <el-option label="已达成共识" value="达成共识" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="内容反馈">
                    <el-input type="textarea" v-model="genjingData.contentFeedback" :rows="4" disabled></el-input>
                  </el-form-item>

                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="谈判记录" name="five">
              <div style="width: 100%">
                <el-form ref="form" :model="secondData" label-width="140px">
                  <el-form-item label="谈判主题">
                    <el-input v-model="secondData.negotiationTheme" :disabled="steat?true:false"></el-input>
                  </el-form-item>
                  <el-form-item label="标段号">
                    <el-input v-model="secondData.bidSegmentNumber" :disabled="steat?true:false"></el-input>
                  </el-form-item>
                  <el-form-item label="会议纪要">
                    <el-input type="textarea" v-model="secondData.meetingMinutes" :rows="4" :disabled="steat?true:false"></el-input>
                  </el-form-item>
                  <el-form-item label="谈判内容">
                    <el-input type="textarea" v-model="secondData.negotiationContent" :rows="4" :disabled="steat?true:false"></el-input>
                  </el-form-item>
                  <el-form-item label="谈判结果">
                    <!-- <el-input type="textarea" v-model="secondData.negotiationResult" :rows="4" :disabled="steat?true:false"></el-input> -->
                    <el-select v-model="secondData.negotiationResult" placeholder="请选择" style="width:100%" :disabled="steat?true:false">
                      <el-option label="继续谈判" value="继续谈判" />
                      <el-option label="谈判成功" value="谈判成功" />
                      <el-option label="谈判失败" value="谈判失败" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="其他附件">
                    <!-- <upimg v-model="formInline.coverPoster" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
                    <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove"
                                      :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                                      :auto-upload="true" v-if="steat == false">
                                      <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length ==0">+点击上传</el-button>
                                    </el-upload>

                                    <div style="padding:10px 0;line-height:20px;color:#3F9B6A" v-if="steat&&secondData.otherAttachments ">{{secondData.otherAttachments.name}}</div>
                  </el-form-item>
                  <el-form-item label="现场照片">
                    <upimg v-model="formInline.onSitePhotos" :limit="1" :fileSize="1" :isShowTip="false" v-if="steat ==false"></upimg>

                    <img :src="secondData.onSitePhotos" alt="" v-else style="width:150px;height:150px;"/>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div style="padding-top:20px;display:flex;justify-content: flex-end;">
          <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
            @click="closeFn(2)">返回</el-button>
     <!--     <el-button @click="steat = false" style="background-color: #3F9B6A;color: #fff" v-if="steat && secondData.status=='1'">编辑</el-button>
          <el-button @click="addbuss(2)" style="background-color: #3F9B6A;color: #fff"  v-if="steat==false && secondData.status =='1'">确认</el-button> -->

        </div>
      </div>

    </el-dialog>

    <!-- 新增 -->
    <el-dialog title="谈判登记" :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="50%"
      class="dialog_css_Xq" center :close-on-click-modal="false" :show-close="false">
      <div style="margin-bottom: 20px;">
        <el-form ref="form" :model="zhong" label-width="120px">
          <el-form-item label="谈判主题">
            <el-input v-model="zhong.negotiationTheme"></el-input>
          </el-form-item>
          <el-form-item label="标段号">
            <el-input v-model="zhong.bidSegmentNumber"></el-input>
          </el-form-item>
          <el-form-item label="会议纪要">
            <el-input type="textarea" v-model="zhong.meetingMinutes" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="谈判内容">
            <el-input type="textarea" v-model="zhong.negotiationContent" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="谈判结果">
            <!-- <el-input type="textarea" v-model="zhong.negotiationResult" :rows="4"></el-input> -->
            <el-select v-model="zhong.negotiationResult" placeholder="请选择" style="width:100%">
              <el-option label="继续谈判" value="继续谈判" />
              <el-option label="谈判成功" value="谈判成功" />
              <el-option label="谈判失败" value="谈判失败" />
            </el-select>
          </el-form-item>
          <el-form-item label="其他附件">
            <!-- <upimg v-model="zhong.otherAttachments" :limit="1" :fileSize="1" :isShowTip="false"></upimg> -->
            <el-upload class="upload-demo" ref="upload"  :on-remove="handleRemove"
                              :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                               :auto-upload="true">
                              <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                            </el-upload>
          </el-form-item>
          <el-form-item label="现场照片">
            <upimg v-model="zhong.onSitePhotos" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
          </el-form-item>
<el-form-item label="下次谈判时间">
          <el-date-picker style="width: 100%;" v-model="plan_Time" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
        </el-form>
      </div>

      <div style="display: flex;justify-content: flex-end;">
        <el-button @click="closeFn(1)" class="buttonHover"
          style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
        <el-button @click="addCheck" style="background-color: #3F9B6A;color: #fff">确定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import {
    contractGetAll,
    contractDel,
    addList,
    updateList,
    queryById,
    cereLeasingById,
    cereLeasingEdit
  } from '../../../api/manage.js'
  import {
   tanGetAll,
   tanAdd,
   tanEdit,
   tanDel,
  } from '../../../api/inr.js'
  import upimg from "@/components/ImageUpload/index"
  import {
    uploadUrl
  } from '@/utils/request'
  export default {
    components: {
      upimg
    },
    data() {
      return {
        uploadFileUrl: uploadUrl, // 请求地址
        detbox: false, //详情
        leixing: true, //切换
        index: 1,
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        formInline: {
          contractNumber: '',
          sectionNumber: '',
          contractName: '',
          contractAmount: '',
          earnestMoney: '',
          contractSigningDate: '',
          contractTerminationDate: '',
          leaseStartDate: '',
          lessorName: '',
          telephone: '',
          bankAccount: '',
          tenantName: '',
          tenantTelephone: '',
          tenantBankAccount: '',
          shopNumber: '',
          shopName: '',
          shopAddress: '',
          shopArea: '',
          storeFormats: '',
          businessProjects: '',
          appendicesContract: '',
        },
        tableData: [],
        secondData: {},
        formSel: {
          pageNumber: 1,
          pageSize: 10,
         cereFollowDetails:{
           cereCustomerInfo:{
             intentCustomerName:'',
             customerLevel:'',
             ziyuanName:'',
             type:''
           }

         }
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        zhong: {
        negotiationTheme:'',
        bidSegmentNumber:'',
        meetingMinutes:'',
        negotiationContent:'',
        negotiationResult:'',
        otherAttachments:'',
        onSitePhotos:'',
        nextNegotiationStartTime:'',
        nextNegotiationEndTime:''
        },
        plan_Time:[],
        detaiList: {},
        xiangTabs:'first',
        fileData:[],
        steat:true,//编辑切换
        yixiangList:[],
        idCardTime:[],
        busTime:[],
        xiangData:[],
        genjingData:{}
      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      chenge(val) {
        this.formSel = {
          pageNumber: 1,
          pageSize: 10,
         cereFollowDetails:{
           cereCustomerInfo:{
             intentCustomerName:'',
             customerLevel:'',
             ziyuanName:'',
             type:''
           }

         }
        }
        this.leixing = !this.leixing
      },
      async getAll(val) {
        const res = await tanGetAll(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },

      // 新增确定按钮
      async addCheck(val) {

        if(this.fileData.length !=0){
          this.zhong.otherAttachments = JSON.stringify(this.fileData[0])
        }
        this.zhong.nextNegotiationStartTime =this.plan_Time[0]
  this.zhong.nextNegotiationEndTime =this.plan_Time[1]
  if(this.zhong.negotiationResult == '谈判成功'){
          this.zhong.status = '2'
        }else if(this.zhong.negotiationResult == '谈判失败'){
          this.zhong.status = '3'
        }

        await tanEdit(this.zhong)
        this.ggXin = false
        this.getAll()
      },
      dengji(item){
        // const { pageNumber, pageSize, ...rest } = item
        this.plan_Time = []
        this.fileData = []
          const rest = {
            followId :item.followId,
            id:item.id
          }
        this.ggXin = true
        this.zhong = rest
      },
      // 获取时间
      currentTime() {
        let date = new Date();
        let year = date.getFullYear(); //月份从0~11，所以加一
        let month = date.getMonth();
        let dateArr = [date.getMonth() + 1, date.getDate(), date.getHours()]
        for (let i = 0; i < dateArr.length; i++) {
          if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = '0' + dateArr[i]
          }
        }
        let strDate = year + '-' + dateArr[0] + '-' + dateArr[1]
        return strDate
      },

      //详情
       details(val, item) {

       if(typeof item.otherAttachments === 'string' && item.otherAttachments !=''){
       item.otherAttachments =   JSON.parse(item.otherAttachments)
       }
       this.yixiangList = item.cereFollowDetails.cereCustomerInfo
          this.secondData = item
          this.genjingData = item.cereFollowDetails
          if(typeof item.cereFollowDetails.intendedResource == 'string' && item.cereFollowDetails.intendedResource !=''){
            this.xiangData =  JSON.parse(item.cereFollowDetails.intendedResource)
          }else if(typeof item.cereFollowDetails.intendedResource != 'string' && item.cereFollowDetails.intendedResource !=''){
            this.xiangData = item.cereFollowDetails.intendedResource
          }else{
            this.xiangData = []
          }
          console.log(item)
this.secondData.otherAttachments = item.otherAttachments
        this.detbox = true
      },
      // 编辑确认
      addbuss(val, item) {
        this.index = val
        this.detbox = false
        this.ggXin = true

      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },

      closeFn(val) {
        if (val == 1) {
          this.ggXin = false
        } else {
          this.detbox = false
        }
      },

      // 查询按钮
      async onSubmit() {
const res = await tanGetAll(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length

      },
      //重置按钮
      resetting() {
        this.formSel = {
          pageNumber: 1,
          pageSize: 10,
         cereFollowDetails:{
           cereCustomerInfo:{
             intentCustomerName:'',
             customerLevel:'',
             ziyuanName:'',
             type:''
           }

         }
        },
          this.getAll()
      },
 handleRemove(file, fileList) {
        this.fileData = []
      },
 handleUploadSuccess(response, file, fileList) {

        const fileMsg = {
          name:file.name,
           url: file.response.data.url,
        }

        // 将文件地址存储在 uploadedFiles 数组中
        this.fileData.push(fileMsg);
      },
      async delss(item){
         await tanDel({id:item.id})
         this.getAll()
      },
      gitOut(){
         let add =[]
        this.tableData.map(item=>{

             let obj ={
               intentCustomerName:'',
               customerLevel:'',
               contactPhone:'',
               nextFollowUpStartTime:''
             }
          obj.intentCustomerName = item.cereFollowDetails.cereCustomerInfo.intentCustomerName
          obj.contactPhone = item.cereFollowDetails.cereCustomerInfo.contactPhone
          obj.customerLevel = item.cereFollowDetails.cereCustomerInfo.customerLevel
          obj.nextFollowUpStartTime = item.nextNegotiationStartTime
            add.push(obj)

        })
      },
    }
  }
</script>

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

  }

  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    color: #ACACAC;
  }

  .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;
  }

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

  .el-row {
    margin-bottom: 20px;

    &: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/ .bg-purple[data-v-3bebae82] {
    background: #fff;
    height: 50px;
  }

  ::v-deep .bg-purple {
    background: #fff;
    height: 50px;
  }

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

  ::v-deep .el-form-item {
    margin-bottom: 16px;
  }

  .device-form .el-form-item__label::after {
    content: "*";
    color: #1A1A1A;
    margin-left: 5px;
    font-size: 16px;
  }


  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-color: #FAFAFA;
    }
  }

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

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    border-top: solid rgba(209, 209, 209, 0.2) 2px;
    padding-top: 20px;
  }

  ::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
  }

  .el-select-dropdown__item.selected {
    color: #3F9B6A;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #3F9B6A;
  }

  ::v-deep .el-dialog__wrapper {

    .dialog_css {
      margin-right: 12px;
      margin-top: 61px !important;

      .el-dialog__title {
        font-size: 16px !important;
        font-weight: 600;
        color: #000;
      }
    }

    .diaslog_zhong {
      margin-left: 25%;
      margin-top: 61px !important;
    }

  }

  ::v-deep .diaslog_zhong {
    margin-left: 20%;
    margin-top: 61px !important;

    .el-dialog__header {
      background-color: #fff;
      border-bottom: 1px solid #EFEFEF;

      .el-dialog__title {
        font-size: 14px;
        color: #000000e6;
      }
    }

    .el-dialog__body {
      padding: 10px 30px 30px 20px
    }
  }

  /deep/ .el-table_1_column_8 .hetong {
    color: #7DBB9A;
    text-decoration: underline;
  }

  /deep/ .first-column-bg {
    background-color: #FAFAFA !important;
  }

  ::v-deep .textarea {
    width: 85%;

    .el-textarea__inner {
      width: 100%;
    }
  }

  ::v-deep .pass_input {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }
  }

  ::v-deep .pass_select {
    width: 100%;

    .el-input__inner {
      border: none;
      padding: 0;
    }

    .el-icon-arrow-up:before {
      content: ''
    }

  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }

    .el-input__inner {
      height: 18px;
      border: 0px;
      margin-top: 0px;
    }

    .el-input__inner:hover {
      border: 0px;
    }

    .el-input__inner:focus {
      border: 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: 33px;
  }

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

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