<template>
  <div class="software ele-body">
    <el-card
      shadow="never"
      element-loading-background="rgba(255, 255, 255, 1)"
    >
      <search @search:task="updateParams($event)" />
      <div class="operating">
        <el-button size="small" type="primary" @click="edit()"
          >新增考核内容</el-button
        >
      </div>
      <div class="table" v-loading="loading">
        <div class="header">
          <el-row type="flex">
            <el-col :span="2" align="center" class="thead td"
              ><span class="cell">编号</span></el-col
            >
            <el-col :span="5" align="center" class="thead td"
              ><span class="cell">指标名称与全年目标</span></el-col
            >
            <el-col :span="2" align="center" class="thead td"
              ><span class="cell">分值</span></el-col
            >
            <el-col :span="2" align="center" class="thead td"
              ><span class="cell">得分</span></el-col
            >
            <el-col :span="3" align="center" class="thead td"
              ><span class="cell">牵头部门</span></el-col
            >
            <el-col :span="3" align="center" class="thead td"
              ><span class="cell">配合部门</span></el-col
            >
            <el-col :span="3" align="center" class="thead td"
              ><span class="cell">打分操作记录</span></el-col
            >
            <el-col :span="4" align="center" class="thead td"
              ><span class="cell">操作</span></el-col
            >
          </el-row>
        </div>
        <div class="body" :style="{ height: tableHeight + 'px' }">
          <div v-for="(data, index) of dataList" :key="index">
            <div class="title">121212</div>
            <el-row
              type="flex"
              style="border-left: 1px solid rgb(237, 237, 237)"
              v-for="(item, ind) of data"
              :key="ind"
            >
              <el-col :span="2" align="center" class="td"
                ><span class="cell">编号</span></el-col
              >
              <el-col :span="5" align="center" class="td"
                ><span class="cell">指标名称与全年目标</span></el-col
              >
              <el-col :span="2" align="center" class="td"
                ><span class="cell">分值</span></el-col
              >
              <el-col :span="2" align="center" class="td"
                ><span class="cell">得分</span></el-col
              >
              <el-col :span="3" align="center" class="td"
                ><span class="cell">牵头部门</span></el-col
              >
              <el-col :span="3" align="center" class="td"
                ><span class="cell">配合部门</span></el-col
              >
              <el-col :span="3" align="center" class="td"
                ><span class="cell">打分操作记录</span></el-col
              >
              <el-col :span="4" align="center" class="td"
                ><span class="cell"
                  ><el-link
                    @click="edit(index, ind)"
                    icon="el-icon-edit"
                    type="primary"
                    :underline="false"
                    >修改</el-link
                  >
                  <el-link
                    slot="reference"
                    icon="el-icon-delete"
                    type="danger"
                    :underline="false"
                    >删除</el-link
                  ></span
                ></el-col
              >
            </el-row>
          </div>
        </div>
        <div class="line"></div>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="showEdit"
        width="400px"
        custom-class="ele-dialog-form"
        :lock-scroll="false"
        :destroy-on-close="true"
        @closed="form = {}"
      >
        <el-form
          :model="form"
          label-width="82px"
          @keyup.enter.native="save"
          @submit.native.prevent
          :rules="rules"
        >
          <el-form-item label="考核指标：" prop="">
            <el-select placeholder="请选择考核指标">
              <el-option></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标内容：" prop="">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入考核内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="分值：" prop="">
            <el-input placeholder="请输入分值"></el-input>
          </el-form-item>
          <el-form-item label="牵头部门：" prop="">
            <treeselect
              :flat="true"
              :options="formatDep"
              :multiple="true"
              placeholder="请选择牵头部门"
              :defaultExpandLevel="2"
              :normalizer="
                (d) => {
                  return {
                    id: d.id,
                    label: d.name,
                    children:
                      d.children && d.children.length > 0
                        ? d.children
                        : undefined,
                  };
                }
              "
            />
          </el-form-item>
          <el-form-item label="配合部门：" prop="">
            <treeselect
              :flat="true"
              :options="formatDep"
              :multiple="true"
              placeholder="请选择牵头部门"
              :defaultExpandLevel="2"
              :normalizer="
                (d) => {
                  return {
                    id: d.id,
                    label: d.name,
                    children:
                      d.children && d.children.length > 0
                        ? d.children
                        : undefined,
                  };
                }
              "
            />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="showEdit = false">取消</el-button>&nbsp;
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import search from "../search";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect"; // 下拉树
import { mapGetters } from "vuex";
export default {
  components: {
    search,
    Treeselect,
  },
  data() {
    return {
      searchParams: {},
      dataList: [
        [[], [], [], [], [], [], []],
        [[], [], [], [], [], []],
        [[], [], [], []],
      ],
      tableHeight: document.documentElement.clientHeight - 310,
      showEdit: false,
      title: "",
      form: {},
      rules: {},
      loading: false,
    };
  },
  methods: {
    edit(index, ind) {
      this.showEdit = true;
      let title = "新增考核内容";
      if (index && ind) {
        console.log("编辑");
        title = "编辑考核内容";
      }
      this.dialogTitle = title;
    },
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
};
</script>

<style scoped>
/* .table {
  border-bottom: 1px solid rgb(237, 237, 237);
  position: relative;
} */
.el-row {
  align-items: stretch;
}
.header {
  border-top: 1px solid rgb(237, 237, 237);
  border-left: 1px solid rgb(237, 237, 237);
  margin-right: 8px;
}
.title {
  padding: 10px;
  font-weight: 700;
}
.td {
  padding: 10px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-right: 1px solid rgb(237, 237, 237);
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thead {
  font-weight: 700;
  color: #262626;
  background-color: #fafafa;
}
.cell {
  cursor: default;
}
.title {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-right: 1px solid rgb(237, 237, 237);
  border-left: 1px solid rgb(237, 237, 237);
}
.body {
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  width: calc(100%+16px);
  box-sizing: border-box;
}
.body::-webkit-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
}
.line {
  height: 1px;
  background: rgb(237, 237, 237);
  margin-top: -1px;
  margin-right: 8px;
}
/deep/ .vue-treeselect__multi-value-label , /deep/ .vue-treeselect__input{
  line-height: 25px;
}
/deep/ .vue-treeselect__multi-value{
    margin-bottom:0;
}
</style>