<template>
  <div class="content">
    <Title :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="label" borderBottom>
        <u-input
          v-model="formData.consName"
          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.address"
          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-item label="承包商负责人" borderBottom>
        <u-input
          v-model="formData.commUserName"
          disabled
          disabledColor="#fff"
          border="none"
          inputAlign="right"
          fontSize="12"
          style="font-weight: 500"
        />
      </u-form-item> -->
    </u-form>

    <Title title="企业资质" />
    <Preview :dataList="preDataList" />
    <Title title="四措两案" />
    <Preview :dataList="fourMeasures" />
    <Title title="安全协议书" />
    <Preview :dataList="safetyAgreementList" />
    <div v-if="!isSubcontractor">
      <Title title="分包商信息" />
      <TableTitle :tableTitleList="subcontractorTitleList" />
      <u-list :height="subcontractorDateList.length > 0 ? 200 : 10">
        <u-list-item v-for="(item, index) in subcontractorDateList" :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="seeSubcontractor(item)">查看</div>
          </div>
        </u-list-item>
      </u-list>
      <u-divider v-if="subcontractorDateList.length == 0" text="暂无数据"></u-divider>
    </div>

    <Title title="施工人员信息" />
    <TableTitle :tableTitleList="buildersTitleList" />
    <u-list :height="buildersList.length > 0 ? 200 : 10">
      <u-list-item v-for="(item, index) in buildersList" :key="index">
        <div class="list-wrapper">
          <div class="list-item">{{ item.name }}</div>
          <div class="list-item" style="width: 50%">{{ item.postName }}</div>
          <div class="list-item item-see" @click="seeBuilder(item)">查看</div>
        </div>
      </u-list-item>
    </u-list>
    <u-divider v-if="buildersList.length == 0" text="暂无数据"></u-divider>

    <div v-if="!isSubcontractor">
      <Title title="工器具信息" />
      <TableTitle :tableTitleList="toolsTitleList" />
      <u-list :height="toolList.length > 0 ? 200 : 10">
        <u-list-item v-for="(item, index) in toolList" :key="index">
          <div class="list-wrapper">
            <div class="list-item">{{ item.name }}</div>
            <div class="list-item" style="width: 50%">{{ item.equipType }}</div>
            <div class="list-item item-see" @click="seeTool(item)">查看</div>
          </div>
        </u-list-item>
      </u-list>
      <u-divider v-if="toolList.length == 0" text="暂无数据"></u-divider>
    </div>
  </div>
</template>

