import { View, Image, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import flyDown from "@/assets/images/event/flyDown.png";
import "./index.less";
import { Button } from "@taroify/core";
interface LabelItemProps {
  label: string;
  value: string;
}
function OrderDirect() {
  const LabelText: React.FC<LabelItemProps> = ({ label, value }) => (
    <View className="label-row">
      <Text className="label">{label}：</Text>
      <Text className="value">{value}</Text>
    </View>
  );
  //返回首页
  const handleHomePage = () => {
    Taro.reLaunch({
      url: "/pages/index/index",
    });
  };
  //派遣信息
  const dispatchStorgeInfo: API.EventMembers = JSON.parse(
    Taro.getStorageSync("dispatchInfo")
  );
  //处置人员
  const disposeMember = dispatchStorgeInfo?.disposeMembers[0];
  //监督人员
  const superviseMembers = dispatchStorgeInfo?.superviseMembers;
  return (
    <View className="wrap">
      <Image src={flyDown} className="fly-icon" />
      <Text className="title">指令已直达</Text>
      <View className="info dflex">
        <Image
          src={disposeMember.photoUrl}
          className="header-pic"
          mode="aspectFill"
        />
        <View>
          <View className="user dflex">
            <Text className="name">{disposeMember.memberName}</Text>
            <Text className="user-tag">
              {disposeMember.responsibilitySystemName}人员
            </Text>
          </View>
          <Text className="company">{disposeMember.department}</Text>
        </View>
      </View>
      <View className="supervise">
        <Text className="fbold subtitle">监督人员</Text>
        {superviseMembers.map((it) => (
          <LabelText
            label={it.department}
            value={it.memberName}
            key={it.memberId}
          />
        ))}
      </View>
      <Button color="primary" shape="round" onClick={handleHomePage}>
        返回首页
      </Button>
    </View>
  );
}

export default OrderDirect;
