<template>
  <div class="tabs-body">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="box-body">
        <div v-for="item in baseInfo">
          <span>{{item.label}}</span>：
          <span>{{item.value}}</span>
        </div>
      </div>
    </el-card>
    <div v-if="customerInfo==null">
      <div style="margin:30px 0 ; font-weight: 800">绑定客户信息</div>
      <div style="margin:30px 0 ;">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-input v-model="speechContext" placeholder="请输入内容">
              </el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="goSearch">搜索</el-button>
              <a :href="yuyuedan" target="_blank" style="color:#fff;float: right;"><el-button type="primary" @click="goSearch">新建客户</el-button></a>
            </div>
            
          </el-col>
        </el-row>
       </div> 
    </div>
     <div style="width: 100%;" v-if="customerInfo==null">
       <el-table
        :data="tableData"
        style="width: 100%"
        >
        <el-table-column
          prop="customerName"
          label="姓名"
          width="80">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          width="130">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="bindUser(scope, tableData)"
              type="text"
              size="small">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <cus-info v-if="customerInfo!=null"></cus-info>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品信息</span>
        </div>
        <div class="box-body" v-for="item in obs">
         <el-row>
          <el-col :span="8"><div class="grid-content bg-purple">
            <img height="100px" width="100px;" src="https://god-image.oss-cn-beijing.aliyuncs.com/2019/01/24/71591229-4fb0-4e62-b233-00e029541e59.jpg" alt="">
          </div>
        </el-col>
          <el-col :span="16"><div class="grid-content bg-purple-light">
            <div style="">
              <span style="text-align: left">商品编号:</span>
              <span>{{item.goodsCode}}</span>
            </div>
            <div style="margin-top:20px ">
              <span style="text-align: left">状态:</span>
              <span>{{item.statusValue}}</span>
            </div>
            <div style="margin-top:20px ">
              <span style="text-align: left">预计完工时间:</span>
              <span>{{item.expectEndDate}}</span>
            </div>
          </div></el-col>
        </el-row>
        </div>
      </el-card>
     
    </div>
   <!--  <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>售前咨询</span>
      </div>
      <div>
        <el-button>新粉咨询</el-button>
        <el-button type="success">日常咨询</el-button>
      </div>
    </el-card> -->

  </div>  
</template>

<script>
import cusInfo from './cus-info'
import { mapGetters, mapState, mapActions } from 'vuex'
export default{
    data(){
      return {
        centerDialogVisible:false,
        yuyuedan:process.env.NEW_CUSTOMER,
        speechContext:'',
        activeName:'second',
        obs:[],
        baseInfo:[
          {
            label:'微信昵称',
            value:'无'
          },
          {
            label:'微信号',
            value:'无'
          },
          {
            label:'微信备注',
            value:'无'
          },
        ],
        tableData: [],
        hasCustemer:true,
      }    
    },
    components: {
      cusInfo
    },
    computed: {
        ...mapState([   
            'selectId',
            'user',
            'baozheng'
        ]),
        ...mapGetters([
            'selectedChat',
            'customerInfo'
        ])

    },
    mounted() {
        this.$refs.text&&this.$refs.text.focus()
        this.setCustomerInfo()
        this.unDeliveryOut().then((data)=>{
          this.obs = data
        })
    },
    watch:{
      selectedChat(val){
        this.baseInfo[0].value = val.user.name
        this.baseInfo[1].value = val.user.username
        this.baseInfo[2].value = val.user.conRemark
        this.setCustomerInfo()
        this.unDeliveryOut().then((data)=>{
            this.obs = data
        })
        console.log(333)
      }
    },
    methods: {
      ...mapActions('baozheng',[
        'setCustomerInfo',
        'findByMobile',
        'bindChatUser',
        'unDeliveryOut'
      ]),
      goSearch(){
        let mobile = this.speechContext
        this.findByMobile({mobile}).then((data)=>{
          this.tableData = [data]
        })
      },
      bindUser(val){
        let  customerId= val.row.id
        this.bindChatUser({customerId}).then((data)=>{
            this.setCustomerInfo()
        })
      },
      handleClick(){
        console.log(43434)
      },
      addUser(){
        this.centerDialogVisible = true
      }
    }
}
</script>

<style lang="stylus" scoped>
.tabs-body
  height:800px;
  width:100%;
  .tool-body
    width:100%;
    height:729px;
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix{
    span{
      font-weight: 800;
    }
  }
  .box-card {
    width: 100%;
  }
  .box-body{
    padding-left:10px;
    div{
      font-size:15px;
      margin-bottom:10px;
    }
  }
</style>