<template>
  <div class="app-content">
    <a-drawer title="项目分配" placement="left" :destroyOnClose="true" :closable="true" :visible="drawerVisible" :get-container="false" :wrap-style="{ position: 'absolute' }" @close="onDrawerClose">
      <div class="drawer-content">
        <group-expert-select ref="expertS" :projGroupSelectedRowKeys="projGroupSelectedRowKeys" @close="onDrawerClose" />
      </div>
    </a-drawer>
    <a-form :form="form" :model="searchForm" layout="inline" class="search_form">
      <a-form-item>
        <a-select default-value="" placeholder="分配状态" v-model="searchForm.groupYear" style="width: 160px" @change="handleYearChange">
          <a-select-option v-for="record in YearData" :key="record.year" :value="record.year">
            {{ record.year + '年' }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-input placeholder="项目组名称" v-model="searchForm.groupName" :maxLength="100" style="width: 150px" />
      </a-form-item>
      <a-form-item>
        <a-select default-value="" placeholder="分配状态" v-model="searchForm.assignState" style="width: 160px" @change="handleAssignChange">
          <a-select-option value="">--请选择分配状态--</a-select-option>
          <a-select-option value="1">已分配</a-select-option>
          <a-select-option value="0">未分配</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <para-select v-model="searchForm.knowledgeId" :typeId="56" :width="150" />
        <!-- <para-multi-select v-model="searchForm.knowledgeId" @parentChange="parChange" :title="'学科'" :objType="'project'" :typeId="57" :width="150" /> -->
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="projSearch">搜索</a-button>
        <a-button icon="reload" style="margin-left: 10px" @click="projReset" class="bt-normal">重置</a-button>
      </a-form-item>
    </a-form>
    <a-divider style="height: 1px; background-color: #e8e8e8;" />
    <div class="submit-btn">
      <a-button icon="plus-circle" type="primary" @click="onAddProjectGroup">添加项目组</a-button>
      <a-button icon="plus-circle" type="primary" @click="onAddKnowledgeProject">添加二级学科及项目</a-button>
      <a-button type="primary" @click="onaAssignDetail">分配明细</a-button>
      <a-button icon="download" type="primary" @click="exportEvaluationExcel">项目评审结果导出</a-button>
      <a-button icon="download" type="primary" @click="exportProjGroupScoreExcel">项目分组排名导出</a-button>
      <!-- <a-button type="primary" @click="evaluationStatistic">项目评审结果统计</a-button> -->
      <!-- <a-button icon="deployment-unit" type="primary" @click="projectAssignStatistic">项目分配统计</a-button> -->
      <!-- <a-button icon="deployment-unit" type="primary" @click="onGroupAdjust">项目组调整</a-button> -->
      <!-- <a-button icon="share-alt" type="primary" @click="onDistribute">批量分配</a-button> -->
    </div>
    <a-table :dataSource="tableData2" :columns="columns2" rowKey="id" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: projGroupSelectedRowKeys, onChange: onProjGroupSelectChange, type: selectType }" @expand="getInnerData" :expandedRowKeys="expandedRowKeys">
      <template slot="groupName" slot-scope="record">
        <a @click="recordClick(record, 'groupView')">{{record.groupName}}</a>
      </template>
      <template slot="assignInfo" slot-scope="record">
        <a-tag v-if="!record.expertList||record.expertList.length===0" :color="'red'">未分配</a-tag>
        <a-tag v-else v-for="data in record.expertList" :key="data.id" :color="'orange'" @click="evaluationView(data)">{{data.personName}}</a-tag>
      </template>
      <template slot="option" slot-scope="record">
        <a-button type="link" size="small" @click="recordClick(record, 'edit')">修改</a-button>
        <a-button type="link" size="small" @click="recordClick(record, 'delete')" v-if="!record.projectList||record.projectList.length===0">删除</a-button>
        <a-button type="link" size="small" @click="recordClick(record, 'assign')" v-if="record.projectList&&record.projectList.length>0">分配</a-button>
        <!-- <a-button type="link" size="small" @click="recordClick(record, 'expertView')" v-if="!record.expertList||record.expertList.length!==0">专家明细</a-button> -->
      </template>
      <a-table style="margin:5px" slot="expandedRowRender" size="small" rowKey="index" :columns="innerColumns" :loading="loading" :data-source="innerData" :pagination="false">
        <template slot="option" slot-scope="record">
          <a-button type="link" size="small" @click="knowledgeDelete(record)">删除</a-button>
        </template>
      </a-table>
    </a-table>
    <a-pagination v-if="pagination.total > 0" :total="pagination.total" show-size-changer show-quick-jumper v-model="pagination.pageIndex" :page-size="pagination.pageSize" :page-size-options="pagination.pageSizeOptions" @showSizeChange="showSizeChange" @change="change" :showTotal="() => `共 ${pagination.total} 条`" />

    <s-modal :title="projectGroupTitle" v-model="projDetailVisible" v-if="projDetailVisible" ref="childWindow" :loading="false">
      <div slot="content">
        <group-detail v-model="groupId" :btnAddVisiable="false" @close="closeProjDetail" />
      </div>
    </s-modal>
    <a-modal v-model="projGroupVisible" title="项目组调整" width="70%" :dialog-style="{ top: '15%' }" @cancel="closeProjectGroupAdjust" :footer="null" destroyOnClose>
      <project-group-adjust :groupInfo1="groupInfo1" :groupInfo2="groupInfo2" @close="() =>  this.projGroupVisible = false"></project-group-adjust>
    </a-modal>
    <a-modal v-model="groupEditVisible" title="项目组编辑" width="60%" :dialog-style="{ top: '15%' }" :maskClosable="false" destroyOnClose>
      <template slot="footer">
        <a-button type="primary" @click="() => this.$refs.childEdit.submit()">提交</a-button>
      </template>
      <group-edit v-model="groupId" @close="closeWindow" ref="childEdit"></group-edit>
    </a-modal>
    <a-modal v-model="evaluationVisible" title="专家查看" width="900px" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
      <assign-group-expert-view v-model="evaluationId" @close="closeAssignExpertView" />
    </a-modal>
    <a-modal v-model="knowledgeSelectVisible" title="项目组二级学科选择" width="600px" :dialog-style="{ top: '15%' }" :maskClosable="false" destroyOnClose>
      <template slot="footer">
        <a-button type="primary" @click="() => this.$refs.knowledgeSelectW.submit()">提交</a-button>
      </template>
      <knowledge-select v-model="groupId" @close="closeKnowledgeSelect" ref="knowledgeSelectW" />
    </a-modal>
    <a-modal v-model="statisticVisible" title="项目分配统计" width="900px" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
      <!-- <template slot="footer">
        <a-button type="primary" @click="() => this.$refs.projectStatistic.exportData()">导出Excel</a-button>
      </template> -->
      <project-statistic ref="projectStatistic"></project-statistic>
    </a-modal>
    <a-modal v-model="evaluationStatisticVisible" title="项目评审结果统计" width="70%" :dialog-style="{ top: '15%' }" :maskClosable="false" destroyOnClose>
      <template slot="footer">
        <a-button type="primary" @click="() => this.$refs.evaluationStatistic.exportData()">导出Excel</a-button>
      </template>
      <evaluation-statistic ref="evaluationStatistic"></evaluation-statistic>
    </a-modal>
    <a-modal v-model="assignDetailVisible" title="专家查看" width="90%" :dialog-style="{ top: '5%' }" :footer="null" destroyOnClose>
      <assign-detail />
    </a-modal>
    <!-- <a-modal v-model="projDetailVisible" title="项目组明细" width="70%" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
      <group-detail v-model="groupId" @close="() =>  this.projDetailVisible = false" />
    </a-modal> -->
  </div>
