<!--经销商详情弹窗-->
<template>
  <el-dialog title="经销商详情" width="75%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-descriptions title="" :column="2" border>
      <el-descriptions-item label="经销商名称">{{ baseInfo.distributorName }}</el-descriptions-item>
      <el-descriptions-item label="经销商编号">{{ baseInfo.distributorCode }}</el-descriptions-item>
      <el-descriptions-item label="单位性质">{{ baseInfo.companyNatureName }}</el-descriptions-item>
      <el-descriptions-item label="单位类型">{{ baseInfo.companyTypeName }}</el-descriptions-item>
      <el-descriptions-item label="详细地址" span="2">
        {{ baseInfo.companyProvince }} / {{ baseInfo.companyCity }} / {{ baseInfo.companyArea }} / {{ baseInfo.companyAddress }}
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeTabName" style="margin-top: 20px;">
      <el-tab-pane label="三证信息" name="certDetail">
        <cert-info-detail ref="certDetail"/>
      </el-tab-pane>

      <el-tab-pane label="联系人信息" name="personDetail">
        <person-info-detail ref="personDetail" />
      </el-tab-pane>

      <el-tab-pane label="业务信息" name="businessDetail">
        <business-info-detail ref="businessDetail" />
      </el-tab-pane>

      <el-tab-pane label="经营信息" name="operationDetail">
        <operation-info-detail ref="operationDetail" />
      </el-tab-pane>

      <el-tab-pane label="其他信息" name="extraDetail">
        <extra-info-detail ref="extraDetail" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>

import CertInfoDetail from '@/views/companyDetail/certInfoDetail'
import PersonInfoDetail from '@/views/companyDetail/personInfoDetail'
import BusinessInfoDetail from '@/views/companyDetail/businessInfoDetail'
import OperationInfoDetail from '@/views/companyDetail/operationInfoDetail'
import ExtraInfoDetail from '@/views/companyDetail/extraInfoDetail'
import { tableRowClassName } from '@/utils/myUtils/changeTableTr'
import { certificateDetail, personDetail, businessDetail } from '@/api/distributor/distributor'

export default {
  name: 'DistributorDetail',
  components: {
    CertInfoDetail, PersonInfoDetail, BusinessInfoDetail, OperationInfoDetail, ExtraInfoDetail
  },
  data() {
    return {
      baseInfo: {
        distributorCode: '',
        distributorName: '',
        companyNatureName: '',
        companyTypeName: '',
        companyProvince: '',
        companyCity: '',
        companyArea: '',
        companyAddress: ''
      },
      activeTabName: 'certDetail',
      isShowInfo: false
    }
  },
  methods: {
    tableRowClassName: tableRowClassName,
    initDialog(dialogStatus, row = null) {
      this.isShowInfo = true
      this.activeTabName = 'certDetail'
      if (row !== null) {
        this.baseInfo.distributorCode = row.distributorCode
        this.baseInfo.distributorName = row.distributorName
        this.baseInfo.companyNatureName = row.companyNatureName
        this.baseInfo.companyTypeName = row.companyTypeName
        this.baseInfo.companyProvince = row.companyProvince
        this.baseInfo.companyCity = row.companyCity
        this.baseInfo.companyArea = row.companyArea
        this.baseInfo.companyAddress = row.companyAddress
      }

      this.getCertDetail(row.distributorCode)
      this.getPersonDetail(row.distributorCode)
      this.getBusinessDetail(row.distributorCode)
    },
    getCertDetail(distributorCode) {
      certificateDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.certDetail.showCertDetail(res)
        }
      })
    },
    getPersonDetail(distributorCode) {
      personDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.personDetail.showPersonDetail(res)
        }
      })
    },
    getBusinessDetail(distributorCode) {
      businessDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.businessDetail.showBusinessDetail(res)
          this.$refs.operationDetail.showOperationDetail(res)
          this.$refs.extraDetail.showExtraDetail(res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deviceDialog {
  border-radius: 5px;
  // overflow: hidden;
  // padding: 10px ;
  width: 1125px;
  height: 100%;
  box-sizing: border-box;
}

.selectNav {
  border: 1px solid #999;
  border-bottom: 3px solid #fff;
  position: relative;
  z-index: 9;
  box-sizing: border-box;
  top: 2px;
}

.content {
  width: 100%;

  .content_nav {
    box-sizing: border-box;
    display: flex;
    margin: 10px 0;
    border-bottom: 1px solid #999;

    .nav_item {
      width: 130px;
      height: 60px;
      margin: 0 10px;
      line-height: 60px;
      text-align: center;
    }
  }
}

.content_content {
  // padding: 20px 0 60px 0;
  // box-sizing: border-box;

}

.headInfo {
  width: 1000px;

  .inputContent {
    // flex: 1;
    display: flex;
    // flex-direction: column;

    justify-content: space-between;
    align-items: center;
  }
}

.baseInfo {
  width: 1000px;
  display: flex;

  .inputContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    // justify-content: space-between;
    // align-items: center;
  }
}

.deviceInfo {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;

  .inputContent {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.dataInfo {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;

  .inputContent {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.relation {
  .topbox {
    .inputContent {
      display: flex;
      justify-content: space-between;

      .input-vue {
        // flex: 1;
        width: 364px;
      }

      .doulbe {
        // width: 572px;
        width: 602px;
        padding-left: 27px;
        // padding-left: 4px;
      }

      .doulbe2 {
        padding-left: 12px;
        width: 588px;
      }
    }
  }
}

.business, .reviewbox {
  .inputContent {
    display: flex;
    justify-content: space-between;
  }

  .title {
    padding: 10px 0;
  }
}

.manage {
  .title {
    background-color: rgb(40, 115, 158);
    color: #fff;
    font-size: 22px;
    padding: 10px;
    font-weight: bold;
  }

  .inputContent {
    display: flex;
    justify-content: space-between;

    .tableDown {
      width: 200px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      input {
        outline: none;
        border: none;
        width: 140px;
      }

      span {
        margin-left: 5px;
      }

      color: rgb(40, 115, 158);
      border: 1px solid lightgray;
      height: 40px;
    }
  }

  .inputbox {
    display: flex;
  }

}

.othernfo {
  .title {
    background-color: rgb(40, 115, 158);
    color: #fff;
    font-size: 22px;
    padding: 10px;
    font-weight: bold;
    margin: 10px 0;
  }

  .inputContent {
    display: flex;
    justify-content: space-between;
  }
}

</style>