<template>
  <!-- <div>{{dialogFormVisible}}</div> -->
  <el-dialog title="商机详情" :visible.sync="dialogFormVisible" append-to-body @close='close' width="85%">
    <div class="report-from">
      <div class="from-title">基础信息</div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="商机编号" v-model="dataInfo.busOppoId" disabled placeholder="请输入项目名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="项目名称" v-model="dataInfo.itemName" disabled placeholder="请输入项目名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="项目预算" v-model="dataInfo.itemBudget" 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">
            </el-date-picker>
          </inputVue>
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="商机负责人" v-model="dataInfo.itemManager" disabled placeholder="请输入商机负责人姓名" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="联系方式" v-model="dataInfo.phone" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="单位组织" v-model="dataInfo.status" 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-option>
            </el-select>
          </inputVue>
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="项目地址" v-model="dataInfo.itemAddress" 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 title="业主方名称" v-model="dataInfo.ownerName" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="业主方联系人" v-model="dataInfo.ownerContacts" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="业主方联系方式" v-model="dataInfo.ownerPhone" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="总包方名称" v-model="dataInfo.contractName" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="总包方联系人" v-model="dataInfo.contractContacts" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="总包方联系方式" v-model="dataInfo.contractPhone" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="施工方名称" v-model="dataInfo.constructName" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="施工方联系人" v-model="dataInfo.constructContacts" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="施工方联系方式" v-model="dataInfo.constructPhone" disabled placeholder="请输入联系方式" class="inputWidth"
            width="350px" />
        </div>
      </div>
      <div class="from-inputBox">
        <div class="input-item">
          <RedStar />
          <inputVue title="代理商名称" v-model="dataInfo.agentName" disabled placeholder="请输入名称" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="代理商联系人" v-model="dataInfo.agentContacts" disabled placeholder="请输入联系人" class="inputWidth"
            width="350px" />
        </div>
        <div class="input-item">
          <RedStar />
          <inputVue title="代理商联系方式" v-model="dataInfo.agentPhone" 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 prop="id" label="序号" width="150px">
          </el-table-column>
          <el-table-column prop="busOppoId" label="产品品牌">
          </el-table-column>
          <el-table-column prop="productName" label="产品名称">
          </el-table-column>
          <el-table-column prop="productCode" label="产品型号">
          </el-table-column>
          <el-table-column prop="productQuantity" label="产品数量">
          </el-table-column>
          <el-table-column prop="productPrice" label="产品单价">
          </el-table-column>
        </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: []
    }
  },
  mounted () {
    const id = this.dataInfo.id
    businessDetail({ id: id }).then(res => {
      console.log(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>