<template>
  <view class="container" style="height: 1400upx">
    <scroll-view scroll-y style="padding-bottom: 180rpx;background-color: #fff;height: 100%;">
        <uni-forms :modelValue="formData" label-width="140upx"  ref="customForm" style="height: 60%;">
        <ticketd :ticket_="formData.ticket_"></ticketd>
            <!-- 员工选择 -->
        <uni-forms-item label="员工信息" required>
                <searchSelect 
                v-model="formData.employee" 
                :apiobjs="EmpApiobj" 
                @change="handleChange"
                v-if="mode== 'add'"/>
                <span v-else>{{formData.employee_name}}</span>
            </uni-forms-item>

        <!-- 基本信息 -->
        <view class="row">
            <view class="col">
            <uni-forms-item label="性别">
                <uni-easyinput v-model="formData.gender" disabled />
            </uni-forms-item>
            </view>

            <view class="col">
            <uni-forms-item label="工号">
                <uni-easyinput v-model="formData.number" disabled />
            </uni-forms-item>
            </view>

            <view class="col">
            <uni-forms-item label="联系方式">
                <uni-easyinput v-model="formData.phone" disabled />
            </uni-forms-item>
            </view>
        </view>

        <uni-forms-item label="身份证号">
            <uni-easyinput v-model="formData.id_number" disabled />
        </uni-forms-item>

        <uni-forms-item label="部门">
            <uni-easyinput v-model="formData.belong_dept_name" disabled />
        </uni-forms-item>

        <uni-forms-item label="岗位">
            <uni-easyinput v-model="formData.post_name" disabled />
        </uni-forms-item>

        <uni-forms-item label="入职时间">
            <uni-easyinput v-model="formData.start_date" disabled />
        </uni-forms-item>

        <!-- 原部门 -->
        <uni-forms-item label="原部门" required>
            <uni-data-picker
                v-model="formData.original_dept"
                :localdata="group"
                :disabled="mode === 'show'"
                :map="{ text: 'label', value: 'value', children: 'children' }"
                :show-all-levels="false"
                clearable
                placeholder="请选择部门"
            />
        </uni-forms-item>

        <!-- 原岗位 -->
        <uni-forms-item label="原职务" required >
            <uni-data-select
            v-model="formData.original_post"
            :localdata="postList"
            :disabled="mode === 'show'"
            clearable
            placeholder="请选择职务"
            />
        </uni-forms-item>

        <!-- 是否跨部门 -->
        <!-- <uni-forms-item label="是否跨部门调动" required name="is_change">
            <radio-group v-model="formData.is_change">
            <label><radio :value="0" />否</label>
            <label><radio :value="1" />是</label>
            </radio-group>
        </uni-forms-item> -->

        <!-- 是否晋升 -->
        <!-- <uni-forms-item label="是否晋升" required name="is_promotion"> 
            <radio-group v-model="formData.is_promotion">
            <label><radio :value="0" />否</label>
            <label><radio :value="1" />是</label>
            </radio-group>
        </uni-forms-item> -->
        <uni-forms-item label="是否跨部门调动" required name="is_change">
        <uni-data-select
            v-model="formData.is_change"
            :localdata="booleanOptions"
            placeholder="请选择"
        />
        </uni-forms-item>

        <uni-forms-item label="是否晋升" required name="is_promotion">
        <uni-data-select
            v-model="formData.is_promotion"
            :localdata="booleanOptions"
            placeholder="请选择"
        />
        </uni-forms-item>

        <!-- 调岗部门 -->
        <uni-forms-item label="调岗部门" required name="new_dept">
            <uni-data-picker
            v-model="formData.new_dept"
                :localdata="group"
                :disabled="mode === 'show'"
                :map="{ text: 'label', value: 'value', children: 'children' }"
                :show-all-levels="false"
                clearable
                placeholder="请选择部门"
            />
        </uni-forms-item>

        <!-- 调岗岗位 -->
        <uni-forms-item label="调岗职务" required>
            <uni-data-select
            v-model="formData.new_post"
            :localdata="postList"
            :disabled="mode === 'show'"
            clearable
            placeholder="请选择职务"
            />
        </uni-forms-item>

        <!-- 调岗时间 -->
        <uni-forms-item label="调岗时间" required>
            <uni-datetime-picker
            type="date"
            v-model="formData.transfer_date"
            />
        </uni-forms-item>
        <uni-forms-item label="个人工作内容">
            <uni-easyinput
                v-if="!editing"
                v-model="formData.content"
                placeholder="请输入"
                @focus="editing = true"
            />
            <uni-easyinput
                v-else
                type="textarea"
                v-model="formData.content"
                autoHeight
                @blur="editing = false"
            />
            </uni-forms-item>
        <uni-forms-item label="调岗原因">
            <uni-easyinput
                v-if="!editing"
                v-model="formData.reason"
                placeholder="请输入"
                @focus="editing = true"
            />
            <uni-easyinput
                v-else
                type="textarea"
                v-model="formData.reason"
                autoHeight
                @blur="editing = false"
            />
            </uni-forms-item>

        <uni-forms-item label="原岗位薪资">
            <uni-number-box v-model="formData.original_slary" :min="2000" />
        </uni-forms-item>
        <uni-forms-item label="调岗后岗位薪资">
            <uni-number-box v-model="formData.new_slary" :min="2000"/>
        </uni-forms-item>
        </uni-forms>
    </scroll-view>
    <!-- 底部按钮 -->
    <view class="footer_fixed">
			<button v-if="mode=='edit'" size="mini" @click="handleDel" :loading="saveLoading" :disabled="saveLoading" type="warn">
				删除
			</button>
			<button v-if="mode!='show'" size="mini" @click="handleSave" :loading="saveLoading" :disabled="saveLoading" type="primary">
				提交审批
			</button>
			<ticketd_b :workflow_key="'wf_transfer'" v-if="formData?.ticket_ && mode == 'show'" :t_id="formData.id" :ticket_="formData.ticket_" 
			:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
		</view>
  </view>
