<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.title" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="场地名称">
              <el-input v-model="formSel.venue" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="formSel.contactPerson" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="formSel.contactPhone" placeholder="请输入" style="width:168px;" />
            </el-form-item>
            <el-form-item label="起止时间">
              <el-select v-model="formSel.startTime" placeholder="请选择" style="width:168px;margin-right: 15px">
                <el-option label="" value="" />
              </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;padding:8px 15px;" icon="el-icon-circle-plus-outline"
              @click="ggXin = true">新增</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="200" prop="title">
          </el-table-column>
          <el-table-column label="场地名称" min-width="150" prop="venue">
          </el-table-column>
          <el-table-column label="起止时间" prop="startTime" 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="registeredCount" min-width="150">
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" min-width="250">

          </el-table-column>
          <el-table-column label="创建人" prop="createdBy" min-width="150">
          </el-table-column>
          <el-table-column prop="reviewStatus" label="状态" min-width="150">
             <template slot-scope="scope">
               {{scope.row.reviewStatus=='1'?'未发布':'已发布'}}
                </template>
          </el-table-column>
          <el-table-column label="操作" min-width="350">
            <template slot-scope="scope">
              <div @click="details(scope.row)" class="tableBtn greens">查看</div>
              <div @click="fabu(scope.row,'2')" class="tableBtn greens" v-if="scope.row.reviewStatus=='1'">发布</div>
              <div @click="fabu(scope.row,'1')" class="tableBtn greens" v-if="scope.row.reviewStatus=='2'">下架</div>
              <div @click="zhongzhi(scope.row)" class="tableBtn greens" v-if="scope.row.reviewStatus =='1'">编辑</div>
              <div @click="getMing(scope.row.id)" class="tableBtn greens" v-if="scope.row.reviewStatus!='1'">报名名单</div>
              <div @click="deltab(scope.row)" class="tableBtn greens" v-if="scope.row.reviewStatus =='1'">删除</div>
              <div @click="Qcode(scope.row)" class="tableBtn greens" >活动二维码</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;">详情页</div>
        <div>

          <el-form ref="form" :model="xiangData" label-width="120px">
            <el-form-item label="营销活动标题" prop="title">
              <el-input placeholder="请输入"  v-model="xiangData.title" :disabled="edit" ></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content" tyle="width: 100%;">
              <wang-editor v-model="xiangData.content" ref="editor" :height="200" v-if="!edit"></wang-editor>
              <div v-html="xiangData.content" style="line-height:40px" v-else></div>
            </el-form-item>
          </el-form>
          <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" v-if="!edit">
                     添加
                   </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="id" width="150">

                     </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">
                     </el-table-column>
                     <el-table-column label="操作"  min-width="150">
                       <template slot-scope="scope">
                       <div class="tableBtn greens" @click="addziyuanData = []" >删除</div>
                       </template>
                     </el-table-column>
                   </el-table>
                 </div>
               </div>
               <el-form ref="form" :model="xiangData" label-width="120px">
                 <el-form-item label="起止时间">
                   <el-date-picker style="width: 100%;" v-model="plan_Time" value-format="yyyy-MM-dd HH:mm:ss" :disabled="edit"
                     type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                   </el-date-picker>
                 </el-form-item>
                 <el-form-item label="联系人" prop="contactPerson">
                   <el-input placeholder="请输入"  v-model="xiangData.contactPerson"  :disabled="edit"></el-input>
                 </el-form-item>
                 <el-form-item label="联系电话"  prop="contactPhone">
                   <el-input placeholder="请输入"  v-model="xiangData.contactPhone"  :disabled="edit"></el-input>
                 </el-form-item>
                 <el-form-item label="封面图片" prop="coverImage">
                   <upimg v-model="xiangData.coverImage" :limit="1" :fileSize="1" :isShowTip="false" v-if="!edit"></upimg>
                   <img :src="xiangData.coverImage" alt="" v-else>
                 </el-form-item>

               </el-form>
        </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="edit = false" style="background-color: #3F9B6A;color: #fff" v-if="edit && xiangData.reviewStatus!='2'">编辑</el-button>
          <el-button @click="addbuss(2)" style="background-color: #3F9B6A;color: #fff" v-else>确认</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="formInline" label-width="120px">
          <el-form-item label="营销活动标题" prop="title">
            <el-input placeholder="请输入"  v-model="formInline.title" ></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content" tyle="width: 100%;">
            <wang-editor v-model="formInline.content" ref="editor" :height="200"></wang-editor>
          </el-form-item>
        </el-form>
      </div>

      <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="id" width="150">

            </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">
            </el-table-column>
            <el-table-column label="操作"  min-width="150">
              <template slot-scope="scope">
              <div class="tableBtn greens" @click="addziyuanData = []" >删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-form ref="form" :model="formInline" label-width="120px">
        <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-item label="联系人" prop="currentStage">
          <el-input placeholder="请输入"  v-model="formInline.contactPerson" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input placeholder="请输入"  v-model="formInline.contactPhone" ></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <upimg v-model="formInline.coverImage" :limit="1" :fileSize="1" :isShowTip="false"></upimg>
        </el-form-item>

      </el-form>
      <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(4)" style="background-color: #3F9B6A;color: #fff">确定</el-button>
      </div>
      <!-- 场地选择 -->
      <el-dialog :visible.sync="addziyuan" custom-class='XDD_css' style="padding: 0;" width="50%"
        append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <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;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
                    @current-change="handleSelectionChange"
                  :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                  >

                  <el-table-column label="序号"  min-width="8%" >
                    <template slot-scope="scope">
                      {{scope.$index + 1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="编号" prop="id" min-width="22%">

                  </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 prop="notes" label="对应策略" min-width="15%">
                  </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>

    </el-dialog>
    <el-dialog :visible.sync="showQF" custom-class='tongyong_css' style="padding: 0;" width="25%" center
          :close-on-click-modal="false" :show-close="false">
          <div style="padding:20px;">
            <div style="font-size: 14px;padding-bottom: 20px;color: #000;">活动二维码</div>
            <div style="padding:20px;">
               <img :src="qfUrl" alt="" style="height:330px;width:80%">
            </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="showQF =false">返回</el-button>
            </div>
          </div>

        </el-dialog>
        <!-- 报名名单 -->
        <el-dialog :visible.sync="baoming" custom-class='tongyong_css' style="padding: 0;" width="55%" center
              :close-on-click-modal="false" :show-close="false">
              <div style="padding:20px;">
                <div style="font-size: 14px;padding-bottom: 20px;color: #000;">报名名单</div>
                <div style="padding:20px;">
                   <el-table :data="mingList"
                     :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="联系人" prop="userName" min-width="150">

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

                     </el-table-column>
                   </el-table>
                </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="baoming =false">返回</el-button>
                </div>
              </div>

            </el-dialog>
  </div>


</template>

<script>
  import {
    async
  } from 'q'
  import axios from 'axios'
  import wangEditor from "@/components/editor/index";
  import {
   MarkGetAll,
   MarkAdd,
   MarkEdit,
   MarkDel,
   QRcode,
   Registration
  } from '../../../api/MarkActivity.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:'',
          content:'',
          venue:'',
          contactPerson:'',
          contactPhone:'',
          coverImage:'',
          registeredCount:'',
        },
        plan_Time:[],
        followUpTime:[],
        tableData: [],
        secondData: {},
        formSel: {
         title:'',
         venue:'',
         contactPerson:'',
         contactPhone:'',
        },
        pageindex: {
      pageNumber: 1,
      pageSize: 10,
        },
        bianjiBox: 1,
        chengeTatle: 1,
        zhong: {},
        edit: true, //编辑切换
        xiangTabs:'first',
        addkehu:false,
        addziyuan:false,
        ziyuanData:[],//资源
        addziyuanData:[],
        multipleSelection:[],
        xiangData:{},
        showQF:false,
        qfUrl:'',
        baoming:false,
        mingList:[]
      }
    },
    created() {
      this.getAll()
    },
    computed: {

    },
    methods: {
      // 获取时间
      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
      },
      chenge(val) {
        this.formSel = {
          title:'',
         venue:'',
         contactPerson:'',
         contactPhone:'',}
        this.leixing = !this.leixing
        this.chengeTatle = val
      },
      async getAll() {
        const res = await MarkGetAll(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
        const ziyuan =  await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content]

      },

      // 新增确定按钮
      async addCheck(val) {
        if(this.addziyuanData.length !=0){
          this.formInline.venue  = this.addziyuanData.map(item => item.id).join(',');
        }
        if(this.plan_Time.length !=0){
          this.formInline.startTime =  this.plan_Time[0]
          this.formInline.endTime = this.plan_Time[1]
        }
        this.formInline.reviewStatus = '2'
        this.formInline.createdAt = this.currentTime()
        await MarkAdd(this.formInline)
        this.ggXin = false
        this.formInline =  {
            title:'',
            content:'',
            venue:'',
            contactPerson:'',
            contactPhone:'',
            coverImage:'',
            registeredCount:'',

        }

        this.plan_Time =[]
        this.addziyuanData =[]
        this.getAll()
      },
      // 获取时间
      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}:${seconds}`;
      },

      //详情
       details(item) {
         this.plan_Time[0] = item.startTime
         this.plan_Time[1] = item.endTime
        this.edit = true
        this.xiangData = item
        this.detbox = true



      },
      zhongzhi(item){
        this.edit = false
        this.xiangData = item
        this.detbox = true
 this.plan_Time[0] = item.startTime
        this.plan_Time[1] = item.endTime
      },
     async addbuss() {
       if(this.plan_Time.length !=0){
         this.xiangData.startTime =  this.plan_Time[0]
         this.xiangData.endTime = this.plan_Time[1]
       }

       await MarkEdit(this.xiangData)
       this.plan_Time = []
        this.detbox = false
        this.getAll()
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },

      closeFn(val) {
        this.plan_Time =[]
        this.addziyuanData =[]
 this.formInline =  {
            title:'',
            content:'',
            venue:'',
            contactPerson:'',
            contactPhone:'',
            coverImage:'',
            registeredCount:'',

        }
        this.bianjiBox = 1
        if (val == 1) {
          this.ggXin = false
        } else {
          this.detbox = false
        }
      },
      //查看合同
      lookHetong(val) {
        this.hetongBox = true
      },
      // 查询按钮
      async onSubmit() {
      this.formSel.pageNumber = 1
      this.formSel.pageSize = 10
       const res =  await MarkGetAll(this.formSel)
        this.tableData = res.data.content
        this.total = res.data.content.length
 this.formSel = {
          title:'',
         venue:'',
         contactPerson:'',
         contactPhone:'',
         }
      },
      //重置按钮
      resetting() {
        this.formSel = {
          title:'',
         venue:'',
         contactPerson:'',
         contactPhone:'',}
          this.getAll()
      },

  minSev() {
        this.addziyuanData = this.multipleSelection
        this.addziyuan = false
        this.multipleSelection =[]
      },
      mingClose(){
        this.multipleSelection =[]
        this.addziyuan = false
      },
      handleSelectionChange(val) {

        this.multipleSelection.push(val)
      },
      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') {
                          MarkDel({id:item.id}).then(res=>{
                             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') {
                        MarkEdit({id:item.id,reviewStatus:val}).then(res=>{
                           this.getAll()
                          done();
                        })
                      } else {
                        done();
                      }
        }
        })

      },
      Qcode(items){
        this.showQF = true
        let pgs={
           scene:`item='${items.id}'`,
           // scene:items,
           page:"pages/marketing/marketingDetail/marketingDetail"
        }
         QRcode(pgs).then(res=>{
            this.qfUrl = res.data
         })
      },
     async getMing(ids){
       let page={
         activityId:ids
       }
      const res =  await Registration(page)
      this.mingList = res.data
        this.baoming = true
      }

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