<script>
import TableTitle from 'pages/component/TableTitle'
import {
  getAppConsDetailsInfo,
  getSubList,
  getConsPersonList,
  getConsEquipList,
  selectFile,
  getSubDetailsInfo,
  getSubPersonList
} from '@/api/project'
export default {
  components: { TableTitle },
  props: {
    title: {
      type: String,
      default: '承包商基本信息'
    },
    label: {
      type: String,
      default: '承包商单位名称'
    },
    isSubcontractor: {
      type: Boolean,
      default: false
    },
    proId: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: [String, Number],
      default: ''
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        uuid: '',
        // 承包商/分包商单位名称
        consName: '',
        // 法定代表人
        corporateName: '',
        // 征信代码
        socialUnifiedCreditCode: '',
        // 项目负责人
        commUserName: '',
        // 联系方式
        corporatePhone: '',
        // 公司地址
        address: ''
      },
      // 企业资质
      preDataList: [],
      // 四措两案
      fourMeasures: [],
      // 安全协议书
      safetyAgreementList: [],
      subcontractorTitleList: [{ title: '分包单位名称' }, { width: '50%' }, { title: '详情' }],
      // 分包商信息
      subcontractorDateList: [],
      buildersTitleList: [{ title: '姓名' }, { title: '岗位', width: '50%' }, { title: '详情' }],
      // 施工人员信息
      buildersList: [],
      toolsTitleList: [{ title: '工器具名称' }, { title: '设备类型', width: '50%' }, { title: '详情' }],
      // 工器具信息
      toolList: []
    }
  },
  mounted() {
    setTimeout(() => {
      // console.log('承包商基本信息', this.proId)
      // console.log('承包商基本信息', this.id)
      // console.log('🚀 ~ 分包商 ~ this.isSubcontractor:', this.isSubcontractor)
    }, 300)
    // if (this.isSubcontractor) {
    //   this.formData = this.params
    //   this.formData.consName = this.params.subName
    //   this.getSubcontractorInfo()
    // } else {
    //   this.getContractorInfo()
    // }
  },
  // 监听 this.proId 和 this.id 的变化, 有值时调用 getContractorInfo 方法
  watch: {
    proId: {
      handler: function (val) {
        if (val) {
          this.getContractorInfo()
        }
      },
      immediate: true
    },
    isSubcontractor: {
      handler: function (val) {
        if (val) {
          this.formData = this.params
          this.formData.consName = this.params.subName
          this.getSubcontractorInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 查看分包商
    seeSubcontractor(item) {
      console.log('查看分包商', item)
      const params = {
        ...item
      }
      uni.navigateTo({
        url: `/pages/projectInfo/subcontractorDetails?params=${JSON.stringify(params)}`
      })
    },
    // 查看施工人员
    seeBuilder(item) {
      console.log('查看施工人员', item)
      const params = {
        ...item,
        isSubcontractor: this.isSubcontractor
      }
      uni.navigateTo({
        url: `/pages/projectInfo/builderDetails?params=${JSON.stringify(params)}`
      })
    },
    // 查看工器具
    seeTool(item) {
      console.log('查看工器具', item)
      const params = {
        ...item
      }
      uni.navigateTo({
        url: `/pages/projectInfo/toolDetails?params=${JSON.stringify(params)}`
      })
    },
    // 获取承包商信息
    getContractorInfo() {
      console.log('承包商基本信息-->>')
      const params = {
        proId: this.proId,
        id: this.id
      }
      console.log('🚀 ~ getContractorInfo ~ params:', params)
      getAppConsDetailsInfo(params).then(async res => {
        console.log('承包商信息', res)
        this.formData = await res.data
        console.log('🚀 ~ 承包商信息承包商信息承包商信息 ~ this.formData:', this.formData)
        this.getEnterpriseQualification()
        this.getFourMeasures()
        this.getSafetyAgreement()
        this.getSubList()
        this.getConsPersonList()
        this.getConsEquipList()
      })
    },
    // 获取分包商列表
    getSubList() {
      const params = {
        proId: this.proId,
        consUuid: this.formData.uuid
      }
      getSubList(params).then(res => {
        console.log('分包商列表', res)
        if (res.code === 200) {
          this.subcontractorDateList = res.rows
          this.subcontractorDateList.forEach(item => {
            item.name = item.subName
          })
        }
      })
    },
    // 分包商基本信息
    getSubcontractorInfo() {
      console.log('分包商基本信息-->>')
      this.getConsPersonList()
      this.getEnterpriseQualification()
      this.getFourMeasures()
      this.getSafetyAgreement()
    },
    // 获取施工人员列表-承包商/分包商
    getConsPersonList() {
      const params = {
        // proId: this.isSubcontractor ? this.formData.proId : this.proId,
        // consUuid: this.formData.uuid
        proId: this.isSubcontractor ? this.formData.proId : this.proId,
        consUuid: this.isSubcontractor ? this.formData.consUuid : this.formData.uuid,
        uuid: this.isSubcontractor ? this.formData.uuid : '',
        subId: this.isSubcontractor ? this.formData.id : '',
        subUuid: this.isSubcontractor ? this.formData.subUuid : '',
        supUuid: this.isSubcontractor ? this.formData.supUuid : ''
      }
      console.log('🚀 ~ 获取施工人员列表 ~ params:', params)
      if (this.isSubcontractor) {
        // 分包商-施工人员列表
        getSubPersonList(params).then(res => {
          console.log('施工人员列表', res)
          if (res.code === 200) {
            this.buildersList = res.rows
          }
        })
      } else {
        // 承包商-施工人员列表
        getConsPersonList(params).then(res => {
          console.log('施工人员列表', res)
          if (res.code === 200) {
            this.buildersList = res.rows
          }
        })
      }
    },
    // 获取工器具列表
    getConsEquipList() {
      const params = {
        proId: this.proId,
        consUuid: this.formData.uuid
      }
      getConsEquipList(params).then(res => {
        console.log('工器具列表', res)
        if (res.code === 200) {
          this.toolList = res.rows
          this.toolList.forEach(item => {
            item.name = item.equipName
          })
        }
      })
    },
    // 获取企业资质
    getEnterpriseQualification() {
      const params = {
        consUuid: this.isSubcontractor ? this.formData.consUuid : this.formData.uuid,
        proId: this.isSubcontractor ? this.formData.proId : this.proId,
        uuid: this.isSubcontractor ? this.formData.uuid : '',
        subId: this.isSubcontractor ? this.formData.id : '',
        subUuid: this.isSubcontractor ? this.formData.subUuid : '',
        supUuid: this.isSubcontractor ? this.formData.supUuid : '',
        classification: this.isSubcontractor ? '3' : '2',
        fromType: '1',
        informationType: '1'
      }
      console.log('🚀 ~ getEnterpriseQualification ~ params:', params)
      selectFile(params).then(res => {
        console.log('企业资质', res)
        // if (!res.data) return
        if (res.code == 200 && res.data.length > 0) {
          this.preDataList = res.data
        }
      })
    },
    // 获取四措两案
    getFourMeasures() {
      const params = {
        consUuid: this.isSubcontractor ? this.formData.consUuid : this.formData.uuid,
        proId: this.isSubcontractor ? this.formData.proId : this.proId,
        uuid: this.isSubcontractor ? this.formData.uuid : '',
        subId: this.isSubcontractor ? this.formData.subId : '',
        subUuid: this.isSubcontractor ? this.formData.subUuid : '',
        supUuid: this.isSubcontractor ? this.formData.supUuid : '',
        classification: this.isSubcontractor ? '3' : '2',
        fromType: '1',
        informationType: '3'
      }
      console.log('🚀 ~ getFourMeasures ~ params:', params)
      selectFile(params).then(res => {
        console.log('四措两案', res)
        // if (!res.data) return
        if (res.code == 200 && res.data.length > 0) {
          this.fourMeasures = res.data
        }
      })
    },
    // 获取安全协议书
    getSafetyAgreement() {
      const params = {
        consUuid: this.isSubcontractor ? this.formData.consUuid : this.formData.uuid,
        proId: this.isSubcontractor ? this.formData.proId : this.proId,
        uuid: this.isSubcontractor ? this.formData.uuid : '',
        subId: this.isSubcontractor ? this.formData.subId : '',
        subUuid: this.isSubcontractor ? this.formData.subUuid : '',
        supUuid: this.isSubcontractor ? this.formData.supUuid : '',
        classification: this.isSubcontractor ? '3' : '2',
        fromType: '1',
        informationType: '2'
      }
      console.log('🚀 ~ getSafetyAgreement ~ params:', params)
      selectFile(params).then(res => {
        console.log('安全协议书', res)
        // if (!res.data) return
        if (res.code == 200 && res.data.length > 0) {
          this.safetyAgreementList = res.data
        }
      })
    }
  }
}
</script>

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

  .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-width {
      width: 33%;
    }

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