<!--历史商机详情页面-->
<template>
  <!-- <div>{{dialogFormVisible}}</div> -->
  <el-dialog title="商机详情" :visible.sync="dialogFormVisible" append-to-body width="85%" @close="close">
    <div class="report-from">
      <div class="from-title">
        基础信息
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.busOppoId" title="商机编号" disabled placeholder="请输入项目名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.itemName" title="项目名称" disabled placeholder="请输入项目名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.itemBudget" title="项目预算" disabled placeholder="请输入项目预算" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="预计工期" class="inputWidth">
            <el-date-picker v-model="dataInfo.itemDuration" disabled type="date" placeholder="选择日期"
              style="width:350px" />
          </inputVue>
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.itemManager" title="商机负责人" disabled placeholder="请输入商机负责人姓名" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.phone" title="联系方式" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.organization" title="单位组织" disabled placeholder="请输入单位组织" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="商机状态" class="inputWidth">
            <el-select v-model="dataInfo.status" disabled clearable placeholder="请选择" style="width:350px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </inputVue>
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="address" title="项目地址" disabled placeholder="请输入详细地址" class="inputWidth" width="350px" />
        </div>
      </div>
    </div>
    <div class="report-from">
      <div class="from-title">
        关联方信息
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.ownerName" title="业主方名称" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.ownerContacts" title="业主方联系人" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.ownerPhone" title="业主方联系方式" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.contractName" title="总包方名称" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.contractContacts" title="总包方联系人" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.contractPhone" title="总包方联系方式" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.constructName" title="施工方名称" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.constructContacts" title="施工方联系人" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.constructPhone" title="施工方联系方式" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.agentName" title="代理商名称" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.agentContacts" title="代理商联系人" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue v-model="dataInfo.agentPhone" title="代理商联系方式" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
    </div>
    <div class="report-from">
      <div class="from-title">
        产品信息
      </div>
      <div class="from-table">
        <el-table :data="tableData" border class="el-tab" style="width: 100%;">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="brandName" label="产品品牌" />
          <!-- <el-table-column prop="categoryName" label="产品品类" /> -->
          <el-table-column prop="productCode" label="产品型号" />
          <el-table-column prop="productQuantity" label="产品数量" />
          <el-table-column prop="productPrice" label="产品单价" />
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { boolean } from 'yargs'
import inputVue from '../../input/inputVue.vue'
import RedStar from '../../redStar.vue'

import { businessDetail } from '../../../../api/business/business'

export default {
  components: {
    RedStar, inputVue
  },
  props: {
    dialogFormVisible: {
      type: boolean,
      default: true
    },
    dataInfo: {
      type: Object,
      dataInfo: {}
    }
  },
  data() {
    return {
      val: '',
      datevalue: '',
      options: [],
      tableData: [],
    }
  },
  computed: {
    address() {
      const { dataInfo } = this
      return dataInfo.itemProvince === dataInfo.itemCity ? dataInfo.itemCity + dataInfo.itemArea + dataInfo.itemAddress : dataInfo.itemProvince + dataInfo.itemCity + dataInfo.itemArea + dataInfo.itemAddress
    }
  },
  mounted() {
    const id = this.dataInfo.id
    businessDetail({ id: id }).then(res => {
      this.tableData = res.productList
    })
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang='scss' scoped>
.report-from {
  .from-title {
    font-size: 22px;
    font-weight: bold;
    background-color: #28739e;
    color: white;
    padding: 10px 0 10px 20px;
  }

  .from-inputBox {
    display: flex;
    margin-left: 20px;

    .input-item {
      width: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .from-table {
    display: flex;
    margin: 10px 20px;

  }
}
</style>