import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import { connect } from '@tarojs/redux'
import { reportClient, getTypeData } from '@services/client'
import { getCardList } from '@services/card'

@connect(state => state.user)
export default class ReportDetail extends Component {
  config = {
    navigationBarTitleText: '报备客户详情'
  }

  state = {
    reportId: null,
    detail: {},
    loaded: true,
    name: '',//客户姓名
    sex: '',//性别
    phone: '',//电话
    floor: '',//楼盘
    adviser: '',//置业顾问
    type: '',//需求
    property: '',//物业
    price: '',//价格
    remarks: '',//备注
    sexArray: ['请选择', '男', '女'],
    sexID: 0,
    floorArray: ['请选择'],
    floorID: 0,
    adviserArray: ['请选择'],
    adviserID: 0,
    typeArray: ['(选填)'],
    typeID: 0,
    propertyArray: ['(选填)'],
    propertyID: 0,
    priceArray: ['(选填)'],
    priceID: 0,
    date: '请选择',
    sexColor: 'color:#716D6D',
    floorColor: 'color:#716D6D',
    typeColor: 'color:#716D6D',
    propertyColor: 'color:#716D6D',
    priceColor: 'color:#716D6D',
    timeColor: 'color:#716D6D',
    recordId: null
  }
  componentWillMount() {
    const defaultHouseVal = Taro.getStorageSync('targetHouse')
    this.setState({
      floor: defaultHouseVal.buildingName
    })

    this.loadData()
  }
  loadData() {
    this.loadAgentList()
    this.loadSelectOpts()
  }
  loadAgentList() {
    // 获取置业顾问列表
    const params = {
      pageNumber: 1,
      pageSize: 50
    }
    getCardList(params).then(res => {
      res.records.unshift({ name: '请选择', id: 0 })
      this.setState({
        adviserArray: res.records
      })
    })

  }
  loadSelectOpts() {
    // 获取下拉配置
    getTypeData().then(res => {
      res.priceRange.unshift({ name: '(选填)', id: 0 })
      res.demandType.unshift({ name: '(选填)', id: 0 })
      res.realtyManageType.unshift({ name: '(选填)', id: 0 })
      this.setState({
        priceArray: res.priceRange,//价格
        typeArray: res.demandType,//需求
        propertyArray: res.realtyManageType//物业
      })
    })
  }
  BindInfo(e) {
    console.log(e.currentTarget.dataset.id)
    switch (e.currentTarget.dataset.id) {
      case 'name':
        this.setState({
          name: e.detail.value
        })
        break;
      case 'sex':
        this.setState({
          sex: e.detail.value
        })
        break;
      case 'phone':
        this.setState({
          phone: e.detail.value
        })
        break;
      case 'remarks':
        this.setState({
          remarks: e.detail.value
        })
        break;
      default:
        break;
    }
  }
  // 清空inpput值
  clearInputEvent() {
    this.setState({
      name: '',
      phone: '',
      sexID: 0,
      sex: '',
      floorID: 0,
      floor: '',
      adviserID: 0,
      adviser: '',
      typeID: 0,
      type: '',
      property: '',
      propertyID: 0,
      price: '',
      priceID: 0,
      remarks: '',
      date: '',
      sexColor: 'color:#716D6D',
      floorColor: 'color:#716D6D',
      typeColor: 'color:#716D6D',
      propertyColor: 'color:#716D6D',
      priceColor: 'color:#716D6D',
      timeColor: 'color:#716D6D',
      adviserColor: 'color:#716D6D',
    })
  }
  Alert(content, title) {
    title = title ? title : "温馨提示";
    content = content.toString();
    Taro.showModal({
      title: title,
      content: content,
      confirmColor: '#4f93ce',
      showCancel: false,

    })
  }
  Save() {
    const { name, sex, phone, floor, adviser, date, type, property, price, remarks } = this.state
    if (name == "") {
      this.Alert('请输入客户姓名')
      return false;
    }
    // if (sex == "") {
    //   this.Alert('请选择客户性别')
    //   return false;
    // }
    if (phone == "") {
      this.Alert("请输入客户电话");
      return false;
    }
    if (!(/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(phone)) || phone.length != 11) {
      this.Alert('请输入正确的手机号码');
      return false;
    }

    var param = {
      name,//姓名
      sex,//性别
      phone,//电话
      intention: floor,//意向楼盘
      demandType: type,//需求类型
      realtyManageType: property,//物业类型
      price,//价格
      appointmentTime: date,//时间
      describe: remarks,//客户描述
      realtyConsultant: adviser//置业顾问
    }
    reportClient(param).then(res => {
      Taro.showToast({
        title: '提交成功'
      })
      this.clearInputEvent()
      Taro.navigateTo({ url: '/pages/report/index' })//测试用
    })

  }
  // 性别
  bindSexChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    if (e.detail.value != 0) {
      this.setState({
        sexID: e.detail.value,
        sex: e.detail.value,
        sexColor: 'color:#000'
      })
    } else {
      this.setState({
        sexID: e.detail.value,
        sex: "",
        sexColor: 'color:#716D6D'
      })
    }
  }
  // 楼盘
  bindFloorChange(e) {
    this.setState({
      floor: e.detail.value,
    })
  }
  // 置业顾问
  bindAdviserChange(e) {
    var index = e.detail.value;
    var ID = this.state.adviserArray[index].id;
    if (e.detail.value != 0) {
      this.setState({
        adviserID: e.detail.value,
        adviser: ID,
        adviserColor: 'color:#000'
      })
    } else {
      this.setState({
        adviserID: e.detail.value,
        adviser: "",
        adviserColor: 'color:#716D6D'
      })
    }
  }
  // 物业
  bindPropertyChange(e) {
    var index = e.detail.value;
    var ID = this.state.propertyArray[index].id;
    if (e.detail.value != 0) {
      this.setState({
        propertyID: e.detail.value,
        property: ID,
        propertyColor: 'color:#000'
      })
    } else {
      this.setState({
        propertyID: e.detail.value,
        property: "",
        propertyColor: 'color:#716D6D'
      })
    }
  }
  // 需求
  bindTypeChange(e) {
    var index = e.detail.value;
    var ID = this.state.typeArray[index].id;
    if (e.detail.value != 0) {
      this.setState({
        typeID: e.detail.value,
        type: ID,
        typeColor: 'color:#000'
      })
    } else {
      this.setState({
        typeID: e.detail.value,
        type: "",
        typeColor: 'color:#716D6D'
      })
    }
  }
  // 价格
  bindPriceType(e) {
    var index = e.detail.value;
    var ID = this.state.priceArray[index].id;
    if (e.detail.value != 0) {
      this.setState({
        priceID: e.detail.value,
        price: ID,
        priceColor: 'color:#000'
      })
    } else {
      this.setState({
        priceID: e.detail.value,
        price: "",
        priceColor: 'color:#716D6D'
      })
    }
  }
  //到访时间
  bindDateChange(e) {
    this.setState({
      date: e.detail.value,
      timeColor: 'color:#000'
    })
  }
  // 取消
  handleCancelClick() {
    Taro.navigateTo({
      url: '/pages/report/index'
    })
  }
  render() {
    const { loaded } = this.state
    return (
      <Block>

        {
          loaded && (
            <View>
              <ScrollView
                scrollY
              >
                <View className='report-detail'>
                  <View className='top-detail'>
                    <Image src={require('@assets/default-avatar.png')} className='customer-headimg'></Image>
                    <View className='customer-name'>对对对</View>
                    <View className='customer-tip'>
                      <Text className='line'>————————</Text>
                      <Text className='txt'>详细信息</Text>
                      <Text className='line'>————————</Text>
                    </View>
                  </View>
                  <View className='add-info'>
                    <View className='report-txt'>
                      <View className='lable'>
                        <Text className="iconfont icon-xinghao" ></Text>意向项目：
                    </View>

                      <Input type='text' className='txt' disabled="disabled"></Input>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        <Text className="iconfont icon-xinghao"></Text>客户姓名：
                      </View>

                      <Input type='text' className='txt'  data-id='name'></Input>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        <Text className="iconfont icon-xinghao"></Text>客户电话：
                      </View>

                      <Input type='text' className='txt'  data-id="phone"></Input>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        预约到访时间：
                      </View>
                      {/* <Input type='text' className='txt'></Input> */}
                      <Picker className="picker" mode="date" value={this.state.date} start="2019-09-01" end="2057-09-01" onChange={this.bindDateChange}>
                        <View style={this.state.timeColor}>
                          {this.state.date}
                        </View>
                      </Picker>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        到访人数：
                      </View>
                      <Input type='number' className='txt'></Input>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        物业类型：
                      </View>
                      {/* <Input type='text' className='txt'></Input> */}
                      <Picker className='picker' onChange={this.bindPropertyChange} value={this.state.propertyID} range={this.state.propertyArray} range-key="name">
                        <View style={this.state.propertyColor}>
                          {this.state.propertyArray[this.state.propertyID].name}
                        </View>
                      </Picker>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        需求类型：
                      </View>
                      {/* <Input type='text' className='txt'></Input> */}
                      <Picker className='picker' onChange={this.bindTypeChange} value={this.state.typeID} range={this.state.typeArray} range-key="name">
                        <View style={this.state.typeColor}>
                          {this.state.typeArray[this.state.typeID].name}
                        </View>
                      </Picker>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        价格区间：
                      </View>
                      {/* <Input type='text' className='txt'></Input> */}
                      <Picker className='picker' onChange={this.bindPriceType} value={this.state.priceID} range={this.state.priceArray} range-key="name">
                        <View style={this.state.priceColor}>
                          {this.state.priceArray[this.state.priceID].name}
                        </View>
                      </Picker>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        客户描述：
                      </View>
                      <Input type='text' className='txt'></Input>
                    </View>
                    <View className='report-txt'>
                      <View className='lable'>
                        状态：
                      </View>
                      <Input type='text' className='txt' value='报备' disabled="disabled"></Input>
                    </View>
                    <View className='bottom-btn'>
                      <Button className='btn sure-btn' onClick={this.Save}>确定</Button>
                      <Button className='btn cancel-btn' onClick={this.handleCancelClick}>取消</Button>
                    </View>

                  </View>
                </View>
              </ScrollView>
            </View>
          )
        }
      </Block>
    );
  }
}