<!--商机详情弹窗-->
<template>
  <el-dialog title="商机详情" width="1230px" :visible.sync="isShowInfo" append-to-body @close="close">
    <div class="shopInfoDialog ">
      <!-- <dialog-header title="商机详情" @close="close" /> -->
      <!-- <dialog-header title="商机详情" @close="close"></dialog-header> -->
      <div class="content">
        <div class="title">
          基础信息
        </div>
        <div class="inputContent">
          <div class="container">
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.busOppoId"
                title="商家编号"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemDuration"
                title="预计工期"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemProvince"
                title="单位组织 "
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>
          <div class="container">
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemName"
                title="项目名称"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemManager"
                title="商机负责人"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.status"
                title="商机状态"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>
          <div class="container">
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemBudget"
                title="项目预期"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.phone"
                title="联系方式"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <input-vue
                v-model="shopInfo.itemAddress"
                title="项目地址"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>
        </div>
        <div class="title">
          联系方信息
        </div>
        <div class="inputContent">
          <div class="container">
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.ownerName"
                title="业主方名称"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.contractName"
                title="总包方名称"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.constructName"
                title="施工方名称"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.agentName"
                title="代理商名称"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>
          <div class="container">
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.ownerContacts"
                title="业主方联系人"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.contractContacts"
                title="总包方联系人"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.constructContacts"
                title="施工方联系人"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.agentContacts"
                title="代理商联系人"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>

          <div class="container">
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.ownerPhone"
                title="业主方联系方式"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.contractPhone"
                title="总包方联系方式"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.constructPhone"
                title="施工方联系方式"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
            <div class="inputBox">
              <red-star />
              <input-vue
                v-model="shopInfo.agentPhone"
                title="代理商联系方式"
                class="inputWidth"
                width="200px"
                :disabled="true"
              />
            </div>
          </div>
        </div>
        <div class="title">
          产品信息
        </div>
        <div class="footer">
          <div class="titlefooter">
            产品列表:
          </div>
          <el-table
            height="200"
            :data="shopInfo.productList"
            :row-class-name="tableRowClassName"
            :header-cell-style="{
              'text-align': 'center',
              background: '  #2483b3',
              color: 'white',
            }"
            :row-style="{ 'text-align': 'center' }"
            style="width: 100%"
          >
            <!-- <el-table-column prop="date" label="序号"> </el-table-column> -->
            <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>
    </div>
  </el-dialog>
</template>

<script>
import InputVue from '../../input/inputVue.vue'
import RedStar from '../../redStar.vue'
import dialogHeader from '../dialogHeader.vue'
import { tableRowClassName } from '../../../../utils/myUtils/changeTableTr'
import { detail } from '../../../../api/sales/shop'
export default {
  components: {
    dialogHeader,
    InputVue,
    RedStar
  },
  props: ['isShowInfo', 'dataInfo'],
  data() {
    return {
      shopInfo: {}
    }
  },
  watch: {
    dataInfo: {
      handler(value) {
        console.log(value, '================console.log(value);')
        if (!value.id) return

        detail({ id: value.id }).then(res => {
          this.shopInfo = res
        })
      },
      deep: true
    }
  },
  methods: {
    tableRowClassName: tableRowClassName,
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.shopInfoDialog {
  width: 1200px;
  padding: 20px;
  height: 700px;
  overflow: auto;
  .content {
    .title {
      color: #fff;
      background: #28739e;
      font-size: 23px;
      line-height: 30px;
      padding: 10px;
      font-weight: 600;
    }
    .inputContent {
      display: flex;
      .container {
        flex: 1;
        padding: 10px;
        .inputBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
  .footer {
    .titlefooter {
      margin: 30px 0 10px 10px;
    }
  }
}
</style>