<template>
  <div class="software ele-body">
    <el-card shadow="never" element-loading-background="rgba(255, 255, 255, 1)">
      <search @search:task="updateParams($event)" :category-list="dataList" />
      <div class="operating">
        <el-button size="small" type="primary" @click="edit('add')"
          >新增考核内容</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="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' }" ref="body">
          <div v-for="(data, index) of dataList" :key="index">
            <template v-if="isEmpty(data)">
              <div class="type title">{{ index + 1 }}、{{ data.name }}</div>
              <div v-for="(item, ind) of data.children" :key="ind">
                <template v-if="item.children.length > 0">
                  <div class="title">{{ item.name }}</div>
                  <el-row
                    type="flex"
                    style="border-left: 1px solid rgb(237, 237, 237)"
                    v-for="(detail, i) of item.children"
                    :key="i"
                  >
                    <el-col :span="2" align="center" class="td"
                      ><span class="cell">{{ i + 1 }}</span></el-col
                    >
                    <el-col :span="5" align="center" class="td"
                      ><span class="cell">{{ detail.content }}</span></el-col
                    >
                    <el-col :span="2" align="center" class="td"
                      ><span class="cell">{{ detail.points }}</span></el-col
                    >
                    <el-col :span="2" align="center" class="td"
                      ><span class="cell">{{ detail.score }}</span></el-col
                    >
                    <el-col :span="3" align="center" class="td"
                      ><span class="cell">
                        <pre>{{ detail.leaderDeptList | formatList }}</pre>
                      </span></el-col
                    >
                    <el-col :span="3" align="center" class="td"
                      ><span class="cell">
                        <pre>{{ detail.otherDeptList | formatList }}</pre>
                      </span></el-col
                    >
                    <el-col :span="3" align="center" class="td"
                      ><span class="cell">
                        <pre>{{ detail.cooperateDeptList | formatList }}</pre>
                      </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('edit', detail)"
                          icon="el-icon-edit"
                          type="primary"
                          :underline="false"
                          >修改</el-link
                        >
                        <el-popconfirm
                          title="确定要删除此考核内容？"
                          @confirm="remove(detail)"
                          class="ele-action"
                        >
                          <el-link
                            slot="reference"
                            icon="el-icon-delete"
                            type="danger"
                            :underline="false"
                            >删除</el-link
                          >
                        </el-popconfirm></span
                      ></el-col
                    >
                  </el-row>
                </template>
              </div>
            </template>
          </div>
        </div>
        <div class="line"></div>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="showEdit"
        width="400px"
        custom-class="ele-dialog-form"
        :lock-scroll="true"
        :destroy-on-close="true"
        @closed="form = {}"
      >
        <el-form
          :model="form"
          ref="form"
          label-width="120px"
          @keyup.enter.native="save"
          @submit.native.prevent
          :rules="rules"
        >
          <el-form-item label="产业链名称：" prop="categoryId">
            <el-select v-model="form.categoryId" filterable clearable>
              <el-option
                v-for="(item, index) of dataList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考核指标：" prop="type">
            <el-select v-model="form.type" filterable clearable>
              <el-option
                v-for="(item, index) of quotaList"
                :key="index"
                :label="item.quota"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标内容：" prop="content">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入考核内容"
              v-model="form.content"
            ></el-input>
          </el-form-item>
          <el-form-item label="分值：" prop="points">
            <el-input placeholder="请输入分值" type="number" v-model="form.points"></el-input>
          </el-form-item>
          <el-form-item label="得分：" prop="score">
            <el-input placeholder="请输入得分" type="number" v-model="form.score"></el-input>
          </el-form-item>
          <el-form-item label="第一牵头部门：" prop="leaderDept">
            <treeselect
              v-model="form.leaderDept"
              :disable-branch-nodes="true"
              :options="formatDep"
              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="otherDept">
            <treeselect
              v-model="form.otherDept"
              :disable-branch-nodes="true"
              :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="cooperateDept">
            <treeselect
              v-model="form.cooperateDept"
              :disable-branch-nodes="true"
              :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";
