import React, { Component } from 'react'
import {
  View,
  Text,
  PixelRatio,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  FlatList,
  Dimensions,
  Animated,
} from 'react-native'
import phonaq from '../../../static/images/defaultimg.jpg'
import Icon from '../../../components/Iconfont/Iconfont'
import { Bubble, ModalEcx, CountNum } from '../../../components'
import { ScaleUtil } from '../../../utils/utils'

const { width } = Dimensions.get('window')

export default class Specification extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  _renderModalContent() {
    return (
      <View style={styles.contentBox}>
        <View
          style={{ alignSelf: 'center', paddingTop: 13, paddingBottom: 18 }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#999',
            }}
          >
            促销
          </Text>
        </View>
        <TouchableOpacity
          onPress={() => {
            this.closeModalCate()
          }}
          style={{ position: 'absolute', right: 7, top: 10 }}
        >
          <Icon name="icon-icon-guanbianniu" size={28} color="#999" />
        </TouchableOpacity>
        {/* 信息行 */}
        <FlatList
          keyExtractor={(item, index) => index}
          data={[
            { title: '满减', data: '满100件20' },
            { title: '满额返券', data: '全场满199元包邮' },
            { title: '组合', data: '搭配商品A可以立省30元' },
            { title: '满减', data: '满100件20' },
            { title: '满额返券', data: '全场满199元包邮' },
            { title: '组合', data: '搭配商品A可以立省30元' },
            { title: '满减', data: '满100件20' },
          ]}
          extraData={this.state}
          style={{ paddingHorizontal: 10, paddingBottom: 30 }}
          renderItem={({ item, index }) => (
            <View
              style={{
                flexDirection: 'row',
                paddingVertical: 10,
                borderBottomColor: '#EEE',
                borderBottomWidth: 1 / PixelRatio.get(),
              }}
            >
              <View
                style={{
                  paddingVertical: 2,
                  paddingHorizontal: 8,
                  borderRadius: 100,
                  borderColor: '#E70013',
                  borderWidth: 1 / PixelRatio.get(),
                }}
              >
                <Text
                  style={{
                    fontSize: 10,
                    lineHeight: 14,
                    letterSpacing: 0.14,
                    color: '#E70013',
                  }}
                >
                  {item.title}
                </Text>
              </View>
              <Text
                style={{
                  fontSize: 12,
                  lineHeight: 17,
                  color: '#333',
                  marginLeft: 5,
                  marginTop: 2,
                }}
              >
                {item.data}
              </Text>
            </View>
          )}
        />
      </View>
    )
  }

  _openModalCate(va, data) {
    this.mdPromot._setModalVisible(va)
  }

  closeModalCate() {
    this.mdPromot._setModalVisible(false)
  }

  render() {
    return (
      <ModalEcx
        animationType={'fade'}
        ref={mdPromot => (this.mdPromot = mdPromot)}
        content={this._renderModalContent()}
      />
    )
  }
}
const styles = StyleSheet.create({
  contentBox: {
    backgroundColor: '#FFF',
  },
})