<template>
  <div>
    <el-container class="personal-container">
      <!-- header -->
      <el-header height="40px">人员结构</el-header>
      <!-- 主体 -->
      <el-container class="main">
        <!-- 内容主体 -->
        <el-main>
          <!-- Main -->
          <div class="content">
            <!-- 选择筛选项 -->
            <el-row :gutter="15">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
              >
                <el-col :span="3">
                  <el-menu-item index="-3" @click="getList()"
                    >全部</el-menu-item
                  >
                </el-col>
                <el-col
                  :span="3"
                  v-for="(item, index) of department"
                  :key="index"
                >
                  <el-menu-item
                    :index="index.toString()"
                    @click="handleClick(index)"
                  >
                    {{ item.departmentName }}
                  </el-menu-item>
                </el-col>
                <!--  <el-col :span="3">
                <el-menu-item index="3" @click="handleClick"
                  >购销科</el-menu-item
                >
              </el-col>
              <el-col :span="3">
                <el-menu-item index="4" @click="handleClick"
                  >财务科</el-menu-item
                >
              </el-col>
              <el-col :span="3">
                <el-menu-item index="5" @click="handleClick"
                  >分公司</el-menu-item
                >
              </el-col>
              <el-col :span="3">
                <el-menu-item index="7" @click="handleClick"
                  >综合科</el-menu-item
                >
              </el-col>
              <el-col :span="3">
                <el-menu-item index="8" @click="handleClick"
                  >质检科</el-menu-item
                >
              </el-col> -->
              </el-menu>
            </el-row>
            <el-table
              :data="tableData"
              v-loading="loading"
              stripe
              style="width: 100%"
              border
            >
              <!-- fit="true" 在el-table 中报错，没时间找原因，先放置 -->
              <el-table-column label="序号" type="index" align="center" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="uname" label="姓名" align="center">
              </el-table-column>
              <el-table-column prop="usex" label="性别" align="center">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.usex == 0 ? "女" : "男" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="uphone" label="联系方式" align="center">
              </el-table-column>
              <el-table-column
                prop="departmentName"
                label="所属科室"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="ppost" label="职务" align="center">
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                class="right"
                :current-page.sync="listQuery.page"
                :page-size="listQuery.limit"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                @size-change="sizeChange"
                @current-change="pageChange"
                layout="total, sizes, prev, pager, next, jumper"
              ></el-pagination>
            </div>
          </div>
        </el-main>
        <!-- 侧边栏 -->
        <el-aside width="430px">
          <div class="aside">
            <div class="imgDepartment">
              <div class="img">
                <img src="@/assets/images/u6954.png" alt="" />
              </div>
              <div class="text">
                <p>
                  <span>粮库科室结构图</span>
                </p>
              </div>
            </div>
            <div id="chartProfession"></div>
          </div>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  getAllDepartment,
  getAllPersonInfo,
  getdepartmentInfo
} from "@/api/basicInfo/index"
import echarts from "echarts"