import api from "@/api/chain/assessmentContent";
export default {
  components: {
    search,
    Treeselect,
  },
  data() {
    return {
      searchParams: {},
      dataList: [],
      tableHeight: document.documentElement.clientHeight - 310,
      showEdit: false,
      action: "",
      title: "",
      form: {},
      rules: {},
      loading: false,
      dialogTitle: "",
      quotaList: [
        { id: 1, quota: "重点指标" },
        { id: 2, quota: "重点任务" },
        { id: 3, quota: "加减分考核" },
      ],
      rules: {
        categoryId: [
          { required: true, message: '请选择产品链名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择考核指标', trigger: 'blur' }
        ],
        content: [
          { type: 'string', required: true, message: '请输入考核内容', trigger: 'change' }
        ],
        points: [
          { required: true, message: '请输入分值', trigger: 'change' }
        ],
        score: [
          { required: true, message: '请输入得分', trigger: 'change' }
        ],
        leaderDept: [
          { required: true, message: '请选择第一牵头部门', trigger: 'blur' }
        ],
        // cooperateDept: [
        //   { required: true, message: '请选择配合部门', trigger: 'blur' }
        // ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    isEmpty(data) {
      for (let item of data.children) {
        if(item.children.length>0){
          return true
        }
      }
      return false;
    },
    updateParams(data) {
      this.searchParams = data;
      this.getList();
    },
    getList() {
      try {
        this.$refs.body.scrollTop = 0;
      } catch (e) {}
      this.loading = true;
      api
        .getList(Object.assign({}, this.searchParams))
        .then((res) => {
          this.dataList = res.data.data;
        })
        .catch((e) => {
          this.dataList = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    remove(detail) {
      api
        .delete(detail.id)
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除考核目标内容成功",
          });
          this.getList();
        })
        .catch((e) => {
          this.$message.error("删除考核目标内容失败");
        });
    },
    edit(type, detail) {
      this.showEdit = true;
      let title;

      if (type == "edit") {
        title = "编辑考核内容";
        this.action = "edit";
        detail = JSON.parse(JSON.stringify(detail));
        detail.otherDept = detail.otherDept
          ? detail.otherDept.split(",").map((item) => parseInt(item))
          : [];
        detail.cooperateDept = detail.cooperateDept
          ? detail.cooperateDept.split(",").map((item) => parseInt(item))
          : [];
        this.form = detail;
      }
      if (type == "add") {
        title = "新增考核内容";
        this.action = "add";
        this.form = {};
      }
      this.dialogTitle = title;
    },
    save(type) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          try {
            form.otherDept = form.otherDept.join(",");
            form.cooperateDept = form.cooperateDept.join(",");

          } catch (e) {
            // console.log(e);
            // this.$message({ type: "warning", message: "请完善信息" });
            // return;
          }
          form.completion = "暂无";
          if (this.action == "edit") {
            api
              .edit(form)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "修改考核目标内容成功",
                });
                this.showEdit = false;
                this.getList();
              })
              .catch((e) => {
                this.$message.error("修改考核目标内容失败");
              });
          }
          if (this.action == "add") {
            api
              .add(form)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "添加考核目标内容成功",
                });
                this.showEdit = false;
                this.getList();
              })
              .catch((e) => {
                this.$message.error("添加考核目标内容失败");
              });
          }
        } else {
          this.$message({
            type: "error",
            message: "请检查表单信息是否符合规则",
          })
        }
      })
      // let params = [
      //   "categoryId",
      //   "type",
      //   "content",
      //   "points",
      //   "score",
      //   "leaderDept",
      //   "cooperateDept",
      // ];
      // for (let key of params) {
      //   if (!form[key]) {
      //     if (form[key] != 0) {
      //       this.$message({
      //         type: "warning",
      //         message: "请完善信息",
      //       });
      //       return;
      //     }
      //   }
      //   if (Array.isArray(form[key])) {
      //     if (form[key].length == 0) {
      //       debugger;
      //       this.$message({
      //         type: "warning",
      //         message: "请完善信息",
      //       });
      //       return;
      //     }
      //   }
      //   if (key == "points" || key == "score") {
      //     if (parseInt(form[key]) !== parseInt(form[key])) {
      //       this.$message({
      //         type: "warning",
      //         message: "分数类请输入数字",
      //       });
      //       return;
      //     }
      //   }
      //   if (typeof form[key] == "string" && !form[key].trim()) {
      //     debugger;
      //     this.$message({
      //       type: "warning",
      //       message: "请完善信息",
      //     });
      //     return;
      //   }
      // }

    },
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
  filters: {
    formatList(val) {
      if (val) {
        return val.join("\n");
      }
    },
  },
};
</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-size: 16px;
}
.type {
  font-weight: 700;
  font-size: 17px;
}
.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>