<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"
      />
      <el-table
        border
        highlight-current-row
        :data="dataList"
        :height="tableHeight"
        v-loading="loading"
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          label="产业链名称"
          align="center"
          min-width="200"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          min-width="200"
          prop="industryType"
        ></el-table-column>
        <el-table-column
          label="指标名称"
          align="center"
          min-width="200"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="分值"
          align="center"
          width="100"
          prop="points"
        ></el-table-column>
        <el-table-column
          label="第一牵头部门"
          align="center"
          width="180"
          prop="leaderDeptName"
        >
          <template slot-scope="{ row }">
            <pre>{{ row.leaderDeptList | formatList }}</pre>
          </template>
        </el-table-column>
        <el-table-column
          label="其它牵头部门"
          align="center"
          width="180"
          prop="otherDeptName"
        >
          <template slot-scope="{ row }">
            <pre>{{ row.otherDeptList | formatList }}</pre>
          </template>
        </el-table-column>
        <el-table-column
          label="配合部门"
          align="center"
          width="180"
          prop="cooperateDeptName"
        >
          <template slot-scope="{ row }">
            <pre>{{ row.cooperateDeptList | formatList }}</pre>
          </template>
        </el-table-column>
        <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-table>
      <!-- <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-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: {
    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(row) {
      let arr = [].concat(
        row.cooperateDept
          ? row.cooperateDept.split(",").map((item) => parseInt(item))
          : [],
        row.leaderDept
          ? row.leaderDept.split(",").map((item) => parseInt(item))
          : []
      );
      let bool = arr.includes(this.user.user.deptId);
      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);
              });
            });
          });
          list = list.filter((item) => {
            return !this.judge(item);
          });
          this.dataList = this.reduceData(list);
        })
        .catch((e) => {
          // this.dataList=[];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    edit(row) {
      this.showEdit = true;
      this.form.chainIndustryId = row.id;
      this.form.isApply = 2;
    },
    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>
</style>