{extend name="public/base_jfm"/}
{block name="css"}
<style>
    .avatar {width:100px;height:100px;margin:0 auto;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">诉求直通</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-cell-group>
        <van-field
                v-model="form.company_name"
                required
                label="企业名称"
                placeholder="请输入企业名称"
                :rules="[{ required: true, message: '请输入企业名称' }]"
        ></van-field>
        <van-field
                v-model="form.company_contact"
                required
                label="联系人及职务"
                placeholder="请输入联系人及职务"
                :rules="[{ required: true, message: '请输入联系人及职务' }]"
        ></van-field>
        <van-field
                v-model="form.street"
                required
                readonly
                label="镇街"
                placeholder="请选择镇街"
                @click="toggleStreet(true)"
                :rules="[{ required: true, message: '请选择镇街' }]"
        ></van-field>
        <van-popup v-model:show="street_show" position="bottom">
            <van-picker
                    :columns="street"
                    title="镇街"
                    @confirm="onStreet"
                    @cancel="toggleStreet(false)"
            ></van-picker>
        </van-popup>
        <van-field
                v-model="form.cate"
                required
                readonly
                label="需求类别"
                placeholder="请选择需求类别"
                @click="toggleCate(true)"
                :rules="[{ required: true, message: '请选择需求类别' }]"
        ></van-field>
        <van-popup v-model:show="cate_show" position="bottom">
            <van-picker
                    :columns="cate"
                    title="需求类别"
                    @confirm="onCate"
                    @cancel="toggleCate(false)"
            ></van-picker>
        </van-popup>
        <van-field
                v-model="form.content"
                rows="3"
                autosize
                label="内容"
                type="textarea"
                maxlength="1000"
                placeholder="请输入内容"
                show-word-limit
                required
                :rules="[{ required: true, message: '请输入内容' }]"
        ></van-field>
        <van-field
                v-model="form.filled_by"
                required
                label="填表人"
                placeholder="请输入填表人"
                :rules="[{ required: true, message: '请输入填表人' }]"
        ></van-field>
        <van-field
                v-model="form.mobile"
                required
                label="联系电话"
                placeholder="请输入联系电话"
                type="mobile"
                :rules="[{ required: true, message: '请输入联系电话' }]"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block color="#BB0013" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        //基础
        base.form = Vue.reactive({});
        base.onBack = () => {
            location.href = "{:url('jfm/index')}";
        };

        //镇街
        base.street = Vue.reactive({$street});
        base.street_show = Vue.ref(false);
        base.toggleStreet = (value) => {
            base.street_show.value = value;
        };
        base.onStreet = (value) => {
            base.form.street = value.selectedValues[0];
            base.street_show = false;
        };

        //类别
        base.cate = Vue.reactive({$cate});
        base.cate_show = Vue.ref(false);
        base.toggleCate = (value) => {
            base.cate_show.value = value;
        };
        base.onCate = (value) => {
            base.form.cate = value.selectedValues[0];
            base.cate_show = false;
        };

        //表单提交
        base.onSubmit = () => {
            if (base.form.avatar === '') {
                vant.showToast('请上传头像');
            }
            if (base.form.gender === 0) {
                vant.showToast('请选择性别');
            }

            postJson('/jfm/appealPost',base.form).then(({code,msg}) => {
                vant.showDialog({
                    title: '提示',
                    message: msg
                }).then(() => {
                    if (code == 0) {
                        location.href = "{:url('jfm/index')}";
                    }
                });;

            });
        };

        return base;
    }
</script>
{/block}