text: /*
   * @Author: czy0729
   * @Date: 2021-07-16 00:14:52
   * @Last Modified by: czy0729
   * @Last Modified time: 2022-01-23 01:13:11
   */
  import React from 'react'
  import { View } from 'react-native'
  import { LinearGradient } from 'expo-linear-gradient'
  import { Text } from '@components'
  import { Cover } from '@_'
  import { _, systemStore } from '@stores'
  import { getCoverMedium } from '@utils'
  import { obc } from '@utils/decorators'
  import { HTMLDecode } from '@utils/html'
  import { cnjp } from '@utils/app'
  import { linearColor } from './ds'
  
  const weekdayCN = {
    0: '日',
    1: '一',
    2: '二',
    3: '三',
    4: '四',
    5: '五',
    6: '六',
    7: '日'
  }
  
  function CoverToday({ data }, { navigation }) {
    rerender('Discovery.CoverToday')
  
    const styles = memoStyles()
    return (
      <View>
        <View
          style={[
            styles.item,
            {
              borderRadius: systemStore.setting.coverRadius
            }
          ]}
        >
          <Cover
            src={getCoverMedium(data?.images?.common)}
            width={styles.cover.width}
            height={styles.cover.height}
            radius
            placeholder={false}
            onPress={() => {
              navigation.push('Subject', {
                subjectId: data.id,
                _jp: data.name,
                _cn: data.name_cn,
                _image: data?.images?.common
              })
            }}
          />
          <LinearGradient
            style={styles.linear}
            colors={linearColor}
            pointerEvents='none'
          />
          <View style={styles.info} pointerEvents='none'>
            <Text
              size={_.device(10, 13)}
              type={_.select('plain', 'title')}
              numberOfLines={1}
              bold
              pointerEvents='none'
            >
              {data.timeCN.slice(0, 2)}:{data.timeCN.slice(2)} · 周
              {weekdayCN[data.weekday]}
            </Text>
            <Text
              style={_.mt.xs}
              size={_.device(10, 12)}
              type={_.select('plain', 'title')}
              numberOfLines={2}
              bold
              pointerEvents='none'
            >
              {HTMLDecode(cnjp(data.name_cn, data.name))}
            </Text>
          </View>
        </View>
      </View>
    )
  }
  
  export default obc(CoverToday)
  
  const memoStyles = _.memoStyles(() => {
    const width = _.windowSm.contentWidth * _.device(0.28, 0.298)
    const margin = _.device(_._wind, _.md)
    return {
      item: {
        marginRight: margin,
        backgroundColor: _.colorBg,
        borderRadius: _.radiusSm,
        overflow: 'hidden'
      },
      cover: {
        width,
        height: width * 1.38
      },
      linear: {
        position: 'absolute',
        zIndex: 1,
        top: '50%',
        right: 0,
        bottom: 0,
        left: 0,
        marginBottom: -0.5
      },
      info: {
        position: 'absolute',
        zIndex: 2,
        right: _.sm + 4,
        bottom: _.sm + 2,
        left: _.sm + 4,
        opacity: 0.92
      }
    }
  })
  