<template>
  <div class="expert">
    <div class="top">
      <Panel class="expert-chart" title="专家统计">
        <div id="expert-chart1"></div>
        <div class="r1">
          <div class="title">专家擅长方向</div>
          <div class="expert-chart-box">
            <div id="expert-chart2"></div>
            <span>21</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p1"></div>
            <span>塌防海墙抢险</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p2"></div>
            <span>水库山墙抢险</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p3"></div>
            <span>水闸泵站抢险</span>
          </div>
        </div>
        <div class="r2">
          <div class="title">专家类型</div>
          <div class="expert-chart-box">
            <div id="expert-chart3"></div>
            <span>21</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p4"></div>
            <span>防洪调度专家</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p5"></div>
            <span>防洪抢险专家</span>
          </div>
          <div class="expert-icon-txt">
            <div class="icon p6"></div>
            <span>防洪调度专家</span>
          </div>
        </div>
      </Panel>
      <Panel class="expert-search" title="专家查询">
        <el-form ref="expertForm" :rules="expertRules" :model="expertForm">
          <el-form-item label="专家姓名" prop="name">
            <el-input
              v-model="expertForm.name"
              placeholder="请输入专家姓名关键文字"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在单位" prop="company">
            <el-select
              v-model="expertForm.company"
              placeholder="请选择单位，支持手动输入"
              filterable
              :popper-append-to-body="false"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="擅长方向" prop="direction">
                <el-select
                  v-model="expertForm.direction"
                  placeholder="请选择擅长方向"
                  :popper-append-to-body="false"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专家类型" prop="type">
                <el-select
                  v-model="expertForm.type"
                  placeholder="请选择专家类型"
                  :popper-append-to-body="false"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="所在地区" prop="place">
            <el-select
              v-model="expertForm.place"
              placeholder="请选择地区"
              :popper-append-to-body="false"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn">
            <el-button size="small" type="info" @click="resetExpertForm"
              >清除</el-button
            >
            <el-button size="small" type="warning" @click="expertFormSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </Panel>
    </div>
    <div class="bottom">
      <div class="header">
        <button
          @click="hdBtn(index)"
          v-for="(item, index) in btnList"
          :key="index"
          :class="{ btnActive: btnIndex === index }"
        >
          {{ item }}
        </button>
      </div>
      <div class="content">
        <el-table
          class="el-table-scroll"
          height="416px"
          :data="tableData"
          style="width: 100%"
          :header-row-style="{
            background: 'rgba(96, 255, 246, 0.2)',
            color: '#7DFBFD',
            border: 0,
          }"
          :header-cell-style="{
            background: 'transparent',
            borderRight: '1px solid rgba(0, 0, 0, 0.2)',
            borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
          }"
          :row-style="{ color: '#fff', background: 'transparent' }"
          :cell-style="{
            background: 'transparent',
            borderRight: '1px solid rgba(0, 0, 0, 0.2)',
            borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
          }"
        >
          <el-table-column
            prop="id"
            label="序号"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="专家姓名"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="company"
            label="所在单位"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="duties"
            label="职务/职称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="专家类型"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="direction"
            label="擅长方向"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="place"
            label="所在地区"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="通讯地址"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="联系方式"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
        <Elpagination />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Expert',
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.initChart)
    for (let i = 1; i <= 20; i++) {
      this.tableData.push({
        id: i,
        name: `王淑英${i}`,
        company: `浙江省水文管理中心浙江省水文管理中心浙江省水文管理中心${i}`,
        duties: `正高级工程师${i}`,
        type: '防洪调度专家',
        direction: '塌防海墙抢险',
        place: '杭州市',
        address: '杭州市佑圣观路72号',
        mobile: 13777842010,
        operation: '待定'
      })
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
  },
  data () {
    return {
      tableData: [],
      // 省级 市级 县级
      btnList: ['省级专家(96)', '市级专家(291)', '县级专家(308)'],
      btnIndex: 0,
      expertForm: {
        name: '',
        company: '',
        direction: '',
        type: '',
        place: ''
      },
      expertRules: {
        name: [
          { required: true, message: '专家姓名不能为空', trigger: ['blur', 'change'] }
        ],
        company: [
          { required: true, message: '请选择所在单位', trigger: ['blur', 'change'] }
        ],
        direction: [
          { required: true, message: '请选择擅长方向', trigger: ['blur', 'change'] }
        ],
        type: [
          { required: true, message: '请选择专家类型', trigger: ['blur', 'change'] }
        ],
        place: [
          { required: true, message: '请选择地区', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 底部按钮
    hdBtn (i) {
      this.btnIndex = i
    },
    // 表单
    resetExpertForm () {
      this.$refs.expertForm.resetFields()
    },
    async expertFormSubmit () {
      await this.$refs.expertForm.validate()
    },
    initChart () {
      this.initExpertChart1()
      this.initExpertChart2()
      this.initExpertChart3()
    },
    initExpertChart1 () {
      const myChart = this.echarts.init(document.getElementById('expert-chart1'))
      const option = {
        grid: {
          show: false,
          left: 15,
          right: 16,
          top: 35,
          bottom: 5,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#68E0CF'
            }, {
              offset: 1, color: '#209CFF'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['省\n级', '杭\n州\n市', '宁\n波\n市', '温\n州\n市', '嘉\n兴\n市', '湖\n州\n市', '绍\n兴\n市', '金\n华\n市', '衢\n州\n市', '舟\n山\n市', '台\n州\n市', '丽\n水\n市'],
          axisLabel: {
            show: true,
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 14,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#ADADAD'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '专家数（位）',
          nameGap: 20,
          nameTextStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 14
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#ADADAD'
            }
          },
          axisLabel: {
            show: true,
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.3)',
              width: 1
            }
          }
        },
        series: [
          {
            name: '专家数',
            barWidth: 15,
            data: [80, 120, 90, 130, 130, 100, 100, 150, 90, 100, 90, 100],
            type: 'bar'
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 专家擅长方向
    initExpertChart2 () {
      const myChart = this.echarts.init(document.getElementById('expert-chart2'))
      const option = {
        color: ['#39F1F8', '#41DD9B', '#5B90FA'],
        series: [
          {
            name: '表面水平位移',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    // 专家擅长方向
    initExpertChart3 () {
      const myChart = this.echarts.init(document.getElementById('expert-chart3'))
      const option = {
        color: ['#51E9CB', '#E9AE51', '#229EFE'],
        series: [
          {
            name: '专家类型',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              scaleSize: 1,
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 7, name: '红色警报' },
              { value: 7, name: '黄色警报' },
              { value: 7, name: '正常' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.expert {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    width: 100%;
    height: 404px;
    margin-bottom: 20px;
    .expert-chart ::v-deep {
      width: 1032px !important;
      height: 100%;
      margin-right: 10px;
      .panel-main {
        display: flex;
        justify-content: center;
        #expert-chart1 {
          width: 688px;
          height: 100%;
        }
        .r1,
        .r2 {
          flex: 1;
          height: 100%;
          background-color: rgba(96, 255, 246, 0.05);
          .title {
            width: 100%;
            height: 40px;
            background-color: rgba(96, 255, 246, 0.1);
            text-align: center;
            line-height: 40px;
            color: #60fff6;
            font-size: 16px;
          }
          .expert-chart-box {
            position: relative;
            width: 94px;
            height: 94px;
            margin: 40px auto 30px;

            #expert-chart2,
            #expert-chart3 {
              width: 94px;
              height: 94px;
            }
            span {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 18px;
            }
          }

          .expert-icon-txt {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            .icon {
              width: 10px;
              height: 10px;
              border-radius: 5px;
              margin-right: 10px;
            }
            .p1 {
              background-color: #39f1f8;
            }
            .p2 {
              background-color: #41dd9b;
            }
            .p3 {
              background-color: #5b90fa;
            }
            .p4 {
              background-color: #51e9cb;
            }
            .p5 {
              background-color: #e9ae51;
            }
            .p6 {
              background-color: #229efe;
            }
            span {
              color: rgba(255, 255, 255, 0.8);
              font-size: 14px;
            }
          }
        }
        .r1 {
          margin-right: 10px;
        }
      }
    }
    .expert-search ::v-deep {
      width: 1032px;
      height: 100%;
      flex: 1;
      overflow: hidden;
      .panel-main {
        padding: 36px 30px 30px;
        overflow: hidden;
      }
      .btn {
        margin-top: 40px;
        margin-left: 126px;
      }
      .el-form {
        .el-form-item__content {
          margin-left: 80px !important;
        }
        .el-form-item__label {
          width: 80px !important;
        }
        .el-popper[x-placement^="bottom"] .popper__arrow::after {
          border-bottom-color: #226697;
          top: 0;
        }
        button {
          width: 80px;
        }
        button:first-child {
          margin-right: 20px;
        }
        .el-select {
          li {
            padding: 0 15px;
          }
          .el-select-dropdown {
            background-color: #226697;
            border: 1px solid #226697;
            border-radius: 2px;
            padding: 0 5px;
          }
          span {
            color: #fff;
            font-size: 14px;
          }
          .hover {
            border-radius: 2px;
            margin: 0 auto;
            background-color: #39a0bb;
          }
        }
        .el-form-item:nth-child(2) {
          .el-select {
            width: 498px;
          }
        }
        .el-row .el-col:nth-child(2) .el-form-item {
          display: flex;
          justify-content: flex-end;
          label {
            white-space: nowrap;
          }
          .el-form-item__content {
            margin-left: 0 !important;
          }
        }
        .el-form-item__label {
          color: #01fff5;
        }
        .el-icon-arrow-up:before {
          color: #fff;
        }
        input {
          color: rgba(255, 255, 255, 0.7);
          background-color: rgba(63, 128, 172, 0.3);
          border: 1px solid rgba(125, 251, 244, 0.3);
          &::placeholder {
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    background-color: #0c3061;
    .header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      background-color: #12407f;
      button {
        width: 180px;
        height: 100%;
        color: #fff;
        font-size: 18px;
        background-color: transparent;
        &:hover {
          background-color: #005fa9;
        }
        &.btnActive {
          color: #00ffff;
          background-color: #005fa9;
        }
      }
    }
    .content ::v-deep {
      flex: 1;
      padding: 10px;
      .el-table {
        width: 100%;
        height: 416px !important;
        margin-bottom: 10px;
        background-color: rgba(96, 255, 246, 0.05);
        &::before {
          height: 0;
        }
        thead tr th.el-table__cell {
          background-color: transparent;
        }
        thead tr {
          display: flex;
          width: 1660px !important;
          height: 50px !important;
          padding: 0 !important;
          .cell {
            padding: 0 !important;
          }
        }
        thead tr th:nth-child(1) {
          width: 50px !important;
        }
        thead tr th:nth-child(2) {
          width: 100px !important;
        }
        thead tr th:nth-child(3) {
          width: 280px !important;
        }
        thead tr th:nth-child(4) {
          width: 160px !important;
        }
        thead tr th:nth-child(5) {
          width: 160px !important;
        }
        thead tr th:nth-child(6) {
          width: 140px !important;
        }
        thead tr th:nth-child(7) {
          width: 140px !important;
        }
        thead tr th:nth-child(8) {
          width: 300px !important;
        }
        thead tr th:nth-child(9) {
          width: 200px !important;
        }
        thead tr th:nth-child(10) {
          flex: 1 !important;
        }
        tbody tr {
          display: flex;
          width: 1660px !important;
          height: 50px !important;
          padding: 0 !important;
          td {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 !important;
          }
          .cell {
            padding: 0 !important;
          }
        }
        tbody tr td:nth-child(1) {
          width: 50px !important;
        }
        tbody tr td:nth-child(2) {
          width: 100px !important;
        }
        tbody tr td:nth-child(3) {
          width: 280px !important;
        }
        tbody tr td:nth-child(4) {
          width: 160px !important;
        }
        tbody tr td:nth-child(5) {
          width: 160px !important;
        }
        tbody tr td:nth-child(6) {
          width: 140px !important;
        }
        tbody tr td:nth-child(7) {
          width: 140px !important;
        }
        tbody tr td:nth-child(8) {
          width: 300px !important;
        }
        tbody tr td:nth-child(9) {
          width: 200px !important;
        }
        tbody tr td:nth-child(10) {
          flex: 1 !important;
        }
      }
    }
  }
}
</style>
