import './css/style.css';

import {BitrixVue} from 'ui.vue';
import store from "./store";
import FieldString from "./js/Components/FieldString";
import FieldDateTimeSelect from "./js/Components/FieldDateTimeSelect";
import FieldNumber from "./js/Components/FieldNumber";
import FieldSelect from "./js/Components/FieldSelect";
import FieldAddress from "./js/Components/FieldAddress";
import FieldPhone from "./js/Components/FieldPhone";


BX.addCustomEvent("eventPopupReady", e => {

    const app = BX.BitrixVue.createApp({
        data() {
            return {
                isReady: false
            }
        },
        store,
        components: {
            "v-field-string": FieldString,
            "v-field-number": FieldNumber,
            "v-field-phone": FieldPhone,
            "v-field-select": FieldSelect,
            "v-field-address": FieldAddress,
            "v-field-date-time-select": FieldDateTimeSelect,
        },
        computed: {
            ...BX.Vuex.mapGetters([
                "fieldOrderStatus",
                "fieldOrderId",
                "fieldProfile",
                "activeFieldProfile",
                "zonePropertyFieldList",
                "pvzPropertyFieldList",
                "propertyFieldList",
                "fieldSumTotal",
                "fieldSumDelivery",
                "activeProfileType",
                "fieldSumPayment",
                "fieldSumPrePayment",
                "fieldCityName"
            ]),
        },
        methods: {
            ...BX.Vuex.mapActions([
                "fetchSetting",
            ]),
            getOrderId() {
                let params = new URL(location.href);
                return params.searchParams.get("ID");
            },
            async handlerChangeSelectProfile(event) {
                if(this.activeFieldProfile.type === "zone"){
                    await this.$store.dispatch("reCalcSumZoneDelivery", "");
                }
                if(this.activeFieldProfile.type === "pvz"){
                    await this.$store.dispatch(
                        "reCalcSumPVZDelivery",
                        this.pvzPropertyFieldList.find(property => property.code === "pickup_id").value
                    );
                }

                this.fieldProfile.value = event.target.value;
            },
            async handlerRequestSave() {
                await this.$store.dispatch("requestSave");
            }
        },
        async mounted() {
            await this.$store.dispatch("fetchSetting", this.getOrderId())
            this.isReady = true;
        },
        template: `
        <div id="content">
            <form id="lpost-delivery-form-delivery-edit" @submit.prevent="handlerRequestSave"> 
                <table class="adm-detail-content-table edit-table" style="width: 100%" v-if="isReady">
                    <tbody>
                        <tr class="heading">
                            <td colspan="2">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_TITLE_ORDER")}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_STATUS")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{fieldOrderStatus.value}}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_ORDER_NUMBER")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{fieldOrderId.value}}</td>
                        </tr>
                    
                        <tr class="heading">
                            <td colspan="2">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_TITLE_DELIVERY")}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_CITY")}</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{fieldCityName.value}}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l"></td>
                            <td width="70%" class="adm-detail-content-cell-r">                               
                                <select class="profile" @change="handlerChangeSelectProfile($event)" v-model="fieldProfile.value">
                                    <option v-for="profile of fieldProfile.valueList" :value="profile.id">{{profile.title}}</option>
                                </select>
                            </td>
                        </tr>

                        <tr v-for="zonePropertyField of zonePropertyFieldList" v-if="activeProfileType == 'zone'">
                            <td class="adm-detail-content-cell-l" width="30%">{{zonePropertyField.title}}</td>
                            <td class="adm-detail-content-cell-r" style="position: relative">
                                <v-field-date-time-select v-if="zonePropertyField.type == 'date-time-select'" :field="zonePropertyField" />
                                <v-field-number v-else-if="zonePropertyField.type == 'number'" :field="zonePropertyField" />
                                <v-field-select v-else-if="zonePropertyField.type == 'list'" :field="zonePropertyField" />
                                <v-field-string v-else-if="zonePropertyField.type == 'string'" :field="zonePropertyField" />
                                <v-field-address v-else="zonePropertyField.type == 'address'" :field="zonePropertyField" />
                            </td>
                        </tr>
                       
                        <tr v-for="pvzPropertyField of pvzPropertyFieldList" v-if="activeProfileType == 'pvz'">
                            <td class="adm-detail-content-cell-l" width="30%">{{pvzPropertyField.title}}</td>
                            <td class="adm-detail-content-cell-r" style="position: relative">
                                <v-field-number v-if="pvzPropertyField.type == 'number'" :field="pvzPropertyField" />
                                <v-field-select v-else-if="pvzPropertyField.type == 'list'" :field="pvzPropertyField" />
                                <v-field-string v-else="pvzPropertyField.type == 'string'" :field="pvzPropertyField" />
                            </td>
                        </tr>
                    
                        <tr class="heading">
                            <td colspan="2">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_TITLE_BUYER")}</td>
                        </tr>
                    
                        <tr v-for="propertyField of propertyFieldList">
                            <td width="30%" class="adm-detail-content-cell-l">{{propertyField.title}}</td>
                            <td class="adm-detail-content-cell-r">
                                <v-field-date-time-select v-if="propertyField.type == 'date-time-select'" :field="propertyField" />
                                <v-field-phone v-else-if="propertyField.type == 'phone'" :field="propertyField" />
                                <v-field-number v-else-if="propertyField.type == 'number'" :field="propertyField" />
                                <v-field-select v-else-if="propertyField.type == 'list'" :field="propertyField" />
                                <v-field-string v-else="propertyField.type == 'string'" :field="propertyField" />
                            </td>
                        </tr>
                    
                        <tr class="heading">
                            <td colspan="2">Оплата</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_LABEL_SUM_PAYMENT")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{ fieldSumPayment.value }}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_LABEL_SUM_PREPAYMENT")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{ fieldSumPrePayment.value }}</td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_LABEL_SUM_DELIVERY")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">
                                <v-field-string :field="fieldSumDelivery" />
                            </td>
                        </tr>
                        <tr>
                            <td width="30%" class="adm-detail-content-cell-l">${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_LABEL_SUM_TOTAL")}:</td>
                            <td width="70%" class="adm-detail-content-cell-r">{{fieldSumTotal.value}}</td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <div class="adm-detail-toolbar-right">
                <input 
                    class="adm-btn-save"
                    type="submit"
                    form="lpost-delivery-form-delivery-edit"
                    value="${BX.message("LPOST_DELIVERY_POPUP_ORDER_EDIT_BTN_SEND")}">            
            </div>
        </div>
    `,
    });
    app.mount('#form-delivery-order-edit');
})