<template>
  <div id="sub-main" class="sbgl">
    <section>
      <div class="search-item">
        <div class="query">
          <el-form :model="searchFormData" ref="form">
            <el-form-item>
              <el-input
                v-model="searchFormData.keywords"
                placeholder="设备名称、设备型号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchFormData.device_type"
                placeholder="设备类型"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchFormData.is_patrol"
                placeholder="是否需要巡检"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchFormData.is_effective"
                placeholder="是否有效"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchFormData.is_show"
                placeholder="是否显示"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="quertBtn">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- <el-input v-model="quertTxt" placeholder="请输入关键词"></el-input> -->
        </div>
        <el-button class="add" @click="addChangeBtn('add')" type="primary"
          >添加设备</el-button
        >
      </div>
      <div class="table-item">
        <el-table class="my-el-table" :data="tableData" height="836" border>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="name" label="设备图片"></el-table-column>
          <el-table-column prop="startDate" label="设备名称"></el-table-column>
          <el-table-column prop="endDate" label="设备型号"></el-table-column>
          <el-table-column prop="notice" label="设备类型"> </el-table-column>
          <el-table-column prop="state" label="是否需要巡检"></el-table-column>
          <el-table-column prop="taskDate" label="生成厂家"></el-table-column>
          <el-table-column prop="people" label="是否启用"></el-table-column>
          <el-table-column label="操作" width="auto">
            <template :slot-scope="scope">
              <el-button @click="detailBtn" size="mini" type="success">
                详情
              </el-button>
              <el-button
                @click="addChangeBtn('change')"
                size="mini"
                type="primary"
                >编辑</el-button
              >
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :page-size="query.pageSize"
          :total="total"
          :pager-count="7"
          :current-page="query.currentPage"
          layout="prev, pager, next, jumper, ->, slot"
          :page-sizes="[5, 10, 15]"
          prev-text="上一页"
          next-text="下一页"
          @current-change="changePage"
        >
          <span class="record"
            >每页&nbsp;{{ query.pageSize }}&nbsp;条，共&nbsp;{{
              total
            }}&nbsp;条记录</span
          >
        </el-pagination>
      </div>
    </section>

    <BigChart :show="fileShow" @close-dialog="closeDialog" title="查看文件">
      <iframe
        src="https://jzfile.cnjsjd.net/upload/100012/S3/reservoir/inspectfile/b20d92ab375824b09e441c3d53f514b2.pdf"
        frameborder="0"
      ></iframe>
    </BigChart>

    <BigChart
      :show="detailShow"
      @close-dialog="closeDialog"
      title="任务详情"
      class="detail"
    >
      <div class="dialog-main">
        <div class="head mt0">
          <span>基础信息</span>
        </div>
        <div class="info">
          <div class="item">
            <p>任务名称：</p>
            <p>柴油发电机</p>
          </div>
          <div class="item">
            <p>任务类型：</p>
            <p>R-75GF</p>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <p>频率：</p>
            <p>---</p>
          </div>
          <div class="item">
            <p>频率单位：</p>
            <p>---</p>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <p>开始时间：</p>
            <p>---</p>
          </div>
          <div class="item">
            <p>结束时间：</p>
            <p>---</p>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <p>是否开启：</p>
            <p>是</p>
          </div>
          <div class="item">
            <p>任务文件：</p>
            <p>---</p>
          </div>
        </div>
        <div class="info">
          <div class="item mr0" style="width: 100%">
            <p>巡检目标：</p>
            <p>---</p>
          </div>
        </div>
        <div class="head">巡查人员</div>
        <div class="info">
          <div class="item">
            <p>巡查人员：</p>
            <p>人员姓名 / 1984556787938</p>
          </div>
          <div class="item">
            <p>巡查人员：</p>
            <p>人员姓名 / 1984556787938</p>
          </div>
          <div class="item">
            <p>巡查人员：</p>
            <p>人员姓名 / 1984556787938</p>
          </div>
        </div>
        <div class="head">巡查点位</div>
        <div class="info">
          <div class="item">
            <p>巡查点位：</p>
            <p>一号点位 / 芯片巡检 / XPM-9866780</p>
          </div>
        </div>
      </div>
    </BigChart>

    <BigChart
      :show="addChangeShow"
      @close-dialog="closeDialog"
      :title="addChangeTitle"
      class="add-form"
    >
      <div class="form-box">
        <el-form :model="addFormData" :rules="formRules" ref="form">
          <div class="form-top1">
            <el-form-item label="任务名称" prop="name">
              <!-- 输入框 -->
              <el-input
                v-model="addFormData.name"
                placeholder="请输入任务名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="任务类型" prop="food">
              <!-- 下拉选择 -->
              <el-select
                v-model="addFormData.food"
                placeholder="请选择任务类型"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="频率" prop="name">
              <!-- 输入框 -->
              <el-input
                v-model="addFormData.name"
                placeholder="请输入任务名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="日期时间范围" prop="dateFrame">
              <!-- 日期时间范围选择器 -->
              <el-date-picker
                v-model="addFormData.dateFrame"
                type="datetimerange"
                :picker-options="dateFrameOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                :default-time="['12:00:00', '08:00:00']"
                clearable
                :readonly="false"
                :editable="true"
                class="date-frame"
                popper-class="date-frame-panel1"
                @change="dateFrameChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="日期时间" prop="datetime">
              <!-- 日期时间选择器 -->
              <el-date-picker
                v-model="addFormData.datetime"
                type="datetime"
                placeholder="选择日期时间"
                :picker-options="datetimeOptions"
                default-time="12:00:00"
                clearable
                :readonly="false"
                :editable="true"
                class="date-time"
                popper-class="date-time-panel1"
                @change="datetimeChange"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="form-top2"></div>
          <div class="form-top3"></div>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button @click="$emit('open-second', true)"
              >打开二级弹层</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </BigChart>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索表单
      // 表单
      searchFormData: {
        keywords: '',
        device_type: '',
        is_patrol: '',
        is_effective: '',
        is_show: ''
      },
      // 任务类型
      selectOptions: [{
        value: 0,
        label: '默认'
      }, {
        value: 1,
        label: '备用电源'
      }, {
        value: 2,
        label: '启闭机'
      }, {
        value: 3,
        label: '测量站'
      }, {
        value: 4,
        label: '闸门'
      }],
      // 设备类型
      selectOptions1: [{
        value: 0,
        label: '默认'
      }, {
        value: 1,
        label: '备用电源'
      }, {
        value: 2,
        label: '启闭机'
      }, {
        value: 3,
        label: '测量站'
      }, {
        value: 4,
        label: '闸门'
      }],
      // 是否需要巡检
      selectOptions2: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      // 是否有效
      selectOptions3: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      // 是否显示
      selectOptions4: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      // 新增表单
      addFormData: {
        name: '',
        food: ['选项1'],
        dateFrame: [],
        datetime: ''
      },
      // 日期时间范围选择器
      dateFrameOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      datetimeOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      formRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        food: [
          { required: true, message: '请选择食物', trigger: 'blur' }
        ],
        dateFrame: [
          { required: true, message: '请选择日期区间', trigger: 'blur' }
        ],
        datetime: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ]
      },

      // 文件
      fileShow: false,
      // 详情
      detailShow: false,
      // 添加编辑按钮标题
      addChangeTitle: '',
      // 添加修改
      addChangeShow: false,
      // 分页
      query: {
        currentPage: 1, // 页码
        pageSize: 5 // 每页条数
      },
      // 总数据量
      total: 100,
      form: { mc: '', lx: '', pl: '', dw: '', start: '', end: '', isOpen: '', explain: '' },
      // 输入关键词查询任务列表
      quertTxt: '',
      // 表格
      tableData: [
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },

        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        },
        {
          name: '---',
          startDate: '---',
          endDate: '---',
          notice: true,
          state: '---',
          taskDate: '---',
          people: '---',
          res: true
        }

      ],
      xcryTableData: [
        { name: '---', number: '---', ID: '---' },
        { name: '---', number: '---', ID: '---' }
      ],
      xcdwTableData: [
        { xcd: '---', xcfs: '---', xpm: '---' },
        { xcd: '---', xcfs: '---', xpm: '---' }
      ]
    }
  },
  methods: {
    // 表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 日期时间范围选择器
    dateFrameChange () {
      console.log('日期时间范围改变')
    },
    // 日期时间选择器
    datetimeChange () {
      console.log('日期时间改变')
    },
    // 新增修改按钮
    addChangeBtn (flag) {
      if (flag === 'add') {
        this.addChangeTitle = '添加任务'
      } else if (flag === 'change') {
        this.addChangeTitle = '编辑任务'
      }
      this.addChangeShow = true
    },
    // 详情按钮
    detailBtn () {
      this.detailShow = true
    },
    // 查询任务按钮
    quertBtn () {
      const newObj = JSON.parse(JSON.stringify(this.searchFormData))
      for (const key in newObj) {
        if (newObj[key] === '') {
          newObj[key] = -1
        }
      }
      console.log('查询关键字', newObj, this.searchFormData)
    },
    // 分页
    changePage (currPage) {
      console.log('切换分页', currPage)
    },
    openFile () {
      this.fileShow = true
    },
    // 关闭所有弹窗
    closeDialog () {
      this.fileShow = false
      this.detailShow = false
      this.addChangeShow = false
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
// 表格
$tableBoder: #0a3461;
iframe {
  width: 100%;
  height: 100%;
}
.mr0 {
  margin-right: 0 !important;
}
#sub-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #0c3061;
  padding-bottom: 10px;
  section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .search-item {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 10px;
      background: #12407f;
      margin-bottom: 10px;
    }
    .table-item {
      flex: 1;
      padding: 0 10px;
    }
    .calendar-item {
      flex: 1;
      padding: 0 10px;
    }
    .pagination ::v-deep {
      height: 50px;
      margin: 10px 10px 0;
      background: #103b69;
      display: flex;
      align-items: center;
      .el-pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        // 默认插槽
        .el-pagination__rightwrapper {
          position: absolute;
          left: 20px;
          top: 11px;
          color: #fff;
          font-size: 14px;
          font-weight: 400;
        }
        // 上一页, 下一页
        .btn-prev,
        .btn-next {
          width: 70px;
          height: 30px;
          background-color: $pry2;
          color: #fff;
          &[disabled] {
            color: #606266;
          }
        }
        .el-pager li {
          background-color: rgba(39, 146, 160, 0.2);
          color: #fff;
          &:hover {
            color: rgba(0, 255, 255, 0.6) !important;
          }
          &.active {
            background-color: $pry2 !important;
            color: #fff !important;
          }
        }
        .el-pagination__jump {
          color: #fff;
          .el-input {
            width: 70px;
            height: 30px;
            input {
              background-color: rgba(39, 146, 160, 0.2);
              border-color: $pry2;
              color: #fff;
              &:focus {
                border-color: rgba(0, 255, 255, 0.7);
              }
            }
          }
        }
      }
    }
  }
}
#sub-main {
  section {
    .search-item {
      display: flex;
      justify-content: space-between;
      .query {
        display: flex;
        align-items: center;
        .el-button ::v-deep {
          display: flex;
          align-items: center;
          width: 70px;
          height: 30px;
        }
        /* 表单 */
        .el-form ::v-deep {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          // 表单项
          .el-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            margin-right: 20px;
            // 表单项label标签
            .el-form-item__label {
              width: 120px;
              color: $pry;
              font-size: 14px;
              text-align: right;
            }
            // 表单项内容
            .el-form-item__content {
              display: flex;
              align-items: center;
              flex: 1;
            }
            // 表单校验错误输入框边框颜色
            &.is-error .el-input__inner {
              border-color: #f56c6c !important;
            }
          }
        }
        // 输入框
        .el-input ::v-deep {
          .el-input__inner {
            width: 160px;
            height: 30px;
            background-color: #0b3268;
            border-color: #2e6d8d;
            color: #fff;
            font-size: 14px;
            &::placeholder {
              font-size: 14px;
            }
          }
        }
        /* 下拉选择 */
        .el-select ::v-deep {
          // 搜索输入框
          .el-select__input {
            color: #fff;
            font-size: 14px;
          }
          // 输入框
          .el-input {
            // 输入框选中时
            &.is-focus .el-input__inner {
              border-color: $pry;
            }
            .el-input__inner {
              width: 140px;
              height: 30px;
              background-color: #0b3268;
              border-color: #2e6d8d;
              color: #fff;
              font-size: 14px;
              &::placeholder {
                color: #c0c4cc;
                font-size: 14px;
              }
              &:hover {
                border-color: $pry2;
              }
            }
            // 输入框箭头颜色
            .el-input__suffix {
              display: flex;
              align-items: center;
              .el-input__suffix-inner {
                i {
                  color: $pry;
                }
              }
            }
          }
          // 显示的选中项
          .el-select__tags {
            span {
              .el-tag {
                background-color: #2b809e;
                border-color: $pry;
                color: #fff;
              }
            }
          }
          // 选择框的下拉弹出框
          .el-select-dropdown {
            background-color: #226697;
            border-color: #226697;
            // 弹出框的数据列表
            .el-select-dropdown__list {
              padding: 5px;
              // 弹出框的单条数据
              .el-select-dropdown__item {
                display: flex;
                align-items: center;
                height: 30px;
                margin-bottom: 4px;
                border-radius: 4px;
                color: #fff;
                font-size: 14px;
              }
            }
            // 经过选项时选项的背景色
            .el-select-dropdown__item.hover {
              background-color: #39a0bb;
            }
            // 已选中的选项
            &.is-multiple .el-select-dropdown__item.selected {
              background-color: #39a0bb;
              color: #fff;
            }
            // 弹出框三角形
            .popper__arrow {
              border-bottom-color: #226697 !important;
              border-top-color: #226697 !important;
              &::after {
                border-bottom-color: #226697 !important;
                border-top-color: #226697 !important;
              }
            }
          }
        }
      }
      .el-button.add {
        display: flex;
        align-items: center;
        height: 30px;
        padding: 0 10px;
        background-color: #12bcb2;
        margin-left: 0;
        border-color: #12bcb2;
      }
    }
    .table-item {
      width: 1660px;
      margin-left: 10px;
      background-color: #103b69;
      padding: 0 !important;
      .el-table.my-el-table ::v-deep {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 836px !important; // 要设置
        background-color: #103b69;
        font-size: 14px;
        // 内边框颜色
        .file-icon {
          width: 38px;
          height: 38px;
          background: url("~@/assets/images/maintain/file_icon1.png") no-repeat
            center / 100% 100%;
          cursor: pointer;
          &.have {
            background: url("~@/assets/images/maintain/file_icon2.png")
              no-repeat center / 100% 100%;
          }
        }
        th,
        td {
          padding: 0;
          border-color: $tableBoder !important;
          text-align: center;
          .cell {
            padding: 0 !important;
            line-height: 1;
          }
        }
        // 表头
        .el-table__header-wrapper {
          table {
            width: 100% !important;
            thead {
              tr {
                height: 50px;
                th {
                  background-color: #1d597f;
                  color: $pry;
                  &.ascending .caret-wrapper .sort-caret.ascending {
                    border-bottom-color: $pry;
                  }
                  &.descending .caret-wrapper .sort-caret.descending {
                    border-top-color: $pry;
                  }
                  &.gutter {
                    width: 17px !important;
                  }
                }
              }
            }
          }
        }
        // 表身体
        .el-table__body-wrapper {
          flex: 1 !important;
          background-color: #103b69;
          &::-webkit-scrollbar {
            // 滚动条整体样式
            width: 17px; // 竖向滚动条宽度
            height: 17px; // 横向滚动条高度
          }
          &::-webkit-scrollbar-thumb {
            // 滚动条内滑块样式
            background-color: #6d9dbc;
            border-radius: 2px;
            &:hover {
              background-color: #4b8cb8;
            }
            &:active {
              background-color: #426b85;
            }
          }
          &::-webkit-scrollbar-track {
            // 滚动条轨道样式
            background-color: transparent;
          }
          table {
            width: 100% !important;
            tbody {
              .el-button {
                width: 45px;
                height: 30px;
                padding: 0;
              }
              tr {
                height: 60px;
                &:hover {
                  background-color: rgba(0, 255, 255, 0.3) !important;
                }
                .el-table__cell {
                  background-color: transparent;
                  color: #fff;
                  .cell {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                }
              }
              tr:nth-child(odd) {
                background-color: #103b69;
              }
              tr:nth-child(even) {
                background-color: #154570;
              }
            }
          }
        }
        // 表格宽度
        colgroup {
          col:nth-child(1) {
            width: 50px;
          }
          col:nth-child(2) {
            width: 100px;
          }
          col:nth-child(3) {
            width: 400px;
          }
          col:nth-child(4) {
            width: 160px;
          }
          col:nth-child(5) {
            width: 120px;
          }
          col:nth-child(6) {
            width: 120px;
          }
          col:nth-child(7) {
            width: 420px;
          }
          col:nth-child(8) {
            width: 100px;
          }
          col:nth-child(9) {
            width: auto;
          }
        }
      }
      // 表格边框
      .el-table {
        border: 0;
        &::after,
        &::before {
          height: 0;
        }
      }
    }
    .dialog-main {
      width: 100%;
      height: 100%;
      overflow: auto;
      iframe {
        width: 100%;
        height: 100%;
      }
      .head {
        padding: 20px 0;
        width: 100%;
        text-align: center;
        color: #7dfbf4;
        background: rgba(96, 255, 246, 0.1);
        margin-top: 20px;
        &:first-child {
          margin-top: 0;
        }
      }
      .info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .item {
          width: calc(50% - 5px);
          padding: 10px;
          display: flex;
          align-items: center;
          background: rgba(96, 255, 246, 0.05);
          // height: 50px;
          p {
            padding: 15px 0;
            padding-left: 20px;
          }
          & > p:nth-child(1) {
            width: 120px;
            color: #7dfbf4;
            text-align: center;
            border-right: 1px solid rgba(125, 251, 244, 0.2);
          }
        }
      }
    }
    .dialog-main .head {
      color: #7dfbf4;
      background: rgba(96, 255, 246, 0.1);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      margin: 10px 0;
    }
  }
  .detail ::v-deep {
    .el-dialog__body {
      padding: 10px 20px;
    }
    .dialog-main {
      width: 100%;
      height: 660px;
      overflow: auto;
      .head {
        width: 100%;
        height: 50px;
        margin-top: 20px !important;
        padding: 0 !important;
        background: rgba(96, 255, 246, 0.1);
        color: #7dfbf4;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        &.mt0 {
          margin-top: 0 !important;
        }
      }
      .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          display: flex;
          align-items: center;
          width: 577px;
          height: 50px;
          margin-top: 4px;
          background: rgba(96, 255, 246, 0.05);
          p {
            height: 40px;
            line-height: 40px;
            padding-right: 15px;
          }
          p:nth-child(1) {
            width: 130px;
            color: #7dfbf4;
            border-right: 1px solid rgba(125, 251, 244, 0.2);
            text-align: right !important;
          }
          p:nth-child(2) {
            padding-left: 20px;
          }
        }
        .item:nth-child(odd) {
          margin-right: 6px;
        }
      }
    }
    // .dialog-main .head {
    //   color: #7dfbf4;
    //   background: rgba(96, 255, 246, 0.1);
    //   font-size: 16px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   padding: 10px 20px;
    //   margin: 10px 0;
    // }
  }
  // .el-form-item__label {
  //   color: #60fff6;
  // }
}
.add-form ::v-deep {
  .el-dialog {
    width: 720px;
  }
  .el-dialog__body {
    padding: 10px 4px 10px 10px !important;
    .form-box {
      width: 100%;
      height: 660px;
      overflow: auto;
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 6px !important; // 竖向滚动条宽度
        height: 0 !important; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc !important;
        border-radius: 2px !important;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: transparent !important;
      }
    }
  }
  /* 表单 */
  .el-form {
    width: 100%;
    height: 100%;
    // background-color: rgba(96, 255, 246, 0.05);
    .form-top1 {
      width: 100%;
      height: 560px;
      padding: 20px 50px 0 0;
      margin-bottom: 10px;
      background-color: rgba(96, 255, 246, 0.05);
      border-bottom: 2px dashed rgba(96, 255, 246, 0.4);
    }
    .form-top2 {
      width: 100%;
      height: 191px;
      margin-bottom: 10px;
      border-bottom: 2px dashed rgba(96, 255, 246, 0.4);
    }
    .form-top3 {
      width: 100%;
      height: 191px;
      margin-bottom: 10px;
      border-bottom: 2px dashed rgba(96, 255, 246, 0.4);
    }

    // 表单项
    .el-form-item {
      display: flex;
      align-items: center;
      // 表单项label标签
      .el-form-item__label {
        width: 120px;
        color: $pry;
        font-size: 14px;
        text-align: right;
      }
      // 表单项内容
      .el-form-item__content {
        display: flex;
        align-items: center;
        flex: 1;
      }
      // 表单校验错误输入框边框颜色
      &.is-error .el-input__inner {
        border-color: #f56c6c !important;
      }
    }
  }
  /* 输入框 */
  .el-input {
    .el-input__inner {
      width: 100%;
      height: 50px;
      background-color: #1b4878;
      border-color: #2e6d8d;
      color: #fff;
      font-size: 14px;
      &:hover {
        border-color: $pry2;
      }
      &:focus {
        border-color: $pry;
      }
      &::placeholder {
        color: #c0c4cc;
        font-size: 14px;
      }
    }
  }
  /* 下拉选择 */
  .el-select {
    // 搜索输入框
    .el-select__input {
      color: #fff;
      font-size: 14px;
    }
    // 输入框
    .el-input {
      // 输入框选中时
      &.is-focus .el-input__inner {
        border-color: $pry;
      }
      .el-input__inner {
        width: 300px;
        height: 50px;
        background-color: #1b4878;
        border-color: #2e6d8d;
        color: #fff;
        font-size: 14px;
        &::placeholder {
          color: #c0c4cc;
          font-size: 14px;
        }
        &:hover {
          border-color: $pry2;
        }
      }
      // 输入框箭头颜色
      .el-input__suffix {
        display: flex;
        align-items: center;
        .el-input__suffix-inner {
          i {
            color: $pry;
          }
        }
      }
    }
    // 显示的选中项
    .el-select__tags {
      span {
        .el-tag {
          background-color: #2b809e;
          border-color: $pry;
          color: #fff;
        }
      }
    }
    // 选择框的下拉弹出框
    .el-select-dropdown {
      background-color: #226697;
      border-color: #226697;
      // 弹出框的数据列表
      .el-select-dropdown__list {
        padding: 10px;
        // 弹出框的单条数据
        .el-select-dropdown__item {
          display: flex;
          align-items: center;
          height: 40px;
          margin-bottom: 4px;
          border-radius: 4px;
          color: #fff;
          font-size: 14px;
        }
      }
      // 经过选项时选项的背景色
      .el-select-dropdown__item.hover {
        background-color: #39a0bb;
      }
      // 已选中的选项
      &.is-multiple .el-select-dropdown__item.selected {
        background-color: #39a0bb;
        color: #fff;
      }
      // 弹出框三角形
      .popper__arrow {
        border-bottom-color: #226697 !important;
        border-top-color: #226697 !important;
        &::after {
          border-bottom-color: #226697 !important;
          border-top-color: #226697 !important;
        }
      }
    }
  }

  /* 日期时间范围选择器选择器 */
  // 日期时间范围选择框
  .el-date-editor.date-frame {
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 40px;
    padding: 3px 10px;
    background-color: #0b3268;
    border-color: #2e6d8d;
    // 小图标
    .el-icon-time {
      display: flex;
      align-items: center;
      width: 14px;
      margin: 0;
      &::before {
        color: $pry;
      }
    }
    .el-range__close-icon {
      display: flex;
      align-items: center;
      width: 14px;
      &::before {
        color: $pry;
      }
    }
    .el-range-input {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: rgba(96, 255, 246, 0.4);
      color: $pry;
      border-radius: 5px;
    }
    span {
      display: flex;
      align-items: center;
      width: 14px;
      padding: 0;
      color: #fff;
    }
  }
  .el-range-editor.is-active {
    border-color: $pry;
  }
  /* 日期时间选择器选择器 */
  // 日期时间选择框
  .el-date-editor.date-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    height: 40px;
    background-color: #0b3268;
    border-color: #2e6d8d;
    .el-input__inner {
      width: 100%;
      height: 100%;
      background-color: #0b3268;
      border-color: #2e6d8d;
      color: #fff;
      font-size: 14px;
      &:hover {
        border-color: $pry2;
      }
      &:focus {
        border-color: $pry;
      }
      &::placeholder {
        color: #c0c4cc;
        font-size: 14px;
      }
    }
    .el-input__inner {
      padding: 0 40px;
    }
    .el-input__prefix {
      margin-left: 9px;
    }
    .el-input__suffix {
      margin-right: 9px;
    }
    // 小图标
    .el-icon-time {
      display: flex;
      align-items: center;
      width: 14px;
      margin: 0;
      &::before {
        color: $pry;
      }
    }
    .el-range__close-icon {
      display: flex;
      align-items: center;
      width: 14px;
      &::before {
        color: $pry;
      }
    }
    .el-range-input {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: rgba(96, 255, 246, 0.4);
      color: $pry;
      border-radius: 5px;
    }
    span {
      display: flex;
      align-items: center;
      width: 14px;
      padding: 0;
      color: #fff;
    }
  }
  .el-range-editor.is-active {
    border-color: $pry;
  }
}
</style>