</template>

<script>
import { genTree } from "@/utils/verificate";
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import searchSelect from "@/components/searchselect.vue"
export default {
    components: { ticketd_b, ticketd, searchSelect },
    data() {
        return {
        mode: 'show',
        formData: {
            is_change: 0,
            is_promotion: 0,
            original_slary: 2000,
            new_slary: 2000,
        },
        EmpApiobj:this.$api.employeeList,
        group: [],
        postList: [],
        editing: false,
        ticket_data: {},
        booleanOptions: [
                { value: 0, text: '否' },
                { value: 1, text: '是' }
            ],
        }
    },
    watch: {
        formData: {
            handler(val){
                Object.assign(this.ticket_data,{
                    original_slary: val.original_slary,
                    new_slary: val.new_slary,
                    original_post: val.original_post,
                    new_post: val.new_post,
                    is_change: val.is_change,
                    is_promotion: val.is_promotion
                })
            },
        deep: true,
        }
    },
    onLoad(options) {
        let that = this;
        that.mode = options.mode?options.mode:'show';
        that.t_id = options.t_id?options.t_id:null;
        if(that.t_id) {
			that.$api.transferItem(that.t_id).then(res=>{
                console.log(res);
				Object.assign(that.formData, {
                    ...res,
                    is_change: res.is_change?1:0,
                    is_promotion: res.is_promotion?1:0,
                })
				if(that.formData.ticket_.state_.type == 1 && that.formData.create_by == uni.getStorageSync("userInfo").id ) {
					that.mode = "edit";
				}else{
					that.mode = "show";
				}
			})
		}
        // that.fillNames();
        that.getGroup();
        that.getPost();
    },
    methods: {
        async getGroup() {
            const res = await this.$api.deptList({ page: 0 })
            this.group = genTree(res);
        },
        async getPost(){
            const res = await this.$api.postList({ page: 0 })
            this.postList = res.map(item =>({
                text: item.name,
                value: item.id
                }
                    )
                        )
            },
        async handleChange(id) {
            if (!id) return
            const obj = await this.$api.employeeItem(id)
            Object.assign(this.formData, {
                employee_name: obj.name,
                gender: obj.gender,
                phone: obj.phone,
                number: obj.number,
                id_number: obj.id_number,
                belong_dept_name: obj.belong_dept_name,
                post_name: obj.post_name,
                start_date: obj.start_date
                }
            )
        },
        handleSave(){
			let that = this;
			that.$refs.customForm.validate().then(res => {
				that.$api.transferCreate(that.formData).then(ress=>{
					uni.navigateBack()
				})
			}).catch(err => {
				console.log('err', err);
			})
		},
        handleDel() {
            uni.showModal({
                title: '提示',
                content: '确定删除吗？',
                success: res => {
                if (res.confirm) {
                    this.$api.transferDelete(this.formData.id)
                    uni.navigateBack();
                            }
                            
                        }
                    }
                )
            }
        }
    }
</script>

<style scoped>
	.uni-data-checklist .checklist-group .checklist-box{
		margin: 10px 0!important;
	}
	.flex_file_picker>.uni-file-picker__files{
		flex-direction: row;
	}
	.flex_file_picker{
		width: 90px;
		flex: none;
	}
</style>