<template>
  <div id="sub-main">
    <section v-show="!dayDialog">
      <div class="search-item">
        <div class="search-box">
          <el-form :model="formData" :rules="formRules" ref="searchForm">
            <el-form-item prop="date">
              <el-date-picker
                v-model="formData.date"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="dateChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="is_delete">
              <el-checkbox v-model="formData.is_delete">
                包含已删除线路
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="getPatrolStageData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table-item">
        <el-table
          class="my-el-table"
          :data="tableData"
          height="846"
          border
          @row-click="openDayDialog"
          v-loading="tableLoading"
        >
          <template #empty-text>暂无数据</template>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="name" label="巡查项目"></el-table-column>
          <el-table-column
            prop="patrolCount"
            label="巡查次数"
          ></el-table-column>
          <el-table-column prop="dayCount" label="巡查天数"></el-table-column>
          <el-table-column prop="hideCount" label="隐患总数"> </el-table-column>
          <el-table-column
            prop="stayCount"
            label="待处理隐患数"
          ></el-table-column>
          <el-table-column
            prop="time"
            label="最近一次巡查时间"
            width="auto"
          ></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>
    <section class="section2" v-show="dayDialog">
      <div class="search-item">
        <div class="H-V-center">
          <p style="color: #60fff6">巡查类型：</p>
          <!-- 下拉选择 -->
          <el-select
            @change="typeChange"
            v-model="selectValue"
            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-button type="warning">查询</el-button>
        </div>
        <el-button class="back" @click="back">返回</el-button>
      </div>
      <div class="calendar-item">
        <el-calendar v-model="calendarTime">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ date, data }">
            <div
              class="content"
              @click="openCalendar(date, data)"
              :class="{ isOk: isPatrol(data) }"
            >
              <span>{{ Number(data.day.split("-").slice(2)[0]) }}</span>
              <p v-if="isPatrol(data)">已巡查</p>
              <div class="mask"></div>
            </div>
          </template>
        </el-calendar>
        <!-- <el-calendar>
          <template slot="dateCell" slot-scope="{ date, data }">
            <div
              @click="
                showDialog(
                  dateArr.indexOf(data.day.split('-').slice(1).join('-')) == -1
                )
              "
              :class="{
                isActive:
                  dateArr.indexOf(data.day.split('-').slice(1).join('-')) != -1,
              }"
              style="height: 100%; padding: 3% 5%"
            >
              <p>{{ data.day.split("-").slice(1).join("-") }}</p>
              <p
                style="
                  height: 60%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                {{
                  dateArr.indexOf(data.day.split("-").slice(1).join("-")) == -1
                    ? ""
                    : "已巡查"
                }}
              </p>
            </div>
          </template>
        </el-calendar> -->
      </div>
    </section>

    <BigChart
      :show="calendarShow"
      @close-dialog="closeCalendar"
      title="巡查详情"
      class="calendar-dialog"
      v-if="calendarShow"
    >
      <div class="dialog-main">
        <div class="left-dialog-main">
          <div class="panel">
            <div class="panel-top">
              <div class="title">
                <div class="icon"></div>
                <span
                  >{{ patrolData.res1.patrol_person_name }}({{
                    patrolData.res1.patrol_person_mobile === ""
                      ? "未录入"
                      : patrolData.res1.patrol_person_mobile
                  }})</span
                >
              </div>
              <div class="txt">
                <p>开始：{{ patrolData.res1.patrol_start_time }}</p>
                <p>结束：{{ patrolData.res1.patrol_end_time }}</p>
                <p>路线：{{ patrolData.res1.trajectory_name }}</p>
              </div>
            </div>
            <div class="panel-bottom">
              <div class="box">
                <p>
                  巡查记录<span>{{ patrolData.res1.patrol_scene_count }}</span>
                </p>
                <div class="line"></div>
                <p>
                  发现隐患<span>{{ patrolData.res1.hide_danger_count }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="right-dialog-main">
          <div class="title">
            <div class="t-l"></div>
            <p>巡查记录</p>
            <div class="t-r"></div>
          </div>
          <div class="panel-item">
            <div
              class="panel"
              v-for="(item, index) in patrolData.arr"
              :key="index"
            >
              <p>
                巡查人员：
                <input
                  type="text"
                  :class="{ readonly: messObj.readonly }"
                  v-model="item.patrol_person_name"
                />
                <span>
                  <i @click="changeMess" class="el-icon-edit-outline"></i>
                  <i @click="delMess" class="el-icon-delete"></i>
                </span>
              </p>
              <p>
                巡查点位：
                <input
                  type="text"
                  :class="{ readonly: messObj.readonly }"
                  v-model="item.address"
                />
              </p>
              <p>
                巡查结果：
                <input
                  class="text-red"
                  type="text"
                  v-model="messObj.res1"
                  :class="{ readonly: messObj.readonly }"
                />
              </p>
              <p>
                巡查时间：
                <input
                  type="text"
                  :class="{ readonly: messObj.readonly }"
                  v-model="messObj.date"
                />
              </p>
              <p>
                巡查情况：
                <input
                  type="text"
                  :class="{ readonly: messObj.readonly }"
                  v-model="messObj.res2"
                />
              </p>
              <div
                class="img-box"
                v-if="item.images_list && item.images_list.length > 0"
              >
                <img
                  v-for="(item2, index2) in item.images_list"
                  :key="index2"
                  :src="item2.url"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </BigChart>
  </div>
</template>

<script>
import { getPatrolStageApi, getPatrolTrajectoryApi, getPatrolApi } from '@/api/maintain.js'
export default {
  created () {
    // for (let i = 1; i < 5; i++) {
    //   this.tableData.push({
    //     name: '办公区巡查',
    //     count: 23,
    //     day: 23,
    //     warmCount: 0,
    //     noRealWarm: 0,
    //     time: '2022-09-01  08:11:26'
    //   })
    // }
  },
  mounted () {
    this.getPatrolStageData()
  },
  data () {
    return {
      messObj: {
        readonly: false,
        name: '王双燕',
        drop: '大坝坝区',
        date: '2021-09-12 13:23',
        res1: '有异常',
        res2: '无异常'
      },
      // section1
      // 日常巡查外部时间选择器
      formData: {
        date: [new Date(this.dayjs().subtract(1, 'month').format('YYYY-MM-DD')), new Date()],
        is_delete: false
      },
      formRules: {
        date: [
          { required: true, message: '请选择日期区间', trigger: 'blur' }
        ]
      },
      pickerOptions: {
        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])
          }
        }]
      },
      // 日历巡查结果
      patrolTrajectoryData: [],
      // 打开日历某天的巡查详情
      patrolData: {},
      // 日历显示
      dayDialog: false,
      // 日历详情显示
      calendarShow: false,
      // 日历选中的时间
      calendarTime: '',
      // 分页
      query: {
        currentPage: 1, // 页码
        pageSize: 5 // 每页条数
      },
      total: 100, // 总数据量
      // section2
      selectValue: '',
      selectOptions: [],

      value1: '',
      value2: '',
      currentPage: 1,
      // 表格数据
      tableData: [],
      tableLoading: false,
      nowRow: null,
      dateArr: ['08-02', '08-05'],
      options: [{ value: '库区巡查', label: '库区巡查' }, { value: '库区巡查1', label: '库区巡查1' }],
      value: ''
    }
  },
  methods: {
    // 日常巡查
    // 刷新列表
    async getPatrolStageData () {
      this.tableLoading = true
      try {
        await this.$refs.searchForm.validate()
        const params = {}
        if (this.formData.date.length === 2) {
          params.start_patrol_date = this.cqq.elDateformate2(this.formData.date[0])
          params.end_patrol_date = this.cqq.elDateformate2(this.formData.date[1])
        } else {
          params.start_patrol_date = ''
          params.end_patrol_date = ''
        }
        params.is_delete = this.formData.is_delete
        const res = await getPatrolStageApi(params)
        console.log('上传的参数', params)
        console.log('日常巡查列表', res)
        const selectOptions = []
        const newArr = res.map(item => {
          selectOptions.push({
            value: item.id,
            label: item.name
          })
          if (item.time === '') item.time = '无'
          return item
        })
        this.selectOptions = selectOptions
        this.tableData = newArr
      } catch (error) {
        console.log(error)
      }
      this.tableLoading = false
    },
    async typeChange (value) {
      const res = await getPatrolTrajectoryApi({
        patrol_target_id: value,
        start_patrol_date: this.cqq.elDateformate2(this.formData.date[0]),
        end_patrol_date: this.cqq.elDateformate2(this.formData.date[1])
      })
      console.log('类型选择变化后得到的结果', res)
      if (res) {
        this.patrolTrajectoryData = res
      } else {
        this.patrolTrajectoryData = []
      }
    },
    resetData () {
      // 当前查看的哪行
      this.nowRow = null
      // 点击这行后拿到的数据
      this.patrolTrajectoryData = []
      // 打开日历某天的巡查详情
      this.patrolData = {}
      // 还原选择器
      this.selectValue = ''
    },
    back () {
      // 清空 this.nowRow 点击某一行表格后拿到的数据 this.patrolData this.selectValue
      this.resetData()
      this.dayDialog = false
    },
    changeMess () {
      // this.readonly = false
    },
    delMess () {

    },
    dateChange (val) {
      // console.log('外边的时间选择器时间发生了变化', val)
      if (val === null) {
        this.tableData = []
      }
    },
    // 显示日历
    async openDayDialog (row, column, event) {
      console.log('查看表格传入的值', row, column, event)
      const res = await getPatrolTrajectoryApi({
        patrol_target_id: row.id,
        start_patrol_date: this.cqq.elDateformate2(this.formData.date[0]),
        end_patrol_date: this.cqq.elDateformate2(this.formData.date[1])
      })
      // 保存当前查看的哪行
      this.nowRow = row
      console.log('当前查看的这行', this.nowRow)
      this.selectValue = this.nowRow.id
      console.log('点击表格后拿到的结果', res)
      if (res !== null) {
        this.patrolTrajectoryData = res
      }
      this.dayDialog = true
    },
    // 打开日历某天的巡查详情
    async openCalendar (date, data) {
      console.log(date, data)
      const res1 = this.patrolTrajectoryData.find(item => item.patrol_date === data.day)
      console.log('查看找到的', res1)
      if (res1) {
        this.patrolData2 = res1
        const res2 = await getPatrolApi(res1.id)
        console.log('打开日历某天的巡查详情', res2)
        this.patrolData = {
          res1,
          arr: res2.data
        }
        console.log('查看合并后的', this.patrolData)
        this.calendarShow = true
      }
    },
    // 判断是否已经巡查过了
    isPatrol (data) {
      const flag = this.patrolTrajectoryData.length > 0 && this.patrolTrajectoryData.find(item => item.patrol_date === data.day)
      return flag
    },
    // 关闭日历详情
    closeCalendar () {
      this.calendarShow = false
      this.patrolData = {}
    },
    // 分页
    changePage (currPage) {
      console.log('切换分页', currPage)
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
$tableBoder: #0a3461;
#sub-main {
  section {
    .search-item ::v-deep {
      display: flex;
      justify-content: space-between;
      .search-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 650px;
        /* 表单 */
        .el-form {
          display: flex;
          width: 100%;
          height: 100%;
          // 表单项
          .el-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            // 表单项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;
              .el-form-item__error {
                padding-top: 1px;
              }
            }
            // 表单校验错误输入框边框颜色
            &.is-error .el-input__inner {
              border-color: #f56c6c !important;
            }
          }
        }
        .el-button {
          display: flex;
          align-items: center;
          width: 70px;
          height: 24px;
          // background-color: #e6a23c;
          // border-color: #e6a23c;
          margin-left: 20px;
        }
        .el-date-editor {
          display: flex;
          justify-content: space-between;
          width: 400px;
          height: 30px;
          padding: 3px 10px;
          background-color: #0b3268;
          border-color: #2e6d8d;
          // 日期选择器图标
          .el-icon-date {
            display: flex;
            align-items: center;
            width: 14px;
            margin: 0;
            &::before {
              color: $pry;
            }
          }
          // 日期时间选择器图标
          .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: transparent;
            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-checkbox {
          display: flex;
          height: 30px;
          align-items: center;
          margin-left: 20px;
          color: #fff;
          .el-checkbox__input {
            width: 14px;
            height: 14px;
            border: 0;
          }
        }
      }

      .H-V-center {
        display: flex;
        align-items: center;
        margin-left: 10px;
        /* 下拉选择 */
        .el-select {
          margin-right: 10px;
          // 搜索输入框
          .el-select__input {
            color: #fff;
            font-size: 14px;
          }
          // 输入框
          .el-input {
            // 输入框选中时
            &.is-focus .el-input__inner {
              border-color: $pry;
            }
            .el-input__inner {
              width: 190px;
              height: 30px;
              background-color: #1b4878;
              border-color: #2e6d8d;
              color: #fff;
              font-size: 14px;
              &::placeholder {
                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-button {
          margin-left: 20px;
        }
      }
    }
    .table-item {
      position: relative;
      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: 846px !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;
          }
          .el-table__empty-block {
            font-size: 20px;
          }
          table {
            width: 100% !important;
            tbody {
              .el-button {
                width: 45px;
                height: 30px;
                padding: 0;
              }
              tr {
                height: 60px;
                cursor: pointer;
                &: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: 251px;
          }
          col:nth-child(3),
          col:nth-child(4) {
            width: 300px;
          }
          col:nth-child(5) {
            width: 251px;
          }
          col:nth-child(6) {
            width: 270px;
          }
          col:nth-child(7) {
            width: auto;
          }
        }
      }
      // 表格边框
      .el-table {
        border: 0;
        &::after,
        &::before {
          height: 0;
        }
      }
    }
    .calendar-item {
      .el-calendar ::v-deep {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: #0c3061;
        .el-calendar__header {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          height: 40px;
          margin-bottom: 10px;
          padding: 0 20px;
          background-color: #103b69;
          border: 1px solid #304d74;
          .el-calendar__title {
            color: #fff;
            font-size: 18px;
          }
          .el-calendar__button-group {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            .el-button-group {
              .el-button {
                color: #fff;
                background-color: rgba(39, 146, 160, 0.7);
                &:hover {
                  background-color: $pry2;
                  border-color: rgba(0, 255, 255, 0.3);
                }
                &:active {
                  border-color: $pry;
                }
              }
            }
          }
        }
        .el-calendar__body {
          width: 100%;
          flex: 1;
          padding: 0;
          .el-calendar-table {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            thead {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: 40px;
              margin-bottom: 10px;
              background-color: #103b69;
              border: 1px solid #304d74;
              th {
                width: 230px;
                height: 100%;
                color: #fff;
                font-size: 18px;
              }
            }
            tbody {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: 100%;
              flex: 1;
              tr {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 120px;
                td {
                  width: 230px;
                  height: 100%;
                  background-color: transparent;
                  border: 0;
                  .el-calendar-day {
                    width: 100%;
                    height: 100%;
                    padding: 0 !important;
                    background-color: #154570;
                    border: 1px solid #304d74;
                    .content {
                      position: relative;
                      width: 100%;
                      height: 100%;
                      padding: 20px 18px;
                      color: rgba(255, 255, 255, 0.8);
                      font-size: 18px;
                      &.isOk {
                        background: url("~@/assets/images/maintain/ok_bg.png")
                          no-repeat center / 100% 100%;
                        color: $pry;
                        p {
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate(-50%, -50%);
                        }
                      }
                      .mask {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        &:hover {
                          background: url("~@/assets/images/maintain/mask_bg.png")
                            no-repeat center / 100% 100%;
                        }
                      }
                    }
                  }
                  &.is-selected .el-calendar-day .content .mask {
                    background: url("~@/assets/images/maintain/mask_bg.png")
                      no-repeat center / 100% 100%;
                    color: $pry;
                  }
                  &.is-today .el-calendar-day .content {
                    color: $pry;
                    span {
                      font-size: 24px;
                      font-weight: 700;
                    }
                  }
                  &.next,
                  &.prev {
                    .el-calendar-day {
                      background-color: #103b69;
                      .content {
                        color: #606266;
                        background: transparent;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    // .calendar-item {
    // .el-calendar {
    //   width: 100%;
    //   height: 100%;
    //   background-color: #103b69;
    // }
    // .el-calendar__title,
    // .el-calendar-table thead th {
    //   color: #fff;
    // }
    // .el-calendar-table .el-calendar-day {
    //   color: #b6b6b6;
    // }
    // .el-calendar-table .el-calendar-day:hover,
    // .el-calendar-table td.is-selected {
    //   background-color: #103b69;
    //   opacity: 0.6;
    // }
    // .el-calendar-table .el-calendar-day {
    //   padding: 0;
    // }
    // .isActive {
    //   background-color: #03234f;
    //   color: #7dfbf4;
    //   border: 1px solid #7dfbf4;
    // }
    // }
  }
  .section2 {
    .el-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70px;
      height: 24px;
      color: #fff;
    }
    .back {
      background-color: #37ccc4;
      border-color: #37ccc4;
    }
  }
  .calendar-dialog ::v-deep {
    .el-dialog__body {
      padding: 10px;
      .dialog-main {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 10px;
        background-color: #fff;
        .left-dialog-main {
          position: absolute;
          left: 10px;
          top: 10px;
          width: 240px;
          height: 640px;
          overflow: auto;
          .panel {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 240px;
            height: 166px;
            margin-bottom: 10px;
            background: rgba(3, 35, 79, 0.6) no-repeat;
            color: #d2d2d2;
            font-size: 14px;
            .panel-top {
              width: 100%;
              flex: 1;
              padding: 10px 0 0 10px;
              .title {
                display: flex;
                align-items: center;
                margin-bottom: 8px;
                .icon {
                  width: 26px;
                  height: 26px;
                  background: url("~@/assets/images/maintain/user_icon.png")
                    no-repeat center / 100% 100%;
                }
                span {
                  color: #76eff2;
                  font-size: 18px;
                  margin-left: 6px;
                }
              }
              .txt {
                margin-left: 20px;
                p {
                  line-height: 24px;
                  font-size: 14px;
                }
              }
            }
            .panel-bottom {
              display: flex;
              align-items: center;
              width: 100%;
              height: 41px;
              border-top: 1px solid rgba(125, 251, 253, 0.35);
              .box {
                display: flex;
                align-items: center;
                width: 100%;
                height: 24px;
                p {
                  display: flex;
                  align-items: center;
                  flex: 1;
                  padding-left: 20px;
                  span {
                    margin-left: 7px;
                    margin-bottom: 2px;
                    color: #e88231;
                    font-size: 20px;
                  }
                }
                .line {
                  width: 1px;
                  height: 100%;
                  background-color: rgba(122, 246, 249, 0.4);
                }
              }
            }
          }
        }
        .right-dialog-main {
          display: flex;
          flex-direction: column;
          position: absolute;
          right: 10px;
          top: 10px;
          width: 240px;
          height: 640px;
          overflow: auto;
          .title {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 240px;
            height: 40px;
            margin-bottom: 4px;
            background-color: rgba(3, 35, 79, 0.8);
            .t-l,
            .t-r {
              width: 24px;
              height: 16px;
              background-size: 100% 150%;
            }
            .t-l {
              background: url("~@/assets/images/common/title_left.png")
                no-repeat left center;
            }
            .t-r {
              background: url("~@/assets/images/common/title_right.png")
                no-repeat right center;
            }
            p {
              margin: 0 15px;
              font-size: 16px;
            }
          }
          .panel-item {
            flex: 1;
            overflow: auto;
            &::-webkit-scrollbar {
              // 滚动条整体样式
              width: 0 !important; // 竖向滚动条宽度
              height: 0 !important; // 横向滚动条高度
            }
            .panel {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 15px 0 15px 15px;
              background: rgba(3, 35, 79, 0.6);
              color: #d2d2d2;
              font-size: 14px;
              margin-bottom: 10px;
              .img-box {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 100%;
                margin-top: 10px;
                padding-right: 15px;
                img {
                  width: 100px;
                  height: 100px;
                  margin-top: 10px;
                }
                img:nth-child(1),
                img:nth-child(2) {
                  margin-top: 0;
                }
              }
              p {
                display: flex;
                align-items: center;
                input {
                  width: 150px;
                  color: #fff;
                  background-color: transparent;
                  &.readonly {
                    background-color: red;
                  }
                }
                i {
                  cursor: pointer;
                  &::before {
                    width: 16px;
                    height: 16px;
                    padding: 0 4px;
                  }
                }
              }
              p:first-child input {
                width: 106px;
              }
              .text-red {
                color: #ff4d4d !important;
              }
              .text-blue {
                color: #00ffff !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>
