<!-- 基本 -->
<template>
  
  <div class="context">
    <div style="text-align: right;">
      <el-button type="primary" @click="clientclick">
        编辑基本信息
      </el-button> 
    </div>
    <div class="xinxi">
      <div style="flex: 1;">
        客户名称：{{ Message.name }}
      </div>
      <div style="flex: 1;">
        客户类型：{{getcustom(Message.custom_type)}}
      </div>
    </div>
    <div class="xinxi">
      <div style="flex: 1;">
        销售人员：{{Message.salesperson}}
      </div>
      <div style="flex: 1;">
        签约时间：{{ Message.sign_time }}
      </div>
    </div>
    <div class="xinxi">
      <div style="flex: 1;">
        合同金额：{{Message.contract_price}}
      </div>
      <div style="flex: 1;">
        软件金额：{{ Message.software_price }}
      </div>
    </div>
    <div class="xinxi">
      <div style="flex: 1;">
        硬件金额：{{ Message.hardware_price }}
      </div>
      <div style="flex: 1;">
        年费金额：{{ Message.year_cost_price }}
      </div>
    </div>
    <div class="xinxi">
      <div style="flex: 1;">
        详细地址：{{ Message.address }}
      </div>
      <div style="flex: 1;">
        上线时间：{{ Message.topline_time }}
      </div>
    </div>
    <div style="margin-bottom: 15px;">
      签约结束时间：{{ Message.sign_end_time}}
    </div>
    <div>
      备注：{{ Message.client_remark}}
    </div>

    <!-- 弹窗 -->
    <div>
      <el-dialog
        title="编辑基本信息"
        :visible.sync="useclick"
        :modal-append-to-body="false"
        width="60%"
        >
        <div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="userediot.name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>客户类型：</span>
              <el-select v-model="userediot.custom_type" placeholder="请选择" style="width: 60%;">
                <el-option
                  v-for="item in custom_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>销售人员：</span>
              <el-input v-model="userediot.salesperson" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>签约时间：</span>
              <el-date-picker
                v-model="userediot.sign_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>合同金额：</span>
                <el-input v-model="userediot.contract_price" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>软件金额：</span>
              <el-input v-model="userediot.software_price" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>硬件金额：</span>
                <el-input v-model="userediot.hardware_price" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>年费金额：</span>
              <el-input v-model="userediot.year_cost_price" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
          </div>

          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>详细地址：</span>
                <el-input v-model="userediot.address" placeholder="请输入内容" style="width: 60%;"></el-input>
              </div>
            <div style="flex: 1;">
              <span>上线时间：</span>
              <el-date-picker
                v-model="userediot.topline_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 60%;">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi" >
            <div style="flex: 1;">
              <span>签约结束时间：</span>
              <el-date-picker
                v-model="userediot.sign_end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 60%;">
              </el-date-picker>
            </div>
            <div style="flex: 1;"></div>
          </div>
          
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="userediot.client_remark" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="useclick = false">取 消</el-button>
          <el-button type="primary" @click="userok_click">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { uParseTime } from "@/utils/tools";
import {getkehucustomedit,getcustomget,getkehulist} from '../../../api/index'
// import Newadd from './Index'
export default{
  props:{
    // Message:Object
    rowid:String
  },
  components:{
  },
  
  data(){
    return{
      userediot:{
        name:'',
        custom_type:'',
        salesperson:'',
        sign_end_time:this.getTime(new Date()),
        sign_time:this.getTime(new Date()),
        contract_price:'',
        software_price:'',
        hardware_price:'',
        year_cost_price:'',
        address:'',
        topline_time:this.getTime(new Date()),
        client_remark:'',
        // implement_time:this.getTime(new Date()),
      },     
      custom_options:[{value:1,label:'标准版'},{value:2,label:'尊享版'},{value:3,label:'专业版'}],

      input:'',
      textarea:'',
      value1:'',
      value:'',
      options:[],
      useclick:false,
      Message:{}
    }
  },
  methods:{
    // 客户类型
    getcustom(val){
      const options = this.custom_options
      for(let i in options){
        if(val == options[i].value){
          return options[i].label
        }
      }
    },
    // 转换时间
    getTime(val) {
      if(val < 0){
        return ""
      }
      if(val == ""){
        return ""
      }else {
        return uParseTime(val, '{y}-{m}-{d}')
      }
    },
    // 编辑
    clientclick(){
      this.useclick =true
      this.userediot={
        name:this.Message.name,
        custom_type:this.Message.custom_type,
        salesperson:this.Message.salesperson,
        sign_time:this.Message.sign_time,
        sign_end_time:this.Message.sign_end_time,
        contract_price:this.Message.contract_price,
        software_price:this.Message.software_price,
        hardware_price:this.Message.hardware_price,
        year_cost_price:this.Message.year_cost_price,
        address:this.Message.address,
        topline_time:this.Message.topline_time,
        client_remark:this.Message.client_remark,
        // implement_time:this.getTime(new Date()),
      }
    },
    // 编辑确认
    userok_click(){
      this.useclick = false
      const user = this.userediot
      const data = {
        name:user.name,
        custom_type:user.custom_type,
        salesperson:user.salesperson,
        sign_time:user.sign_time,
        sign_end_time:user.sign_end_time,
        contract_price:user.contract_price,
        software_price:user.software_price,
        hardware_price:user.hardware_price,
        year_cost_price:user.year_cost_price,
        address:user.address,
        topline_time:user.topline_time,
        client_remark:user.client_remark,
        module:'1',
        id:this.rowid,
      }
      console.log('data',data);
      getkehucustomedit(data).then(res =>{

        this.getdetails()
        console.log('getkehucustomedit1111',this.Message);

      })
    },
    getdetails(){
      getcustomget(this.rowid).then(res =>{
        this.Message = res.data.custom
        console.log('usemessage2222222',this.Message);
      })
    },
  },
  created(){
    this.getdetails()
    // this.Message = this.$parent.Message
    // const obj= this.$parent.Message
    // console.log('22222222use',obj);
  },
  mounted(){
    // console.log('2222',this.useclick);
  }
}
</script>

<style scoped lang="scss">
  .context{
    padding: 20px 0;
    .xinxi{
      display: flex;
      margin-bottom: 15px;
    }
  }

</style>