<template>
  <div class="main">
    <div
      class="content"
      v-loading="loading"
      v-if="
        Object.keys(projectInfo).length !== 0 ||
        Object.keys(data).length !== 0 ||
        Object.keys(contractInfo).length !== 0 ||
        contractInfoItem.length !== 0 ||
        tableData.length !== 0
      "
    >
      <div
        class="proijectInfo bgc"
        v-if="Object.keys(projectInfo).length !== 0"
      >
        <span class="title">
          <p class="icon"></p>
          <p class="text">项目信息</p>
        </span>
        <el-descriptions class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 项目名称 </template>
            {{ projectInfo.projectName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 项目代码 </template>
            {{ projectInfo.projectCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 项目状态 </template>
            {{ getDictName('xmgl-xmzt', projectInfo.projectStatus) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 项目负责人 </template>
            {{ projectInfo.projectManager }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 项目金额 </template>
            {{ projectInfo.projectMoney }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 工程属性 </template>
            {{ getDictName('xmgl-gcsx', projectInfo.projectNature) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 项目类型 </template>
            {{ getDictName('xmgl-xmlx', projectInfo.projectType) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 业主单位 </template>
            {{ projectInfo.ownerUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 责任单位 </template>
            {{ projectInfo.responsibleUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 施工单位 </template>
            {{ projectInfo.constructUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 施工进度 </template>
            {{ projectInfo.constructionProgress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 合同金额 </template>
            {{ projectInfo.contractAmount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 开工时间 </template>
            {{ projectInfo.commencementTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 完工时间 </template>
            {{ projectInfo.completionTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="pageInfo bgc" v-if="Object.keys(data).length !== 0">
        <span class="title">
          <p class="icon"></p>
          <p class="text">
            {{ pageInfo.functionName ? pageInfo.functionName : '流程信息' }}
          </p>
        </span>
        <detail :data="data" :functionCode="pageInfo.functionCode" />
      </div>
      <div class="bgc" v-if="Object.keys(contractInfo).length !== 0">
        <span class="title">
          <p class="icon"></p>
          <p class="text">合同信息</p>
        </span>
        <el-descriptions class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 签订日期 </template>
            {{ contractInfo.contractDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 合同类型 </template>
            {{ getDictName('htgl-htlb', contractInfo.type) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 合同编号 </template>
            {{ contractInfo.contractNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 合同名称 </template>
            {{ contractInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 招标方式 </template>
            {{ getDictName('zbfs', contractInfo.biddingChargeType) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 合同金额 </template>
            {{ contractInfo.contractAmount }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 保证金 </template>
            {{ contractInfo.retentionMoney }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 甲方单位 </template>
            {{ contractInfo.firstParty }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 乙方单位 </template>
            {{ contractInfo.secondParty }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 丙方单位 </template>
            {{ contractInfo.thirdParty }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="bgc" v-if="contractInfoItem.length !== 0">
        <span class="title">
          <p class="icon"></p>
          <p class="text">合同工程量清单</p>
        </span>
        <el-table
          :data="contractInfoItem"
          border
          stripe
          style="max-width: 100%; min-width: 100%"
        >
          <el-table-column prop="name" label="科目名称"> </el-table-column>
          <el-table-column prop="subjectName" label="子科目名称">
          </el-table-column>
          <el-table-column prop="price" label="单价(元)"> </el-table-column>
          <el-table-column prop="amount" label="数量"> </el-table-column>
          <el-table-column prop="monty" label="金额(元)"> </el-table-column>
          <el-table-column prop="spec" label="单位"> </el-table-column>
          <el-table-column prop="remarks" label="备注"> </el-table-column>
        </el-table>
      </div>
      <div class="accessoryInfo bgc" v-if="tableData.length !== 0">
        <span class="title">
          <p class="icon"></p>
          <p class="text">附件信息</p>
        </span>
        <el-table :data="tableData" height="180" border style="width: 100%">
          <el-table-column
            prop="name"
            label="文件名称"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="文件类型"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template v-slot="{row}">
              <span v-if="row.type == 1">图片</span>
              <span v-if="row.type == 2">文档</span>
              <span v-if="row.type == 3">压缩文件</span>
              <span v-if="row.type == 4">视频</span>
              <span v-if="row.type == 5">其它</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="文件大小"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="createName"
            label="上传人"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传时间"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-empty
      v-if="empty"
      class="bgc"
      style="height: 100%"
      :image-size="200"
    ></el-empty>
  </div>
</template>
<script>
import detail from './detial.vue'
export default {
  components: {
    detail,
  },
  data() {
    return {
      tableData: [],
      projectInfo: {},
      pageInfo: {},
      data: {},
      contractInfo: {},
      contractInfoItem: [],
      params: {
        pageBean: {
          page: -1,
          pageSize: 10,
          showTotal: true,
        },
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            property: 'SOURCE_ID_',
            relation: 'AND',
            value: '',
          },
        ],
      },
      loading: false,
      empty: false,
    }
  },
  created() {
    this.pageInfo = window.opener['filter']
    console.log(this.pageInfo, 'ttttt')
    this.getDetailsData()
  },
  methods: {
    //查看
    preview(row) {
      console.log(row)
    },
    //下载
    download(row) {
      let ids = row.id
      let bizPath = 'default'
      let formData = new FormData()
      formData.append('bizPath', bizPath)
      formData.append('ids', ids)
      req
        .downloadPostCopy(
          '${cqxy}/biz/universal/accessory/v1/minIoAllDownFile',
          formData
        )
        .then((res) => {
          console.log(res)
        })
    },
    getDetailsData() {
      this.loading = true
      if (this.pageInfo.functionCode !== 'Accessory') {
        this.$http
          .post(
            '${cqxy}' + this.pageInfo.detailsApiUrl + this.pageInfo.bizDataId
          )
          .then((res) => {
            if (res.data.state) {
              let data = res.data.value
              this.data = data
              this.projectInfo = data.projectInfo
              if (data.accessoryInfo && data.accessoryInfo.length !== 0) {
                this.tableData = data.accessoryInfo
              }
              if (data.contract) {
                this.contractInfo = data.contract
              }
              if (data.contractItem && data.contractItem.length !== 0) {
                this.contractInfoItem = data.contractItem
              }
              this.empty = false
            } else {
              this.empty = true
            }
            this.loading = false
          })
      } else {
        this.params.querys[0].value = this.pageInfo.fileSourceId
        this.$http
          .post('${yhxt}' + this.pageInfo.tableApiUrl, this.params)
          .then((res) => {
            if (res.data.state) {
              let data = res.data.value
              this.tableData = data.rows
              this.empty = false
            } else {
              this.empty = true
            }
            this.loading = false
          })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  overflow: auto;
}
.bgc {
  background-color: #fff;
  padding: 30px;
}
.title {
  display: flex;
  align-items: center;
  .text {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
  }
  .icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-image: url('../../assets/img/w-jbxx-icon.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.content {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .pageInfo {
    margin: 30px 0;
  }
}
/deep/ .el-descriptions {
  margin-top: 10px;
}
</style>
