<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>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            label="服务"
            name="first"
            v-if="parameter.applicationType == 1"
          ></el-tab-pane>
          <el-tab-pane
            label="服务"
            v-if="parameter.applicationType == 2"
            name="third"
          ></el-tab-pane>
          <el-tab-pane
            label="工程"
            v-if="parameter.applicationType == 2"
            name="second"
          ></el-tab-pane>
          <el-tab-pane
            label="物资或设备"
            v-if="parameter.applicationType == 2"
            name="four"
          ></el-tab-pane>
        </el-tabs>
        <div class="materialInformation">
          <!-- 服务 -->
          <div class="common-page-shadow" v-if="parameter.applicationType == 1">
            <div class="bbsl-table-search">
              <el-form v-model="queryParam" :inline="true">
                <el-form-item label="服务名称">
                  <el-input
                    size="small"
                    v-model="querys[1].value"
                    clearable
                    placeholder="请输入服务名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="服务时间范围">
                  <el-date-picker
                    v-model="querys[2].value"
                    type="daterange"
                    range-separator="至"
                    size="small"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </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: '100%'}"
              :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="matName"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务名称"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matOtherExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务内容"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matBaseExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务范围"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="serviceStartTime"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务开始时间"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="serviceEndTime"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务结束时间"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matBaseExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="基础扩展"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                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
            class="common-page-shadow"
            v-if="parameter.applicationType == 2 && activeName == 'third'"
          >
            <div class="bbsl-table-search">
              <el-form v-model="queryParam" :inline="true">
                <el-form-item label="服务名称">
                  <el-input
                    size="small"
                    v-model="querys[1].value"
                    clearable
                    placeholder="请输入服务名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="服务时间范围">
                  <el-date-picker
                    v-model="querys[2].value"
                    type="daterange"
                    range-separator="至"
                    size="small"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </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: '100%'}"
              :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="matName"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务名称"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matOtherExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务内容"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matBaseExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务范围"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="serviceStartTime"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务开始时间"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="serviceEndTime"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="服务结束时间"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="matBaseExt"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="基础扩展"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                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
            class="common-page-shadow"
            v-if="parameter.applicationType == 2 && activeName == 'second'"
          >
            <div class="bbsl-table-search">
              <el-form v-model="queryParam" :inline="true">
                <el-form-item label="项目或费用名称">
                  <el-input
                    size="small"
                    v-model="querys[1].value"
                    clearable
                    placeholder="请输入项目或费用名称"
                  ></el-input>
                </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: '100%'}"
              :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="matName"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="项目或费用名称"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="buildingArea"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="建筑面积"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="constructionEngineering"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="建筑工程及公用系统(万元)"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="equipmentProcurement"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="设备购置及安装(万元)"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="otherExpenses"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="其他费用(万元)"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                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
            class="common-page-shadow"
            v-if="parameter.applicationType == 2 && activeName == 'four'"
          >
            <div class="bbsl-table-search">
              <el-form v-model="queryParam" :inline="true">
                <el-form-item label="物资或设备名称">
                  <el-input
                    size="small"
                    v-model="querys[1].value"
                    clearable
                    placeholder="请输入物资或设备名称"
                  ></el-input>
                </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: '100%'}"
              :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 label="设备名称" min-width="150" prop="matName">
              </el-table-column>
              <el-table-column label="设备类型" min-width="150" prop="type">
                <template slot-scope="scope">
                  {{ getDictName('xmsblx', scope.row.type) }}
                </template>
              </el-table-column>
              <el-table-column label="规格型号" min-width="150" prop="matSpec">
              </el-table-column>
              <el-table-column
                label="厂家/制造者"
                min-width="170"
                prop="manufacturer"
              >
              </el-table-column>
              <el-table-column label="计量单位" min-width="120" prop="matUnit">
              </el-table-column>
              <el-table-column label="数量" min-width="140" prop="matNum">
              </el-table-column>
              <el-table-column
                label="单台估价(万元)"
                min-width="150"
                prop="singleValuation"
              >
              </el-table-column>
              <el-table-column
                label="总估价(万元)"
                min-width="150"
                prop="totalValuation"
              >
              </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'
import utils from '@/utils.js'
export default {
  name: 'purchaseMaterial', // 排查计划明细
  props: {
    useOrgList: Array,
  },
  data() {
    return {
      showTroubleshooting: false, // 控制弹层显示与隐藏
      multipleSelection: [],
      loading: false,
      selectedValue: [],
      activeName: 'first',
      querys: [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'projectLedgerId',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'matName',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'BETWEEN',
          parentGroup: '',
          property: 'serviceStartTime',
          relation: 'AND',
          value: '',
        },
        // {
        //   group: 'main',
        //   operation: 'EQUAL',
        //   parentGroup: '',
        //   property: 'serviceStartTime',
        //   relation: 'AND',
        //   value: '',
        // }
      ],
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
      },
      parameter: {},
      url: '',
    }
  },
  mixins: [TableMixin],
  created() {},
  methods: {
    rowKey(row) {
      return row.id
    },
    handleClick() {
      if (this.activeName == 'second') {
        this.url = '/engineeringProjectDetail/v1/pageAll'
        this.loadData()
        this.tableData.forEach((item) => {
          item.detailType = 2
        })
      }
      if (this.activeName == 'third') {
        this.url = '/serviceProjectDetail/v1/pageAll'
        this.loadData()
        this.tableData.forEach((item) => {
          item.detailType = 1
        })
      }
    },
    //搜索
    handleSearch() {
      this.loadData()
    },
    //重置
    handleReset() {
      this.querys[0].value = ''
      this.querys[1].value = ''
      this.querys[2].value = ''
      this.loadData()
    },
    //显示弹框
    add(row) {
      if (row) {
        this.parameter = row
      }
      if (this.parameter.applicationType == 1) {
        this.activeName = 'first'
        this.url = '/serviceProjectDetail/v1/pageAll'
      }
      if (this.parameter.applicationType == 2) {
        this.activeName = 'third'
        this.url = '/serviceProjectDetail/v1/pageAll'
        // this.url = '/engineeringProjectDetail/v1/pageAll'
      }
      this.querys[0].value = this.parameter.projectLedgerId
      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])
      }
      this.$http.post('${portal}' + this.url, this.queryParam).then((res) => {
        this.queryParam.pageBean.total = res.data.value.total
        this.tableData = res.data.value.rows
        this.tableData.forEach((item) => {
          if (
            this.parameter.applicationType == 2 &&
            this.activeName == 'third'
          ) {
            item.detailType = 1
          }
          if (
            this.parameter.applicationType == 2 &&
            this.activeName == 'second'
          ) {
            item.detailType = 2
          }
          if (
            this.parameter.applicationType == 1 &&
            this.activeName == 'first'
          ) {
            item.detailType = 1
          }
        })
        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
    },
    // 点击关闭按钮
    handleClose() {
      this.$refs.multipleSelection.clearSelection()
      this.showTroubleshooting = false
      this.activeName = 'first'
    },
    // 保存按钮
    handleSave() {
      let list = []
      this.multipleSelection.forEach((item) => {
        list.push(item)
      })
      list = Array.from(new Set(list.map(JSON.stringify)), JSON.parse)
      this.$emit('addDetail', 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()
    },
    // 获取字典值翻译
    getDictName(code, value) {
      return utils.getDictName(code, value)
    },
  },
}
</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% - 300px);
    box-sizing: border-box;
    .common-search-container {
      height: 80px;
    }
  }
}
/deep/.el-tabs__header {
  margin-bottom: 0px;
}
</style>
