<template>
  <div class="content-detail content-box ele-body">
    <el-card shadow="never" element-loading-background="rgba(255, 255, 255, 1)">
      <div class="base-info">
        <div class="title">基础信息:</div>
        <div class="body">
          <el-row v-if="type == 1 || type == 2">
            <el-col :span="5" class="grey">一级指标</el-col>
            <el-col :span="7"></el-col>
            <el-col :span="5" class="grey">二级指标</el-col>
            <el-col :span="7"></el-col>
          </el-row>
          <el-row v-if="type == 3">
            <el-col :span="5" class="grey">考核指标</el-col>
            <el-col :span="19"></el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="grey">区牵头单位</el-col>
            <el-col :span="7"></el-col>
            <el-col :span="5" class="grey">封顶分值</el-col>
            <el-col :span="7"></el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="grey">牵头部门</el-col>
            <el-col :span="7"></el-col>
            <el-col :span="5" class="grey">责任领导</el-col>
            <el-col :span="7"></el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="grey">配合部门</el-col>
            <el-col :span="7"></el-col>
            <el-col :span="5" class="grey">责任领导</el-col>
            <el-col :span="7"></el-col>
          </el-row>
          <el-row>
            <el-col :span="5" class="grey">指标内容</el-col>
            <el-col :span="19"></el-col>
          </el-row>
        </div>
      </div>
      <div class="segmentation" style="margin-top: 30px">
        <div class="title">
          <span>分项信息</span>
          <el-button type="primary" size="small" style="margin-right: 50px"
            >添加</el-button
          >
        </div>
        <div>
          <el-table :data="dataList" border highlight-current-row>
            <el-table-column
              type="index"
              label="编号"
              align="center"
              width="50"
            ></el-table-column>
            <el-table-column
              label="小项内容"
              align="center"
              min-width="150"
              max-width="200"
            ></el-table-column>
            <el-table-column
              label="分值"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column label="牵头部门" align="center" width="180">
              <treeselect
                :multiple="true"
                v-model="dataList.leaderDept"
                :options="formatDep"
                placeholder="请选择牵头部门"
                :defaultExpandLevel="1"
                :normalizer="
                  (d) => {
                    return {
                      id: d.id,
                      label: d.name,
                      children:
                        d.children && d.children.length > 0
                          ? d.children
                          : undefined,
                    };
                  }
                "
              />
            </el-table-column>
            <el-table-column
              label="责任领导"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column label="配合部门" align="center" width="180">
              <template>
                <treeselect
                  :multiple="true"
                  v-model="dataList.cooperateDept"
                  :options="formatDep"
                  placeholder="请选择配合部门"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.name,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
              </template>
            </el-table-column>
            <el-table-column
              label="责任领导"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template>
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="footer">
          <el-button type="primary" @click="save">确定</el-button>
          <el-button @click="close">取消</el-button>&nbsp;
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { mapGetters } from "vuex";
export default {
  props: {
    row: {
      type: Object,
    },
    type: {
      type: Number,
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      dataList: [{},{},{}],
    };
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
  created() {
    if(!this.row){
      this.$router.back(-1)
    }
  },
  methods: {
    save() {
      this.$router.back(-1);
    },
    close() {
      this.$router.back(-1);
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.body {
  border-left: 1px solid rgb(201, 201, 201);
  border-top: 1px solid rgb(201, 201, 201);
  max-width: 1200px;
  background: #fff;
}
.el-col {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(201, 201, 201);
  border-right: 1px solid rgb(201, 201, 201);
  text-align: center;
}
.grey {
  background: #eeeeee;
}
.footer {
  margin-top: 20px;
  text-align: center;
}
/deep/ .cell,
.el-table,
/deep/ .el-table__body-wrapper,.el-card {
  overflow: visible;
}
</style>