</template>

<script>
import { getType } from '@/views/utils/auth'
import { isEmptyParams } from '@/views/utils/common'
import paraSelect from '@/views/components/common/paraSelect'
import groupDetail from '@/views/peAssign/components/groupDetail'
import groupEdit from '@/views/peAssign/components/groupEdit'
import projectGroupAdjust from '@/views/assign/components/projectGroupAdjust'
import groupExpertSelect from '@/views/assign/components/groupExpertSelect'
import assignGroupExpertView from '@/views/assign/components/assignGroupExpertView'
import knowledgeSelect from '@/views/peAssign/components/knowledgeSelect'
import projectStatistic from '@/views/peAssign/components/projectStatistic'
import evaluationStatistic from '@/views/peAssign/components/evaluationStatistic'
import assignDetail from '@/views/assign/components/assignDetail'

export default {
  name: 'projKnowledgeAssgin',
  components: {
    paraSelect, groupDetail, projectGroupAdjust, groupEdit, groupExpertSelect, assignGroupExpertView, knowledgeSelect, projectStatistic, evaluationStatistic, assignDetail
  },
  data () {
    return {
      reportYear: null,
      form: this.$form.createForm(this, { name: "projGroupSearch" }),
      YearData: null,
      searchForm: { groupYear: null, groupName: null, knowledgeParentId: null, knowledgeId: null, assignState: '' },
      columns2: [
        { title: "项目分组名称", scopedSlots: { customRender: 'groupName' } },
        { title: "年度", dataIndex: "groupYear", align: 'center' },
        //{ title: "项目分组序号", dataIndex: "displayOrder", align: 'center' },
        { title: "项目数", dataIndex: "projCount", align: 'center' },
        { title: "专家数", dataIndex: "expertCount", align: 'center' },
        { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center' },
        { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', width: 200 }, //fixed: 'right',
      ],
      tableData2: [],
      pagination: {
        pageIndex: 1,
        pageSize: 100,
        total: 0,
        pageSizeOptions: this.$defaultPageSizeOptions,
      },
      selectType: 'radio',
      expandedRowKeys: [],
      innerColumns: [
        { title: "二级学科", dataIndex: "knowledgeName", align: 'left' },
        { title: "项目数", dataIndex: "projCount", align: 'center' },
        { title: "操作", scopedSlots: { customRender: 'option' }, align: 'center' },
      ],
      innerData: [],
      loading: false,
      projGroupSelectedRowKeys: [],
      projDetailVisible: false,
      groupId: null,
      projGroupVisible: false,
      groupInfo1: null,
      groupInfo2: null,
      groupEditVisible: false,
      drawerVisible: false,
      evaluationVisible: false,
      evaluationId: null,
      projectGroupTitle: '',
      knowledgeSelectVisible: false,
      statisticVisible: false,
      evaluationStatisticVisible: false,
      assignDetailVisible: false,
      eTableData: [],
      eMergeList: [],
    };
  },
  created () {
    //this.getYear()
    this.getYearInfo()
  },
  methods: {
    isEmptyParams,
    getYearInfo () {
      let pars = { batch: 1, projType: getType() }
      this.$api.batch.getBatchList({ ...pars }).then(({ data = {} }) => {
        if (data) {
          this.YearData = data
          this.getYear()
        }
      }).catch(() => {
      })
    },
    getYear () {
      this.$api.batch.getCurrentYearBatch({ type: 1, projType: getType() }).then(({ data = {} }) => {
        if (data) {
          this.reportYear = data.year
          this.searchForm.groupYear = data.year
          this.getListByPage()
        }
      }).catch(() => { })
    },
    getListByPage () {
      this.loading = true
      let pars = isEmptyParams(this.searchForm)
      let par = { ...pars, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize }
      this.$api.projectGroupAssign.getProjectGroupListByPage(par).then(({ data = {} }) => {
        if (data) {
          const { dataList = [], total = 0 } = data
          this.tableData2 = dataList
          this.pagination.total = total
          this.loading = false
          this.projGroupSelectedRowKeys = []
        } else { this.loading = false }
      }).catch(() => {
        this.loading = false
      })
    },
    change () {
      this.getListByPage()
    },
    showSizeChange (current, pageSize) {
      this.pagination.pageIndex = current
      this.pagination.pageSize = pageSize
      this.getListByPage()
    },
    handleYearChange (value) {
      this.searchForm.groupYear = value
    },
    handleAssignChange (value) {
      this.searchForm.assignState = value
    },
    projSearch () {
      this.getListByPage()
    },
    projReset () {
      this.searchForm = { groupName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', }
      this.getListByPage()
    },
    parChange (value) {
      this.searchForm.knowledgeParentId = value
    },
    onProjGroupSelectChange (selectedRowKeys) {
      this.projGroupSelectedRowKeys = selectedRowKeys
    },
    recordClick (record, type) {
      switch (type) {
        case 'groupView':
          this.projectGroupTitle = '[' + record.groupName + ']-项目组明细'
          this.projDetailVisible = true
          this.groupId = record.id
          break
        case 'edit':
          this.groupEditVisible = true
          this.groupId = record.id
          break
        case 'delete':
          let self = this
          this.$confirm({
            title: '项目组删除',
            content: '确定要删除该项目组？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk () {
              self.$api.projectGroupAssign.deleteByGroupId({ id: record.id }).then(({ data = {} }) => {
                if (data) {
                  self.$message.success('删除成功！')
                  self.getListByPage()
                }
              })
            },
            onCancel () {
            },
          })
          break
        case 'assign':
          this.projGroupSelectedRowKeys = [record.id]
          this.drawerVisible = true
          break
        case 'expertView':
          break
      }
    },
    onGroupAdjust () {
      if (this.projGroupSelectedRowKeys.length !== 2) {
        this.$message.info('请选择两个项目组！')
        return
      }

      const groupId1 = this.projGroupSelectedRowKeys[0]
      const groupId2 = this.projGroupSelectedRowKeys[1]

      this.groupInfo1 = this.tableData.filter(e => { return e.id === groupId1 })[0]
      this.groupInfo2 = this.tableData.filter(e => { return e.id === groupId2 })[0]
      if (this.groupInfo1.expertCount > 0 || this.groupInfo2.expertCount > 0) {
        this.$message.error('项目组已经分配有专家，不能进行项目调整！')
        return
      }

      this.projGroupVisible = true
    },
    closeProjectGroupAdjust () {
      this.projGroupVisible = false
      this.getListByPage()
    },
    onAddProjectGroup () {
      this.groupId = null
      this.groupEditVisible = true
    },
    onaAssignDetail () {
      this.assignDetailVisible = true
    },
    onAddKnowledgeProject () {
      if (this.projGroupSelectedRowKeys.length <= 0) {
        this.$message.info('请选择一个项目组！')
        return
      }

      let projGroup = this.tableData2.filter(e => e.id === this.projGroupSelectedRowKeys[0])
      if (projGroup[0].expertCount > 0) {
        this.$message.info('该项目组已经分配了专家，不能再添加二级学科下所属项目！')
        return
      }

      this.knowledgeSelectVisible = true
      this.groupId = this.projGroupSelectedRowKeys[0]
    },
    closeKnowledgeSelect () {
      this.knowledgeSelectVisible = false
      this.getListByPage()
      if (!this.expandedRowKeys && this.expandedRowKeys.length > 0)
        this.getProjectKnowledgeStatistic(this.expandedRowKeys[0])
    },
    closeWindow (value) {
      if (value === 'edit') {
        this.groupEditVisible = false
        this.getListByPage()
      }
      // else
      //   this.visibleView = false
    },
    onDrawerClose (value) {
      this.projGroupSelectedRowKeys = []
      this.drawerVisible = false
      if (value === 'assign') {
        this.getListByPage()
      }
      else {

      }
    },
    onDistribute () {
      if (this.projGroupSelectedRowKeys.length == 0) {
        this.$message.warning('请选择项目组！')
        return
      }
    },
    evaluationColor (record) {
      if (record.gradeScore)
        return 'orange'
      else
        return 'green'
    },
    evaluationView (record) {
      this.evaluationId = record.id
      this.groupId = record.groupId
      this.evaluationVisible = true
    },
    closeAssignExpertView () {
      this.evaluationId = null
      this.groupId = null
      this.evaluationVisible = false
      this.getListByPage()
    },
    closeProjDetail () {
      this.projDetailVisible = false
      this.getListByPage()
    },
    getInnerData (expanded, record) {
      if (record.projCount == 0) {
        this.$message.info('该项目组还没有分配项目！')
        return
      }
      this.expandedRowKeys = []
      this.innerData = []
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        this.getProjectKnowledgeStatistic(record.id)
      }
    },
    getProjectKnowledgeStatistic (groupId) {
      this.loading = true
      this.$api.projectGroupAssign.getProjectKnowledgeStatisticByGroupId({ groupId: groupId }).then(({ data = {} }) => {
        if (data) {
          this.innerData = data
          this.loading = false
        } else { this.loading = false }
      }).catch(() => {
        this.loading = false
      })
    },
    knowledgeDelete (record) {
      let projGroup = this.tableData2.filter(e => e.id === record.groupId)
      if (projGroup[0].expertCount > 0) {
        this.$message.info('该项目组已经分配了专家，不能移除该二级学科下所属项目！')
        return
      }

      let self = this
      this.$confirm({
        title: '',
        content: '确定要从项目组移除该二级学科下所属项目？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          self.loading = true
          self.$api.projectGroupAssign.deleteProjectGroupKnowledge({ groupId: record.groupId, knowledgeId: record.knowledgeId }).then(({ data = {} }) => {
            if (data) {
              if (data === '项目组移除二级学科下所属项目成功！') {
                self.$message.success(data)
                self.getListByPage()
                self.getProjectKnowledgeStatistic(record.groupId)
              } else {
                self.$message.info(data)
              }
            }
            self.loading = false
          }).catch(() => { self.loading = false })
        },
        onCancel () { },
      })
    },
    projectAssignStatistic () {
      this.statisticVisible = true
    },
    evaluationStatistic () {
      this.evaluationStatisticVisible = true
    },
    exportEvaluationExcel () {
      this.loading = true

      const rowMarks = [ 'A', 'B', 'C', 'D', 'K' ]
      this.$api.statistical.getEvaluationExportExcel({ reportYear: this.reportYear, startRow: 3, rowMarks: rowMarks }).then(({ data = {} }) => {
        if (data) {
          this.eTableData = data.evaluationList
          this.eMergeList = data.mergeList

          import('@/views/utils/Export2Excel').then(excel => {
            const multiHeader = [[ this.reportYear + '项目评审结果列表', '','']] // 标题
            const header = ['项目编号', '项目名称', '二级学科', '所属市州', '证件号', '专家姓名', '专家单位', '手机号', '评分', '评审内容', '平均分'] // 表头
            const filterVal = ['projNo', 'projName', 'knowledgeName', 'unitName', 'certId', 'personName', 'expertUnitName', 'mobile', 'totalScore', 'remark', 'averageScore'] // 数据属性
            const list = this.eTableData //请求来的数据
            const merges = ['A1:K1'].concat(this.eMergeList) //需要合并的单元格
            const data = list.map(item => filterVal.map(j => item[j])) // 转换二维数组
            const filename = this.reportYear + '项目评审结果列表'
            excel.exportJsonToExcel({
              multiHeader, // 标题--非必要
              header, // 表头
              data,  // 具体数据--二维数组
              merges, // 合并--非必要
              filename, // 下载文件名
              autoWidth: true,  // 不自动调整列宽
            })
            this.loading = false
            this.eTableData = []
            this.eMergeList = []
          }).catch(() => { this.loading = false })
        }
      }).catch(() => { this.loading = false })
    },
    exportProjGroupScoreExcel () {
      this.loading = true

      const rowMarks = [ 'A' ]
      this.$api.statistical.getProjectGroupScoreOrder({ reportYear: this.reportYear, startRow: 3, rowMarks: rowMarks }).then(({ data = {} }) => {
        if (data) {
          this.eTableData = data.groupScoreList
          //this.eMergeList = data.mergeList

          import('@/views/utils/Export2Excel').then(excel => {
            const multiHeader = [[ this.reportYear + '项目分组排名列表', '','']] // 标题
            const header = ['组名', '组内排名', '项目编号', '项目名称', '一级学科', '二级学科', '申报单位', '申报人', '所属市(州）', '总分', '平均分'] // 表头
            const filterVal = ['groupName', 'orderNo',  'projNo', 'projName', 'knowledgeParentName', 'knowledgeName', 'appUnitName', 'personName', 'unitName', 'totalScore', 'averageScore'] // 数据属性
            const list = this.eTableData //请求来的数据
            const merges = ['A1:I1'].concat(this.eMergeList) //需要合并的单元格
            const data = list.map(item => filterVal.map(j => item[j])) // 转换二维数组
            const filename = this.reportYear + '项目分组排名列表'
            excel.exportJsonToExcel({
              multiHeader, // 标题--非必要
              header, // 表头
              data,  // 具体数据--二维数组
              merges, // 合并--非必要
              filename, // 下载文件名
              autoWidth: true,  // 不自动调整列宽
            })
            this.loading = false
            this.eTableData = []
            this.eMergeList = []
          }).catch(() => { this.loading = false })
        }
      }).catch(() => { this.loading = false })
    }
  }
};
</script>

<style scoped lang="less">
.outer-layer {
  margin: 5px;
  height: 100%;
}
.card-head {
  min-height: 30px;
  margin-bottom: -1px;
  padding: 0 5px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  text-align: center;
}
.left-column {
  float: left;
  width: 30%;
  height: 100%;
}
.right-column {
  float: right;
  width: 69.6%;
  height: 100%;
}
.ant-descriptions {
  height: calc(100% - 50px);
}
.ant-descriptions-view {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}
.app-content {
  ::v-deep .ant-radio-group {
    margin: 14px 0px 0px 0px !important;
  }
  ::v-deep .ant-drawer .ant-drawer-content-wrapper {
    width: 480px !important;
    .ant-drawer-content .ant-drawer-wrapper-body {
      .ant-drawer-header {
        padding: 10px 10px !important;
        height: 40px;
      }
      .ant-drawer-body {
        height: calc(100% - 40px);
        padding: 0px !important;
      }
    }
  }
  .drawer-content {
    height: 95%;
    width: 100%;
    padding: 3px;
  }
  .ant-tag {
    margin-top: 2px !important;
    margin-right: 5px !important;
    padding: 0 5px !important;
    cursor: pointer;
  }
}
</style>