<template>
  <div class="app-content">
    <a-radio-group button-style="solid" :defaultValue="defaultValue" @change="onChange">
      <a-radio-button value="1">
        项目分配
      </a-radio-button>
      <a-radio-button value="2">
        分配详情
      </a-radio-button>
    </a-radio-group>
    <div v-if="defaultValue=='1'">
      <a-drawer title="项目分配" placement="left" :destroyOnClose="true" :closable="true" :visible="drawerVisible" :get-container="false" :wrap-style="{ position: 'absolute' }" :after-visible-change="afterVisibleChange" @close="onDrawerClose">
        <div class="drawer-content">
          <expert-select ref="expertS" :projSelectedRowKeys="projSelectedRowKeys" @close="onDrawerClose" />
        </div>
      </a-drawer>
      <a-form :form="form" :model="searchForm" layout="inline" class="search_form cs">
        <a-form-item>
          <a-input placeholder="项目名称" v-model="searchForm.projName" :maxLength="100" style="width: 150px" />
        </a-form-item>
        <!-- <a-form-item>
            <a-input placeholder="项目编号" v-model="searchForm.projNo" :maxLength="100" style="width: 150px" />
          </a-form-item> -->
        <a-form-item>
          <a-input placeholder="申报单位" v-model="searchForm.appUnitName" :maxLength="100" style="width: 150px" />
        </a-form-item>
        <!-- <a-form-item>
            <a-input placeholder="申报人" v-model="searchForm.appPersonName" :maxLength="50" 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-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="deployment-unit" type="primary" @click="onDistribute">批量分配</a-button>
      </div>
      <a-table :dataSource="tableData" :columns="columns" rowKey="projId" :pagination="false" :loading="loading" :row-selection="{ selectedRowKeys: projSelectedRowKeys, onChange: onProjSelectChange }">
        <template slot="projName" slot-scope="record">
          <a @click="recordClick(record,'projView')">{{record.projName}}</a>
        </template>
        <template slot="assignInfo" slot-scope="record">
          <a-tag v-if="!record.assignList||record.assignList.length===0" :color="'red'">未分配</a-tag>
          <a-tag v-else v-for="data in record.assignList" :key="data.id" :color="evaluationColor(data)" @click="evaluationView(data)">{{data.personName}}</a-tag>
        </template>
        <template slot="option" slot-scope="record">
          <a-button type="link" size="small" @click="recordClick(record, 'assign')">分配</a-button>
          <a-button type="link" size="small" @click="recordClick(record, 'view')">详情</a-button>
        </template>
      </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} 条`" />
      <a-modal v-model="projectVisible" v-if="projectVisible" title="项目详情" width="94%" :footer="null" :dialog-style="{ top: '8%' }" destroyOnClose :maskClosable="false">
        <project-view v-model="projId" @close="() => this.projectVisible = false" />
      </a-modal>
      <a-modal v-model="assignInfoVisible" title="分配详情" width="80%" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
        <project-assign-detail v-model="projId" @close="() =>  this.assignInfoVisible = false" />
      </a-modal>
      <a-modal v-model="evaluationVisible" title="专家查看" width="800px" :dialog-style="{ top: '15%' }" :footer="null" destroyOnClose>
        <assign-expert-view v-model="evaluationId" @close="closeAssignExpertView" />
      </a-modal>
    </div>
    <div v-else>
      <assign-detail />
    </div>
  </div>
</template>

<script>
import { isEmptyParams } from '@/views/utils/common'
import projectView from '@/views/report/project/components/projectView'
import expertSelect from './components/expertSelect'
import projectAssignDetail from './components/projectAssignDetail'
import assignDetail from './components/assignDetail'
import moment from 'moment'
import assignExpertView from './components/assignExpertView'

export default {
  name: "projectAssign",
  components: {
    projectView, expertSelect, projectAssignDetail, assignExpertView, assignDetail
  },
  data () {
    return {
      defaultValue: '1',
      //项目
      form: this.$form.createForm(this, { name: "projSearch" }),
      searchForm: { projName: null, projNo: null, appUnitName: null, appPersonName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', },
      tableData: [],
      columns: [
        { title: "项目名称", scopedSlots: { customRender: 'projName' } },
        { title: "申报学科", dataIndex: "knowledgeName", align: 'center' },
        { title: "申报单位", dataIndex: "appUnitName", align: 'center' },
        { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center', },
        { title: '操作', scopedSlots: { customRender: 'option' }, align: 'center', fixed: 'right', width: 150, },
      ],
      pagination: {
        pageIndex: 1,
        pageSize: 100,
        total: 0,
        pageSizeOptions: this.$defaultPageSizeOptions,
      },
      loading: false,
      projSelectedRowKeys: [],
      projId: null,
      projectVisible: false,
      drawerVisible: false,
      assignInfoVisible: false,
      evaluationVisible: false,
      evaluationId: null,
    };
  },
  created () {
    this.getListByPage()
  },
  methods: {
    moment,
    onChange (value) {
      this.defaultValue = value.target.value
    },
    change () {
      this.getListByPage()
    },
    showSizeChange (current, pageSize) {
      this.pagination.pageIndex = current
      this.pagination.pageSize = pageSize
      this.getListByPage()
    },
    getListByPage () {
      this.loading = true
      let pars = isEmptyParams(this.searchForm)
      let par = { ...pars, pageIndex: -1, pageSize: 10000 }
      this.$api.projectAssign.getProjectListByPage(par).then(({ data = {} }) => {
        if (data) {
          const { dataList = [], total = 0 } = data
          this.pagination.total = total
          this.tableData = dataList
          this.loading = false
          this.projSelectedRowKeys = []
        }
      }).catch(() => {
        this.loading = false
      })
    },
    projSearch () {
      this.getListByPage()
    },
    projReset () {
      this.searchForm = { projName: null, projNo: null, appUnitName: null, appPersonName: null, knowledgeParentId: null, knowledgeId: null, assignState: '', }
      this.getListByPage()
    },
    parChange (value) {
      this.searchForm.knowledgeParentId = value
    },
    handleAssignChange (value) {
      this.projSearchForm.assignState = value
    },
    onProjSelectChange (selectedRowKeys) {
      this.projSelectedRowKeys = selectedRowKeys
    },
    recordClick (record, type) {
      if (type === 'projView') {
        this.projectVisible = true
        this.projId = record.projId
      }
      else if (type === 'assign') {
        this.projSelectedRowKeys = [record.projId]
        this.drawerVisible = true
      } else {
        this.projId = record.projId
        this.assignInfoVisible = true
      }
    },
    afterVisibleChange () {

    },
    onDrawerClose (value) {
      this.projSelectedRowKeys = []
      this.drawerVisible = false;
      if (value === 'assign') {
        this.getListByPage()
      }
      else {

      }
    },
    onDistribute () {
      if (this.projSelectedRowKeys.length == 0) {
        this.$message.warning('请选择项目！')
        return
      }
      this.drawerVisible = true;
    },
    evaluationView (record) {
      this.evaluationId = record.id
      this.evaluationVisible = true
    },
    closeAssignExpertView () {
      this.evaluationId = null
      this.evaluationVisible = false
      this.getListByPage()
    },
    evaluationColor (record) {
      if (record.gradeScore)
        return 'orange'
      else
        return 'green'
    },
  },
};
</script>

<style scoped lang="less">
.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: 100%;
    width: 100%;
    padding: 3px;
  }
  .ant-tag {
    margin-top: 2px !important;
    margin-right: 5px !important;
    padding: 0 5px !important;
    cursor: pointer;
  }
}
</style>