<template>
  <div class="content">
    <Title title="监理信息" />
    <!-- 表单 -->
    <u-form
      labelPosition="left"
      :model="formData"
      ref="addressForm"
      labelWidth="120"
      :labelStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.6)' }"
    >
      <!-- 监理单位名称 -->
      <u-form-item label="监理单位名称" borderBottom>
        <u-input
          v-model="formData.unitName"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item>
      <!-- 监理单位地址 -->
      <u-form-item label="监理单位地址" borderBottom>
        <u-input
          v-model="formData.unitAddress"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item>
      <!-- 法人姓名 -->
      <u-form-item label="法人姓名" borderBottom>
        <u-input
          v-model="formData.corporateName"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item>
      <!-- 法人联系方式 -->
      <u-form-item label="法人联系方式" borderBottom>
        <u-input
          v-model="formData.corporatePhone"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item>
      <!-- 社会统一征信代码 -->
      <u-form-item label="社会统一征信代码" borderBottom>
        <u-input
          v-model="formData.socialUnifiedCreditCode"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item>
    </u-form>

    <Title title="监理人员信息" />
    <TableTitle :tableTitleList="tableTitleList" />
    <u-list :height="dataList.length > 0 ? 200 : 10">
      <u-list-item v-for="(item, index) in dataList" :key="index">
        <div class="list-wrapper">
          <div class="list-item">{{ item.name }}</div>
          <div class="list-item" style="width: 50%" />
          <div class="list-item item-see" @click="handleSee(item)">查看</div>
        </div>
      </u-list-item>
    </u-list>
    <u-divider v-if="dataList.length == 0" text="暂无数据"></u-divider>
    <Title title="企业资质" />
    <Preview :dataList="enterpriseQualificationList" />
    <Title title="安全协议书" />
    <Preview :dataList="safetyAgreementList" />

    <Title title="监理规划" />
    <Preview :dataList="supervisorPlanList" />

    <Title title="实施细则" />
    <Preview :dataList="implementationRulesList" />
  </div>
</template>

<script>
import TableTitle from 'pages/component/TableTitle'
import { listAppSupervisor, listSupervisorPerson, selectFile } from '@/api/project'

export default {
  components: { TableTitle },
  props: {
    supervisorUnitId: {
      type: [String, Number],
      default: ''
    },
    proId: {
      type: [String, Number],
      default: ''
    },
    // enterpriseQualificationList: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      // 表单
      formData: {
        unitName: '', // 监理单位名称
        unitAddress: '', // 监理单位地址
        corporateName: '', // 法人姓名
        corporatePhone: '', // 法人练习方式
        socialUnifiedCreditCode: '' // 社会统一征信代码
      },
      tableTitleList: [{ title: '姓名' }, { width: '50%' }, { title: '详情' }],
      dataList: [],
      // 企业资质-列表
      enterpriseQualificationList: [],
      // 安全协议书-列表
      safetyAgreementList: [],
      // 监理规划-列表
      supervisorPlanList: [],
      // 实施细则-列表
      implementationRulesList: []
    }
  },
  watch: {
    proId: {
      handler: function (val) {
        if (val) {
          this.getSupervisorInfo()
          this.getSupervisorPersonInfo()
          this.getEnterpriseQualification()
          this.getSafetyAgreement()
          this.getSupervisorPlan()
          this.getImplementationRules()
        }
      },
      immediate: true
    }
  },
  mounted() {
    console.log('mounted--监理人员基本信息')
    setTimeout(() => {
      console.log('监理人员信息', this.proId)
      console.log('监理人员信息', this.supervisorUnitId)
      // this.getSupervisorInfo()
      // this.getSupervisorPersonInfo()
      // // this.getEnterpriseQualification()
      // this.getSafetyAgreement()
      // this.getSupervisorPlan()
      // this.getImplementationRules()
    }, 200)
  },
  methods: {
    // 查看
    handleSee(item) {
      console.log('查看', item)
      uni.navigateTo({
        url: `/pages/projectInfo/supervisorPersonDetails?id=${item.id}&uuid=${item.uuid}`
      })
    },
    // 获取监理信息
    getSupervisorInfo() {
      const params = {
        proId: this.proId
      }
      listAppSupervisor(params).then(res => {
        console.log('获取监理信息 ->', res)
        if (res.code === 200) {
          this.formData = res.data
        }
      })
    },
    // 获取监理人员信息
    getSupervisorPersonInfo() {
      const params = {
        proId: this.proId,
        supId: this.supervisorUnitId
      }
      listSupervisorPerson(params).then(res => {
        console.log('获取监理人员信息 ->', res)
        this.dataList = res.rows
      })
    },
    // 获取-企业资质
    getEnterpriseQualification() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '1'
      }
      selectFile(params).then(res => {
        console.log('获取-企业资质 ->', res)
        // if (!res.data) return
        if (res.code === 200 && res.data.length > 0) {
          this.enterpriseQualificationList = res.data
          console.log('🚀 ~ selectFile ~ this.获取-企业资质:', this.enterpriseQualificationList)
        }
      })
    },
    // 获取-安全协议书
    getSafetyAgreement() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '2'
      }
      selectFile(params).then(res => {
        console.log('获取-安全协议书 ->', res)
        // if (!res.data) return
        if (res.code === 200 && res.data.length > 0) {
          this.safetyAgreementList = res.data
        }
      })
    },
    // 获取-监理规划
    getSupervisorPlan() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '9'
      }
      selectFile(params).then(res => {
        console.log('获取-监理规划 ->', res)
        // if (!res.data) return
        if (res.code === 200 && res.data.length > 0) {
          this.supervisorPlanList = res.data
        }
      })
    },
    // 获取-实施细则
    getImplementationRules() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '10'
      }
      selectFile(params).then(res => {
        console.log('获取-实施细则 ->', res)
        // if (!res.data) return
        if (res.code === 200 && res.data.length > 0) {
          this.implementationRulesList = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px 30px;

  .list-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .list-item {
      margin: 8px 0;
      width: 25%;
      font-weight: 400;
      font-size: 12px;
      color: #0f274b;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .item-see {
      color: #3888ff;
    }
  }
}
</style>
