import { Component } from "react";
import { View, Picker, Image, Text } from "@tarojs/components";
import { AtTabs, AtTabsPane, AtCheckbox } from "taro-ui";
import Taro from "@tarojs/taro";
import "./index.less";
import ProductList from "../../components/index/ProductList"; //商品列表
import add from "../../images/productManagement/add.png";
import back from "../../images/productManagement/back.png";
import manger from "../../images/productManagement/manger.png";
import selectIcon from "../../images/productManagement/selectIcon.png";
import deleteIcon from "../../images/productManagement/delete.png";
import toTop from "../../images/productManagement/toTop.png";
export default class Index extends Component {
  state = {
    isManagementStatus: false, //是否是管理状态
    current: 0, //tabs坐标
    selectedOption: "全部商品", //商品默认名称
    tabList: [{ title: "在售中 (20)" }], //tabs标题
    options: ["全部商品", "选项2", "选项3"], //商品下拉选项
    checkedList: ["all"], //全选
    checkboxOption: [
      {
        value: "allValue",
        label: "全选",
      },
    ], //全选
  };
  // tabs切换
  handleClick(value) {
    this.setState({
      current: value,
    });
  }
  // 商品下拉选项
  handleSelectOption = (e) => {
    const selectedOption = this.state.options[e.detail.value];
    this.setState({ selectedOption });
  };
  // 切换管理状态
  changeManagement = (type) => {
    if(type === 'management'){
      this.setState({
        isManagementStatus: true,
      });
    }else{
      this.setState({
        isManagementStatus: false,
      });
    }
  };
  // 全选
  handleChange(value) {
    this.setState({
      checkedList: value,
    });
  }
  render() {
    return (
      <View className="index">
        {/* tab分类 */}
        <View className="tabs-list">
          <AtTabs
            tabList={this.state.tabList}
            current={this.state.current}
            scroll
          >
            <AtTabsPane current={this.state.current} index={0}>
              {/* 内容 */}
              <View className="tabs-content">
                {/* 商品下拉分类 */}
                <View className="product-category">
                  <Picker
                    mode="selector"
                    range={this.state.options}
                    onChange={this.handleSelectOption}
                  >
                    <View className="product-category-left">
                      {this.state.selectedOption}
                      <Image
                        className="selectIcon"
                        src={selectIcon}
                        mode="aspectFit"
                      />
                    </View>
                  </Picker>
                  <View className="product-category-right">
                    前6款商品将推荐给直属会员
                  </View>
                </View>
                {/* 商品列表 */}
                <ProductList isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
              </View>
            </AtTabsPane>
          </AtTabs>
        </View>
        {/* 底部购买模块 */}
        {!this.state.isManagementStatus ? (
          <View className="bottom-buy">
            <View onClick={() => Taro.navigateBack()} className="bottom-buy-left">
              <Image  src={back} mode="aspectFit" />
              <Text className="bottom-buy-text">返回店铺</Text>
            </View>
            <View className="bottom-buy-right">
              <View onClick={() => this.changeManagement('management')} className="bottom-buy-right-self">
                <Image src={manger} mode="aspectFit" />
                <Text className="bottom-buy-text">批量管理</Text>
              </View>
              <View onClick={() => Taro.navigateTo({ url: '/pages/productClassify/index' })} className="bottom-buy-right-share">
                <Image src={add} mode="aspectFit" />
                <Text className="bottom-buy-text">添加商品</Text>
              </View>
            </View>
          </View>
        ) : (
          <View className="operation-product">
            <View className="operation-product-top">
              <View className="left">
                <AtCheckbox
                  options={this.state.checkboxOption}
                  selectedList={this.state.checkedList}
                  onChange={this.handleChange.bind(this)}
                />
              </View>
              <View className="right">
                <View className="item">
                  <Image src={toTop} mode="aspectFit" />
                  <Text>移至顶部</Text>
                </View>
                <View className="item">
                  <Image src={deleteIcon} mode="aspectFit" />
                  <Text>删除</Text>
                </View>
              </View>
            </View>
            <View onClick={() => this.changeManagement('finish')} className="operation-product-bottom">完成</View>
          </View>
        )}
      </View>
    );
  }
}
