<template>
    <div>
      <el-dialog
        :close-on-click-modal="false"
        title="选择项目"
        :visible.sync="showTroubleshooting"
        width="80%"
        :loading="loading"
        :close-on-press-escape="false"
        :before-close="handleClose"
        top="6vh"
      >
        <template>
          <div class="materialInformation">
            <div class="common-page-shadow">
              <div class="bbsl-table-search">
                <el-form v-model="queryParam" :inline="true">
                    <el-form-item label="项目名称">
          <el-input
            size="small"
            v-model="querys[0].value"
            clearable
            placeholder="请输入项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目负责人">
          <el-input
            size="small"
            v-model="querys[1].value"
            clearable
            placeholder="请输入项目负责人"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <dict-select
            dictCode="xmlx"
            :hasDefaultOption="true"
            clearable
            size="small"
            v-model="querys[2].value"
            placeholder="请选择项目类型"
          />
        </el-form-item>
                  <el-form-item>
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-search"
                      @click="handleSearch"
                      >搜索</el-button
                    >
                    <el-button
                      size="small"
                      icon="el-icon-refresh"
                      @click="handleReset"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <el-table
                ref="multipleSelection"
                v-loading="loading"
                border
                size="mini"
                :data="tableData"
                height="400px"
                :row-key="rowKey"
                :style="{width: '100%', height: '500px'}"
                :max-height="tableMaxHeight"
                :cell-style="{'text-align': 'center'}"
                :header-cell-style="{'text-align': 'center'}"
                @selection-change="handleSelectionChange"
                @select="tableSelect"
              >
                <el-table-column
                  type="selection"
                  width="55"
                  :reserve-selection="true"
                />
                <el-table-column type="index" width="55" label="序号" />
                <el-table-column
              prop="purchasingOrgName"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="填报单位"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="projectCode"
              min-width="10%"
              show-overflow-tooltip
              label="项目编号"
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="projectName"
              min-width="10%"
              label="项目名称"
              show-overflow-tooltip
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="项目类型"
              resizable
            >
              <template v-slot="{row}">
                {{ getDictName('xmlx', row.projectType) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="constructionStartTime"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="开始时间"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="constructionCompletionTime"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="结束时间"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="investment"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="预算总投资（万元）"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="projectUserName"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="项目负责人 "
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="projectUserMobile"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="联系电话 "
              resizable
            >
            </el-table-column>
              </el-table>
              <div style="float:right;margin-top:10px">
                <el-pagination
                  ref="paginationPanel"
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="queryParam.pageBean.page"
                  :page-sizes="[50, 100, 200, 500,1000]"
                  :page-size="queryParam.pageBean.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="queryParam.pageBean.total"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSave">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {TableMixin} from '@/mixins/tableMixin'
  import basicData from '@/api/basicData'
  export default {
    name: 'CmgtSaftyDangerCheckplanFormDialogTroubleshooting', // 排查计划明细
    props: {
      useOrgList: Array
    },
    data() {
      return {
        showTroubleshooting: false, // 控制弹层显示与隐藏
        multipleSelection: [],
        loading:false,
        selectedValue: [],
        treeData: [],
        matIfPlat:'',
        defaultProps: {
          children: 'children',
          id: 'code',
          label: 'name'
        },
        querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'projectName',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'projectUserName',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'projectType',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'purchasingOrgId',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'projectType',
          relation: 'AND',
          value: '',
        }
        ],
        queryParam: {
          pageBean: {
            page: 1,
            pageSize: 50,
            total: 0
          }
        },
        projectType:''
      }
    },
    mixins: [TableMixin],
    created() {
        this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
        this.querys[3].value = this.currentUser.org[0].orgId
    },
    methods: {
      rowKey(row) {
        return row.id
      },
      //搜索
      handleSearch() {
        this.loadData()
      },
      //重置
      handleReset() {
        this.querys[0].value = ''
        this.querys[1].value = ''
        this.querys[2].value = ''
        this.querys[3].value = this.currentUser.org[0].orgId
        this.querys[4].value = this.projectType
        this.loadData()
      },
      //显示弹框
      add(row) {
        console.log(row,111);
        this.projectType = row.projectType
        this.querys[4].value = this.projectType
        this.showTroubleshooting = true
        this.$nextTick(function() {
          this.useOrgList.forEach(item => {
            if (this.tableData.some(data => data.id === item.id)) {
              this.$refs.multipleSelection.toggleRowSelection(item, true) //这样就可以了
            } else {
              this.$refs.multipleSelection.toggleRowSelection(item, true) //这样就可以了
            }
          })
        })
        this.loadData()
      },
  
      // 获取list
      loadData() {
        this.loading = true
        this.tableData = []
        this.queryParam.querys = []
        if (this.querys[0].value) {
          this.queryParam.querys.push(this.querys[0])
        }
        if (this.querys[1].value) {
          this.queryParam.querys.push(this.querys[1])
        }
        if (this.querys[2].value) {
          this.queryParam.querys.push(this.querys[2])
        }
        if (this.querys[3].value) {
          this.queryParam.querys.push(this.querys[3])
        }
        if (this.querys[4].value) {
          this.queryParam.querys.push(this.querys[4])
        }
        this.$http.post('${portal}/projectLedger/v1/pageAll',this.queryParam).then(res=>{
          this.queryParam.pageBean.total = res.data.value.total
          this.tableData = res.data.value.rows
          this.$set(this.tableData)
          this.loading = false
        })
      },
      tableSelect(rows, row) {
        let selected = rows.length && rows.indexOf(row) !== -1
        if (!selected) {
          this.selectedValue = rows
        } else {
          this.selectedValue = []
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length > 1) {
          this.$refs.multipleSelection.toggleRowSelection(
              this.multipleSelection[0],
              false
          )
      }
      },
      // 点击关闭按钮
      handleClose() {
        this.$refs.multipleSelection.clearSelection()
        this.showTroubleshooting = false
      },
      // 保存按钮
      handleSave() {
        let list = []
        this.multipleSelection.forEach(item => {
          list.push(item)
        })
        this.$emit('load', list)
        this.handleClose()
      },
      handleCurrentChange(page) {
        this.queryParam.pageBean = {...this.queryParam.pageBean, page}
        this.loadData()
      },
      handleSizeChange(pageSize) {
        this.queryParam.pageBean = {...this.queryParam.pageBean, pageSize}
        this.loadData()
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .dialog-footer {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .materialInformation {
    display: flex;
    width: 100%;
    height: 100%;
    .common-page-shadow {
      height: calc(100% - 160px);
      box-sizing: border-box;
      .common-search-container {
        height: 80px;
      }
    }
  }
  </style>
  