xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {AsyncStorage, Image, Text, TouchableOpacity, View} from 'react-native';
// 用于显示自定义键值对的picker
import Picker from 'react-native-picker';
// 用于显示日期，但因支持日期格式有限部分日期还是用react-native-picker+自己算日期来处理
import DatePicker from 'react-native-datepicker';
import {isJSONString} from "../utils/utils";
// 默认控件高度
const defaultHeight = (70);
// 默认标题高度
const titleViewHeight = (24);
// 默认纵向内边距
const VPading = (6);
/*
滚轮组件
该组件可匹配以下几种数据格式
    日期选择（type:'DATE'）
    日期区间选择（type:'PERIOD'）
    省市区选择（type:'CITY'）
 */
export default class PickerView extends Component {
    // 构造方法
    constructor(props) {
        super(props);
        this.state = {
            pickerValue: '',// 滚轮值
            pickerBegin: '',// 开始时间
            pickerEnd: '',// 结束时间
        };
        // 地区数据，用于处理省市区选择
        this.areaData = null;
        // 传入参数
        this.attrData = this.props.attrData;
        // json解析后的传入参数
        this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
        // 用于带出滚轮选择值变化的callback回调
        this.onChangeText = this.props.onChangeText;
        // 用于带出日期区间选择场合下开始日期滚轮选择值变化的callback回调
        this.onChangeBeginText = this.props.onChangeBeginText;
        // 用于带出日期区间选择场合下结束日期滚轮选择值变化的callback回调
        this.onChangeEndText = this.props.onChangeEndText;
    }

    // 生命周期-组件将要展示
    componentWillMount() {
        // 如果用于处理省市区选择，获取地区数据
        if (this.attrData.type == 'CITY') {
            this.getAreaJsonData()
        }
        // 设置默认值
        if (this.attrData.value && this.attrData.value.length > 0) {
            if (isJSONString(this.attrData.value)) {
                let data = JSON.parse(this.attrData.value);
                if (this.attrData.type === 'PERIOD') {
                    // 日期区间默认值设定
                    this.setState({
                        pickerBegin: data.beginDate,
                        pickerEnd: data.endDate
                    })
                } else if ("CITY") {
                    // 省市区默认设定
                    let addressText = data.province + ',' + data.city + ',' + data.area;
                    this.setState({
                        pickerValue: addressText
                    })
                }
            } else if (this.attrData.type === 'DATE') {
                // 日期选择默认值设定
                this.setState({
                    pickerValue: this.attrData.value
                })
            }
        }
    }

    /**
     * 获取全国地区数据
     * @returns {Promise<void>}
     */
    async getAreaJsonData() {
        let storeAreaJson = await AsyncStorage.getItem("areaData");
        if (!!storeAreaJson && storeAreaJson.length > 0) {
            this.areaData = JSON.parse(storeAreaJson);
        } else {
            //let url = 'http://cdn.xiniunet.com/api/pca.json';
            let url = 'https://cdn.xiniunet.com/api/ssq.json';
            let data = await fetch(url);
            let json = await data.json();
            new Promise((resolve, reject) => {
                let len = json.length;
                // 省数组
                let province = [];
                // 市数组
                let city = [];
                // 区数组
                let district = [];
                // 过滤出省市区三级数据
                for (let i = 0; i < len; i++) {
                    let area = json[i];
                    if (area.type === "country") {
                        continue;
                    }
                    if (area.type === "province") {
                        province.push(area);
                    } else if (area.type === "city") {
                        city.push(area);
                    } else if (area.type === "district" && area.name !== "市辖区") {
                        district.push(area);
                    }
                }

                // 三级数据组装
                let data = [];
                for (let p in province) {
                    let _provinceItem = province[p];
                    let _cityArr = [];
                    for (let c in city) {
                        let _cityItem = city[c];
                        if (_cityItem.pid === _provinceItem.id) {
                            let _cityId = _cityItem.id;
                            let _districtArr = [];
                            for (let d in district) {
                                let _districtItem = district[d];
                                if (_districtItem.pid === _cityId) {
                                    //设置
                                    _districtArr.push(_districtItem);
                                    district.splice(0, 1, _districtItem);
                                }
                            }
                            _cityItem.district = _districtArr;
                            _cityArr.push(_cityItem);
                            city.splice(0, 1, _cityItem);
                        }
                    }
                    _provinceItem.city = _cityArr;
                    data.push(_provinceItem);
                }
                resolve(data);
            }).then(data => {
                this.areaData = data;

                // 保存json
                AsyncStorage.setItem("areaData", JSON.stringify(data));
            });
        }
    }

