<!--
 * @Author: @liulin
 * @Date: 2022-05-20 10:49:11
 * @LastEditTime: 2022-05-20 10:49:12
 * @LastEditors: @liulin
 * @Description: 
 * @FilePath: \cqxy_pm_web\src\views\projectManagent\modules\component\planning_.vue
-->
<template>
<!-- 规划许可 -->
  <div class="table-border">
    <el-table
      :data="data"
      height="250"
      border
      style="width: 100%"
      :header-cell-style="{background: '#f2f2f2', color: '#000'}"
      @row-click="handleRowDBClick"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="establishmentApprovalUnit"
        label="发证机关"
        align="center"
        :show-overflow-tooltip="true"
      >
       <template v-slot="{row}">
          <a
            class="a-link"
            >{{ row.establishmentApprovalUnit }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="establishmentDate"
        label="批复日期"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <ht-table-column
        prop="type"
        label="类型"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ getDictName('gcgh-lx', scope.row.type) }}</span>
        </template>
      </ht-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        align="center"
        width="130"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <div class="page-footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageResult.page"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="pageResult.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageResult.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="规划许可-详情"
      :visible.sync="dialogVisible"
      width="1000px"
    >
      <table align="center">
        <tr>
          <td
            class="bgColor"
            style="width: 150px"
          >发证机关</td>
          <td style="width: 400px">
            {{ formData.establishmentApprovalUnit }}
          </td>
          <td
            class="bgColor"
            style="width: 150px"
          >批复日期</td>
          <td>{{ formData.establishmentDate }}</td>
        </tr>
        <tr>
          <td class="bgColor">类型</td>
          <td>{{ getDictName('gcgh-lx', formData.type) }}</td>
          <td class="bgColor"></td>
          <td></td>
        </tr>
        <!-- <tr>
          <td class="bgColor">附件信息</td>
          <td colspan="3">
            <el-link
              type="primary"
              @click="handleLook(formData.accessoryInfo)"
              v-if="formData.accessoryInfo && formData.accessoryInfo.length > 0"
            >查看附件({{ formData.accessoryInfo.length }}个)</el-link>
            <span v-else>无</span>
          </td>
        </tr> -->
        <tr>
          <td class="bgColor">备注</td>
          <td colspan="3">{{ formData.remarks }}</td>
        </tr>
      </table>
      <dialog-accessory ref="accessory" :accessoryInfo="formData.accessoryInfo" />
      <div class="flexEnd">
        <div class="end">
          <!-- <span>项目名称：{{formData.projectInfo && formData.projectInfo.projectName}}</span> -->
          <span>{{formData.projectInfo && formData.projectInfo.projectManager}}</span>
          <span>{{formData.projectInfo && formData.projectInfo.commencementTime}}</span>
        </div>
      </div>
    </el-dialog>
    <!-- <dialog-accessory ref="accessory" /> -->
  </div>
</template>
<script>
import dialogAccessory from '../dialog/dialogAccessory.vue'
import req from '@/request.js'
export default {
  name: 'PorjectPlanning',
  components: {
    // ProjectInfoDialog,
    dialogAccessory
  },
  props: {
    projectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: [], //表格数据
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '详情',
      formData: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    //附件
    handleLook(obj) {
      this.$refs.accessory.open(obj)
    },
    handleRowDBClick(data) {
      this.dialogVisible = true
      this.formData = data
    },

    handleSizeChange(val) {
      this.pageResult.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pageResult.page = val
      this.loadData()
    },
    loadData() {
      let param = {
        pageBean: {
          ...this.pageResult
        },
        querys: [
          {
            group: 'advance',
            opener: 'LIKE',
            property: 'pm.ID_',
            relation: 'AND',
            value: this.$route.params.id
          },
          {
            group: 'filter',
            operation: 'EQUAL',
            property: 'bpe.TYPE_',
            relation: 'AND',
            value: 1
          }
        ]
      }
      this.$http
        .post(
          '${cqxy}/biz/feasiblePlan/planningApproval/engineering/v1/page',
          param
        )
        .then(
          resp => {
            let response = resp.data.value
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../css/projectCommon.scss';

.table-border {
  padding: 10px;
  height: 500px;
  .el-table {
    height: calc(100% - 60px) !important;
  }
}
.page-footer {
  margin-top: 10px;
  height: 30px;
  float: right;
}
</style>
