<template>
  <div class="app-container">
    <h2 style="display: flex;justify-content: space-between;align-items: center;">
      {{ $route.query.type == 1 ? '批量新建' : '批量修改' }}

      <el-button
        type="primary"
        @click="
          $router.push('/postResponsibility/postResponsibilityOrganization')
        "
      >
        返回
      </el-button>
    </h2>
    <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="岗位名称：">
        <el-input
          v-model="queryParams.postName"
          placeholder="请输入岗位名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所在部门：">
        <el-cascader
          style="width: 300px"
          v-model="unitId1"
          :options="postOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row
      v-if="$route.query.type == 1"
      :gutter="10"
      class="mb8"
      type="flex"
      justify="start"
      style="align-items: center; margin: 10px 0"
    >
      <el-col :span="1.5">
        全选：<el-checkbox
          v-model="checkAll"
          @change="handleCheckAllChange"
        ></el-checkbox>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary">指派并发送通知</el-button>
      </el-col>
    </el-row>

    <ul class="ul_box">
      <li v-for="(item, index) in tableList" :key="index">
        <div class="rigth_box">
          <img :src="item.img" alt="" class="img_box" />
          <div class="rigth_big_box">
            <p>
              <b>姓名：</b>
              <el-tooltip
                :open-delay="500"
                class="item"
                effect="dark"
                :content="item.nickName"
                placement="top-end"
              >
                <span>
                  {{ item.nickName }}
                </span>
              </el-tooltip>
            </p>
            <p>
              <b>部门：</b>
              <el-tooltip
                :open-delay="500"
                class="item"
                effect="dark"
                :content="item.deptName"
                placement="top-end"
              >
                <span>
                  {{ item.deptName }}
                </span>
              </el-tooltip>
            </p>
            <p>
              <b>岗位名称：</b>
              <el-tooltip
                :open-delay="500"
                class="item"
                effect="dark"
                :content="item.postName"
                placement="top-end"
              >
                <span>
                  {{ item.postName }}
                </span>
              </el-tooltip>
            </p>
            <p>
              <b>邮箱：</b>
              <el-tooltip
                :open-delay="500"
                class="item"
                effect="dark"
                :content="item.email"
                placement="top-end"
              >
                <span>
                  {{ item.email }}
                </span>
              </el-tooltip>
            </p>
            <p>
              <b>电话：</b>
              <el-tooltip
                :open-delay="500"
                class="item"
                effect="dark"
                :content="item.phonenumber"
                placement="top-end"
              >
                <span>
                  {{ item.phonenumber }}
                </span>
              </el-tooltip>
            </p>
          </div>
        </div>
        <el-checkbox
          v-if="$route.query.type == 1"
          v-model="item.flag"
          style="position: absolute; right: 10px; top: 10px"
          @change="handleCheckedCitiesChange"
        ></el-checkbox>
        <el-button type="primary" style="width: 100%">指派并发送通知</el-button>
      </li>
    </ul>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { postUserList, deptTree } from '@/api/allApi/index.js'

export default {
  name: 'Assign',

  data() {
    return {
      showSearch: true,
      queryParams: {
        postName: '',
        deptId: '',
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      checkAll: false,
      tableList: [],
      unitId1: [],
      postOptions: []
    }
  },

  mounted() {
    this.initDeptTree()
    this.getList()
  },

  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      postUserList(this.queryParams).then((response) => {
        this.tableList = response.rows
        this.tableList.forEach((item) => {
          item.flag = false
        })
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
        postName: '',
        deptId: '',
        pageNum: 1,
        pageSize: 20
      }
      this.handleQuery()
    },
    handleCheckAllChange(val) {
      this.tableList.map((item) => (item.flag = val))
    },
    handleCheckedCitiesChange() {
      let bool = this.tableList.every((item) => item.flag)
      if (bool) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },
    async initDeptTree() {
      const res = await deptTree()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.postOptions = res.data
    },
    // 选择部门
    handleChange(value) {
      this.queryParams.deptId = value[value.length - 1]
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
ul li {
  list-style: none;
}
.ul_box {
  display: flex;
  flex-wrap: wrap;
  padding: 0;

  li {
    width: 23%;
    height: 250px;
    border: 1px solid #cacaca;
    padding: 5px;
    margin: 10px;
    position: relative;

    .rigth_box {
      display: -webkit-box;
      align-items: center;
      overflow: hidden;

      p {
        overflow: hidden; //超出的隐藏
        text-overflow: ellipsis; //省略号
        white-space: nowrap; //强制一行显示
      }

      .rigth_big_box {
        width: calc(100%-100px);
      }
    }

    .img_box {
      width: 100px;
      height: 150px;
      border-radius: 5%;
      margin-right: 5px;
    }
  }
}
</style>