    // 根据传入的时间格式，创建时间数据（小时，分，秒）
    _createTimeData(dateFormat) {
        let hours = [];
        let formatLower = dateFormat.toLowerCase();
        if (formatLower.indexOf('yyyy-mm-dd hh:mm') !== -1) {
            for (let i = 0; i < 24; i++) {
                let minutes = [];
                for (let j = 0; j < 60; j++) {
                    if (formatLower === 'yyyy-mm-dd hh:mm:ss') {
                        let seconds = [];
                        for (let k = 0; k < 60; k++) {
                            if (k < 10) {
                                seconds.push("0" + k + '秒');
                            } else {
                                seconds.push(k + '分');
                            }
                        }
                        let _minutes = {};
                        if (j < 10) {
                            _minutes["0" + j + '分'] = seconds;
                        } else {
                            _minutes[j + '分'] = seconds;
                        }
                        minutes.push(_minutes);
                    } else {
                        if (j < 10) {
                            minutes.push("0" + j + '分');
                        } else {
                            minutes.push(j + '分');
                        }
                    }
                }
                let _hours = {};
                if (i < 10) {
                    _hours["0" + i + '时'] = minutes;
                } else {
                    _hours[i + '时'] = minutes;
                }
                hours.push(_hours);
            }
        }
        return hours;
    }

    // 根据传入的时间格式，创建年月日数据
    _createDateData(dateFormat) {
        let date = [];
        let year = new Date().getFullYear().toString();
        let yearNumber = parseInt(year) + 10;

        let formatLower = dateFormat.toLowerCase();
        let timeData = [];
        if (formatLower.indexOf('hh:mm') !== -1) {
            timeData = this._createTimeData(dateFormat);
        }

        let isPickerYM = formatLower === 'yyyy-mm';// 只选年、月

        for (let i = 1970; i <= yearNumber; i++) {
            let month = [];
            for (let j = 1; j < 13; j++) {
                if (isPickerYM) {
                    month.push(j + '月');
                } else {
                    let day = [];
                    if (j === 2) {
                        for (let k = 1; k < 29; k++) {
                            if (timeData != null) {
                                let _day = {};
                                _day[k + '日'] = timeData;
                                day.push(_day);
                            } else {
                                day.push(k + '日');
                            }
                        }
                        // 闰年处理
                        //Leap day for years that are divisible by 4, such as 2000, 2004
                        if (i % 4 === 0) {
                            if (timeData != null) {
                                let _day = {};
                                _day[29 + '日'] = timeData;
                                day.push(_day);
                            } else {
                                day.push(29 + '日');
                            }
                        }
                    } else if (j in {1: 1, 3: 1, 5: 1, 7: 1, 8: 1, 10: 1, 12: 1}) {
                        for (let k = 1; k < 32; k++) {
                            if (timeData != null) {
                                let _day = {};
                                _day[k + '日'] = timeData;
                                day.push(_day);
                            } else {
                                day.push(k + '日');
                            }
                        }
                    } else {
                        for (let k = 1; k < 31; k++) {
                            if (timeData != null) {
                                let _day = {};
                                _day[k + '日'] = timeData;
                                day.push(_day);
                            } else {
                                day.push(k + '日');
                            }
                        }
                    }
                    let _month = {};
                    _month[j + '月'] = day;
                    month.push(_month);
                }
            }
            let _date = {};
            _date[i + '年'] = month;
            date.push(_date);
        }
        console.log("date===", date)
        return date;
    }

