<template>
  <div class='merge'>
    <el-button
      type='primary'
      plain
      size="small"
      icon="el-icon-connection"
      @click='openDialog'
    >
      合并项目
    </el-button>

    <el-dialog
      :visible="dialogVisible"
      title="合并项目"
      width="650px"
      :before-close="cancelConfirm"
      destroy-on-close
      :modal="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        label-width="150px"
      >
        <div style="margin-left: 10px">
          <el-button
            type='primary'
            plain
            size="small"
            icon="el-icon-document-copy"
            @click="handleMerged"
          >
            合并为已有项目
          </el-button>
          <el-button
            type='primary'
            plain
            size="small"
            icon="el-icon-copy-document"
            @click='handleMergeNew'
          >
            合并成新项目
          </el-button>
        </div>
        <el-main
          style="padding: 10px; height: 400px"
          v-if='merged'
        >
          <ht-table
            @load="loadData"
            :data="data"
            :selectable="false"
            :highlightCurrentRow="true"
            :page-result="pageBean"
            quick-search-props="projectName,projectId"
            ref="htTable"
            :show-export="false"
            :show-custom-column="false"
            @row-click="rowClick"
          >
            <template v-slot:toolbar>
              <el-tooltip
                effect="dark"
                content="鼠标覆盖一条数据点击进行选取"
                placement="right"
              >
                <el-tag type="info">
                  <span class="el-icon-question">
                    提示
                  </span>
                </el-tag>
              </el-tooltip>
            </template>
            <template>
              <el-table-column
                type="selection"
                align="center"
                width="45"
                v-if="!this.single"
              ></el-table-column>
              <el-table-column
                align="center"
                width="50"
                v-if="this.single"
              >
                <template slot-scope="scope">
                  <el-radio
                    v-model="selectedId"
                    :label="scope.row.id"
                  ></el-radio>
                </template>
              </el-table-column>
              <ht-table-column
                type="index"
                width="50"
                align="center"
                label="序号"
              />
              <!-- <el-table-column
                prop="projectCode"
                label="项目代码"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column> -->
              <el-table-column
                prop="projectName"
                label="项目名称"
                align="center"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <ht-table-column
                prop="projectType"
                label="项目类型"
                align="center"
                :show-overflow-tooltip="true"
                :filters="getDictData('xmgl-xmlx')"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('xmgl-xmlx', row.projectType) }}</div>
                </template>
              </ht-table-column>
              <!-- <ht-table-column
                prop="projectModel"
                label="建设模式"
                align="center"
                :show-overflow-tooltip="true"
                :filters="getDictData('xmgl-jsms')"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('xmgl-jsms', row.projectModel) }}</div>
                </template>
              </ht-table-column> -->
              <!-- <ht-table-column
                prop="projectStatus"
                label="项目状态"
                align="center"
                :show-overflow-tooltip="true"
                :filters="getDictData('xmgl-xmzt')"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('xmgl-xmzt', row.projectStatus) }}</div>
                </template>
              </ht-table-column> -->
            </template>
          </ht-table>
        </el-main>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if='merged'
          type="primary"
          @click="submitMerge"
          element-loading-text="拼命导入中"
          v-loading.fullscreen.lock="fullscreenLoading"
        >确 定</el-button>
        <el-button @click="cancelConfirm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    htTable: {
      type: Object
    },
    row: {
      type: Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      single: true,
      merged: false,
      fullscreenLoading: false,
      selectedId: '',
      activeRow: {},
      pageBean: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      data: [],
      elTable: null,
      ids: []
    }
  },
  methods: {
    openDialog() {
      this.ids = []
      this.elTable = this.htTable
      if (this.htTable.$refs && this.htTable.$refs.htTable) {
        this.elTable = this.htTable.$refs.htTable
      }
      console.log(this.elTable.selection, this.row)
      if (
        this.elTable &&
        this.elTable.selection &&
        this.elTable.selection.length == 0 &&
        !this.row
      ) {
        this.$message.error('请至少选择一条数据')
        return
      }
      if (this.row) {
        this.ids.push(this.row.id)
      } else {
        for (let item of this.elTable.selection) {
          this.ids.push(item.id)
        }
      }
      this.dialogVisible = true
    },
    cancelConfirm() {
      this.dialogVisible = false
      this.merged = false
    },
    handleMerged() {
      this.merged = true
    },
    submitMerge() {
      this.fullscreenLoading = true
      let param = {
        parentId: this.selectedId,
        projectIds: this.ids.join(',')
      }
      this.$http
        .post('${cqxy}/biz/projectManagement/pm/v1/mergeItems', param)
        .then(res => {
          if (res.data.state) {
            this.$emit('load')
            this.dialogVisible = false
            this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
          this.fullscreenLoading = false
        })
    },
    handleMergeNew() {
      this.$emit('mergeNewProject', this.ids.join(','))
    },
    rowClick(row) {
      this.activeRow = row
      this.selectedId = row.id
    },
    loadData(param, cb) {
      this.$http
        .post('${cqxy}/biz/projectManagement/pm/v1/page', param)
        .then(
          resp => {
            let response = resp.data.value
            this.data = response.rows
            this.pageBean = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.merge {
  margin-left: 10px;
}
</style>