<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">
          <el-form :inline="true" :model="pageindex">
            <el-form-item label="商务合作标题">
              <el-input v-model="pageindex.title" placeholder="请输入" style="width:168px;" />
            </el-form-item>

            <el-form-item label="联系人">
              <el-input v-model="pageindex.contactPerson" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="pageindex.contactPhone" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="合作类型">
              <el-select v-model="pageindex.cooperationType" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="品牌推广合作" value="品牌推广合作" />
                <el-option label="场地租赁合作" value="场地租赁合作" />
                <el-option label="文化旅游合作" value="文化旅游合作" />
                <el-option label="健康生活产品合作" value="健康生活产品合作" />
              </el-select>
            </el-form-item>
          </el-form>
          <div style="width:20%">
            <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;padding:8px 15px;" icon="el-icon-circle-plus-outline"
              @click="addOpen">新增</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="title">
          </el-table-column>
          <el-table-column label="场地名称" min-width="150">
            <template slot-scope="scope">
             {{scope.row.cereBasicInformationVenue.venueName?scope.row.cereBasicInformationVenue.venueName:'无'}}
            </template>
          </el-table-column>
          <el-table-column label="合作类型" prop="cooperationType" min-width="250">
          </el-table-column>
          <el-table-column label="联系人" prop="contactPerson" min-width="150">

          </el-table-column>
          <el-table-column label="联系电话" prop="contactPhone" min-width="150">

          </el-table-column>
          <el-table-column label="邮箱" prop="email" min-width="150">
          </el-table-column>


          <el-table-column prop="status" label="发布状态" min-width="150">
             <template slot-scope="scope">
               {{scope.row.status=='2'?'未发布':'已发布'}}
                </template>
          </el-table-column>
          <el-table-column label="操作" min-width="300" fixed="right">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="fabu(scope.row,'1')" class="tableBtn greens" v-if="scope.row.status=='2'">发布</div>
              <div @click="fabu(scope.row,'2')" class="tableBtn greens" v-if="scope.row.status=='1'">下架</div>
              <div @click="zhongzhi(scope.row)" class="tableBtn greens" v-if="scope.row.status =='2'">编辑</div>
              <div @click="deltab(scope.row)" class="tableBtn greens" v-if="scope.row.status =='2'">删除</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>
    <!-- 详情框 -->
    <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">
                <div style="padding: 20px;">
                  <el-form :model="xiangData" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="商务合作标题" prop="title">
                          <div  class="duiqi">{{xiangData.title}}</div>
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item label="合作类型">
                            <div  class="duiqi">{{xiangData.cooperationType}}</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="联系人">
                            <div  class="duiqi">{{xiangData.contactPerson}}</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                           <el-form-item label="联系电话">
                               <div  class="duiqi">{{xiangData.contactPhone}}</div>
                           </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="邮箱">
                            <div  class="duiqi">{{xiangData.email}}</div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <el-form-item label="内容" prop="content" tyle="width: 100%;">
                          <div v-html="xiangData.content" style="line-height:40px" ></div>
                        </el-form-item>
                      </el-col>

                    </el-row>

              <el-row :gutter="20">
                <el-col :span="24">
                  <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>
                    <div style="padding:20px;">
                      <el-table :data="addziyuanData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                        <el-table-column label="序号" width="80">
                          <template slot-scope="scope">
                            {{scope.$index + 1}}
                          </template>
                        </el-table-column>

                        </el-table-column>
                        <el-table-column label="场地名称" prop="venueName" width="150">

                        </el-table-column>
                        <el-table-column label="所属区域" prop="district" min-width="150">
                        </el-table-column>
                        <el-table-column label="场地类型" prop="venueType" width="150">

                        </el-table-column>
                        <el-table-column label="详细位置" prop="detailedLocation" min-width="150" show-overflow-tooltip>
                        </el-table-column>

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

              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="往期活动展示" prop="previousEvents">
                     <div style="display: flex;justify-content: space-between;" >
                       <el-image style="width:48%" fit="fill" :src="$baseURL+item" v-for="(item,index) in xiangData.previousEvents"></el-image>
                     </div>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="封面图片" prop="coverImage">
                    <el-image :src="$baseURL +xiangData.coverImage" 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">
                            <el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                              @click="detbox=false">取消</el-button>
                        </el-col>
                      </el-row>
        </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;">
        <div style="padding: 20px 20px 20px 0;">
          <el-form ref="AddFromOne" :model="formInline" :rules="rulesOne" label-width="150px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="商务合作标题" prop="title">
                  <el-input placeholder="请输入"  v-model="formInline.title" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合作类型" prop="cooperationType">
                  <el-select v-model="formInline.cooperationType" placeholder="请选择" style="width:100%">
                    <el-option label="品牌推广合作" value="品牌推广合作" />
                    <el-option label="场地租赁合作" value="场地租赁合作" />
                    <el-option label="文化旅游合作" value="文化旅游合作" />
                    <el-option label="健康生活产品合作" value="健康生活产品合作" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系人" prop="contactPerson">
                  <el-input placeholder="请输入" v-model="formInline.contactPerson"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="contactPhone">
                  <el-input placeholder="请输入" v-model="formInline.contactPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input placeholder="请输入"  v-model="formInline.email" ></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="内容" prop="content">
                  <wang-editor v-model="formInline.content" ref="editor" :height="200"></wang-editor>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <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 style="color: #3F9B6A;margin-left: 10px;" @click="addziyuan = true">
                      添加
                    </div>
                  </div>
                  <div style="padding:20px;">
                    <el-table :data="addziyuanData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                      :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
                      <el-table-column label="序号" width="80">
                        <template slot-scope="scope">
                          {{scope.$index + 1}}
                        </template>
                      </el-table-column>
                      <el-table-column label="场地名称" prop="venueName" width="150">
                      </el-table-column>
                      <el-table-column label="所属区域" prop="district" min-width="150">
                      </el-table-column>
                      <el-table-column label="场地类型" prop="venueType" width="150">
                      </el-table-column>
                      <el-table-column label="详细位置" prop="detailedLocation" min-width="150" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作" min-width="150">
                        <template slot-scope="scope">
                          <div class="tableBtn greens" @click="handleDelete(scope.$index)" >删除</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-col>
            </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="往期活动展示" prop="previousEvents">
          <upimg filePath="serve" :value="formInline.previousEvents" inputtype="previousEvents" :limit="5"
            @changimg="e=>changimg(e,'previousEvents')"></upimg>
        </el-form-item>
      </el-col>
    </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="封面图片" prop="coverImage">
                  <upimg filePath="serve" :value="formInline.coverImage" inputtype="coverImage" :limit="1"
                    @changimg="e=>changimg(e,'coverImage')"></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 class="buttonHover"
                      style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="closeFn">取消</el-button>
                    <el-button style="background-color: #3F9B6A;color: #fff" @click="addCheck">确 定</el-button>
                  </div>

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

          </el-form>
        </div>
      </div>
      <el-dialog :visible.sync="addziyuan" title="添加" width="70%"
        append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <div style="padding: 15px;width:100%">
          <div style="border: 1px solid #E5E5E5;padding: 1px" id="huodong">
            <div style="padding: 10px 13px;font-size: 14px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: space-between;">
              <div>选择场地</div>
            </div>
            <div style="padding: 15px;">
              <div style="padding: 0px 20px 0px 0px">
                <el-table :data="ziyuanData"
                highlight-current-row
                      @row-click="handleRowClick"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                  >
