    <template>
    <NavBar :showIcon="true" :showTitle="true" title="我的公司" backgroundBox="#FFFFFF"></NavBar>
    <div class="page">
        <div class="content">
            <div class="top">
                <img v-if="params.logoPath" :src="evn.APP_IMAGE_BASE_API + params.logoPath" @click="chooseImage" />
                <img v-else src="@/static/image/temp/defaultCompany.png" alt="" @click="chooseImage" />
                <div class="name1" @click="chooseImage">更换企业头像</div>
                <div class="name">{{ companyInfo.companyName || companyInfo.name }}</div>
                <formItem style="margin-top: 80rpx" title="营业执照" arrow :border="false" @click="jupmLicenseInfo">
                    <p :class="`status${companyInfo?.status}`">{{ auditStatus }}</p>
                </formItem>
            </div>
            <div class="form-wrap">
                <formItem title="企业名称">
                    <input
                        type="text"
                        :style="{ color: [1, 0].includes(companyInfo.status) ? '#77818f' : '' }"
                        :disabled="[1, 0].includes(companyInfo.status)"
                        v-model="params.companyName"
                        placeholder="请输入企业名称"
                    />
                </formItem>

                <formItem title="行业分类" v-if="[1].includes(pageStatus)">
                    <wd-picker
                        value-key="text"
                        label-key="code"
                        use-default-slot
                        :columns="columns"
                        v-model="params.industry"
                        @confirm="handleConfirm"
                    >
                        <p style="color: #77818f">{{ params.industry == "" ? "请选择行业分类" : params.industry }}</p>
                    </wd-picker>
                </formItem>
                <formItem title="信用代码">
                    <p style="color: #77818f">{{ companyInfo.creditCode }}</p>
                </formItem>

                <formItem title="公司地址" icon="">
                    <wd-col-picker
                        v-model="cityValue"
                        :columns="cityOpstion"
                        style="width: 100%"
                        value-key="code"
                        label-key="name"
                        :column-change="columnChangeCity"
                        @confirm="handleConfirmCity"
                        use-default-slot
                    >
                        <p style="width: 100%; color: #77818f">
                            {{ cityText || "请选择公司地址" }}
                        </p>
                    </wd-col-picker>
                </formItem>
                <formItem title="注册地址" icon="">
                    <p style="color: #77818f">{{ params.location || "请选择公司注册地址" }}</p>
                </formItem>
                <div class="textarea-wrap" v-if="[1].includes(pageStatus)">
                    <p class="label">公司介绍</p>
                    <textarea maxlength="500" placeholder="请输入公司介绍" v-model="params.introduction" />
                </div>
            </div>
        </div>
        <wd-tabbar
            v-if="[1].includes(pageStatus)"
            @click="submit"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">保存</view>
        </wd-tabbar>
    </div>
</template>

    <script setup>
import { reactive, ref } from "vue";
import formItem from "./formItem.vue";
import { getCompanyInfoApi, saveCompanyInfoApi, companyReviewInfo } from "@/api/user";
import { getAreaListApi, getDictDataApi } from "@/api/common";
import { uploadFiles } from "@/utils/fileUpload";
import { getEnumText } from "@/utils/utils";
import evn from "@/utils/config";
import { useColPickerData } from "@/hooks/useColPickerData.ts";
const { colPickerData, findChildrenByCode } = useColPickerData();

const params = reactive({
    id: 0,
    logoPath: "",
    companyName: "",
    provinceCode: "",
    industry: "",
    provinceName: "",
    cityCode: "",
    cityName: "",
    districtCode: "",
    districtName: "",
    creditCode: "",
    location: "",
    introduction: ""
});
const pageStatus = ref(1);
/* 调整到审核信息 */
const jupmLicenseInfo = () => {
    if (pageStatus.value == 1 || pageStatus.value == 2 || pageStatus.value == 3) {
        uni.navigateTo({
            url: `/pages/user/myCompany/licenseInfo?status=${pageStatus.value}`
        });
    }
};
onLoad(async ({ status }) => {
    pageStatus.value = status * 1;
    getAreaListApi({ type: "province", code: "" }).then(res => {
        res.data.unshift({ name: "不限", code: null });
        cityOpstion.value.push(res.data);
    });
    await getDictDataApi(["EnumIndustryCategory"]).then(res => {
        columns.value = res.data.EnumIndustryCategory;
    });
    if (status == 1) {
        getCompanyInfoApiFn();
    } else {
        companyReviewInfoFn();
    }
});
/* 审核状态文字 */
const auditStatus = ref("");
/* 获取公司信息 */
const companyInfo = ref({});
function getCompanyInfoApiFn() {
    getCompanyInfoApi().then(async res => {
        companyInfo.value = res.data;
        console.log("res.data", res.data);

        Object.keys(params).forEach(key => {
            params[key] = res.data[key];
        });
        const {
            provinceName,
            cityName,
            districtName,
            name,
            introduction,
            logoPath,
            creditCode,
            cityCode,
            districtCode,
            provinceCode,
            address
        } = res.data;
        params.companyName = name;
        params.introduction = introduction;
        params.logoPath = logoPath;
        params.creditCode = creditCode;
        if (provinceCode) {
            cityValue.value = [provinceCode, cityCode, districtCode];
        }
        cityText.value = address;
        // 审核状态
        auditStatus.value = await getEnumText("EnumReviewStatus", res.data.status);
    });
}
function companyReviewInfoFn() {
    companyReviewInfo().then(async res => {
        companyInfo.value = res.data;
        Object.keys(params).forEach(key => {
            params[key] = res.data[key];
        });

        const {
            provinceName,
            cityName,
            districtName,
            name,
            introduction,
            location,
            logoPath,
            creditCode,
            provinceCode,
            cityCode,
            districtCode,
            companyName,
            address
        } = res.data;
        params.companyName = companyName;
        params.introduction = introduction;
        params.logoPath = logoPath;
        cityText.value = address;
        params.creditCode = creditCode;
        if (provinceCode) {
            cityValue.value = [provinceCode, cityCode, districtCode];
        }
        // 审核状态
        auditStatus.value = await getEnumText("EnumReviewStatus", res.data.status);
        console.log("auditStatus", auditStatus);
    });
}
function handleConfirm() {}
/* 获取省市区 */
const cityOpstion = ref([]);
const columns = ref([]);
const cityValue = ref([]);

