<template>
  <div id="sub-main">
    <section>
      <div class="search-item">
        <div class="query">
          <el-input v-model="quertTxt" placeholder="请输入关键词"></el-input>
          <el-button type="warning" @click="quertBtn">查询</el-button>
        </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="786" 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="检查通知文件">
            <template :slot-scope="scope">
              <div @click="openFile" class="file-icon have"></div>
            </template>
          </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 prop="res" label="检查成果报告">
            <template :slot-scope="scope">
              <div @click="openFile" class="file-icon"></div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <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"
    >
    </BigChart>
  </div>
</template>

<script>
import { getJobconfigAnnualApi } from '@/api/maintain.js'
export default {
  created () {
    this.getJobconfigAnnualData()
  },
  data () {
    return {
      // 文件
      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: {
    // 获取年度检查
    async getJobconfigAnnualData () {
      const res = await getJobconfigAnnualApi()
      console.log('年度检查', res)
    },
    // 新增修改按钮
    addChangeBtn (flag) {
      if (flag === 'add') {
        this.addChangeTitle = '添加任务'
      } else if (flag === 'change') {
        this.addChangeTitle = '编辑任务'
      }
      this.addChangeShow = true
    },
    // 详情按钮
    detailBtn () {
      this.detailShow = true
    },
    // 查询任务按钮
    quertBtn () {
      console.log('查询的关键词', this.quertTxt)
    },
    // 分页
    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 {
  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;
          margin-left: 20px;
        }
        .el-input ::v-deep {
          .el-input__inner {
            width: 300px;
            height: 30px;
            background-color: #0b3268;
            border-color: #2e6d8d;
            color: #fff;
            font-size: 14px;
            &::placeholder {
              font-size: 14px;
            }
          }
        }
      }
      .el-button.add {
        display: flex;
        align-items: center;
        width: 70px;
        height: 30px;
        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: 786px !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),
          col:nth-child(3),
          col:nth-child(4),
          col:nth-child(7),
          col:nth-child(8) {
            width: 200px;
          }
          col:nth-child(5),
          col:nth-child(6),
          col:nth-child(9) {
            width: 140px;
          }
          col:nth-child(10) {
            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;
  // }
}
</style>
