<!--历史商机详情页面-->
<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.status"
            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="dataInfo.itemAddress"
            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 prop="id" label="序号" width="150px" />
          <el-table-column prop="busOppoId" label="产品品牌" />
          <el-table-column prop="productName" 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: []
    }
  },
  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>