import { Button, Tabbar, TabbarItem } from "@antmjs/vantui";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import react, { useState } from "react";
import { Image } from "@antmjs/vantui";
import "./index.scss";
import { Tag } from "@antmjs/vantui";
import moment from 'moment'

const ActiveCard = (props: any) => {
  const [dataSource, setdataSource] = useState<any>({}); //活动详情
  const { title, address, date, tagName, tagCode, Status, images, isDelete } =
    props?.dataSource;

  return (
    <View className="activeCard">
      <View className="left">
        {false && (
          <View className="leftTag">
            <Tag round={true} type="success">
              图片标签
            </Tag>
          </View>
        )}

        <View className="leftImage">
          <Image
            width="100%"
            height="100px"
            fit="cover"
            // src="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images/v4-460px-Climb-a-Mountain-Step-9.jpg"
            src={images?.[0]?.url}
          />
        </View>
      </View>
      <View className="middle">
        <View className="title">
          <Tag round={true} type="warning" style={{ marginRight: "5px" }}>
            {/* 标签 */}
            {tagName}
          </Tag>

          {/* 标题 */}
          <Text>{title}</Text>
        </View>
        <View className="down">
          <View className="date">
            {/* 地址 */}
            <View className="">{address}</View>
            {/* 日期 */}
            <View className="">{moment(date).format('YYYY-MM-DD')}</View>
          </View>

          <View className="btn">
            {/* 活动状态 0 待开放 1开放中 2已取消 3进行中 4已结束 5已关闭 */}
            <Button plain hairline type="primary">
              {`立即查看`}
            </Button>
          </View>
        </View>
      </View>
    </View>
  );
};

export default ActiveCard;
