<!--项目管理列表-->
<template>
  <el-main class="bg_white wrap_box lcpg ">
    <!-- 搜索栏-->
    <lcSearch class="lcS" ref="theSearch" @searchhandle="searchhandle" @resethandel='resethandel'>
    </lcSearch>
    <!-- 表格-->
    <div>
      <vxe-toolbar>
        <template #buttons>
          <div @click="getClickBtnType('addProject')" class="l-button">新增项目</div>
          <div @click="getClickBtnType('exportTablbt')" class="l-button">导出规格定义表</div>
          <div @click="getClickBtnType('log')" class="l-button">日志</div>
          <div>
            <el-checkbox v-model="data.checked" label="我的待办" @change="mychange"></el-checkbox>
          </div>
        </template>
      </vxe-toolbar>
      <vxe-table id='wlbjtable' @checkbox-change="selectionChange" @checkbox-all="selectionChange" max-height="550"
        :custom-config="{ storage: true }" border show-overflow :data="data.prlistTtable" keep-source
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell', showUpdateStatus: true, showInsertStatus: true }" class="ggdycss">
        <vxe-column type="checkbox" width="50" align="center"></vxe-column>
        <vxe-column field="code" title="项目代码" width="80" align="left"> </vxe-column>
        <vxe-column title="项目图片" width="100" align="center">
          <template #default="scope">
            <img :src="scope.row.image ? scope.row.image : defaulImg" class="avatar"
              @error="e => { e.target.src = defaulImg }" />
          </template>
        </vxe-column>
        <vxe-column title="项目名称" width="160" align="left">
          <template #default="{ row }">
            <span style="color:#409eff;cursor: pointer;" @click="getRouteInfo(row)">{{ row.name }}</span>
          </template>
        </vxe-column>
        <vxe-column field="leader_user_name" title="项目负责人" width="100" align="left"> </vxe-column>
        <vxe-column field="task_text" title="当前任务及状态" align="left"> </vxe-column>
        <vxe-column field="status_text" title="项目状态" width="100" align="center"> </vxe-column>
        <vxe-column field="level" title="项目优先级" width="100" align="center">
          <template #default="{ row }">
            <span v-if="row.level_text == '优先'" style="color: red;">{{ row.level_text }}</span>
            <span v-else>{{ row.level_text }}</span>
          </template>
        </vxe-column>
        <vxe-column field="plan_start_time" title="项目预计开始日期" width="120" align="center"> </vxe-column>
        <vxe-column field="plan_end_time" title="项目预计结束日期" width="120" align="center"> </vxe-column>
        <vxe-column field="start_time" title="项目开始日期" width="100" align="center"> </vxe-column>
        <vxe-column field="issue_time" title="项目发布日期" width="100" align="center"> </vxe-column>
        <vxe-column field="product_time" title="项目量产日期" width="100" align="center"> </vxe-column>
        <vxe-column field="online_time" title="项目上架日期" width="100" align="center"> </vxe-column>
        <vxe-column field="end_time" title="项目结束日期" width="100" align="center"> </vxe-column>
        <vxe-column title="操作" width="100" align="center" fixed="right">
          <template #default="{ row }">
            <span style="color:#409eff;cursor: pointer;" @click="pusdown(row)">下推</span>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页-->
      <div class="block">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="data.page" :page-sizes="[50, 100, 150]" :page-size="formdata.size"
          layout="total, sizes, prev, pager, next, jumper" :total="data.total">
        </el-pagination>
      </div>
    </div>
    <!-- 下推-->
    <lcDailogxt @handelClose="handelClose" v-model:xtshow="data.xtshow" :projectId="data.projectId" v-if="data.xtshow"
      @getinit="init">
    </lcDailogxt>
  </el-main>