export default {
  data() {
    return {
      loading: true,
      activeIndex: "-3",
      queryKeyCode: "",
      condition: {
        depotId: "1",
        departmentId: "1"
      },
      // 库id
      depotId: "",
      //部门id
      departmentId: "",
      // 所有部门
      department: [],
      // 所有人员
      allperson: [],
      tableData: [
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "科长"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "职员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "财务科",
          job: "会计"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "纪检科",
          job: "科员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "纪检科",
          job: "职员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "综合科",
          job: "科长"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "质检科",
          job: "职员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "综合科",
          job: "科长"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "仓储科",
          job: "保管员"
        },
        {
          name: "王有利",
          sex: "女",
          contact: "18500327512",
          adf: "质检科",
          job: "职员"
        }
      ],
      // 分页
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      // chart 数据设置
      option: {
        color: ["#ffbf53"],
        title: {
          text: "仓储、质检人员职业资格情况",
          textStyle: {
            color: "#7d7d7d",
            fontStyle: "normal",
            fontWeight: "900",
            fontSize: "18"
          },
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认设置为直线，可选为 'line' | 'shadow'
          }
        },
        /* legend:{
          data:['初级','中级','高级','技师','高级技师']
        }, */
        /*         grid:{
          left:'3%',
          right:'4%',
          bottom:'3%',
          containLabel:true
        }, */
        xAxis: {
          type: "category",
          data: ["初级", "中级", "高级", "技师", "高级技师"],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "人数",
            barWidth: "40%",
            data: [4, 7, 9, 3, 1],
            type: "bar"
          }
        ]
      }
    }
  },
  /*   computed: {
    //
    table() {
      const search = this.queryKeyCode.trim()
      if (search != "全部") {
        return this.tableData.filter(data => {
          return data.adf.indexOf(search) > -1
        })
      } else {
      }
      return this.tableData
    }
  }, */
  mounted() {
    this.myEcharts()
    // 加载所有部门名称
    this.getdepart()
    // 加载所有数据
    this.getList()
  },
  methods: {
    // 获取部门信息
    getdepart() {
      getAllDepartment()
        .then(res => {
          // console.log(res)
          this.department = res.data
          console.log(this.department)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取所有人员信息
    getList() {
      let condition = {
        depotId: this.depotId,
        departmentId: this.departmentId
      }
      // let a = JSON.stringify(this.condition)
      var data = {
        condition: JSON.stringify(condition),
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      getAllPersonInfo(data)
        .then(res => {
          console.log(res)
          console.log(res.data.pageResult.records)
          if (res.code == 200) {
            this.tableData = res.data.pageResult.records
            this.loading = false
            this.listQuery.limit = res.data.pageResult.size
            this.total = res.data.pageResult.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 个数切换
    sizeChange(v) {
      this.listQuery.limit = v
      this.getList()
    },
    //页数切换
    pageChange(v) {
      this.listQuery.page = v
      console.log(this.listQuery, "分页")
      this.getList()
    },
    //切换分页序号递增
    indexMethod(index) {
      let curpage = this.listQuery.page //单前页码
      let limitpage = this.listQuery.limit //每页条数
      return index + 1 + (curpage - 1) * limitpage
    },
    myEcharts() {
      // 基于准备好的dom，初始化Echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("chartProfession")
      )
      // 使用刚指定的配置项和数据显示图标
      myChart.setOption(this.option)
    },
    // 筛选科室
    handleClick(a) {
      // console.log(a)
      console.log(this.department[a].departmentCode)
      // 部门id
      // let id = this.department[a].departmentCode
      let id = this.department[a].departmentCode
      let condition = {
        depotId: this.depotId,
        departmentId: id
      }
      // let b = JSON.stringify(this.condition)
      var data = {
        condition: JSON.stringify(condition),
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      getdepartmentInfo(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.pageResult.records
            this.listQuery.limit = res.data.pageResult.size
            this.total = res.data.pageResult.total
          }
          // this.tableData = res.data.pageResult.records
        })
        .catch(err => {
          console.log(err)
        })

      // this.queryKeyCode = e.$el.innerText
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 150px);
  // height: 1050px;
  // overflow-y: scroll;
  // overflow-x: scroll;
  // margin-bottom: 100px;
}
.el-header {
  color: #333;
  border-bottom: 1px solid #e4e4e4;
  line-height: 40px;
}
.el-aside {
  padding-right: 20px;
}
.el-table {
  margin-top: 20px;
  width: 100%;
  /*   height: calc(100vh - 300px);
  overflow-y: scroll;
  overflow-x: hidden; */
}
.el-menu.el-menu--horizontal {
  border: none;
}
.el-menu-item {
  border-bottom: 2px solid;
  padding: 0;
  text-align: center;
  font-weight: 900;
}
.el-menu-item:hover,
.el-menu-item:active {
  color: rgb(21, 129, 73);
}
aside {
  padding: 0px;
  background: none;
}
.imgDepartment {
  position: relative;
  padding-top: 8px;
  padding-right: 20px;
  .img {
    width: 409px;
    height: 256px;
  }
  .text {
    position: absolute;
    width: 405px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    font-style: normal;
    color: #199856;
    font-size: 13px;
    text-align: center;
    line-height: normal;
    left: 2px;
    top: 115px;
  }
}
#chartProfession {
  width: 409px;
  height: 277px;
  margin-top: 25px;
  border: 1px solid #7d7d7d;
}
</style>
