<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="需求单号">
                <a-input placeholder="请输入需求单号" v-model="queryParam.code"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="需求名称">
                <a-input placeholder="请输入需求名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item  label="状态">
                <j-dict-select-tag v-model="queryParam.requireStatus" placeholder="请选择状态" dictCode="requireStatus"/>
              </a-form-item>
            </a-col>
            <template v-if="toggleSearchStatus">

              <a-col :md="6" :sm="8">
                <a-form-item label="发布人">
                  <a-input placeholder="请输入发布人" v-model="queryParam.companyName"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="8" :sm="8">
                <a-form-item label="创建时间">
                  <a-range-picker
                    style="width: 100%"
                    v-model="queryParam.createTimeRange"
                    format="YYYY-MM-DD"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onDateChange1"
                    @ok="onDateOk1"
                    :allowClear="allowClear"
                  />
                </a-form-item>
              </a-col>

              <!--<a-col :md="6" :sm="8">-->
              <!--<a-form-item label="截止时间" :labelCol="{span: 10}" :wrapperCol="{span: 16, offset: 0}">-->
              <!--<j-date v-model="queryParam.expiryDate1"  date-format="YYYY-MM-DD"-->
              <!--placeholder="请选择截止时间"></j-date>-->
              <!--</a-form-item>-->
              <!--</a-col>-->


              <!--<a-col :md="6" :sm="8">-->
              <!--<a-form-item label="发布时间" :labelCol="{span: 10}" :wrapperCol="{span: 32, offset: 0}">-->
              <!--<j-date v-model="queryParam.createTime1"  date-format="YYYY-MM-DD"-->
              <!--placeholder="请选择发布时间"></j-date>-->
              <!--</a-form-item>-->
              <!--</a-col>-->
            </template>


            <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a @click="handleToggleSearch">
                {{ toggleSearchStatus ? '取消' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
              <a-button ghost type='primary' @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button ghost type='primary' @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
            </a-col>

          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'require:requireAdd'">新增需求</a-button>
        <!--<a-button type="primary" icon="download" @click="handleExportXls('hw_requirement')">导出</a-button>-->

        <!--<a-dropdown v-if="selectedRowKeys.length > 0">-->
        <!--<a-menu slot="overlay">-->
        <!--<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
        <!--</a-menu>-->
        <!--<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
        <!--</a-dropdown>-->
      </div>

      <!-- table区域-begin -->
      <div>

        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :scroll="{ x: true}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

        <span slot="action1" slot-scope="text, record">
           <a @click="viewRequire(record)">{{record.code}}</a>
        </span>

          <span slot="action2" slot-scope="text, record">
           <a @click="toEnrollmentList(record)">{{record.enrollmentNum}}</a>
        </span>

          <span slot="action3" slot-scope="text, record">
            <template v-if="record.subcontract">
           <a @click="viewSubcontract(record)">查看</a>
            </template>
            <template v-if="!record.subcontract">
           <a style="color:#000c17">--</a>
            </template>
        </span>

          <span slot="action5" slot-scope="text,scope,index">
           {{text}}
            <span v-has="'require:eyeEdit'">
           <a-icon type="eye"  :style="{color:'#1890FF',float:'right'}" v-show="scope.isMobileDisplay" @click="changeDisplay(scope,index)"/>
           <a-icon type="eye-invisible" :style="{color:'#8e8e8e',float:'right'}" v-show="!scope.isMobileDisplay" @click="changeDisplay(scope,index)"/>
            </span>
          </span>

          <span slot="action4" slot-scope="text, record">
              <j-ellipsis :value="record.remark" :length="10"/>
            </span>


          <span slot="action" slot-scope="text, record">
             <template v-if="record.isOn==0&&record.authenticationStatus==2">
                <a @click="isOnRequire(record,1,'上架')" v-has="'require:up'">上架</a>
             </template>
             <template v-if="record.isOn==1&&record.authenticationStatus==2">
                <a @click="isOnRequire(record,0,'下架')" v-has="'require:down'">下架</a>
             </template>

             <template v-if="record.isOn==0">
                <a-divider type="vertical" v-has="'require:release'"/>
                <a @click="refRelease(record)" v-has="'require:release'">再次发布</a>
              </template>

              <template v-if="record.isOn==0 || record.authenticationStatus==1 || record.authenticationStatus==0">
                <a-divider type="vertical" v-has="'require:del'"/>
                <a @click="delrequire(record)" v-has="'require:del'">删除</a>
              </template>

              <template v-if="record.authenticationStatus==2&&record.isOn==1">
                <a-divider type="vertical" v-has="'require:importenrol'"/>
                <a @click="handleImportExcel1(record)"  v-has="'require:importenrol'">导入报名</a>
              </template>

              <a-divider type="vertical" v-has="'require:remark'"/>
              <a @click="doRemark(record)" v-has="'require:remark'">备注</a>

          </span>


        </a-table>
      </div>

      <hwRequirement-modal ref="modalForm" @ok="modalFormOk"></hwRequirement-modal>

      <hw-require-enrollment-export-modal ref="modalSelectRequireForm" @ok="modalFormOk"></hw-require-enrollment-export-modal>

      <hw-require-auth-modal ref="modelAuthForm" @ok="modalFormOk"></hw-require-auth-modal>
      <hw-enrollment-list ref="hwEnrollmentList" @ok="modalFormOk"></hw-enrollment-list>

      <hw-require-remark-modal ref="hwRequireRemarkForm" @ok="modalFormOk"></hw-require-remark-modal>

      <hw-require-view-modal ref="hwRequireViewForm" @ok="modalFormOk"></hw-require-view-modal>

      <upload-subcontractor-contract-modal ref="uploadContractForm" @ok="modalFormOk"></upload-subcontractor-contract-modal>
    </a-card>
  </div>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HwRequirementModal from './modules/HwRequirementModal'
  import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import HwRequireEnrollmentExportModal from './modules/HwRequireEnrollmentExportModal'
  import qs from 'qs';
  import { filterObj } from '@/utils/util';
  import HwEnrollmentList from './HwEnrollmentList'
  import HwRequireAuthModal from './modules/HwRequireAuthModal'
  import HwRequireRemarkModal from './modules/HwRequireRemarkModal'
  const authRequire = (params) => putAction('/requiremanager/hwRequirement/authRequire', params)
  const isOnRequire = (params) => putAction('/requiremanager/hwRequirement/isOnRequire', params)
  const delrequire = (params) => putAction('/requiremanager/hwRequirement/delrequire', params)
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import HwRequireViewModal from './modules/HwRequireViewModal'
  import UploadSubcontractorContractModal from './modules/UploadSubcontractorContractModal'

  export default {
    name: "HwRequirementList",
    mixins:[JeecgListMixin],
    components: {
      UploadSubcontractorContractModal,
      HwRequireViewModal,
      HwRequireRemarkModal,
      HwRequireAuthModal,
      HwRequirementModal,
      JDate,
      HwRequireEnrollmentExportModal,
      HwEnrollmentList,
      JEllipsis
    },
    data () {
      return {
        queryParam: {
          createTimeRange:[],
        },
        allowClear:false,
        description: 'hw_requirement管理页面',
        // 表头
        columns: [
          {
            title:'需求单号',
            align:"left",
            dataIndex: 'code',
            width: 200,
            scopedSlots: { customRender: 'action1' },
          },
          {
            title:'需求名称',
            align:"left",
            width: 200,
            dataIndex: 'name'
          },
          {
            title:'报名数',
            align:"left",
            width: 100,
            dataIndex: 'enrollmentNum',
            scopedSlots: { customRender: 'action2' },
          },
          {
            title:'状态',
            align:"left",
            width: 120,
            dataIndex: 'isOn',
            customRender:function (value,record) {

              if(record.authenticationStatus==0){
                return "审核中"
              }else if(record.authenticationStatus==1){
                return "打回"
              }else if(record.authenticationStatus==2){
                if(record.isOn==1){
                  return "发布中"
                }else if(record.isOn==0){
                  return "下架"
                }
              }
            }
          },
          {
            title:'发布企业',
            align:"left",
            width: 300,
            dataIndex: 'companyName',
            scopedSlots: { customRender: 'action5' },
          },
          {
            title:'备注',
            align:"left",
            width: 200,
            dataIndex: 'remark',
            scopedSlots: { customRender: 'action4' },
          },
          {
            title:'用户合同',
            align:"left",
            width: 150,
            dataIndex: 'workContractType_dictText'
          },
          {
            title:'创建时间',
            align:"left",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"left",
            fixed: 'right',
            width: 220,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/requiremanager/hwRequirement/list",
          delete: "/requiremanager/hwRequirement/delete",
          deleteBatch: "/requiremanager/hwRequirement/deleteBatch",
          exportXlsUrl: "/requiremanager/hwRequirement/exportXls",
          importExcelUrl: "requiremanager/hwRequirement/importExcel?id=",
          edit: '/requiremanager/hwRequirement/edit'
        },
        dictOptions:{
          platformCompanyId:[],
        } ,
        isorter: {
          column: 'updateTime',
          order: 'desc'
        },
      }
    },
    computed: {

    },
    methods: {

      importExcelUrl(record){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`+record.id;
      },
      //审核
      authRequire(record) {
        this.$refs.modelAuthForm.edit(record);
        this.$refs.modelAuthForm.title = '审核'
        this.$refs.modelAuthForm.disableSubmit = false
      },

      //上下架
      isOnRequire(record,isOn,title) {
          let that = this
          const modal =that.$confirm({
            title: title,
            closable:true,
            keyboard: false,
            maskClosable: true,
            content: '确定将该需求'+title+'吗',
            okText: '确定'+title,
            cancelText: '取消',
            onOk: function() {
              isOnRequire({ id: record.id,isOn:isOn }).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.routeReload()
                } else {
                  that.$message.warning(res.message)
                }
              })
            },
            onCancel() {
              modal.destroy()
            }
          })
      },
      refRelease(record){
        record.typeEdit=1
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = '再次发布'
        this.$refs.modalForm.disableSubmit = false
      },
      //申请审核
      applyAuthRequire(record) {
        var content='确定将该需求申请审批吗'
        let that = this
        const modal = that.$confirm({
          title: '申请审批',
          closable:true,
          keyboard: false,
          maskClosable: true,
          content: content,
          okText: '确定',
          cancelText: '取消',
          onOk: function() {
              authRequire({ id: record.id,authenticationStatus:0 }).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.routeReload()
                } else {
                  that.$message.warning(res.message)
                }
              })
          },
          onCancel(e) {
            modal.destroy()
          }
        })
      },

      //删除
      delrequire(record) {
        let that = this
        const modal = that.$confirm({
          title: '删除',
          closable:true,
          keyboard: false,
          maskClosable: true,
          content: '确定将该需求删除吗',
          okText: '确定',
          cancelText: '取消',
          onOk: function() {
            if(record.existEnroll){
              that.$message.warning("该需求已存在报名，无法删除")
              return
            }
            delrequire({ id: record.id }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.routeReload()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            modal.destroy()
          }
        })
      },
      viewRequire(record){
        this.$refs.hwRequireViewForm.edit(record);
        this.$refs.hwRequireViewForm.title = '详情'
        this.$refs.hwRequireViewForm.disableSubmit = false
      },
      doRemark(record){
        this.$refs.hwRequireRemarkForm.edit(record);
        this.$refs.hwRequireRemarkForm.title = '备注'
        this.$refs.hwRequireRemarkForm.disableSubmit = false
      },
      handleImportExcel1(record){
        this.$refs.modalSelectRequireForm.edit(record.id)
        this.$refs.modalSelectRequireForm.title = '导入报名'
        this.$refs.modalSelectRequireForm.disableSubmit = false
      },
      toEnrollmentList(record){
        this.$refs.hwEnrollmentList.edit(qs.stringify(record))
        this.$refs.hwEnrollmentList.title = '报名列表'
        this.$refs.hwEnrollmentList.disableSubmit = false
      },
      getQueryParams(){
        console.log(this.queryParam.createTimeRange)
        var param = Object.assign({}, this.queryParam,this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        delete param.createTimeRange; // 时间参数不传递后台
        return filterObj(param);
      },
      onDateChange: function (value, dateString) {

      },
      onDateOk(value) {
        console.log(value);
      },
      onDateChange1: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.createTime_begin=dateString[0]+" 00:00:00";
        this.queryParam.createTime_end=dateString[1] +" 23:59:59";
      },
      onDateOk1(value) {
        console.log(value);
      },
      //刷新路由
      routeReload(){
        this.reloadFlag = false
        let ToggleMultipage = "ToggleMultipage"
        this.$store.dispatch(ToggleMultipage,false)
        this.$nextTick(()=>{
          this.$store.dispatch(ToggleMultipage,true)
          this.reloadFlag = true
        })
      },
      modalFormOk(){
        this.routeReload()
      },
      viewSubcontract(record){
        if(record.subcontract==null){
          this.$message.warning('该合同为线下合同,不支持预览')
          return
        }
        window.open(window._CONFIG['imgDomainOssURL']+record.subcontract, '_blank', 'toolbar=yes')
      },
      //可见/不可见
      changeDisplay(scope, index) {
        this.loading = true
        const isMobileDisplay = Number(!Number(scope.isMobileDisplay))
        let url = ''
        url = this.url.edit
        putAction(url, { id: scope.id, isMobileDisplay }).then(data => {
          if (data.success) {
            this.$set(this.dataSource[index], 'isMobileDisplay', isMobileDisplay)
          }
          if (data.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },




    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  ::v-deep .ant-table-pagination{
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>