<template>
  <div class="page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="自动考核指标" name="1">
        <div class="content">
          <div class="top">
            <el-radio-group v-model="type" @input="buttonChange">
              <el-radio-button label="1">按部门</el-radio-button>
              <el-radio-button label="2">按个人</el-radio-button>
            </el-radio-group>
            <el-button type="primary" style="margin: 0 20px;" @click="addGoal">
              + {{ type == 1 ? "新增考核部门" : "新增考核个人" }}</el-button
            >
          </div>
          <div class="mid_content" style="height: auto;">
            <div class="goal_box" v-for="(val, i) in dataList" :key="i">
              <div class="goal_title">
                <img src="../../../../assets/images/u17641.svg" alt="" />
                <span>
                  {{ val.deptName ? val.deptName : val.staffNames }}
                </span>
              </div>
              <p class="goal_txt">
                <span>考核指标：</span>
              </p>
              <p>
                <el-tag style="margin: 0 5px 5px 0"
                  >考勤绩效指标：{{ val.attendCount }}</el-tag
                >
                <el-tag style="margin: 0 5px 5px 0"
                  >评价绩效指标：{{ val.assessCount }}</el-tag
                >
                <el-tag style="margin: 0 5px 5px 0"
                  >办件绩效指标：{{ val.workCount }}</el-tag
                >
                <el-tag style="margin: 0 5px 5px 0"
                  >效能绩效指标：{{ val.effectCount }}</el-tag
                >
                <el-tag style="margin: 0 5px 5px 0"
                  >其他绩效指标：{{ val.otherCount }}</el-tag
                >
              </p>
              <p class="goal_txt">
                <span>最近更新：</span><span>{{ val.createTime }}</span>
              </p>
              <p class="goal_txt">
                <span>更新人员：</span><span>{{ val.createUserName }}</span>
              </p>
              <div class="button_box">
                <el-button
                  type="primary"
                  style="width: 150px;"
                  plain
                  @click="hanleEdit(val)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  style="width: 150px;"
                  plain
                  @click="hanleDel(val)"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="窗口负责人管理" name="2">
        <div class="content">
          <LayoutTable :data="tableData" notSearch notDel :config="tableConfig">
          </LayoutTable>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 人员考核 -->
    <drawer-show ref="drawerform" @ok="getData" />
    <!-- 部门考核 -->
    <deptdrawer-show ref="deptdrawerform" @ok="getData" />
    <!-- 窗口负责人管理 -->
    <windowdrawer-show ref="windowdrawerform" @ok="getData" />
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import deptdrawerShow from "./deptdrawershow.vue";
import windowdrawerShow from "./windowdrawershow.vue";
import table from "@/assets/mixins/table";
import { timestampToTime } from "@/assets/utils/dateFormat.js";

export default {
  name: "PerformStaffConfList",
  components: {
    drawerShow,
    deptdrawerShow,
    windowdrawerShow,
  },
  mixins: [table],
  created() {
    sessionStorage.removeItem("type");
    sessionStorage.setItem("type", this.type);
  },
  methods: {
    handleCellClick(row, column, event, cell) {
      if (column.label == "负责窗口数量") {
        this.$refs.windowdrawerform.edit(row);
      }
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.windowdrawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.windowdrawerform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.windowdrawerform.view(row);
    },
    hanleEdit(val) {
      this.type == 1
        ? this.$refs.deptdrawerform.edit(val)
        : this.$refs.drawerform.edit(val);
    },
    hanleDel(val) {
      this.$get(
        this.type == 1
          ? "/perform/dept/conf/delete"
          : "/perform/staff/conf/delete",
        { id: val.id }
      ).then((res) => {
        this.$message.success(res.msg);
        this.getData();
      });
    },
    addGoal() {
      this.type == 1
        ? this.$refs.deptdrawerform.add()
        : this.$refs.drawerform.add();
    },
    buttonChange() {
      sessionStorage.setItem("type", this.type);
      this.getData();
    },
    handleClick() {
      this.activeName == 1
        ? sessionStorage.setItem("type", this.type)
        : sessionStorage.removeItem("type");
      this.getData();
    },
    async getData() {
      await this.$post(
        this.type == 1 ? "/perform/dept/conf/list" : "/perform/staff/conf/list"
      ).then((res) => {
        if (res.code == 1) {
          this.dataList = res.data.data;
          this.dataList.forEach((v) => {
            v.createTime = v.createTime ? timestampToTime(v.createTime, 6) : "";
            v.updateTime = v.updateTime ? timestampToTime(v.updateTime, 6) : "";
          });
        }
      });
      this.activeName == 2
        ? await this.$post("/window/owner/list").then((res) => {
            console.log(res);
            if (res.code == 1) {
              this.tableData = res.data;
            }
          })
        : "";
    },
    // 窗口负责人删除方法
    toDel(row) {
      this.$get("/window/owner/delete", { id: row }).then((res) => {
        this.$message.success(res.msg);
        this.getData();
      });
    },
  },
  data() {
    return {
      dataList: [],
      tableData: {},
      activeName: "1",
      type: "1",
      config: {
        isshowTabPane: false,
        search: [],
        columns: [
          { type: "selection", width: 60 },
          { type: "index", label: "序号", width: 50 },

          { label: "负责人姓名", prop: "name" },

          { label: "所属部门", prop: "deptName" },

          { label: "联系电话", prop: "phone" },

          {
            label: "负责窗口数量",
            prop: "windowCount",
            formatter: this.formatter,
          },

          {
            label: "更新时间",
            prop: "updateTime",
            formatter: this.formatterDate,
          },

          {
            label: "更新人员",
            prop: "updateUserId",
            formatter: this.formatter,
          },

          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noView
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /deep/.el-tabs__item {
    width: 120px;
    font-size: 14px;
    text-align: center;
  }
  .content {
    width: 100%;
    height: 100%;
    .search_top {
      width: 100%;
      height: 1000%;
      display: flex;
      justify-content: space-between;
    }
    /deep/.el-radio-button {
      width: 150px;
      text-align: center;
      border: 1px solid #eee;
    }
    /deep/.el-radio-button__inner {
      width: 150px;
    }
    /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
      width: 150px;
      border: none;
      background: #1890ff;
      color: #fff;
      border: 1px solid #eee;
    }
    .top {
      width: 100%;
      height: 60px;
    }
    .mid {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .mid_top {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        .jixiaozongfen,
        .jixiaopingjunfen {
          width: 48%;
          height: 100%;
        }
      }
      .mid_down {
        width: 100%;
        height: 380px;
        display: flex;
        justify-content: space-evenly;
        padding-top: 50px;

        .box {
          width: 25%;
          height: 100%;
        }
      }
    }
    .mid_content,
    .bar_content {
      width: 100%;
      height: 700px;
      overflow: hidden;
    }
    .mid_content {
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      .goal_box {
        width: 405px;
        height: 310px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 8px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        margin: 10px 20px 10px 20px;
        padding: 20px;
        .goal_title {
          width: 100%;
          display: flex;
          align-items: center;
          img {
            margin-right: 10px;
          }
        }
        /deep/.el-tag {
          width: 114px !important;
        }
        .goal_txt {
          font-family: "微软雅黑", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #666666;
          width: 100%;
          margin: 10px 0;
        }
        .button_box {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
      }
    }
  }
}
</style>
