<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
              title="商家编号"
              class="inputWidth"
              width="200px"
              v-model="shopInfo.busOppoId"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="预计工期"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemDuration"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="单位组织 "
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemProvince"
              :disabled="true"
            ></input-vue>
          </div>
        </div>
        <div class="container">
          <div class="inputBox">
            <input-vue
              title="项目名称"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemName"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="商机负责人"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemManager"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue title="商机状态" class="inputWidth"    width="200px" v-model="shopInfo.status"
              :disabled="true">
           </input-vue>
          </div>
        </div>
        <div class="container">
          <div class="inputBox">
            <input-vue
              title="项目预期"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemBudget"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="联系方式"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.phone"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <input-vue
              title="项目地址"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.itemAddress"
              :disabled="true"
            ></input-vue>
          </div>
        </div>
      </div>
      <div class="title">联系方信息</div>
      <div class="inputContent">
        <div class="container">
          <div class="inputBox">
            <red-star />
            <input-vue
              title="业主方名称"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.ownerName"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="总包方名称"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.contractName"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="施工方名称"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.constructName"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="代理商名称"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.agentName"
              :disabled="true"
            ></input-vue>
          </div>
        </div>
        <div class="container">
          <div class="inputBox">
            <red-star />
            <input-vue
              title="业主方联系人"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.ownerContacts"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="总包方联系人"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.contractContacts"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="施工方联系人"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.constructContacts"
              :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="代理商联系人"
              class="inputWidth"
              width="200px"
               v-model="shopInfo.agentContacts"
                :disabled="true"
            ></input-vue>
          </div>
        </div>

        <div class="container">
          <div class="inputBox">
            <red-star />
            <input-vue
              title="业主方联系方式"
              class="inputWidth"
              width="200px"
              v-model="shopInfo.ownerPhone"
                :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="总包方联系方式"
              class="inputWidth"
              width="200px"
              v-model="shopInfo.contractPhone"
                :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="施工方联系方式"
              class="inputWidth"
              width="200px"
              v-model="shopInfo.constructPhone"
                :disabled="true"
            ></input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              title="代理商联系方式"
              class="inputWidth"
              width="200px"
              v-model="shopInfo.agentPhone"
                :disabled="true"
            ></input-vue>
          </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>
          <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>
  </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:{}
    };
  },
  methods: {
    tableRowClassName: tableRowClassName,
    close() {
      this.$emit("close");
    },
  },
  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
    }
  }
};
</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>