<template>
  <div class="engineering-manage" @keyup.enter="searchApi">
    <!-- 管道评估结果管理 -->
    <div class="table-box">
      <div class="top-tool">
        <div class="serch-engineering">
          <div class="title">关键字：</div>
          <el-input
            size="small"
            placeholder="请输入管段编号、材质"
            v-model="searchValue.queryParams"
            clearable
            class="serch-input"
          >
          </el-input>
          <div class="title">检测时间：</div>
          <div class="sampleTime">
            <el-row style="display: flex; justify-content: center; align-items: center">
              <el-col :span="11">
                <el-date-picker
                  v-model="searchValue.startDate"
                  type="date"
                  placeholder="选择开始日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="sOpition"
                  @change="sDateChange"
                ></el-date-picker>
              </el-col>
              <el-col :span="1" style="text-align: center; margin: 0 5px">至</el-col>
              <el-col :span="12">
                <el-date-picker
                  v-model="searchValue.finishDate"
                  type="date"
                  placeholder="选择结束日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="eOpition"
                  @change="eDateChange"
                ></el-date-picker>
              </el-col>
            </el-row>
          </div>
          <div class="title">结构性缺陷等级：</div>
          <el-select clearable v-model="searchValue.structClass" placeholder="全部">
            <el-option v-for="(item, i) in gradeArr" :key="i" :label="item" :value="item"></el-option>
          </el-select>
          <div class="title">功能性缺陷等级：</div>
          <el-select clearable v-model="searchValue.funcClass" placeholder="全部">
            <el-option v-for="(item, i) in gradeArr" :key="i" :label="item" :value="item"></el-option>
          </el-select>
          <el-button size="small" style="margin-left: 26px" type="primary" @click="searchApi"> 搜索 </el-button>
          <!-- <el-button size="small" type="primary" @click="rect">框选</el-button> -->
          <el-button size="small" type="primary" @click="resetBtn"> 重置 </el-button>
        </div>
        <div class="right-btn">
          <download-excel
            :fields="json_fields"
            :data="multipleSelection"
            :before-generate="startDownload"
            :before-finish="finishDownload"
            name="管道评估结果表单.xls"
            type="xls"
          >
            <el-button size="small" type="primary">导出
              <!-- <i class="el-icon-download el-icon--right"></i> -->
              </el-button>
          </download-excel>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="250"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="openPromptBox"
        :row-style="{ height: '40px' }"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="暂无数据" />
        </template>
        <el-table-column header-align="center" align="center" type="selection" width="55"> </el-table-column>
        <el-table-column header-align="center" align="center" type="index" label="序号" width="50"> </el-table-column>
        <el-table-column
          :prop="v.name"
          header-align="center"
          :label="v.label"
          align="center"
          show-overflow-tooltip
          v-for="(v, i) in tableContent"
          :key="i"
          :sortable="v.sortable"
          :width="v.width"
        >
        </el-table-column>
        <el-table-column fixed="right" header-align="center" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="toVideo(scope.row)">视频</el-button>
            <el-button type="text" size="small" @click.stop="toPdfPage(scope.row.pdfFilePath)">报告</el-button>
            <el-button type="text" size="small" @click.stop="openDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 30, 50, 100, 1000]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 表格当前列信息弹出框 -->
    <transition name="el-fade-in-linear">
      <div id="popupCardEva" class="histroyPipeData" v-show="currentInfoCard">
        <div class="detailsCrad" v-if="currentInfoCard">
          <el-card class="box-card" style="width: 440px; min-height: 310px; border: none; border-radius: 5px">
            <div class="table-content">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 30px;
                  font-size: 14px;
                  box-sizing: border-box;
                "
              >
                <span style="font-weight: bold; user-select: none"
                  >{{ getCurrentForm.expNo || '' + getCurrentForm.pipeType || '' }}
                  <i class="el-icon-caret-left" style="cursor: pointer" type="text" @click="lastPage"></i>
                  {{ currentForm.length ? currentIndex + 1 : 0 }}/{{ currentForm.length }}
                  <i class="el-icon-caret-right" style="cursor: pointer" type="text" @click="nextPage"></i>
                </span>
                <a
                  style="font-size: 12px; color: #2d74e7; text-decoration: underline"
                  @click="openDetails(getCurrentForm)"
                  >详情</a
                >
              </div>
              <div style="margin-top: 10px; font-size: 12px">
                管径：{{ getCurrentForm.diameter }}mm 材质：{{ getCurrentForm.material }}
              </div>
              <div class="content-info" style="justify-content: space-between; display: flex; font-size: 12px">
                <div class="left" style="width: 200px">
                  <div class="detailsTitle" style="margin-top: 5px">检测日期 {{ getCurrentForm.sampleTime }}</div>
                  <!-- <p style="padding-left: 10px">无文档</p> -->
                  <div class="text-space" style="margin: 10px 0">
                    <el-link
                      style="font-size: 12px; margin-left: 10px"
                      v-if="getCurrentForm.wordFilePath"
                      type="primary"
                      @click.stop="downloadDocx"
                      ><div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                        {{ getCurrentForm.wordInfoName + 'docx' }}
                      </div></el-link
                    >
                  </div>
                  <div class="detailsTitle">结构性缺陷 等级:{{ getCurrentForm.structClass }}</div>
                  <p style="padding-left: 10px">评价:{{ getCurrentForm.structEstimate }}</p>
                  <div class="detailsTitle">功能性缺陷 等级:{{ getCurrentForm.funcClass }}</div>
                  <p style="padding-left: 10px">评价: {{ getCurrentForm.funcEstimate }}</p>
                </div>
                <div class="right" style="width: 250px; margin-left: 20px; min-height: 240px">
                  <el-tabs v-model="activeName">
                    <!-- <el-tab-pane :label="`照片(${getCurrentForm.pipeDefects.length || 0})`" name="picnum"> -->
                      <el-tab-pane :label="`照片`" name="picnum">
                      <div class="container">
                        <el-image
                          style="width: 100%; height: 90%; -webkit-user-drag: none"
                          :src="getImgUrl"
                          :preview-src-list="getImgUrlArr"
                        >
                        </el-image>
                        <div style="text-align: center">
                          <i class="el-icon-caret-left" style="cursor: pointer" type="text" @click="lastImg"></i>
                          {{ getCurrentForm.pipeDefects.length ? imgArrIndex + 1 : 0 }}/{{
                            getCurrentForm.pipeDefects.length || 0
                          }}
                          <i class="el-icon-caret-right" style="cursor: pointer" type="text" @click="nextImg"></i>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane :label="`视频`" name="viedoNum">
                      <div style="width: 100%; height: 100%" v-if="getCurrentForm.videoPath">
                        <video controls="controls" width="100%" height="83%">
                          <source :src="getVideoUrl" type="video/mp4" />
                        </video>
                      </div>
                      <div v-show="!getCurrentForm.videoPath" style="text-align: center; margin-top: 20px">
                        暂无视频
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </transition>
    <!-- 视频 -->
    <el-dialog width='70%' top="5vh" :title="videoTitle" v-if="showVideo" :visible.sync="showVideo" :append-to-body="true">
      <div style="width: 100%; height: 80%">
        <video controls="controls" width="100%" height="83%">
            <source :src="videoUrl" type="video/mp4" />
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JsonExcel from 'vue-json-excel'
import { getDefectData, queryPageAssessment, downloadFile, histroyPipeData } from '@/views/pipelineDefect/api/pipelineDefect'
import { projUtil } from '@/views/pipelineDefect/common/proj'

