<template>
    <view class="registrationRecord-box">
        <view class="list-box">
            <u--form label-width="auto" ref="uForm" :model="form" labelAlign="right">
                <!-- <u-subsection :list="list" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection> -->
                <u-tabs :list="tablist" 
                  :itemStyle="{
                    width: '330rpx',
                    height: '80rpx'
                  }"
                  :activeStyle="{
                    color:'#4573FC'
                  }"
                  lineColor="#4573FC"
                  @click="({index}) => {
                    curNow = index
                    anewQueryMyList()
                  }"
                >
                </u-tabs>
                <u-cell-group customStyle="margin-top: 2px">
                    <template>
                        <u-cell title="任务开始时间" :border="true" :isLink="true"
                            @click="calendarShow = true">
                            <view slot="value">
                                <u-form-item label="" prop="form.startTime">
                                    <template v-if="form.createTimeEnd">
                                        {{ form.createTimeBegin }} - {{ form.createTimeEnd
                                        }}</template>
                                    <template v-else></template>
                                </u-form-item>
                            </view>
							
							<u-icon v-if="form.createTimeEnd == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
							<view v-else slot="right-icon" @click.stop="() => {
								form.createTimeBegin = ''
								form.createTimeEnd = ''
								anewQueryMyList()
							}" style="margin-left: 20rpx;">
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
                        </u-cell>

                        <!-- <tq-date-time ref="startTimeRef"
                            :disEndDate="form.createTimeBegin"
                            @confirm="(data) => {
                                form.createTimeBegin = data
                            }">
                        </tq-date-time> -->
                    </template>

                    <!-- <template>
                        <u-cell title="结束时间" :border="true" :isLink="true"
                            @click="$refs.endTimeRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.endTime">
                                    {{ form.createTimeEnd }}
                                </u-form-item>
                            </view>
                        </u-cell>
                        <tq-date-time ref="endTimeRef"
                            :disStartDate="form.createTimeEnd"
                            @confirm="(data) => {
                                form.createTimeEnd = data
                            }">
                        </tq-date-time>
                    </template> -->

                    <template>
                        <u-cell title="选择任务状态" :border="true" :isLink="true"
                            @click="$refs.selectRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.endTime">
                                    {{ form.exStsName }}
                                </u-form-item>
                            </view>
							
							<u-icon v-if="form.exStsName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
							<view v-else slot="right-icon" @click.stop="() => {
								form.exSts = ''
								form.exStsName = ''
								anewQueryMyList()
							}" style="margin-left: 20rpx;">
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
                        </u-cell>
                        <tq-select ref="selectRef"
                            :columns="taskStatus"
                            @confirm="(data) => {
                form.exSts = data.value
                form.exStsName = data.label
                anewQueryMyList()
            }">
                        </tq-select>
                    </template>

                    <template v-if="curNow === 1">
                        <u-cell title="车队类型" :border="true" :isLink="true"
                            @click="$refs.selectOwnTypeRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.ownTypeName">
                                    {{ form.ownTypeName }}
                                </u-form-item>
                            </view>
							
							<u-icon v-if="form.ownTypeName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
							<view v-else slot="right-icon" @click.stop="() => {
								form.ownType = ''
								form.ownTypeName = ''
								anewQueryMyList()
							}" style="margin-left: 20rpx;">
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
                        </u-cell>
                        <tq-select ref="selectOwnTypeRef"
                            :columns="ownTypeList"
                            @confirm="(data) => {
                form.ownType = data.value
                form.ownTypeName = data.label
                anewQueryMyList()
            }">
                        </tq-select>
                    </template>


                    <template v-if="curNow === 1">
                        <u-cell title="司机" :border="true" :isLink="true"
                            @click="$refs.caruserChooseRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.vehicleId">
                                    {{ form.driverName }}
                                </u-form-item>
                            </view>
							
							<u-icon v-if="form.driverName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
							<view v-else slot="right-icon" @click.stop="() => {
								form.driverId = ''
								form.driverName = ''
								anewQueryMyList()
							}" style="margin-left: 20rpx;">
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
                        </u-cell>
                        <tq-car-user ref="caruserChooseRef"
                            :isGetIcon="true"
                            :queryType="3"
                            @confirm="(data) => {
                form.driverId = data.value
                form.driverName = data.label
                anewQueryMyList()
            }"
                            @onDataLoad="">
                        </tq-car-user>
                    </template>

                    <template>
                        <u-cell title="车辆" :border="true" :isLink="true"
                            @click="$refs.carChooseRef.show()">
                            <view slot="value">
                                <u-form-item label="" prop="form.vehicleId">
                                    {{ form.plate }}
                                </u-form-item>
                            </view>
							
							<u-icon v-if="form.plate == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
							<view v-else slot="right-icon" @click.stop="() => {
								form.vehicleId = ''
								form.plate = ''
								anewQueryMyList()
							}" style="margin-left: 20rpx;">
							  <u-icon size="16" name="close-circle"></u-icon>
							</view>
							
                        </u-cell>
                        <tq-car-user ref="carChooseRef"
                            :isGetIcon="true"
                            @confirm="(data) => {
                form.vehicleId = data.value
                form.plate = data.label
                anewQueryMyList()
            }"
                            @onDataLoad="">
                        </tq-car-user>
                    </template>

                    <template>
                        <!-- 重置按钮 -->
                         <u-button  customStyle="font-size: 24rpx;height: 64rpx;"  :plain="false" size="mini" @click="resetData()">重置</u-button>

                    </template>


                </u-cell-group>
            </u--form>
        </view>
        <view class="item-list-box">
            <view class="info-box" v-for="(item, index) in queryMyListdata" :key="index">
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">申请人：{{ item.applyName }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple">部门：{{ item.deptName }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">申请人联系电话：{{ item.applyTel }}</view>
                    </u-col>
					
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple">用车类型：{{ item.matterType }}</view>
                    </u-col>
					<!-- <u-col span="6">
					    <view class="demo-layout bg-purple">任务状态：{{ item.exStsName }}</view>
					</u-col> -->
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">预计执行时间：{{ item.startPlanTime }} — {{ item.endPlanTime
                            }}
                        </view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px" v-if="item.pointAddr">
                    <u-col span="12">
                        <view class="demo-layout bg-purple-light">起止点：{{ pointAddrParse(item.pointAddr) }}</view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light">用车人数：{{ item.totalNum }}</view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple">任务状态：{{ item.exStsName }}</view>
                    </u-col>
                </u-row>
                <view class="hide-warp" v-if="item.openOther">
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="6">
                          <view class="demo-layout bg-purple-light">车辆：{{ item.plate }}（{{ item.ownType }}）</view>
                      </u-col>
                      <u-col span="6">
                          <view class="demo-layout bg-purple">车辆所属：{{ item.vehicleDeptName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="6">
                          <view class="demo-layout bg-purple-light">司机：{{ item.driverName }}（{{ item.ownType }}）</view>
                      </u-col>
                      <u-col span="6">
                          <view class="demo-layout bg-purple">司机所属：{{ item.driverDeptName }}</view>
                      </u-col>
                  </u-row>
                  <u-row customStyle="margin-bottom: 10px">
                      <u-col span="12">
                          <view class="demo-layout bg-purple-light">备注信息：{{ item.remark }}</view>
                      </u-col>
                  </u-row>
                </view>
                <view @click="item.openOther = !item.openOther" class="open-warp">
                  {{ item.openOther?'收起':'展开' }}
                </view>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                        <view style="display: flex; justify-content: center;">
                            <u-button type="primary" icon="phone" @tap="phoneCall(item.driverTel)" :plain="true"
                              color="#4573FC"
							  v-if="$hasPermi('mobile:index:base:driverTask:driverPhone')"
                                customStyle="width: 200rpx;height:64rpx" shape="circle"
                                text="司机"></u-button>
                            <u-button type="warning" icon="phone" @tap="phoneCall(item.applyTel)" :plain="true"
                              color="#F7A254"
							  v-if="$hasPermi('mobile:index:base:driverTask:applyPhone')"
                                customStyle="width:200rpx;height:64rpx" shape="circle"
                                text="申请人"></u-button>
                            <u-button type="primary" icon="phone" @tap="phoneCall(item.userTel)" :plain="true"
                              color="#4573FC"
							  v-if="$hasPermi('mobile:index:base:driverTask:usePhone')"
                                customStyle="width: 200rpx;height:64rpx" shape="circle"
                                text="用车人"></u-button>
                        </view>
                    </u-col>
                </u-row>
				
				<u-row customStyle="margin-bottom: 10px">
				    <u-col span="9" style="color: #4573FC;font-size: 28rpx;">
						<view v-for="(fitem,findex) in item.listCost" :key="findex">
							{{fitem.costName}}：{{fitem.price}} ；{{fitem.processStatusName}}
						</view>
					</u-col>
					 
					 <u-col span="3">
						 <view 
							style="color: #4573FC;display: flex;font-size: 28rpx;text-decoration: underline;justify-content: flex-end;"
							@click="goFlow(item)"
						 >
							 <u-icon name="plus" color="#4573FC" size="14"></u-icon>
							 费用报销
						 </view>
					</u-col>
				</u-row>
                <!-- <u-button type="warning" customStyle="margin-left: 2rpx;" text="退回"
                    @click="rebutConfirmation('rebut', item)"></u-button> -->
                <u-row customStyle="margin-bottom: 10px;" v-if="curNow === 0">
                    <u-col span="12">
                        <view style="display: flex;">
                            <!-- exSts 车辆调度状态：1.未派车、2.已派车、3.已结束、4.已中止 -->
                            <!-- 任务操作类型:approve.出发和结束、rebut.驳回,可用值:addSignature,approve,cancel,cc,claim,delSignature,delegate,hold,move,msg,postSignature,preSignature,read,rebut,resubmit,start,stop,submit,takeBack,turnInto,unclaim -->
                            <u-button type="primary" text="出发" @click="postTaskOperate('approve', item)"
                                v-if="item.exSts === '1'"></u-button>
                            <u-button type="error" text="结束" @click="postTaskOperate('approve', item)"
                                v-if="item.exSts === '2'"></u-button>
                            <u-button type="warning" customStyle="margin-left: 2rpx;" text="退回"
                                @click="rebutConfirmation('rebut', item)"
                                v-if="item.exSts === '1'"></u-button>
                            <u-button :plain="true" :disabled="true" text="已结束" v-if="item.exSts === '3'"></u-button>
                            <u-button type="error" :plain="true" :disabled="true" text="已中止"
                                v-if="item.exSts === '4'"></u-button>
                        </view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <u-loadmore :status="status" />
        <u-toast ref="uToast" />
        <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
            monthNum="24"
            @confirm="calendarChange" @close="calendarShow = false"></u-calendar>

        <u-modal :show="modalshow" @confirm="modalconfirm" showCancelButton @cancel="modalcancel" :title="title">
            <view class="slot-content">
                <u--textarea
                    placeholder="请输入退回原因"
                    border="surround"
                    v-model="operateMessage"></u--textarea>
            </view>
        </u-modal>
    </view>
</template>
<script>
import { drivertaskList, taskOperate } from "@/api/wfApi/index.js";
export default {
    data() {
        return {
            calendarShow: false, // 日历
            calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
            calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
            defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
            maxDate: this.dayjs().add(365, 'day').format('YYYY-MM-DD'),
            list: ['我的', '全部'],
            tablist: [
              { name: '我的'},
              { name: '全部'},
            ],
            curNow: 0,
            queryMyListdata: [],
            form: {
                createTimeBegin: '',//开始时间
                createTimeEnd: '', //结束时间
                exSts: '', //车辆调度状态：
                exStsName: '',
                vehicleId: '',
                plate: '',
                driverId: '',
                driverName: '',
                ownType: '',//车队类型
                ownTypeName: '',
            },
            // 车辆调度状态：1.未派车、2.已派车、3.已结束、4.已中止
            taskStatus: [
                { label: '未开始', value: 1 },
                { label: '执行中', value: 2 },
                { label: '已结束', value: 3 },
                { label: '已终止', value: 4 },
            ],
            // 车队类型：1.内部车队、2.外部车队
            ownTypeList: [
                { label: '内部车队', value: 1 },
                { label: '外部车队', value: 2 },
            ],
            operateMessage: '',//退回原因
            modalshow: false,
            modalItem: {},
            title: '请输入退回原因',
            content: '请输入退回原因',
            pageIndex: 1,
            total: 0,
            status: 'nomore', //loading nomore loadmore
            openOther:false
        }
    },
    onShow(option) {
        this.queryMyListdata = []
        this.pageIndex = 1
        this.queryMyList();
    },
    methods: {
        resetData(){
            this.form = {
                createTimeBegin: '',//开始时间
                createTimeEnd: '', //结束时间
                exSts: '', //车辆调度状态：
                exStsName: '',
                vehicleId: '',
                plate: '',
                driverId: '',
                driverName: '',
                ownType: '',//车队类型
                ownTypeName:''
            }
            this.anewQueryMyList()
        },
        calendarChange(e) {
            console.info('选择的时间', e)

            // 修改日期
            this.form.createTimeBegin = e[0]; // 开始时间
            this.form.createTimeEnd = e[e.length - 1]; // 结束时间
            this.defaultDate = [e[0], e[e.length - 1]]
            this.calendarShow = false;
            this.anewQueryMyList();
        },
        anewQueryMyList() {
            this.pageIndex = 1;
            this.queryMyListdata = [];
            this.queryMyList();
        },
        phoneCall(e) {
            uni.makePhoneCall({
                phoneNumber: e //仅为示例
            });
        },
        pointAddrParse(e) {
            let arr = JSON.parse(e)
            let arrStg = ''
            for (let item of arr) {
                arrStg += item.address + '-'
            }
            return arrStg.slice(0, -1);
        },
        sectionChange(index) {
            this.curNow = index;
            this.anewQueryMyList()
        },
        toRealMap(item) {
            let obj = {
                routeId: item.routeId,
                classId: item.classId,
                startAndEnd: item.startAndEnd
            }
            let objst = encodeURIComponent(JSON.stringify(obj))
            uni.navigateTo({
                url: '/newdriversub/setClassPlan/details?item=' + objst
            });
        },
        async queryMyList() {
            this.loading = 'loading'
            let obj = {
                ...this.form,
                pageIndex: this.pageIndex,
                pageSize: 3,
                queryType: this.curNow + 1 //查询类型:1.本人、2.全部
            }
            for (let key in obj) {
                if (obj[key] === '') delete obj[key]
            }
            let { data, code, page } = await drivertaskList(obj)
            if (code == "0") {

                let list = data.map(item=>
                  {
                    return {
                      ...item,
                      openOther:false
                    }
                  }
                )
                this.queryMyListdata = this.queryMyListdata.concat(list)
                this.total = Number(page.totalCount)
                this.loading = 'loadmore'
                if (this.queryMyListdata.length >= this.total) {
                    this.status = 'nomore'
                }
                console.log('数据', this.queryMyListdata)
            }
        },
        rebutConfirmation(e, item) {
            //请输入原因
            this.modalshow = true
            this.modalItem = item
        },
        modalcancel(e){
            this.modalshow = false
            this.operateMessage=''
        },
        modalconfirm(e) {
            if (this.operateMessage === '') {
                return uni.showToast({
                    title: '请输入退回原因',
                    icon: 'none'
                });
            } else {
                this.modalshow = false
                this.postTaskOperate('rebut', this.modalItem)
            }

        },
        // 操作
        async postTaskOperate(e, item) {
            let { data, code, msg } = await taskOperate(
                {
                    taskOperate: e,
                    taskId: item.taskId, //任务id
                    processInstanceId: item.processInstanceId,//流程实例id
                    operateMessage: this.operateMessage, //操作原因
                })
            if (code == "0") {
                this.operateMessage = ''
                uni.showToast({
                    title: msg || '操作成功',
                    duration: 2000
                });
                this.anewQueryMyList();
            }
        },
		async goFlow(item) {
			const {id} = item
			
			uni.navigateTo({
			    url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_cost&fromKey=system_flow_veh&fromId=${id}`,
			})
			
			/* let res
			
			let isDetails = false
			let defaultTitle
			let processInstanceId
			if(type == 'technologySafe') {
				res =  await getStartTechnologySafeFormInfo()
				if(item.tsProcessInstanceId) isDetails=true
				processInstanceId = item.tsProcessInstanceId
			} else if (type == 'behaviorSafe') {
				res =  await getStartBehaviorSafeFormInfo()
				if(item.bsProcessInstanceId) isDetails=true
				processInstanceId = item.bsProcessInstanceId
			}
			
			let {code,data} = res
			
			if(code == 0 && data) {
				
				if(isDetails) {
					
					uni.navigateTo({
					    url: `/pages/flow/diboot?routes=/workflow/mobile/dealTask&taskId=${-1}&processInstanceId=${processInstanceId}&category=${'cc'}&withDealTask=true&fromMobile=true`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&id=${data}&taskId=${id}&taskType=${type}`
					})
				}
				
			} */
			
		
		} 

    },
    // 触底
    onReachBottom() {
        console.log('当前条数', this.queryMyListdata.length, '总条数', this.total)
        if (this.queryMyListdata.length >= this.total) return;
        this.pageIndex++
        this.queryMyList();
    }
}
</script>
<style lang="scss" scoped>
.registrationRecord-box {

    padding: 0 0 10rpx 0;
    overflow: unset;

    .list-box {
        border-radius: 10rpx;
        background: #fff;
        // padding: 20rpx;
        position: sticky;

        // align-items: center;
        // display: flex;
        top: 0px;
        width: 100%;
        z-index: 999;

        /deep/ {

            .u-form-item__body {
                padding: 0;
            }
        }

    }

    .item-list-box {
        padding: 10rpx 0 0 0;
        // background: #fff;
        position: relative;


        .info-box {
            margin-bottom: 20rpx;
            border: none;
            width: 100%;
            // border-radius: 20rpx;
            box-shadow: 2rpx 2rpx 5rpx rgba(169, 169, 169, 0.34901960784313724);
            // height: 150rpx;
            background-color: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 20rpx;
            box-sizing: border-box;
            position: relative;

            font-size: 24rpx;




        }


    }

    .slot-content {
        width: 100%;
    }
    .hide-warp{
      width: 100%;
    }
    .open-warp{
      width: 100%;
      padding: 20rpx;
      display: flex;
      justify-content: flex-end;
      color: #4573FC;
    }

}
</style>