    <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="name">{{ companyInfo.companyName }}</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"
                        :disabled="![1].includes(pageStatus)"
                        value-key="value"
                        label-key="label"
                        auto-complete
                        custom-value-class="value-class"
                        :column-change="columnChangeCity"
                        @confirm="handleConfirmCity"
                    >
                    </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 { getTreeListApi, 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;

    // await getTreeListApi().then(res => {
    //     // 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
        } = res.data;
        params.companyName = name;
        params.introduction = introduction;
        params.logoPath = logoPath;
        params.creditCode = creditCode;
        await sleep();
        if (provinceCode) {
            cityValue.value = [provinceCode, cityCode, districtCode];
        }
        cityText.value = [provinceName, cityName, districtName].join("-");
        // 审核状态
        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
        } = res.data;
        cityText.value = location;
        params.companyName = companyName;
        params.introduction = introduction;
        params.logoPath = logoPath;
        params.creditCode = creditCode;
        await sleep();
        if (provinceCode) {
            cityValue.value = [provinceCode, cityCode, districtCode];
        }
        cityText.value = [provinceName, cityName, districtName].join("-");
        // 审核状态
        auditStatus.value = await getEnumText("EnumReviewStatus", res.data.status);
        console.log("auditStatus", auditStatus);
    });
}
function handleConfirm() {}
/* 获取省市区 */
const cityOpstion = ref([
    colPickerData.map(item => {
        return {
            value: item.value,
            label: item.text
        };
    })
]);
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 columnChangeCity = async ({ selectedItem, resolve, finish }) => {
    await sleep(0.3);
    const areaData = findChildrenByCode(colPickerData, selectedItem.value);
    if (areaData && areaData.length) {
        resolve(
            areaData.map(item => {
                return {
                    value: item.value,
                    label: item.text
                };
            })
        );
    } else {
        finish();
    }
};
const handleConfirmCity = ({ selectedItems }) => {
    cityText.value = selectedItems.map(v => v.name).join("-");
    citySelectedItems = selectedItems;
    const [province, city, district] = selectedItems;
    params.provinceCode = province.value;
    params.provinceName = province.label;
    params.cityCode = city.value;
    params.cityName = city.label;
    params.districtCode = district.value;
    params.districtName = district.label;
    params.address = selectedItems.map(v => v.label).join("-");
    // params.location = selectedItems.map(v => v.name).join("-");
};
/* 选择图片 */
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",
        //     "cityCode",
        //     "cityName",
        //     "companyName",
        //     "creditCode",
        //     "introduction",
        //     "districtCode",
        //     "districtName",
        //     "id",
        //     "logoPath",
        //     "provinceCode",
        //     "provinceName",
        //     "industry"
        // ])
        validateForm(params, [
            "location",
            "cityCode",
            "companyName",
            "creditCode",
            "introduction",
            "districtCode",
            "id",
            "logoPath",
            "provinceCode",
            "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 === "") {
            console.log("field", field);

            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 16px;
            text-align: center;
            border-bottom: 8px solid #f3f4f8;
            img {
                width: 80px;
                height: 80px;
                margin-top: 14px;
                border-radius: 50%;
            }
            .name {
                margin-top: 16px;
            }
            .status0 {
                color: #1f86ff;
            }
            .status1 {
                color: #31cbae;
            }
            .status2 {
                color: #ff5113;
            }
        }
        .form-item {
            text-align: left;
        }
        .form-wrap {
            padding: 0 16px;
            :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: 16px 0;
                .label {
                    font-size: 12px;
                    font-weight: normal;
                    color: #77818f;
                }
                textarea {
                    box-sizing: border-box;
                    width: 100%;
                    height: 136px;
                    padding: 16px;
                    margin-top: 8px;
                    background: #f2f5fb;
                    border-radius: 4px;
                }
            }
        }
    }

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