// 引入公共ip地址
// import { baseAddress } from '@/utils/request.ts'
import { baseAddress } from '@/utils/request'

import axios from 'axios'
import { appconfig } from 'staticPub/config'

// 引入管道检测组件
import checkDialog from '../../components/checkDetails.vue'
import { mapMixin } from '@/views/pipelineDefect/mixin/map'

export default {
  mixins: [mapMixin],
  props: ['data'],
  components: {
    checkDialog,
    'download-excel': JsonExcel
  },
  data() {
    return {
      json_fields: {
        '工程名称': 'prjName',
        '管段编号': 'expNo',
        '管段类型': 'pipeType',
        '管径(mm)': 'diameter',
        '材质': 'material',
        '结构性缺陷评价': 'structEstimate',
        '缺陷数量': 'defectnum',
        '检测照片': 'picnum',
        '检测视频': 'videoFileName',
        '检测地点': 'checkAddress',
        '检测日期': 'sampleTime',
        '结构性缺陷等级': 'structClass',
        '功能性缺陷等级': 'funcClass'
      },
      id: null, // 当前列表id
      activeName: 'picnum', // 照片视频tab标签
      imgArrIndex: 0, // 缩略框照片索引
      currentForm: [], // 缩略提示框
      currentIndex: 0, // 当前页数
      cardTableContent: [
        [
          { label: '管段编号', name: 'expNo' },
          { label: '管段类型', name: 'pipeType' }
        ],
        [
          { label: '起点埋深', name: 'startDepth' },
          { label: '终点埋深', name: 'endDepth' }
        ],
        [
          { label: '管径', name: 'diameter' },
          { label: '材质', name: 'material' }
        ],
        [
          { label: '敷设年代', name: 'constr' },
          { label: '长度', name: 'pipeLength' }
        ]
      ], // 详情表格参数
      dialogFormVisible: false, // 详情弹框显影
      detailsArr: [], // 缺陷信息
      // 查询附件列表需要的参数id
      updataParamsId: {
        itemId: '',
        uploadFileTypeDicId: '',
        uploadItemDictId: ''
      },
      // 附件弹框参数
      paginationEnclosure: { current: 1, size: 30 }, // 分页参数信息
      paginationEnclosureTotal: 0, // 总页数
      // -------->
      // 表格参数
      tableContent: [
        { width: '200', sortable: false, label: '管段编号', name: 'expNo' },

        { width: '100', sortable: false, label: '检测地点', name: 'checkAddress' },
        { width: '100', sortable: false, label: '管段类型', name: 'pipeType' },
        { width: '120', sortable: true, label: '管径(mm)', name: 'diameter' },
        { width: '150', sortable: false, label: '材质', name: 'material' },
        { width: '100', sortable: true, label: '缺陷数量', name: 'defectnum' },
        { width: '100', sortable: true, label: '检测照片', name: 'picnum' },
        { width: '150', sortable: true, label: '结构性缺陷等级', name: 'structClass' },
        { width: '150', sortable: true, label: '功能性缺陷等级', name: 'funcClass' },
        { width: '200', sortable: false, label: '结构性缺陷评价', name: 'structEstimate' },
        { width: '200', sortable: false, label: '功能性缺陷评价', name: 'funcEstimate' },
        { width: '100', sortable: true, label: '检测日期', name: 'sampleTime' },
        { width: '200', sortable: false, label: '工程名称', name: 'prjName' },
      ],
      gradeArr: ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ'], // 缺陷等级
      // 日期选择器规则
      sOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.searchValue.finishDate) {
            return time > new Date(this.searchValue.finishDate).getTime()
          }
          return time > new Date().getTime()
        }
      },
      eOpition: {
        disabledDate: (time) => {
          time = time.getTime()
          if (this.searchValue.startDate) {
            return time < new Date(this.searchValue.startDate).getTime() - 8.64e7 || time > new Date().getTime()
          }
          return time > new Date().getTime()
        }
      },
      searchValue: {
        startDate: '',
        finishDate: '',
        queryParams: '',
        funcClass: '', // 功能型缺陷等级
        structClass: '' // 结构型缺陷等级
      }, // 搜索关键字的值
      trueValue: true,
      currentId: '', // 当前列的id
      currentInfoCard: false, // 弹出框
      tableVisible: false, // 表格当前列信息弹出框
      pagination: { current: 1, size: 30 }, // 分页参数信息
      paginationTotal: 0, // 总页数
      tableData: [],
      multipleSelection: [], // 表格被选中的数据
      dialogTableVisible: false,
      isPromptBox: {}, // 当前列信息
      form: {},
      //
      vectorLayer: null,
      map: null,
      lightLayer: null,
      clickEvent: null,
      projUtil: null, // 坐标系工具
      currentDataProjName: appconfig.currPRJ, // 当前坐标系
      popup: null,
      hasLoad: false,
      // 
      showVideo: false,
      videoUrl: '',
      videoTitle: '视频',
      drawer: null,
      drawFea: null,
      themLayerName: 'pipeAndDefectLayer',
      themLayer: null
    }
  },
  watch: {
  },
  mounted() {
      this.upDateTable()
  },
  destroyed() {
  },
  computed: {
  },
  methods: {
    sDateChange(t) {
      console.log('起始时间变化')
      if (!this.searchValue.finishDate) {
        this.$nextTick(() => {
          this.searchValue.finishDate = this.searchValue.startDate
        })
      }
    },
    eDateChange(t) {
      if (!this.searchValue.startDate) {
        this.$nextTick(() => {
          this.searchValue.startDate = this.searchValue.finishDate
        })
      }
    },
    rect () {
      this.removeEvent()
      this.drawer = new iDraw(this.map, 'rect', {
        showCloser: false,
        endDrawCallBack: fea => {
          this.addEvent()
          this.drawer.remove()
          this.drawFea = fea
          console.log('绘制的图形', fea)
        }
      })
      this.drawer.start()
    },
    //导出表格
    startDownload() {
      let self = this
      if (self.multipleSelection.length == 0) {
        self.$message({
          message: '警告，请勾选数据',
          type: 'warning'
        })
      }
    },
    finishDownload() {
      let self = this
      self.$message({
        message: '准备导出数据',
        type: 'success'
      })
    },
    // 转换缺陷等级
    getDefectValue(level) {
      switch (level) {
        case 'Ⅰ':
          return 1
          break
        case 'Ⅱ':
          return 2
          break
        case 'Ⅲ':
          return 3
          break
        case 'Ⅳ':
          return 4
          break
        default:
          return 0
      }
    },
    // 自定义排序
    sortStruct(a, b) {
      let av = this.getDefectValue(a.structClass)
      let bv = this.getDefectValue(b.structClass)
      if (av < bv) {
        return -1
      }
    },
    sortFunc(a, b) {
      let av = this.getDefectValue(a.funcClass)
      let bv = this.getDefectValue(b.funcClass)
      if (av < bv) {
        return -1
      }
    },
    // 下载文档
    downloadDocx() {
      this.$message('正在加载文档地址,请稍等...')
      let url = baseAddress + '/psjc/file' + this.getCurrentForm.wordFilePath
      let label = this.getCurrentForm.wordInfoName + '.docx'
      axios
        .get(url, { responseType: 'blob' })
        .then((response) => {
          const blob = new Blob([response.data])
          const link = document.createElement('a')
          link.href = URL.createObjectURL(blob)
          link.download = label
          link.click()
          URL.revokeObjectURL(link.href)
        })
        .catch(console.error)
    },

    // 下载附件
    fileLinkToStreamDownload(id) {
      let res = downloadFile(id)
      return baseAddress + res.url
    },
    // 关闭缩略提示框的方法
    closePromptBox() {
      this.currentInfoCard = false
    },
    toVideo (row) {
      console.log('暂无视频')
      let { videopath, videoFileName } = row
      if (!videopath) return this.$message.warning('暂无视频')
      let address = baseAddress + '/psjc/file' + videopath
      this.videoTitle = `${videoFileName} 视频`
      this.videoUrl = address
      this.showVideo = true
    },
    // 跳转到pdf页面
    toPdfPage(url) {
      if (!url) {
        console.log('没有url', url)
        this.$message({
          message: '暂无报告地址',
          type: 'warning'
        })
        return false
      } else {
        window.open(baseAddress + '/psjc/file' + url, '_blank')
      }
      console.log('url', !url)
    },
    clearAll() {
      this.vectorLayer && this.map.removeLayer(this.vectorLayer)
      this.lightLayer && this.map.removeLayer(this.lightLayer)
      this.removeEvent()
      this.popup && this.popup.setPosition(null)
      this.currentInfoCard = false
      this.drawer && this.drawer.end()
      this.lightLayer = this.clickEvent = this.vectorLayer = null
    },
    setPositionByPipeId(id) {
      let features = this.vectorLayer.getSource().getFeatures()
      let filterFea = features.find((fea) => fea.get('expNo') === id && fea.getGeometry() instanceof LineString)
      if (filterFea) {
        this.lightLayer.getSource().clear()
        let feature = new Feature({
          geometry: filterFea.getGeometry().clone(),
          style: comSymbol.getAllStyle(5, '#DCDC8B', 5, '#DCDC8B')
        })
        this.lightLayer.getSource().addFeature(feature)
        let center = mapUtil.getCenter(feature)
        new mapUtil(this.map).setZoomAndCenter(18, center)
        return center
      }
    },
    // 根据状态设置每列表格样式
    modality(obj) {
      // 通过id标识来改变当前行的文字颜色
      // console.log('obj', obj.row)
      let idArr
      if (this.multipleSelection != []) {
        idArr = this.multipleSelection.map((v) => v.id)
      }
      if (idArr.some((v) => v == obj.row.id)) {
        return 'rowBgBlue'
      }
    },
    // 点击行勾选数据
    handleRowClick(row) {
      let length = this.multipleSelection.length
      let id = this.multipleSelection.length == 1 ? this.multipleSelection[0].id : null
      // let
      this.$refs.multipleTable.clearSelection(row)
      if (length > 1 || length < 1) {
        this.$refs.multipleTable.toggleRowSelection(row)
      } else if (id) {
        if (row.id == id) {
          this.$refs.multipleTable.toggleRowSelection(row, false)
        } else {
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      }
    },
    // 打开缩略提示框
    openPromptBox(row) {
      console.log('定位', row.id)
      this.setViewFromFeas(row.expNo, 1)
    },

    // 详情
    async openDetails(row) {
      console.log('详情')
      this.id = row.id
          this.data.that.setDefectId(row.id)
          this.data.that.setDetailVisible(true)
    },
    // 重置
    resetBtn() {
      this.pagination = { current: 1, size: 30 }
      this.searchValue = {
        startDate: '',
        finishDate: '',
        queryParams: '',
        funcClass: '', // 功能型缺陷等级
        structClass: '' // 结构型缺陷等级
      }
      this.changeDate()
      this.upDateTable()
      this.drawer && this.drawer.end()
    },
    // 搜索
    searchApi() {
      console.log('查询地图')
      this.upDateTable()
      this.searchMap({
        funcClass: this.searchValue.funcClass,
        structClass: this.searchValue.structClass,
        queryText: this.searchValue.queryParams,
        endDate: this.searchValue.finishDate,
        startDate: this.searchValue.startDate,
      })
      console.log(this.searchValue)
    },
    
    // 搜索地图
    searchMap (filterObj) {
      console.log('过滤条件', filterObj)
      let features = this.vectorLayer.getSource().getFeatures()
      features = features.filter(fea => filter(fea)).map(fea => new Feature({ geometry: fea.getGeometry().clone() }))

      let source = this.lightLayer.getSource()
      source.clear()
      source.addFeatures(features)

      let center = mapUtil.getCenter(features[0])
      if (center.length !== 0) {
        let view = this.map.getView()
        view.setCenter(center)
        view.setZoom(17)
      }
      function filter (fea) {
        let expNo = fea.get('expNo'), 
            material = fea.get('material'), 
            funcClass = fea.get('funcClass'), 
            structClass = fea.get('structClass'),
            date = fea.get('sampleTime');
        if (filterObj.queryText) {
          if (!expNo.toLowerCase().includes(filterObj.queryText.toLowerCase()) && !material.includes(filterObj.queryText)) {
            return false
          }
        }
        if (filterObj.funcClass) {
          if (!funcClass || !funcClass.includes(filterObj.funcClass)) return false
        }

        if (filterObj.structClass) {
          if (!structClass || !structClass.includes(filterObj.structClass)) return false
        }

        let startDate = filterObj.startDate
        let endDate = filterObj.endDate
        if (startDate || endDate) {
          if (endDate === startDate) {
            return date === endDate
          } else {
            return (!startDate ? true : new Date(date) >= new Date(filterObj.startDate)) && (!endDate ? true : new Date(date) <= new Date(filterObj.endDate))
          }
        } return true
      }
    },

    // 表格多选事件
    handleSelectionChange(val) {
      let self = this
      this.multipleSelection = val
    },
    // 查询数据
    upDateTable() {
      console.log('重置数据')
      let data = {
        wordInfoState: 1,
        jcStartDate: this.searchValue.startDate,
        jcEndDate: this.searchValue.finishDate,
        queryParams: this.searchValue.queryParams,
        funcClass: this.searchValue.funcClass,
        structClass: this.searchValue.structClass,
        ...this.pagination
      }
      queryPageAssessment(data).then((res) => {
        this.tableData = res.result.records
        this.paginationTotal = res.result.total
      })
    },
    // 分页触发的事件(主表格)
    handleSizeChange(val) {
      this.pagination.size = val
      this.upDateTable()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.upDateTable()
    }
  }
}
</script>

