import Taro, {Component} from '@tarojs/taro';
import {View, Text, Navigator, Image} from '@tarojs/components';
import './index.scss'
import down from '../../assets/images/down@2x.png';
import couponModel from '../../models/coupon';

const model = new couponModel();
export default class MyCoupon extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      couponList: []
    };
  }

  config = {};

  componentWillMount() {
    this.getCouponList();
  }

  async getCouponList() {
    let couponList =  await model.myCouponList();
    this.setState({couponList});
  };

  showNote = (value) => {
    let {couponList} = this.state;
    couponList[value].showNotes = !couponList[value].showNotes;
    this.setState({
      couponList
    });
    this.forceUpdate();
  };

  render() {
    let {couponList} = this.state;
    return (
      <View className='page'>
        <View className='title'>优惠券</View>
        <View className='content'>
          {couponList.map((value, index) => {
            return <View className='item'>
              <View className='ticket'>
                <View className='left'>
                  <View className='price'>{value.coupon_value}</View>
                </View>
                <View className='right'>
                  <View className='name'>{value.coupon_name}</View>
                  <View className='date'>{value.coupon_validity}</View>
                  <View className='desc' onClick={this.showNote.bind(this, index)}>使用说明
                    <Image mode='aspectFit' src={down} className={value.showNotes ? 'up' : 'down'}></Image>
                  </View>
                </View>
              </View>
              <View className='desc-info' style={{display: value.showNotes ? 'block' : 'none'}}>
                {value.notes.map((note) => {
                  return <View className='p'>· {note}</View>
                })}
              </View>
            </View>
          })}
        </View>
      </View>
    )
  }
}