<template>
  <div class="apply-cooperation ele-body">
    <el-card shadow="never" element-loading-background="rgba(255, 255, 255, 1)">
      <search
        @search:task="updateParams($event)"
        @export="exportData($event)"
        :show-export="true"
      />
      <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="7" 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="7" 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==0?"":detail.points }}</span></el-col
                    >
                    <!-- <el-col :span="2" align="center" class="td"
                      ><span class="cell">{{ detail.score==0?"":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(detail)"
                          icon="el-icon-edit"
                          type="primary"
                          :underline="false"
                          :disabled="judge(detail)"
                          >申请成为配合部门</el-link
                        >
                        </el-popconfirm></span
                      ></el-col
                    >
                  </el-row>
                </template>
              </div>
            </template>
          </div>
        </div>
        <div class="line"></div>
      </div>
      <!-- <el-pagination
        :current-page.sync="page.page"
        :page-size="page.limit"
        :total="count"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :pager-count="5"
        class="ele-pagination-circle"
        @current-change="getDataList()"
      /> -->
        <!-- <el-table-column label="操作" align="center" width="160">
          <template slot-scope="{ row }">
            <el-link
              @click="edit(row)"
              icon="el-icon-edit"
              type="primary"
              :underline="false"
              :disabled="row.isApply || !row.id"
              >申请成为配合部门</el-link
            >
          </template>
        </el-table-column> -->
      <el-dialog
        title="申请成为配合部门"
        :visible.sync="showEdit"
        width="400px"
        custom-class="ele-dialog-form"
        :lock-scroll="true"
        :destroy-on-close="true"
        @closed="form = {}"
      >
        <el-form
          :model="form"
          label-width="82px"
          width="400px"
          :lock-scroll="true"
          :destroy-on-close="true"
          @closed="form = {}"
        >
          <el-form-item label="申请理由：">
            <el-input
              type="textarea"
              placeholder="请输入申请理由"
              :rows="5"
              v-model="form.note"
              :maxlength="50"
              :show-word-limit="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="showEdit = false">取消</el-button>&nbsp;
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import search from "../search";
import { mapGetters } from "vuex";
import api from "@/api/chain/assessmentContent";
import applyApi from "@/api/chain/coordinationManage/applyCooperation";
import { mergeSpan } from "@/utils/mixin";
export default {
  components: {
    search,
  },
  mixins: [
    mergeSpan([
      { name: "name", col: [1] },
      { name: "industryType", col: [2] },
    ]),
  ],
  data() {
    return {
      searchParams: {},
      startList: [],
      dataList: [],
      count: 0,
      page: {
        page: 1,
        limit: Math.floor(
          (document.documentElement.clientHeight - 220 - 45) / 45
        ),
      },
      tableHeight: document.documentElement.clientHeight - 220,
      loading: false,
      form: {},
      showEdit: false,
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  created() {
    this.getDataList();
  },
  methods: {
    isEmpty(data) {
      for (let item of data.children) {
        if(item.children.length>0){
          return true
        }
      }
      return false;
    },
    exportData(data){
      this.loading=true;
      applyApi.exportList(Object.assign({sheetName:"链长制配合申请列表", isApply: 1},data)).then(res=>{
        if(res.data.code == 0) {
          // window.open(res.data.data);
          window.location.href=res.data.data
          this.$message({
            type:"success",
            message:"导出成功"
          })
        } else {
          this.$message.error("暂无数据")
        }
      }).catch(e=>{
        this.$message.error("导出失败")
      }).finally(()=>{
        this.loading=false;
      })
    },
    updateParams(data) {
      this.searchParams = data;
      this.getDataList();
    },
    judge(detail) {
      let arr = [].concat(
        detail.cooperateDept
          ? detail.cooperateDept.split(",").map((item) => parseInt(item))
          : [],
        detail.leaderDept
          ? detail.leaderDept.split(",").map((item) => parseInt(item))
          : []
      );
      arr.push(parseInt(detail.leaderDept))
      let bool = arr.includes(this.user.user.deptId) || detail.isApply || !detail.id;
      return bool;
    },
    getDataList() {
      try {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      } catch (e) {}
      this.loading = true;
      api
        .getList(Object.assign({ isApply: 1 }, this.searchParams))
        .then((res) => {
          this.startList = res.data.data;
          let data = res.data.data;
          // let list = [];
          // let obj = {};
          // let name = "";
          // data.forEach((item, index) => {
          //   let name = item.name;
          //   let industryType = "";
          //   item.children.forEach((item, $index) => {
          //     industryType = item.name;
          //     item.children.forEach((item, $index) => {
          //       obj = item;
          //       obj.name = name;
          //       obj.industryType = industryType;
          //       list.push(obj);
          //     });
          //   });
          // });
          data = data.filter((item) => {
            return !this.judge(item);
          });
          // this.dataList = this.reduceData(list);
          this.dataList = data
        })
        .catch((e) => {
          // this.dataList=[];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    edit(detail) {
      this.showEdit = true;
      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;
      this.form.chainIndustryId = detail.id;
      // this.form.isApply = 2;
      // console.log(this.form);
    },
    save() {
      // if (this.form.note) {
        applyApi
          .applyCooperate(Object.assign({}, this.form))
          .then((res) => {
            this.showEdit = false;
            this.$message({
              type: "success",
              message: "提交申请成功",
            });
            this.getDataList();
          })
          .catch((e) => {
            this.showEdit = false;
            this.$message({
              type: "error",
              message: "提交申请失败",
            });
          });
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "申请理由不能为空",
      //   });
      // }
    },
  },
  filters: {
    formatList(val) {
      if (val) {
        return val.join("\n");
      }
    },
  },
};
</script>

<style scoped>
  .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>