import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  DeviceEventEmitter,
} from 'react-native';
import {List, Picker, Provider} from '@ant-design/react-native';

import login_css from '../login/login_css';
import public_css from '../../source/css/public_css';
import loading_css from '../../source/css/loading_css';
import Spinner from 'react-native-loading-spinner-overlay';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import {RetrieveData} from '../../data/storage';

export default class product_edit extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      productId: this.props.route.params.datas.productId,
      productName: this.props.route.params.datas.productName,
      productCode: this.props.route.params.datas.productCode,
      parentCode: this.props.route.params.datas.parentCode,
      taxItem: this.props.route.params.datas.taxItem,
      shortCode: this.props.route.params.datas.shortCode,
      taxRate: [this.props.route.params.datas.taxRate],
      specsModel: this.props.route.params.datas.specsModel,
      price: this.props.route.params.datas.price,
      unit: this.props.route.params.datas.unit,
      taxPriceFlag: this.props.route.params.datas.taxPriceFlag,
      hiddenFlag: this.props.route.params.datas.hiddenFlag,
      taxationCateCode: this.props.route.params.datas.taxationCateCode,
      taxationCateName: this.props.route.params.datas.taxationCateName,
      preferentialFlag: [this.props.route.params.datas.preferentialFlag],
      preferential_type: this.props.route.params.datas.preferential_type,
      mobile: this.props.route.params.datas.createBy,
      reqChannel: this.props.route.params.datas.reqChannel,
      entTaxIds: '',
      ip: this.props.route.params.datas.ip,
      curEntId: '',
      spinner: false,
      textColors: '#DCDCDC',

      zeroRateFlag: [this.props.route.params.datas.zeroRateFlag],
      taxSpeManage: [this.props.route.params.datas.taxSpeManage],
      rateData: [
        {value: 0, label: 0},
        {value: 1, label: 1},
        {value: 2, label: 2},
        {value: 3, label: 3},
        {value: 4, label: 4},
        {value: 5, label: 5},
        {value: 6, label: 6},
        {value: 7, label: 7},
        {value: 8, label: 8},
        {value: 9, label: 9},
      ],
      //零税标识
      zeroTaxRateData: [
        {label: '非零税率', value: null},
        {label: '普通零税率', value: 3},
        {label: '免税', value: 1},
        {label: '不征税', value: 2},
      ],
      //优惠政策标识
      yhzcData: [{label: '不使用', value: 0}, {label: '使用', value: 1}],
      specialData: [
        {label: '不征税', value: '不征税'},
        {label: '征税', value: '征税'},
      ],
      specialFlag: false,
    };
    this._initTaxRate();
  }

  render() {
    const textStyles = StyleSheet.create({
      textStyle: {
        color: this.state.textColors,
      },
    });
    return (
      <Provider>
        <View style={{flexDirection: 'column', flex: 1}}>
          <Spinner
            visible={this.state.spinner}
            textContent={'Loading...'}
            textStyle={loading_css.spinnerTextStyle}
          />
          <ScrollView style={styles.scrollViewStyle}>
            <View style={[login_css.inputView, styles.backView]}>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>*产品分类:</Text>
                <TextInput
                  style={[public_css.textInputStyle, textStyles.textStyle]}
                  placeholder={this.props.route.params.datas.taxationCateName}
                  clearButtonMode="while-editing"
                  editable={false}
                  value={this.state.taxationCateName}
                  onChangeText={text => {
                    this.setState({
                      textColors: '#000',
                    });
                  }}
                />
                <TouchableOpacity
                  style={[styles.backRightBtn, styles.backRightBtnLeft]}
                  onPress={() => {
                    this.props.navigation.navigate('tax_category_codes', {
                      datas: 'edit',
                    });
                  }}>
                  <View style={styles.tapToPTCC}>
                    <Text style={{color: '#fff'}}>搜索</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>*产品名称:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder={this.props.route.params.datas.productName}
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.productName}
                  onChangeText={text => {
                    this.setState({
                      productName: text,
                    });
                  }}
                />
              </View>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>简码:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder={this.props.route.params.datas.shortCode}
                  clearButtonMode="while-editing"
                  value={this.state.shortCode}
                  secureTextEntry={false}
                  onChangeText={text => {
                    this.setState({
                      shortCode: text,
                    });
                  }}
                />
              </View>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>规格:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder={this.props.route.params.datas.specsModel}
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.specsModel}
                  onChangeText={text => {
                    this.setState({
                      specsModel: text,
                    });
                  }}
                />
              </View>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>计量单位:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  placeholder={this.props.route.params.datas.unit}
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={this.state.unit}
                  onChangeText={text => {
                    this.setState({
                      unit: text,
                    });
                  }}
                />
              </View>
              <View style={[styles.inputView, public_css.lineTopBottom]}>
                <Text style={public_css.text}>*单价:</Text>
                <TextInput
                  style={public_css.textInputStyle}
                  keyboardType="number-pad"
                  placeholder={
                    this.props.route.params.datas.price == null ||
                    this.props.route.params.datas.price === ''
                      ? '0.00'
                      : this.props.route.params.datas.price.toString()
                  }
                  clearButtonMode="while-editing"
                  secureTextEntry={false}
                  value={
                    this.props.route.params.datas.price == null ||
                    this.props.route.params.datas.price === ''
                      ? '0.00'
                      : this.state.price.toString()
                  }
                  onChangeText={text => {
                    this.setState({
                      price: text,
                    });
                  }}
                />
              </View>
              <View style={{width: Dimensions.get('window').width}}>
                <Picker
                  data={this.state.rateData}
                  cols={1}
                  value={this.state.taxRate}
                  onChange={value => {
                    this.setState({taxRate: value});
                  }}>
                  <List.Item arrow="horizontal">*税率:</List.Item>
                </Picker>
              </View>
              <View style={{width: Dimensions.get('window').width}}>
                <Picker
                  data={this.state.zeroTaxRateData}
                  cols={1}
                  value={this.state.zeroRateFlag}
                  onChange={itemValue => {
                    if (itemValue === null || itemValue === 3) {
                      this.setState({
                        preferentialFlag: 0,
                        zeroRateFlag: itemValue,
                        specialFlag: false,
                        // taxSpeManage: '不征税',
                      });
                    } else {
                      this.setState({
                        preferentialFlag: 1,
                        zeroRateFlag: itemValue,
                        specialFlag: true,
                        // taxSpeManage: '征税',
                      });
                    }
                  }}>
                  <List.Item arrow="horizontal">*零税率标识</List.Item>
                </Picker>
              </View>
              <View style={{width: Dimensions.get('window').width}}>
                <Picker
                  data={this.state.yhzcData}
                  cols={1}
                  value={this.state.preferentialFlag}
                  onChange={itemValue => {
                    if (itemValue == 1) {
                      this.setState({
                        preferentialFlag: itemValue,
                        specialFlag: true,
                        // taxSpeManage: '征税',
                      });
                    } else {
                      this.setState({
                        preferentialFlag: itemValue,
                        specialFlag: false,
                        // taxSpeManage: '不征税',
                      });
                    }
                  }}>
                  <List.Item arrow="horizontal">*优惠政策标识</List.Item>
                </Picker>
                {this.state.specialFlag ? (
                  <View style={{width: Dimensions.get('window').width}}>
                    <Picker
                      data={this.state.specialData}
                      cols={1}
                      value={this.state.taxSpeManage}
                      onChange={itemValue => {
                        this.setState({
                          taxSpeManage: itemValue,
                        });
                      }}>
                      <List.Item arrow="horizontal">增值税特殊管理</List.Item>
                    </Picker>
                  </View>
                ) : null}
              </View>
            </View>
          </ScrollView>
          <View style={styles.bottomStaus}>
            <TouchableOpacity
              style={[styles.statusBtn, styles.statusLBtn]}
              onPress={() => {
                this.setState({
                  productName: this.props.route.params.datas.productName,
                  shortCode: this.props.route.params.datas.shortCode,
                  taxRate: [this.props.route.params.datas.taxRate],
                  specsModel: this.props.route.params.datas.specsModel,
                  price: this.props.route.params.datas.price,
                  unit: this.props.route.params.datas.unit,
                  taxPriceFlag: this.props.route.params.datas.taxPriceFlag,
                  taxationCateCode: this.props.route.params.datas
                    .taxationCateCode,
                  taxationCateName: this.props.route.params.datas
                    .taxationCateName,
                  preferentialFlag: [
                    this.props.route.params.datas.preferentialFlag,
                  ],
                  textColors: '#DCDCDC',
                  zeroRateFlag: [this.props.route.params.datas.zeroRateFlag],
                  taxSpeManage: [this.props.route.params.datas.taxSpeManage],
                });
              }}>
              <Image
                source={require('../../source/img/productImg/clear.png')}
                style={{width: 32, height: 32}}
              />
              <Text>取消修改</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.statusBtn, styles.statusRBtn]}
              onPress={() => this.signIn()}>
              <Image
                source={require('../../source/img/productImg/confirm.png')}
                style={{width: 32, height: 32}}
              />
              <Text style={{color: '#fff'}}>确定修改</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Provider>
    );
  }

  componentDidMount() {
    let zeroRateFlag = this.props.route.params.datas.zeroRateFlag;
    let preferentialFlag = this.props.route.params.datas.preferentialFlag;
    if (zeroRateFlag != null || zeroRateFlag != 3) {
      this.setState({
        specialFlag: true,
      });
    } else {
      this.setState({
        specialFlag: false,
      });
    }
    if (preferentialFlag == 1) {
      this.setState({
        specialFlag: true,
      });
    } else {
      this.setState({
        specialFlag: false,
      });
    }
    // 收到监听
    this.listener = DeviceEventEmitter.addListener(
      'getTaxClassCodeEdit',
      message => {
        // 收到监听后想做的事情 // 监听
        this._initTaxCategoryCode(message);
      },
    );
  }
  componentWillUnmount() {
    // 移除监听
    if (this.listener) {
      this.listener.remove();
    }
    this.setState = (state, callback) => {
      return;
    };
  }
  _initTaxRate = async () => {
    const entinfos = JSON.parse(await RetrieveData('defaultEnt'));
    if (!this.emptyString(entinfos.availableTaxes.trim())) {
      let rates = entinfos.availableTaxes.trim().split(',');
      this.setState({rateData: rates});
    }
  };
  emptyString = str => {
    return str === '' || str === null ? true : false;
  };

  _initTaxCategoryCode = message => {
    let obj = JSON.parse(message);
    if (obj.code === null) {
      this.setState({
        taxationCateCode: '税收分类编码',
        taxationCateName: '请选择税收分类编码',
      });
    } else {
      this.setState({
        taxationCateCode: obj.code,
        taxationCateName: obj.name,
      });
    }
  };

  signIn = async () => {
    this.setLoadingStatus(true);
    const entInfo = JSON.parse(await RetrieveData('defaultEnt'));
    this.setState({curEntId: entInfo.entTaxId});
    const res = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (res && account) {
      let token = res.substring(1, res.length - 1);
      let mobile = account.substring(1, account.length - 1);
      const url = '/sys/product/saveOrUpdate';
      let response = await GetDataPost(
        url,
        token,
        {
          productId: this.state.productId,
          productName: this.state.productName,
          shortCode: this.state.shortCode,
          taxRate: this.state.taxRate[0],
          specsModel: this.state.specsModel,
          price: this.state.price,
          unit: this.state.unit,
          taxPriceFlag: this.state.taxPriceFlag,
          taxationCateCode: this.state.taxationCateCode,
          taxationCateName: this.state.taxationCateName,
          preferentialFlag: this.state.preferentialFlag[0],
          mobile: mobile,
          entTaxId: this.state.curEntId,
          reqChannel: 3,
          ip: this.state.ip,
          zeroRateFlag: this.state.zeroRateFlag[0],
          taxSpeManage: this.state.taxSpeManage[0],
        },
        false,
        1,
      );
      if (response) {
        ShowToast('修改成功！');
        this.setLoadingStatus(false);
        DeviceEventEmitter.emit('updatePage', null);
        this.props.navigation.goBack();
      } else {
        ShowToast(response.msg);
        this.setLoadingStatus(false);
      }
    }
  };

  setLoadingStatus = isLoading => {
    this.setState({
      spinner: isLoading,
    });
  };
}

const styles = StyleSheet.create({
  scrollViewStyle: {
    flexGrow: 1,
    backgroundColor: '#fff',
  },
  backView: {
    marginBottom: 30,
  },
  inputView: {
    flexDirection: 'row',
    height: 44,
    alignItems: 'center',
    width: Dimensions.get('window').width * 0.9,
  },
  dorpDownRow: {
    marginTop: 20,
  },
  dorpDownRowLeft: {
    flex: 1,
  },
  dorpDownRowRight: {
    marginLeft: 20,
    height: 30,
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: '#DCDCDC',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 2,
  },
  tapToPTCC: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginTop: 5,
    height: 30,
    width: 50,
    borderRadius: 8,
    backgroundColor: '#99CCFF',
  },
  bottomStaus: {
    height: 50,
    flexDirection: 'row',
  },
  statusBtn: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  statusLBtn: {
    backgroundColor: '#e6e8ea',
  },
  statusRBtn: {
    backgroundColor: '#1E90FF',
  },
});