<style lang="scss" scoped>

.engineering-manage {
  height: 100vh;
  margin: 0;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  // 卡片样式
    /deep/.el-table .el-table__cell {
    padding: 0;
  }
  /deep/ .el-dialog {
    margin-top: 9vh !important;
    font-size: 12px;
    .el-dialog__body {
      padding: 20px 36px !important;
      box-sizing: border-box;
      .el-table__body-wrapper {
        min-height: 400px;
      }
    }
    .el-dialog__header {
      background-color: #2d74e7;
      .el-dialog__title {
        color: #dfeffe;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }

    .el-dialog__footer {
      padding: 0 20px 5px !important;
    }
  }
  // 表格样式
  .table-box {
    width: 96%;
    margin: auto;
    display: flex;
    height: 100%;
    flex-direction: column;
    .top-tool {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      // flex-wrap: wrap;
      /deep/ .serch-engineering {
        display: flex;
        // justify-content: space-around;
        align-items: center;
        margin-bottom: 14px;
        .sampleTime {
          width: 308px !important;
          .el-input {
            width: 140px;
          }
        }
        .serch-input {
          width: 245px;
        }
        .el-input__inner {
          height: 34px;
        }
        .date-css {
          width: 140px;
        }

        .title {
          font-size: 14px;
          color: #606266;
          font-family: Arial;
          white-space: nowrap;
          margin-left: 5px;
        }
      }

      .right-btn {
        margin-bottom: 14px;
        display: inline-block;
        // display: flex;
        // align-items: center;
        // flex-direction: row;
        // flex-wrap: wrap;
      }
    }

    /deep/ .el-table {
      flex: 1;
      // overflow-y: scroll;
      th.el-table__cell > .cell {
        color: rgb(50, 59, 65);
        height: 40px;
        line-height: 40px;
        background: rgb(234, 241, 253);
      }
      .el-table__row--striped > td {
        background-color: #f3f7fe !important;
      }
      .hover-row {
        color: #e6a23c;
        background-color: rgba($color: #2d74e7, $alpha: 0.1);
      }
      .rowBgBlue {
        & > td {
          color: #fff;
          border-right: 1px solid #ebeef5;
          background-color: #69a8ea !important;
        }
      }
    }
  }
  .hd-input {
    /deep/.el-input__inner {
      width: 70%;
    }
  }
  .el-select {
    width: 8%;
  }
  /deep/ .is-required {
    position: relative;
    .select-btn {
      position: absolute;
      top: 0;
      left: 72%;
    }
  }
  // 详情卡片的样式
  .histroyPipeData {
    z-index: 9;
    .detailsCrad {
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: '';
      }
      .clearfix:after {
        clear: both;
      }

      .box-card {
        width: 550px;
        min-height: 310px;
        border: none;
        border-radius: 5px;
        /deep/ .el-card__header {
          height: 48px;
          color: #fff;
          background-color: #2d74e7;
        }
        /deep/.el-card__body {
          padding: 15px !important;
          .el-menu-item {
            height: 45px;
            font-size: 16px;
          }
        }
        .content {
          .content-info {
            overflow-y: scroll;
            height: 600px;
            padding: 10px 20px;
            .info-title {
              font-size: 14px;
              font-weight: bold;
              margin: 5px 0;
            }
            .info-box {
              height: 100%;
              display: flex;
              justify-content: space-between;
              .info-text {
                width: 37%;
                padding: 10px;
                box-sizing: border-box;
                background-color: #f3f7fe;
                border: 1px solid #dedede;
              }
              .info-video {
                width: 60%;
                border: 1px solid #dedede;
              }
            }
            /deep/.el-form {
              .el-link--inner {
                max-width: 416px;
                /* 1.先强制一行内显示文本 */
                white-space: nowrap;
                /* 2.超出部分隐藏 */
                overflow: hidden;
                /* 3.文字用省略号替代超出的部分 */
                text-overflow: ellipsis;
              }
              /deep/.is-disabled {
                .el-input__inner {
                  background-color: transparent;
                }
                .el-textarea__inner {
                  background-color: transparent;
                }
              }
              .el-form-item {
                margin-bottom: 10px;
              }
            }
            /deep/.el-textarea__inner,
            .el-input__inner {
              color: #666;
            }
            .detailsTitle {
              position: relative;
              font-size: 16px;
              padding: 5px 0;
              box-sizing: border-box;
            }
            .detailsTitle::after {
              position: absolute;
              top: 5px;
              left: -10px;
              content: '';
              width: 4px;
              height: 65%;
              background-color: #2d74e7;
            }
          }
        }
        .table-content {
          padding: 15px;
          .content-info {
            font-size: 12px;
            display: flex;
            justify-content: space-between;

            .left {
              flex: 1;
              .text-space {
                margin: 10px 0;
                /deep/.el-link--inner {
                  max-width: 240px;
                  // 1.先强制一行内显示文本
                  white-space: nowrap;

                  // 2.超出部分隐藏
                  overflow: hidden;
                  // 3.文字用省略号替换超出的部分
                  text-overflow: ellipsis;
                }
              }
            }
            .right {
              flex: 1;

              /deep/.is-top {
                margin: 0 0 10px;
              }
              // .el-tabs__header{
              //   border-top: none;
              //       margin-bottom: 6px;
              //   background-color: transparent !important;
              // }
              /deep/.el-tabs {
                .container {
                  height: 100%;
                  width: 100%;
                  padding-top: 5px;
                  box-sizing: border-box;
                }
                .el-tabs__content {
                  height: 150px;
                  width: 234px;
                }
                .el-tabs__item {
                  margin: 11px 0 0 0 !important;
                  background: transparent !important;
                }
                .el-tabs__header {
                  border-top: 0 !important;
                  background: transparent !important;
                }
              }
              // .el-tabs__nav-wrap::after {
              //   z-index: 2;
              // }
              // .el-tabs__active-bar
            }
            .detailsTitle {
              position: relative;
              margin: 6px 0;
              padding-left: 10px;
              box-sizing: border-box;
            }
            .detailsTitle::after {
              position: absolute;
              left: 0;
              content: '';
              width: 4px;
              height: 100%;
              background-color: #2d74e7;
            }
          }
        }
      }
    }
  }
}
  /deep/.el-table .el-table__cell:not(td) {
    padding: 0;
  }
#popupCardEva {
  &::after {
    content: '';
    display: block;
    width: 45px;
    height: 27px;
    background: url('../../components/testImg/corner.png');
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>