<el-table-column
          label="选择"
          width="55">
          <template slot-scope="scope">
            <el-radio v-model="selectedRow" inert :label="scope.row" >&nbsp;</el-radio>
          </template>
        </el-table-column>
                  <el-table-column label="序号"  min-width="8%" >
                    <template slot-scope="scope">
                      {{scope.$index + 1}}
                    </template>
                  </el-table-column>
                 <el-table-column label="场地名称" prop="venueName" min-width="15%">

                 </el-table-column>
                 <el-table-column label="场地类型" prop="venueType" min-width="15%">

                 </el-table-column>
                 <el-table-column label="所属区域" prop="district" min-width="15%">
                 </el-table-column>
                 <el-table-column label="详细位置" prop="detailedLocation" min-width="20%" show-overflow-tooltip>
                 </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
          <el-button  @click="mingClose" class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消
          </el-button>
          <el-button  @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
          </el-button>

        </div>
      </el-dialog>
   </div>
  </div>


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import wangEditor from "@/components/editor/index";
  import {
 MerGetAll,
 MerAdd,
 MerEdit,
 MerDel
  } from '../../../api/Merchant.js'
  import upimg from "@/components/ImageUpload/index"
  import {
   changAlls
  } from '../../../api/information.js'

  export default {
    components: {
      upimg,
      wangEditor
    },
    data() {
      return {
        hetongBox: false,
        detbox: false, //详情
        leixing: true, //切换
        currentPage: 1,
        total: 10,
        flag: false,
        pageSize: 10,
        ggXin: false,
        formInline: {
          title:'',
          venue:'',
          contactPerson:'',
          contactPhone:'',
          cooperationType:'',
          email:'',
          coverImage:'',
          previousEvents:'',
          status:'2'
        },
        plan_Time:[],
        followUpTime:[],
        tableData: [],
        secondData: {},
        pageindex: {
           title:'',
           venue:'',
           contactPerson:'',
           contactPhone:'',
           cooperationType:'',
      pageNumber: 0,
      pageSize: 10,
        },
        bianjiBox: 1,

        edit: true, //编辑切换
        addkehu:false,
        addziyuan:false,
        ziyuanData:[],//资源
        addziyuanData:[],
        multipleSelection:[],
        xiangData:{},//详情
        rulesOne: {
          title: [{
            required: true,
            message: '请输入商务合作标题',
            trigger: 'blur'
          }, ],
          content: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }],
          cooperationType: [{
            required: true,
            message: '请选择合作类型',
            trigger: 'change'
          }],
          contactPerson: [{
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }],
          contactPhone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }],
          previousEvents: [{
            required: true,
            message: '请上传往期活动图片',
            trigger: 'change'
          }, ],
          coverImage: [{
            required: true,
            message: '请上传封面图片',
            trigger: 'change'
          }, ],
        },
        selectedRow:null
      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      changimg(e, type) {
 this.formInline[type] = e

      },
  addOpen(){
        this.formInline = {
          title:'',
          venue:'',
          contactPerson:'',
          contactPhone:'',
          cooperationType:'',
          email:'',
          coverImage:'',
          previousEvents:'',
          status:'2'
        }
        this.addziyuanData = []
        this.ggXin = true
      },
      async getAll() {
        const res = await MerGetAll(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
        const ziyuan =  await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content]
      },

      // 新增确定按钮
       addCheck(val) {
        if(this.addziyuanData.length !=0){
          this.formInline.venue  = this.addziyuanData.map(item => item.id).join(',');
        }else{
          this.formInline.venue =''
        }
        if(this.formInline.content  == '<p> </p>' || this.formInline.content  == '<p><br></p>'){
          this.$message({
            message: '请填写完整信息',
            type: 'error'
          })
          return
        }
        this.$refs.AddFromOne.validate((valid) => {
           if (valid) {
             this.formInline.createTime = this.currentTime()
              if(this.edit){
                 MerAdd(this.formInline).then(res=>{
                   this.ggXin = false
                   this.addziyuanData = []
                   this.getAll()
                 })
              }else{

                if(this.formInline.previousEvents !=''&& typeof this.formInline.previousEvents != 'string'){
                  this.formInline.previousEvents = this.formInline.previousEvents.join(',')
                }
               MerEdit(this.formInline).then(res=>{
                  this.ggXin = false
                  this.addziyuanData = []
                  this.getAll()
                })
              }
              this.selectedRow = null
           }else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })

          }
        })
      },
      // 获取时间
      currentTime() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1; // 月份从0~11，所以加一
        let day = date.getDate();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

        // 为月、日、小时、分钟和秒添加前导零（如果需要）
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        // 返回格式化的日期和时间字符串
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      },

      //详情
       details(item) {
         this.addziyuanData = []
        this.edit = true
        this.xiangData = item

        if (typeof item.previousEvents === 'string') {
          this.xiangData.previousEvents = item.previousEvents.split(',');
}

     if(item.venue!=''){
       let ids = []
       ids = item.venue.split(',')
       ids.map(res => {
         changAlls({
           id: res,
           pageNumber: 0,
           pageSize: 10,
         }).then(item => {

           item.data.content.map(ids => {
             this.addziyuanData.push(ids)
           })

         })
       })

     }

        this.detbox = true
      },
     async addbuss() {
       await MerEdit(this.xiangData)
        this.detbox = false
        this.getAll()
        // this.ggXin = true

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

      closeFn(val) {
        this.addziyuanData =[]
        this.getAll()
   this.ggXin = false
   this.selectedRow = null

      },
      //查看合同
      lookHetong(val) {
        this.hetongBox = true
      },
      // 查询按钮
       onSubmit() {
     this.getAll()
      },
      //重置按钮
      resetting() {
    this.pageindex={
         title:'',
         venue:'',
         contactPerson:'',
         contactPhone:'',
         cooperationType:'',
    pageNumber: 0,
    pageSize: 10,
      }
         this.getAll()
      },
      zhongzhi(item){
     this.edit = false
     this.formInline = item
     this.addziyuanData =[]
     if(item.venue!=''){
       let ids = []
       ids = item.venue.split(',')
       ids.map(res => {
         changAlls({
           id: res,
           pageNumber: 0,
           pageSize: 10,
         }).then(item => {

           item.data.content.map(ids => {
             this.addziyuanData.push(ids)
             this.selectedRow = ids
           })

         })
       })

     }
     this.ggXin = true

      },
  minSev() {
this.addziyuanData = []
this.addziyuanData.push(this.selectedRow)
      this.addziyuan = false
      this.multipleSelection = []
      this.selectedRow = null
      },
      mingClose(){
        this.multipleSelection =[]
        this.addziyuan = false
        this.selectedRow = null
      },
      handleRowClick(row) {
            this.selectedRow = row; // 点击行时选中对应的单选框
          },
      deltab(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') {
                          MerDel({id:item.id}).then(res=>{
                            this.$message({
                              message: '删除成功',
                              type: 'success'
                            })
                             this.getAll()
                            done();
                          })
                        } else {
                          done();
                        }
          }
          })
      },
      fabu(item,val){
        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') {
                        MerEdit({id:item.id,status:val}).then(res=>{
                           this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
        }
        })

      },
      handleDelete(index){
          this.addziyuanData.splice(index, 1)
          this.selectedRow = null
      }
    }
  }
</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;
  }



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



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