<template>
    <view class="p-person-avatar g_flex_column_center g_w_all g_h_all g_bg_0 g_kuaishou">
        <view>
            <view
                :style="{
                    width: size.width + 'px',
                    height: size.width + 'px',
                }"
                style="overflow: hidden"
                class="g_flex_c"
            >
                <img
                    :src="avatar"
                    :style="{
                        width: size.width + 'px',
                        height: size.width + 'px',
                    }"
                />
            </view>
            <view class="g_flex_row_center g_mt_30">
                <view v-if="!isEdit" class="g_flex_row_center">
                    <!-- || MP-WEIXIN -->
                    <!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU  -->
                    <button aria-role="button" class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f" style="border: 1px solid #fff; background-color: transparent; font-size: 14px" @click="handleOpenAvatar">更换图片</button>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <!-- <button open-type="chooseAvatar" @chooseavatar="handleStartChangeAvatar" aria-role="button" class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f" style="border: 1px solid #fff; background-color: transparent; font-size: 14px">更换图片</button> -->
                    <button @click="handleOpenAvatar" aria-role="button" class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f" style="border: 1px solid #fff; background-color: transparent; font-size: 14px">更换图片</button>
                    <!-- #endif -->
                </view>
                <view v-if="isEdit" class="g_flex_row_center">
                    <view class="g_w_110 g_h_32 g_flex_c g_radius_17 g_c_f g_mr_16" style="border: 1px solid #fff" @click="handleCancel">取消</view>
                    <view class="g_w_112 g_h_34 g_flex_c g_radius_17 g_c_f g_bg_f40" style="border: 2px solid #ff4400" @click="handleConfirm">确认</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    onReady() {
        uni.setNavigationBarColor({
            backgroundColor: "#000000",
            frontColor: "#ffffff",
        });
    },
    onLoad(options) {
        let that = this;
        console.log("options", options);
        this.info = options;
        this.avatar = options.value;
        uni.setNavigationBarTitle({
            title: `修改${options.label}`,
        });
    },
    onShareAppMessage() {
        return this.G.shareFun();
    },
    data() {
        return {
            avatar: '',
            isEdit: false,
            size: {
                width: uni.getSystemInfoSync().windowWidth,
                height: uni.getSystemInfoSync().windowHeight,
            },
        };
    },
    methods: {
        handleOpenAvatar() {
            let that = this;
            uni.showActionSheet({
                itemList: ["从相册选择", "使用相机"],
                success: function (res) {
                    if (res.tapIndex == 0) {
                        console.log("点击相册");
                        // 相册
                        that.setAvatar(["album"]);
                    } else {
                        console.log("点击拍照");
                        // 拍照
                        that.setAvatar(["camera"]);
                    }
                },
                fail: function (res) {},
            });
        },
        setAvatar($type) {
            let that = this;
            that.G.uploadImg(
                (res) => {
                    console.log("获取数据", res);
                    that.avatar = res.image;
                    that.isEdit = true;
                },
                "default",
                1,
                $type
            );
        },
        handleCancel() {
            let that = this;
            that.isEdit = false;
            // that.avatar =  this.avatar;
        },
        handleConfirm() {
            let that = this;
            that.G.Put(
                "/yishoudan/agency/updateField",
                {
                    fieldName: this.info.fieldName,
                    fieldValue: that.avatar,
                },
                (res) => {
                    that.isEdit = false;
                    uni.showToast({
                        title: "修改成功",
                        icon: "success",
                    });
                    that.G.checkToken();
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                }
            );
        },
    },
};
</script>

<style></style>