<template>
  <view class="establish">
    <view class="establish-box">
        <cardCom :imgSerial="selectIdx" :isEdit="true" :cardData="cardInfo"></cardCom>
    <view class="business-style"> 
      <view class="business-title">名片样式</view>
      <view class="style-list">
        <view
          class="style-item"
          v-for="(item, index) in selectList"
          :key="item.title"
          @click="changeIdx(index)"
        >
          <view class="style-icon" v-if="index === selectIdx">
            <image class="" src="@/static/images/success.png" />
          </view>
          <image class="" :src="item.img" />
        </view>
      </view>
    </view>
    <tui-form ref="form">
      <view class="basic-info">
        <view class="info-title">基本信息</view>
        <view class="tui-form">
          <!-- <tui-form-item label="头像">
                        <image class="" src="@/static/header_image.png"
                            style="width: 80rpx;height: 80rpx; border-radius: 50%;" />
                    </tui-form-item> -->
          <tui-form-item label="姓名" :asterisk="true" :labelSize="28">
            <tui-input
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请输入姓名"
            ></tui-input>
          </tui-form-item>
          <tui-form-item label="公司" :asterisk="true" :labelSize="28">
            <tui-input
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请输入公司名称"
            ></tui-input>
          </tui-form-item>
          <tui-form-item label="职位" :asterisk="true" :labelSize="28">
            <tui-input
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请输入担任职位"
            ></tui-input>
          </tui-form-item>
        </view>
      </view>
      <view class="contact-mode">
        <view class="mode-title">联系方式</view>
        <tui-form-item label="手机" :asterisk="true" :labelSize="28">
          <tui-input
            padding="0"
            :borderBottom="false"
            :size="28"
            placeholder="请输入手机号"
          ></tui-input>
        </tui-form-item>
        <tui-form-item label="微信" :labelSize="28">
          <tui-input
            padding="0"
            :borderBottom="false"
            :size="28"
            placeholder="请输入微信号"
          ></tui-input>
        </tui-form-item>
        <tui-form-item label="地址" :labelSize="28">
          <tui-input
            padding="0"
            :borderBottom="false"
            :size="28"
            placeholder="请填写地址信息"
          ></tui-input>
        </tui-form-item>
      </view>
      <view class="personal-brief">
        <view class="brief-title">个人简介</view>
        <tui-textarea
          flexStart
          placeholder="请输入个人简介"
          min-height="100rpx"
          height="100rpx"
          :size="28"
        ></tui-textarea>
      </view>
      <view class="company-brief">
        <view class="company-title">公司简介</view>
        <tui-textarea
          flexStart
          placeholder="请填写公司简介"
          min-height="100rpx"
          height="100rpx"
          :size="28"
        ></tui-textarea>
      </view>
    </tui-form>
    </view>

    <view class="footer">
      <view class="btn-list">
        <view>预览名片</view>
        <view>保存名片</view>
      </view>
      <!-- <view class="preview" @click="goCard">预览名片</view>
            <view class="preserve">保存</view> -->
    </view>
  </view>
</template>

<script>
import cardCom from "@/components/cardCom/index.vue";
export default {
  components: {
    cardCom,
  },
  onLoad() {
    // uni.getSystemInfo({
    //     success: (res) => {
    //         this.bottom = res.safeAreaInsets.bottom
    //     }
    // })
  },
  data() {
    return {
      // bottom: null,
      selectIdx: 0,
      selectList: [
        {
          title: "one",
          img: require("@/static/images/select_1.png"),
        },
        {
          title: "two",
          img: require("@/static/images/select_2.png"),
        },
        {
          title: "three",
          img: require("@/static/images/select_3.png"),
        },
      ],
      //  名片信息
      cardInfo: {
        name: "", // 名字
        phone: "", // 电话
        weChatSignal: "", // 微信号
        enterpriseName: "", // 企业名称
        enterpriseDuties: "", // 担任职务
        headImage: "", // 头像
        address: "", // 地址
        styleId: "", // 选择样式
        personalProfile: "", // 个人简介
      },
    };
  },
  methods: {
    goCard() {
      uni.navigateTo({
        url: "/pages/previewCard/index",
      });
    },
    changeIdx(idx) {
      this.selectIdx = idx;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