    // 创建地区数据
    _createAreaData() {
        let data = [];
        // 只用取一次就行了，有数据就不要再取了
        if (!!this.areaData && this.areaData.length > 0) {
            let len = this.areaData.length;
            for (let i = 0; i < len; i++) {
                let city = [];
                for (let j = 0, cityLen = this.areaData[i]['city'].length; j < cityLen; j++) {
                    let _city = {};
                    let _district = [];
                    for (let k = 0, districtLen = this.areaData[i]['city'][j]['district'].length; k < districtLen; k++) {
                        _district.push(this.areaData[i]['city'][j]['district'][k].name);
                    }
                    _city[this.areaData[i]['city'][j]['name']] = _district;
                    city.push(_city);
                }

                let _data = {};
                _data[this.areaData[i]['name']] = city;
                data.push(_data);
            }
        }
        return data;
    }

    // 根据传入的时间格式，初始化选中的日期
    _initSelectedValue(dateFormat) {
        let date = new Date();
        let formatLower = dateFormat.toLowerCase();
        if (formatLower === 'yyyy-mm') {
            return [date.getFullYear() + '年', (date.getMonth() + 1) + '月'];
        } else if (formatLower === 'yyyy-mm-dd') {
            return [date.getFullYear() + '年', (date.getMonth() + 1) + '月', date.getDate() + '日'];
        } else if (formatLower === 'yyyy-mm-dd hh:mm') {
            return [date.getFullYear() + '年', (date.getMonth() + 1) + '月', date.getDate() + '日'
                , date.getHours() + '时', date.getMinutes() + '分'];
        } else if (formatLower === 'yyyy-mm-dd hh:mm:ss') {
            return [date.getFullYear() + '年', (date.getMonth() + 1) + '月', date.getDate() + '日'
                , date.getHours() + '时', date.getMinutes() + '分', date.getSeconds() + '秒'];
        }
    }

    // 根据传入的滚轮选择值与日期格式，格式化滚轮选中的日期
    formatDatePickedValue(pickedValue, dateFormat) {

        let year = pickedValue[0].replace("年", "");
        let month = pickedValue[1].replace("月", "");
        let day = '';

        let monthNum = Number(month);
        if (monthNum < 10) {
            month = "-0" + month;
        } else {
            month = "-" + month;
        }
        if (pickedValue.length > 2) {
            day = pickedValue[2].replace("日", "");
            let dayNum = Number(day);
            if (dayNum < 10) {
                day = "-0" + day;
            } else {
                day = "-" + day;
            }
        }

        let formatLower = dateFormat.toLowerCase();
        if (formatLower === 'yyyy-mm') {
            return year + month
        } else if (formatLower === 'yyyy-mm-dd') {
            return year + month + day;
        } else if (formatLower.indexOf('yyyy-mm-dd hh:mm') !== -1) {
            let hours = pickedValue[3].replace("时", "");
            let minutes = pickedValue[4].replace("分", "");

            let hoursNum = Number(hours);
            let minutesNum = Number(day);

            if (hoursNum < 10) {
                hours = "0" + hours;
            }
            if (minutesNum < 10) {
                minutes = ":0" + minutes;
            } else {
                minutes = ":" + minutes;
            }

            if (formatLower === 'yyyy-MM-dd hh:mm:ss') {
                let seconds = pickedValue[5].replace("秒", "");
                let secondNum = Number(seconds);
                if (secondNum < 10) {
                    seconds = ":0" + seconds;
                } else {
                    seconds = ":" + seconds;
                }
                return year + month + day + " " + hours + minutes + seconds;
            }
            return year + month + day + " " + hours + minutes;
        }
    }

    // 根据传入日期格式，初始化日期滚轮的分段
    _initWheelFlex(dateFormat) {
        let formatLower = dateFormat.toLowerCase();
        if (formatLower === 'yyyy-mm') {
            return [1, 1];
        } else if (formatLower === 'yyyy-mm-dd') {
            return [1, 1, 1];
        } else if (formatLower === 'yyyy-mm-dd hh:mm') {
            return [2, 1, 1, 1, 1];
        } else if (formatLower === 'yyyy-mm-dd hh:mm:ss') {
            return [2, 1, 1, 1, 1, 1];
        } else {
            return [1, 1, 1];
        }
    }