const cityText = ref("");
let citySelectedItems = [];
function sleep(second = 1) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(true);
        }, 1000 * second);
    });
}
const keys = ["city", "district"];
const columnChangeCity = ({ selectedItem, resolve, index, finish }) => {
    const type = keys[index];
    if (type && selectedItem.code) {
        getAreaListApi({ type, code: selectedItem.code }).then(res => {
            res.data.unshift({ name: "不限", code: null });
            resolve(res.data);
        });
    } else {
        finish();
    }
};
const handleConfirmCity = ({ selectedItems }) => {
    const [province, city, district, street] = selectedItems;
    cityText.value = selectedItems
        .filter(v => v.code)
        .map(v => v.name || "")
        .join("-");
    params.address = selectedItems
        .filter(v => v.code)
        .map(v => v.name || "")
        .join("-");
    if (!province.code) {
        cityText.value = "不限";
        params.address = "不限";
    }
    params.provinceCode = province.code;
    params.cityCode = city?.code;
    params.cityName = district?.name;
    params.districtCode = district?.code;
    params.street = street ? street.name : "";
};
/* 选择图片 */
const chooseImage = sourceType => {
    uni.chooseImage({
        sourceType: [sourceType],
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            params.logoPath = res[0].key;
        }
    });
};
/* 提交 */
const submit = () => {
    console.log("params", params);

    if (validateForm(params, ["location", "companyName", "creditCode", "introduction", "id", "industry"])) {
        saveCompanyInfoApi(params).then(res => {
            if (res.code == 200) {
                uni.showToast({
                    title: "保存成功",
                    icon: "success",
                    success() {
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    }
                });
            } else {
                uni.showToast({
                    title: res.message,
                    icon: "none"
                });
            }
        });
    }
};

const validateForm = (formData, requiredFields) => {
    for (const field of requiredFields) {
        const value = formData[field];
        // 排除 0 和 "0" 的值，不作为空值校验
        if (value === undefined || value === null || value === "") {
            uni.showToast({
                title: `请完善相关信息`,
                icon: "none",
                duration: 2000
            });
            return false;
        }
    }
    return true;
};
</script>

    <style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
        flex: 1;
        .top {
            padding: 0 32rpx;
            text-align: center;
            border-bottom: 16rpx solid #f3f4f8;
            img {
                width: 160rpx;
                height: 160rpx;
                margin-top: 28rpx;
                border-radius: 50%;
            }
            .name {
                margin-top: 32rpx;
            }
            .name1 {
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #77818f;
            }
            .status0 {
                color: #1f86ff;
            }
            .status1 {
                color: #31cbae;
            }
            .status2 {
                color: #ff5113;
            }
        }
        .form-item {
            text-align: left;
        }
        .form-wrap {
            padding: 0 32rpx;
            :deep(.wd-col-picker__cell) {
                padding: 0 !important;
            }
            :deep(.value-class) {
                color: #77818f;
            }
            .placeholder {
                color: #77818f;
            }
            .text-single {
                max-width: 80%;
                margin-left: 50rpx;
            }
            .textarea-wrap {
                padding: 32rpx 0;
                .label {
                    font-size: 24rpx;
                    font-weight: normal;
                    color: #77818f;
                }
                textarea {
                    box-sizing: border-box;
                    width: 100%;
                    height: 272rpx;
                    padding: 32rpx;
                    margin-top: 16rpx;
                    background: #f2f5fb;
                    border-radius: 8rpx;
                }
            }
        }
    }

    .foot-btn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 622rpx;
        height: 80rpx;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