</template>
<script setup name="projectMange">
import { reactive, getCurrentInstance, ref, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus'
import defaulImg from '../../../assets/defaulImg.jpg'
import { projectMangeSearch_data } from '../../../utils/lc_data'
import { exportlist } from '../../../utils/lc'
import { useRouter } from 'vue-router';
/* 数据层 */
let router = useRouter()
// 基本信息组件值
const { proxy } = getCurrentInstance()
let formdata = reactive(JSON.parse(JSON.stringify(projectMangeSearch_data)))
const data = reactive({
  prlistTtable: [],
  xtshow: false,
  selRow: [],
  checked: true,// 我的待办
  total: 0,
  projectId: '',
  page: 1
})
/* 初始化 */
const theSearch = ref()
const keyDown = (e) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    searchhandle(JSON.parse(JSON.stringify(theSearch.value.theformdata)))
  }
}
onMounted(() => {
  if (window.sessionStorage.getItem("projectSearchdata")) {
    formdata = theSearch.value.theformdata
    data.checked = (formdata.my == '1' ? true : false)
  }
  getlist()
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
})
/* 方法层 */
// 表格操作
function init () {
  data.page = 1
  getlist()
}
function selectionChange (val) {
  data.selRow = val.records
}
function mychange (val) {
  formdata = JSON.parse(JSON.stringify(theSearch.value.theformdata))
  theSearch.value.theformdata.my = val ? '1' : '0'
  formdata.my = val ? 1 : 0
  getlist()
}
function getClickBtnType (type, selRow, value) {
  //打开日志
  if (type == 'log') {
    router.push({ path: '/lcProject/log/prlog' })
  }
  //新增项目
  if (type == 'addProject') {
    router.push({ path: '/lcProject/projectMange/add' })
  }
  // 导出规格定义表
  if (type == 'exportTablbt') {
    if (data.selRow.length > 0) {
      let project_ids = data.selRow.map((obj, index) => { return obj.id; }).join(",")
      exportlist('', project_ids, 'projectList', 'sku', '规格定义表')
    } else {
      ElMessage.error('请先勾选要导出的项目!')
    }
  }
  // 我的待办
  if (type === 'check_box') {
    formdata.page = 1
    formdata.my = data.checked ? '1' : '0'
    getlist()
  }
}

//获取列表数据
function getlist () {
  let sudata = JSON.parse(JSON.stringify(formdata))
  sudata.plan_start_time = sudata.plan_start_time && sudata.plan_start_time.length > 0 ? sudata.plan_start_time.join('-') : ''
  sudata.plan_end_time = sudata.plan_end_time && sudata.plan_end_time.length > 0 ? sudata.plan_end_time.join('-') : ''
  sudata.start_time = sudata.start_time && sudata.start_time.length > 0 ? sudata.start_time.join('-') : ''
  sudata.end_time = sudata.end_time && sudata.end_time.length > 0 ? sudata.end_time.join('-') : ''
  sudata.online_time = sudata.online_time && sudata.online_time.length > 0 ? sudata.online_time.join('-') : ''
  sudata.product_time = sudata.product_time && sudata.product_time.length > 0 ? sudata.product_time.join('-') : ''
  proxy.$http.showLoading(false).get('project/project/list', sudata).then(res => {
    if (res.errno == 200) {
      data.prlistTtable = res.data.data
      data.total = res.data.total
    }
  })
}
// 搜索
function searchhandle (value) {
  if (value) {
    formdata = value
  }
  formdata.my = data.checked ? '1' : '0'
  formdata.page = 1
  getlist()
  console.log('搜索', value)
}
// 重置
function resethandel () {
  formdata = JSON.parse(JSON.stringify(projectMangeSearch_data))
  formdata.my = 1
  data.page = 1
  formdata.page = 1
  data.checked = true
  getlist()
}
//分页条数
function handleSizeChange (val) {
  formdata.size = val
  data.page = 1
  formdata.page = 1
  getlist()
}
function pusdown (row) {
  data.projectId = row.id
  data.xtshow = true
}
// 获取路由跳转信息
function getRouteInfo (row) {
  router.push({ path: '/lcProject/projectMange/edit', query: { id: row.id } })
}
//分页数
function handleCurrentChange (val) {
  formdata.page = val
  data.page = val
  getlist()
}
function handelClose () {
  data.xtshow = false
}
</script>
<style scoped lang="scss">
@import '../../../assets/style/lc.scss';

::v-deep(.span_color_drag) {
  padding: 7px 16px !important;
  font-size: 12px !important;
}
</style>