    // 显示日期滚轮
    _showDatePicker(pickerType, dateFormat) {
        // 初始化选择数据
        let selectedValue = this._initSelectedValue(dateFormat);
        // 滚轮的分段
        let wheelFlex = this._initWheelFlex(dateFormat);
        // 滚轮数据源
        let pickerData = this._createDateData(dateFormat);
        // 初始化滚轮
        Picker.init({
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerTitleText: '请选择',
            pickerData,
            //pickerFontColor: [51, 153 , 255, 1],
            selectedValue,
            wheelFlex: wheelFlex,
            // 滚轮点击确定后的回调
            onPickerConfirm: (pickedValue, pickedIndex) => {
                // 取得格式化后的时间字符串
                let dateStr = this.formatDatePickedValue(pickedValue, dateFormat);
                // 取值设定，当用于时间区间时，需要判断是开始日期滚轮还算是结束日期滚轮
                if (pickerType === 'begin') {
                    // if (this.state.pickerEnd) {
                    //     if (moment(this.state.pickerEnd).isBefore(dateStr)) {
                    //         xnToast("开始日期不能大于结束日期")
                    //         return;
                    //     }
                    // }
                    this.setState({
                        pickerBegin: dateStr
                    })
                    this.attrData.beginDate = dateStr;
                } else if (pickerType === 'end') {
                    // if (this.state.pickerBegin) {
                    //     if (moment(this.state.pickerBegin).isAfter(dateStr)) {
                    //         xnToast("结束日期不能小于开始日期")
                    //         return;
                    //     }
                    // }
                    this.setState({
                        pickerEnd: dateStr
                    })
                    this.attrData.endDate = dateStr;
                } else {
                    this.setState({
                        pickerValue: dateStr
                    })
                    this.attrData.value = dateStr;
                }
            },
            // 滚轮点击取消后的回调
            onPickerCancel: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            },
            // 滚轮滚动时的回调
            onPickerSelect: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            }
        });
        // 显示滚轮
        Picker.show();
    }

    // 显示省市区选择滚轮
    _showAreaPicker() {
        // 数据防呆处理
        if (!!!this.areaData || this.areaData.length === 0) {
            return;
        }
        // 滚轮初始化
        Picker.init({
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerTitleText: '请选择',
            pickerData: this._createAreaData(),
            //selectedValue: ['北京', '北京', '东城区'],
            // 滚轮点击确定后的回调
            onPickerConfirm: pickedValue => {
                this.setState({
                    pickerValue: pickedValue
                })
                let result = {province: pickedValue[0], city: pickedValue[1], area: pickedValue[2]};
                this.attrData.value = JSON.stringify(result);
            },
            // 滚轮点击取消后的回调
            onPickerCancel: pickedValue => {
            },
            // 滚轮滚动时的回调
            onPickerSelect: pickedValue => {
            }
        });
        // 显示滚轮
        Picker.show();
    }

    // 用于切换滚轮是否可见
    _toggle() {
        Picker.toggle();
    }

    // 判断滚轮是否显示
    _isPickerShow() {
        Picker.isPickerShow(status => {
            alert(status);
        });
    }

    // 生命周期-组件将要展示
    componentWillUnmount() {
        try {
            // 默认隐藏滚轮(如果已有)
            Picker.hide();
        } catch (e) {

        }
    }

    // 滚轮UI绘制
    renderPicker() {
        /*
        name:标题
        code:代码编号
        type:控件类型(  日期选择（type:'DATE'）
                       日期区间选择（type:'PERIOD'）
                       省市区选择（type:'CITY'）)
        description:描述
        isRequired:是否必须
        isPreview:是否预览
        */
        let {name, code, type, description, isRequired, isPreview} = this.attrData;

        if (type === 'DATE') {
            // 日期选择
            /*
            dateType:日期类型
            dateFormat:日期格式
            placeholder:提示文字
            */
            let {dateType, dateFormat, placeholder} = this.extendData;
            let defaultValue = this.extendData.default;
            // FIXME:类型只支持"date","time","datetime",受限于react-native-datepicker组件
            if (!!dateType && dateType != "date" && dateType != "time" && dateType != "datetime") {
                dateType = 'date';
            }
            // 统一格式化时间
            if (!!dateFormat && dateFormat) {
                dateFormat = dateFormat.toUpperCase();
                // 如果只返回 年月日不替换
                if (dateFormat !== 'YYYY-MM-DD') {
                    dateFormat = dateFormat.replaceAll('HH:MM', 'HH:mm');
                }
            }
            return (
                // 最外层触发区域
                <TouchableOpacity
                    style={{
                        flexDirection: 'row',
                        width: '100%',
                        backgroundColor: 'white',
                        alignItems: 'center'
                    }}
                    {/*选中时的透明度变化效果*/}
                    activeOpacity={0.8}
                    {/*点击事件*/}
                    onPress={() => {
                        // 年月显示单独处理
                        if (dateFormat === 'YYYY-MM') {
                            this._showDatePicker('', dateFormat || 'YYYY-MM-DD');
                        }
                    }}
                >
                    {/*显示区域*/}
                    <View style={{flex: 1}}>
                        {/*标题显示区域*/}
                        <View style={{
                            flexDirection: 'row',
                            backgroundColor: 'white',
                            justifyContent: 'flex-start',
                            alignItems: 'center',
                            height: titleViewHeight
                        }}>
                            {/*是否必须UI设定*/}
                            {isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
                            {!isRequired && <Text style={{color: "#fff"}}>* </Text>}
                            {/*标题设定*/}
                            <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ""}</Text>
                        </View>
                        {/*日期文字/提示文字显示区域*/}
                        <View style={{
                            width: 300,
                            height: 30,
                            marginLeft: 10,
                            marginTop: 4,
                            marginBottom: 4,
                            justifyContent: 'center',
                            backgroundColor: 'white'
                        }}>
                            <Text
                                style={{
                                    fontSize: 14,
                                    color: (!!this.state.pickerValue && this.state.pickerValue.length > 0) ? 'black' : '#999',
                                    textAlign: 'left',
                                }}>
                                {this.state.pickerValue || placeholder || '请选择'}
                            </Text>
                        </View>
                    </View>
                    {/*日期格式是年-月以外的情况下统一处理*/}
                    {dateFormat !== 'YYYY-MM' &&
                    <DatePicker
                        style={{width: '100%', position: 'absolute', top: 0, left: 0}}
                        {/*模式，上面提到的只支持三种*/}
                        mode={dateType || 'date'}
                        {/*提示文字已经自己绘制了，这里不需要了*/}
                        placeholder={''}
                        {/*日期格式*/}
                        format={!!dateFormat ? dateFormat : 'YYYY-MM-DD'}
                        {/*最小选择日期*/}
                        minDate="1900-01-01"
                        {/*最大选择日期*/}
                        maxDate="2999-12-31"
                        confirmBtnText="确认"
                        cancelBtnText="取消"
                        {/*隐藏选择的日期文字展示*/}
                        hideText={true}
                        {/*隐藏组件右边自带的日历小图标*/}
                        showIcon={false}
                        {/*通过自定义样式，去除日期文字和日历小图标icon的占位*/}
                        customStyles={{
                            dateIcon: {},
                            dateInput: {}
                        }}
                        {/*日期选择值变化后的回调*/}
                        onDateChange={(date) => {
                            console.log(date);
                            this.setState({
                                pickerValue: date
                            })
                            this.attrData.value = date;
                        }}
                    />}
                    {/*统一显示右箭头*/}
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
            )
        } else if (type === 'PERIOD') {
            // 日期区间选择
            /*
            dateType:日期类型
            dateFormat:日期格式
            beginPlaceholder:开始日期提示文字
            endPlaceholder:结束日期提示文字
            seperator:开始与结束日期中间的分割文字定义，如"~",目前没用到
            isAutoCalculate:是否自动计算，目前没用到
            */
            let {dateType, dateFormat, beginPlaceholder, endPlaceholder, seperator, isAutoCalculate} = this.extendData;
            // 类型只支持"date","time","datetime"
            if (!!dateType && dateType != "date" && dateType != "time" && dateType != "datetime") {
                dateType = 'date';
            }
            // 统一格式化时间
            if (!!dateFormat) {
                dateFormat = dateFormat.toUpperCase();
                if (dateFormat !== 'YYYY-MM-DD') {
                    dateFormat = dateFormat.replaceAll('HH:MM', 'HH:mm');
                }
            }
            // 日期区间选择的UI绘制与日期选类似，最大区别是要画两个datepicker
            return (
                <View>
                    <TouchableOpacity
                        style={{
                            minHeight: defaultHeight,
                            flexDirection: 'row',
                            width: '100%',
                            backgroundColor: 'white',
                            alignItems: 'center'
                        }}
                        activeOpacity={0.8}
                        onPress={() => {
                            if (dateFormat === 'YYYY-MM') {
                                this._showDatePicker('begin', dateFormat || 'YYYY-MM-DD');
                            }
                        }}
                    >
                        <View style={{flex: 1}}>
                            <View style={{
                                flexDirection: 'row',
                                backgroundColor: '#fff',
                                justifyContent: 'flex-start',
                                alignItems: 'center',
                                height: titleViewHeight
                            }}>
                                {isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
                                {!isRequired && <Text style={{color: "#fff"}}>* </Text>}
                                <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ''}</Text>
                            </View>
                            <View style={{
                                width: 300,
                                height: 30,
                                marginLeft: 10,
                                marginTop: 4,
                                marginBottom: 4,
                                justifyContent: 'center',
                                backgroundColor: 'white'
                            }}>
                                <Text
                                    style={{
                                        fontSize: 14,
                                        color: (!!this.state.pickerBegin && this.state.pickerBegin.length > 0) ? 'black' : '#999',
                                        textAlign: 'left',
                                    }}>
                                    {this.state.pickerBegin || beginPlaceholder || '请选择'}
                                </Text>
                            </View>
                        </View>
                        {dateFormat !== 'YYYY-MM' &&
                        <DatePicker
                            style={{width: '100%', position: 'absolute', top: 0, left: 0}}
                            mode={dateType || 'date'}
                            placeholder={''}
                            format={!!dateFormat ? dateFormat : 'YYYY-MM-DD'}
                            minDate="1900-01-01"
                            maxDate="2999-12-31"
                            confirmBtnText="确认"
                            cancelBtnText="取消"
                            hideText={true}
                            showIcon={false}
                            customStyles={{
                                dateIcon: {},
                                dateInput: {}
                            }}
                            onDateChange={(date) => {
                                console.log(date);
                                // if (this.state.pickerEnd) {
                                //     if (moment(this.state.pickerEnd).isBefore(date)) {
                                //         xnToast("开始日期不能大于结束日期")
                                //         return;
                                //     }
                                // }
                                this.setState({
                                    pickerBegin: date
                                })
                                this.attrData.beginDate = date;
                                let object = {};
                                object.beginDate = date;
                                object.endDate = this.state.pickerEnd;
                                this.attrData.value = JSON.stringify(object);
                            }}
                        />}
                        <Image style={{width: 16, height: 16}} source={require('../img/bread.png')}
                               resizeMode={'contain'}/>
                    </TouchableOpacity>
                    <View
                        style={{width: '100%', height: 1, backgroundColor: 'rgba(245, 245, 245, 1)', marginLeft: 10}}/>
                    <TouchableOpacity
                        style={{
                            minHeight: 46,
                            flexDirection: 'row',
                            width: '100%',
                            backgroundColor: 'white',
                            alignItems: 'center'
                        }}
                        activeOpacity={0.8}
                        onPress={() => {
                            if (dateFormat === 'YYYY-MM') {
                                this._showDatePicker('end', dateFormat || 'YYYY-MM-DD');
                            }
                        }}
                    >
                        <View style={{flex: 1}}>
                            {/*<View style={{flexDirection: 'row',backgroundColor:'#fff',justifyContent:'flex-start',alignItems:'center', height:titleViewHeight}}>
                                {isRequired&&<Text style={{ color: "#FF3030" }}>* </Text>}
                                {!isRequired&&<Text style={{ color: "#fff" }}>* </Text>}
                                <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name||''}</Text>
                            </View>*/}
                            <View style={{
                                width: 300,
                                height: 30,
                                marginLeft: 10,
                                marginTop: 4,
                                marginBottom: 4,
                                justifyContent: 'center',
                                backgroundColor: 'white'
                            }}>
                                <Text
                                    style={{
                                        fontSize: 14,
                                        color: (!!this.state.pickerEnd && this.state.pickerEnd.length > 0) ? 'black' : '#999',
                                        textAlign: 'left',
                                    }}>
                                    {this.state.pickerEnd || endPlaceholder || '请选择'}
                                </Text>
                            </View>
                        </View>
                        {dateFormat !== 'YYYY-MM' &&
                        <DatePicker
                            style={{width: '100%', position: 'absolute', top: 0, left: 0}}
                            mode={dateType || 'date'}
                            placeholder={''}
                            format={!!dateFormat ? dateFormat : 'YYYY-MM-DD'}
                            minDate="1900-01-01"
                            maxDate="2999-12-31"
                            confirmBtnText="确认"
                            cancelBtnText="取消"
                            hideText={true}
                            showIcon={false}
                            customStyles={{
                                dateIcon: {},
                                dateInput: {}
                            }}
                            onDateChange={(date) => {
                                console.log(date);
                                // if (this.state.pickerBegin) {
                                //     if (moment(this.state.pickerBegin).isAfter(date)) {
                                //         xnToast("结束日期不能小于开始日期")
                                //         return;
                                //     }
                                // }
                                this.setState({
                                    pickerEnd: date
                                })
                                this.attrData.endDate = date;
                                let object = {};
                                object.endDate = date;
                                object.beginDate = this.state.pickerBegin;
                                this.attrData.value = JSON.stringify(object);
                            }}
                        />}
                        <Image style={{width: 16, height: 16}} source={require('../img/bread.png')}
                               resizeMode={'contain'}/>
                    </TouchableOpacity>
                </View>
            )
        } else if (type === 'CITY') {
            // 省市区选择
            let {
                enableMultiple, // 启用多选
                enableFilter, // 启用筛选
                placeholder, // 提示文字
            } = this.extendData;

            let defaultValue = this.extendData.default;
            // 在控件上的显示内容
            let showValue = null;
            // 处理省市区显示内容，根据选中的值用","拼接
            if (Array.isArray(this.state.pickerValue)) {

                this.state.pickerValue.map((v, i) => {
                    if (!!showValue) {
                        showValue = showValue + ',' + v
                    } else {
                        showValue = v;
                    }
                });
            }

            return (
                // <View style={{width: '100%', backgroundColor: 'white', paddingHorizontal: 5, paddingVertical: 10, flexDirection: 'row', alignItems: 'center'}}>
                //     <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>省市区</Text>
                //     <Text style={{
                //             fontSize: 16,
                //             color: 'rgba(0, 0, 0, 1)',
                //             flex: 1,
                //             marginLeft: 30,
                //             marginRight: 10,
                //             textAlign: 'left',
                //         }}>{this.state.pickerValue}</Text>
                //     <Text style={{fontSize: 16, color: global.homeColor}} onPress={this._showAreaPicker.bind(this)}>选择</Text>
                // </View>
                <TouchableOpacity
                    style={{
                        flex: 1,
                        flexDirection: 'row',
                        width: '100%',
                        backgroundColor: '#fff',
                        alignItems: 'center'
                    }}
                    activeOpacity={0.8}
                    onPress={this._showAreaPicker.bind(this)}
                >
                    <View style={{flex: 1}}>
                        <View style={{
                            flexDirection: 'row',
                            backgroundColor: '#fff',
                            justifyContent: 'flex-start',
                            alignItems: 'center',
                            height: titleViewHeight
                        }}>
                            {isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
                            {!isRequired && <Text style={{color: "#fff"}}>* </Text>}
                            <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ""}</Text>
                        </View>
                        <View style={{
                            width: "100%",
                            height: 30,
                            marginLeft: 10,
                            marginTop: 4,
                            marginBottom: 4,
                            justifyContent: 'center',
                            backgroundColor: 'white'
                        }}>
                            <Text
                                style={{
                                    fontSize: 14,
                                    color: (!!showValue && showValue.length > 0) ? 'black' : '#999',
                                    textAlign: 'left',
                                }}>{showValue || placeholder || '请选择'}
                            </Text>
                        </View>
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
            )
        }
    }

    // 绘制UI
    render() {
        return (
            <View style={{
                // 宽度
                width: '100%',
                // 最小高度
                minHeight: defaultHeight,
                // 背景色
                backgroundColor: 'white',
                // 上内边距
                paddingTop: VPading,
                // 左内边距
                paddingLeft: 10,
                // 右内边距
                paddingRight: 15
            }}>
                {/*滚轮组件UI绘制*/}
                {this.renderPicker()}
            </View>
        )
    }
}