<template>
  <!--下推 -->
  <div class="xtdiaog">
    <el-dialog title="下推列表" :model-value="xtshow" width="750px" :before-close="handleClose" :center="false">
      <div>
        <div class="l-button" @click="handlePush('check')">下推选中</div>
        <div class="l-button" @click="handleClose">取消</div>
      </div>
      <div>
        <el-table :data="data.tableData" style="width: 100%;margin-top: 20px;overflow-y: auto;" border
          header-row-class-name="xthead" class="xttb" @selection-change="handleSelectionChange" ref="multipleTable"
          @select-all="selectAllChange" :height="550" @select=tableSelect>
          <el-table-column type="selection" :selectable="selectable" width="55" align="center" />
          <el-table-column prop="name" label="任务名称" width="180">
            <template #default="scope">
              <span v-if="scope.row.examine_status == 20" style="color: #ccc;">{{ scope.row.name }}</span>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否关键步骤" width="120" align="center">
            <template #default="scope">
              <div>
                <el-checkbox v-model="scope.row.checked" size="large" label=""
                  :disabled="scope.row.examine_status == 20" />
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <div style="display: flex;flex-direction: row;align-items: center;">
                <el-icon :size="20" color="#909399">
                  <edit />
                </el-icon>任务负责人
              </div>
            </template>
            <template #default="scope">
              <div @click="getRowCol(scope.row, scope.column, scope.$index, 'leaderUser')" class="selectdiv">
                <el-select v-model="scope.row.leader_user_id" placeholder="请选择" filterable remote
                  :remote-method="remoteMethod" :disabled="scope.row.examine_status == 20"
                  v-if="scope.row.isleaderUserIdShow">
                  <el-option v-for="item in data.userlist" :key="item.id" :label="item.nickname" :value="item.id" />
                </el-select>
                <div v-else>
                  <span v-if="scope.row.examine_status == 20" style="color: #ccc;">{{ fullName(scope.row.leader_user_id)
                  }}</span>
                  <span v-else> {{ fullName(scope.row.leader_user_id) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <div style="display: flex;flex-direction: row;align-items: center;">
                <el-icon :size="20" color="#909399">
                  <edit />
                </el-icon>要求完成时间
              </div>
            </template>
            <template #default="scope">
              <div @click="getRowCol(scope.row, scope.column, scope.$index, 'downTime')" class="selectdiv">
                <el-date-picker v-model="scope.row.required_time" type="date" placeholder="选择日期"
                  v-if="scope.row.isdownTimeShow" value-format="YYYY/MM/DD"
                  :disabled="scope.row.examine_status == 20"></el-date-picker>
                <div v-else>
                  <span v-if="scope.row.examine_status == 20" style="color: #ccc;">{{ scope.row.required_time }}</span>
                  <span v-else> {{ scope.row.required_time }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name= "LDialog">
import { getUsers } from '../../utils/lc'
import { defineEmits, getCurrentInstance, reactive, defineProps, computed } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

/* 数据层 */
const { proxy } = getCurrentInstance()
const pop = defineProps(['projectId', 'xtshow'])
let data = reactive({
  dateTime: null,
  tableData: [],
  project_id: '',
  userlist: [],
  userlistall: [],
  selecttag: true,//判断单前行是否选择还是取消选中
  multipleSelection: []// 表格选中
})
/* 初始化 */
getUsers({ page: 1, size: 9999999, nickname: '' }).then(res => {
  res.data.forEach(it => {
    it.isleaderUserIdShow = false
    it.isdownTimeShow = false
  })
  data.userlist = JSON.parse(JSON.stringify(res.data))
  data.userlistall = JSON.parse(JSON.stringify(res.data))
})
const fullName = computed(() => {
  return function (id) {
    if (id && data.userlistall && data.userlistall.length > 0) {
      let item = data.userlistall.filter(it => {
        return it.id == id
      })
      return item && item.length > 0 ? item[0].nickname : ''
    }
  }
})
getlist()
/* 方法层 */
const emits = defineEmits(['update:xtshow', 'getinit'])
function getRowCol (row, column, index, type) {
  data.tableData.forEach(it => {
    it.isleaderUserIdShow = false
    it.isdownTimeShow = false
  })
  data.userlist = JSON.parse(JSON.stringify(data.userlistall))
  if (type == 'downTime') {
    data.tableData[index].isdownTimeShow = true
  }
  if (type == 'leaderUser') {
    data.tableData[index].isleaderUserIdShow = true
  }
}
function remoteMethod (query) {
  // console.log('yuancheng', query)
  getUsers({ page: 1, size: 9999999, nickname: query }).then(res => {
    res.data.forEach(it => {
      it.isleaderUserIdShow = false
      it.isdownTimeShow = false
    })
    data.userlist = JSON.parse(JSON.stringify(res.data))
  })
}
//获取即将需要下推的任务
function getlist () {
  proxy.$http.showLoading(false).get('project/project/push_init_data', { project_id: pop.projectId }).then(res => {
    let isshowlist = []
    if (res.errno == 200) {
      res.data.forEach(it => {
        it.required_time = it.required_time_text
        it.checked = it.committed_step == 1 ? true : false
        if (it.is_show == 1) {
          isshowlist.push(it)
        }
      })
      data.tableData = res.data
      if (isshowlist && isshowlist.length > 0) {
        setTimeout(() => {
          data.selecttag = true
          isshowlist.forEach(it => {
            proxy.$refs.multipleTable.toggleRowSelection(it, true)
          })
        }, 800)
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.errmsg
      })
    }
  })
}
// 禁止勾選
function selectable (row, index) {
  return row.examine_status !== 20
}
function tableSelect (rows, row) {
  data.multipleSelection = rows
  let selected = rows.length && rows.indexOf(row) !== -1
  data.selecttag = selected
  if (!selected) {
    cancelchecked(data.multipleSelection, row.basetask_id)
  }
  console.log(selected)  // true就是选中，0或者false是取消选中
  // console.log(selected, data.selecttag)  // true就是选中，0或者false是取消选中
  // 判断 知识产权需求=知识产权申请   认证需求=认证    包装原型=包装设计
  tbchecked('ZSCQXQ', 'ZSCQSQ', rows, row)
  tbchecked('RZXQ', 'RZ', rows, row)
  tbchecked('BZYX', 'BZSJ', rows, row)
  proxy.$refs.multipleTable.doLayout();
}
// 同步选择 知识产权需求=知识产权申请   认证需求=认证    包装原型=包装设计
function tbchecked (value1, value2, rows, row) {
  if (row.code == value1 || row.code == value2) {
    let zscheck = []
    zscheck = rows ? rows.filter(it => { return it.code == value1 || it.code == value2 }) : []
    if (zscheck && zscheck.length == 1 && data.selecttag) {
      data.tableData.forEach(it => {
        if (it.code == value1 || it.code == value2) {
          setTimeout(() => {
            proxy.$refs.multipleTable.toggleRowSelection(it, true)
          }, 800)
        }
      })
    }
    if ((row.code == value1 || row.code == value2) && !data.selecttag) {
      if (zscheck.length !== 0) {
        data.tableData.forEach(it => {
          if (it.code == value1 || it.code == value2) {
            data.multipleSelection.forEach((it, index) => {
              if (it.code == value1 || it.code == value2) {
                data.multipleSelection.splice(index, 1)
              }
            })
            proxy.$refs.multipleTable.toggleRowSelection(it, false)
          }
        })
      }
    }
  }
}

// 表格选择
function handleSelectionChange (val, tag) {
  data.multipleSelection = val
}
// 选中全部
function selectAllChange (value) {
  let checkdids = value.map(v => v.basetask_id)
  data.tableData.forEach(it => {
    if (!checkdids.includes(it.basetask_id) && it.examine_status !== 20) {
      it.leader_user_id = null
      it.checked = false
    }
  })
}
// 下推去掉勾选同步去掉是否管家步骤和负责人
function cancelchecked (list, basetask_id) {
  let checkdids = list.map(v => v.basetask_id)
  data.tableData.forEach(it => {
    if (!checkdids.includes(it.basetask_id) && basetask_id == it.basetask_id) {
      it.leader_user_id = null
      it.checked = false
    }
  })
}
//关闭的点击事件
function handleClose () {
  emits('update:xtshow', false)
}
// 按鈕下推
function handlePush (type) {
  let newPushDate = []
  let tag = true
  if (type == 'check' && data.multipleSelection.length > 0) {
    data.multipleSelection.forEach(it => {
      if (it.checked) {
        it.committed_step = 1
      } else {
        it.committed_step = 0
      }
      newPushDate.push(it)
      if (!it.leader_user_id) {
        tag = false
      }
    })
    if (tag) {
      proxy.$http.showLoading(false).post('project/project/push', { task: newPushDate, project_id: pop.projectId }).then(res => {
        if (res.errno == 200) {
          getlist()
          emits('update:xtshow', false)
          emits('getinit')
          ElMessageBox.confirm(res.errmsg, '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                done()
              }
            }
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.errmsg
          })
        }
      })
    } else {
      ElMessage({
        type: 'error',
        message: '请选择任务负责人'
      })
    }
  } else {
    ElMessage({
      type: 'error',
      message: '请选择要下推的数据'
    })
  }
}
</script>
<style  scoped lang="scss">
@import '@/assets/style/lc.scss';

.xthead {
  background: red;
}

.xtdiaog {
  ::v-deep(.el-dialog__body) {
    padding: 0px 16px 30px 16px;
  }
}

.xttb {
  ::v-deep(.el-table__cell) {
    padding: 5px 0 !important;
  }
}

.selectdiv {
  width: 190px;
  height: 40px;
  font-size: 16px important;
  display: flex;
  align-items: center;
}
</style>

