<template>
    <view class="dynamicModel-list-v">
        <view class="head-warp com-dropdown">
            <u-dropdown class="u-dropdown" ref="uDropdown" @open="openData" >
                <u-dropdown-item title="排序">
                    <view class="dropdown-slot-content">
                        <view class="dropdown-slot-content-main">
                            <u-cell-group>
                                <u-cell-item @click="cellClick(item)" :arrow="false" :title="item.label"
                                             v-for="(item, index) in sortOptions" :key="index" :title-style="{color: sortValue == item.value ? '#2979ff' : '#606266' }">
                                    <u-icon v-if="sortValue == item.value" name="checkbox-mark" color="#2979ff" size="32"></u-icon>
                                </u-cell-item>
                            </u-cell-group>
                        </view>
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="筛选" >
                    <view class="dropdown-slot-content">
                        <view class="dropdown-slot-content-main search-main">
                            <scroll-view scroll-y="true" style="height: 1000rpx;">
                                <view class="u-p-l-20 u-p-r-20 search-form">
                                    <u-form :model="searchForm" ref="searchForm" :errorType="['toast']" label-position="left" label-width="150">
                                    </u-form>
                                </view>
                            </scroll-view>
                            <view class="buttom-actions">
                                <u-button class="buttom-btn" @click="reset">重置</u-button>
                                <u-button class="buttom-btn" type="primary" @click="closeDropdown">检索</u-button>
                            </view>
                            <view class="dropdown-slot-bg" @click="$refs.uDropdown.close()"></view>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view>
        <view class="list-warp">
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" top="100">
                <view class="list">
                    <view class="list-box">
                        <uni-swipe-action ref="swipeAction">
                            <uni-swipe-action-item v-for="(item, index) in list" :key="item.id" :threshold="0" :right-options="options">
                                <view class="item" @click="goDetail(item.id,item)">
                                    <view class="u-line-1 item-cell" v-for="(column,i) in columnList" :key="i">
                                        <view v-if="column.jnpfKey != 'table'">
                                            <view class="" v-if="column.jnpfKey == 'relationForm'">
                                                <text class="listTit u-line-1">{{column.label}}:</text>
                                                <text class="listContent"
                                                      @click.stop="relationFormClick(item,column)"
                                                      style="color: blue;">{{item[column.prop]}}</text>
                                            </view>
                                            <view v-else class="u-line-1">
                                                <text class="listTit u-line-1">{{column.label}}:</text>
                                                <text class="listContent" v-if="['calculate','inputNumber'].includes(column.jnpfKey) && column.thousands">{{toThousands(item[column.prop],column)}}</text>
                                                <text class="listContent" v-else>{{item[column.prop]}}</text>
                                            </view>
                                        </view>
                                        <view class="collapse-box u-flex" v-else>
                                            <tableCell :label="column.label" :childList="item[column.prop]" @cRelationForm="relationFormClick"
                                                       :children="column.children" ref="tableCell" :pageLen="3"></tableCell>
                                        </view>
                                    </view>
                                    <view class="item-cell">
                                        <text>审批状态：</text>
                                        <text :class="getFlowStatus(item.flowState).statusCss">
                                            {{getFlowStatus(item.flowState).text}}
                                        </text>
                                    </view>
                                </view>
                                <template v-slot:right>
                                    <view class="right-option-box">
                                        <view class="right-option" v-for="(it,i) in options" @click="handleClick(index)"
                                              :key="i">
                                            <text>{{it.text}}</text>
                                        </view>
                                    </view>
                                </template>
                            </uni-swipe-action-item>
                        </uni-swipe-action>
                    </view>
                </view>
            </mescroll-uni>
        </view>
                <view class="com-addBtn" @click="addPage()" >
                    <u-icon name="plus" size="60" color="#fff" />
                </view>
        <u-picker mode="selector" v-model="show" :default-selector="[0]" title="请选择流程" :range="templateList" range-key="fullName" @confirm="confirm"></u-picker>
    </view>
</template>
<script>
    import {
        FlowJsonList
    } from '@/api/workFlow/flowEngine'
    import resources from '@/libs/resources.js'
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import tableCell from '../dynamicModel/components/tableCell.vue'
    import {getFormById} from '@/api/workFlow/workFlowForm'
    import {
        getDictionaryDataSelector,
        getDataInterfaceRes,
        getDefaultCurrentValueUserIdAsync,
        getDefaultCurrentValueDepartmentIdAsync
    } from '@/api/common'
    import request from '@/utils/request'
    export default {
        mixins: [MescrollMixin],
        components: {
            tableCell
        },
        data() {
            return {
                show: false,
                templateList: [],
                sortValue: '',
                searchForm: {
            },
            downOption: {
                use: true,
                        auto: false
            },
            dataOptions:{
            },
            upOption: {
                page: {
                    num: 0,
                            size: 20,
                    time: null,
                },
                empty: {
                    use: true,
                            icon: resources.message.nodata,
                            tip: "暂无数据",
                            fixed: true,
                            top: "300rpx",
                            zIndex: 5,
                },
                textNoMore: '没有更多数据',
                        toTop: {
                    bottom: 250
                }
            },
            list: [],
                    appColumnList:[{"border":false,"jnpfKey":"radio","fullName":"合同类型","label":"合同类型","sortable":false,"align":"left","props":{"label":"fullName","value":"enCode"},"optionType":"button","__config__":{"formId":115,"visibility":["pc","app"],"jnpfKey":"radio","defaultValue":"1","noShow":false,"dataType":"dictionary","dictionaryType":"519483543638772229","tipLabel":" 不同的合同类型可编辑的字段内容不同，合同类型一旦保存不可修改，请选择更匹配你需求的一个。","dragDisabled":false,"className":[],"label":"合同类型","trigger":"change","propsUrl":"","templateJson":[],"showLabel":true,"required":false,"tableName":"jg_contract","renderKey":1708223263325,"layout":"colFormItem","tagIcon":"icon-ym icon-ym-generator-radio","propsName":"","tag":"JnpfRadio","regList":[],"span":24},"size":"small","prop":"contractType","width":0,"options":[{"enCode":"1","hasChildren":false,"fullName":"采购合同","id":"522800896036307333","parentId":"0"},{"enCode":"2","hasChildren":false,"fullName":"销售合同","id":"522801008556900741","parentId":"0"},{"enCode":"3","hasChildren":false,"fullName":"仓储合同","id":"522801822901993861","parentId":"0"},{"enCode":"4","hasChildren":false,"fullName":"运输合同","id":"522802010169278853","parentId":"0"},{"enCode":"5","hasChildren":false,"fullName":"服务合同","id":"523045235534594053","parentId":"0"},{"enCode":"6","hasChildren":false,"fullName":"其他合同","id":"523045347023388677","parentId":"0"}],"__vModel__":"contractType","style":{},"disabled":false,"interfaceHasPage":false,"fixed":"none","id":"contractType","on":{"change":"({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, onlineUtils }) => {\n    // 在此编写代码\n    \n}"},"direction":"horizontal"}],
            listQuery: {
                moduleId:'528841438817943557',
                        sort: 'desc',
                        sidx: '',
                        keyword: '',
                        json: ''
            },
            options: [
                        {
                            text: '删除',
                            style: {
                                backgroundColor: '#dd524d'
                            }
                        }
            ],
                    sortOptions:[
            ],
                    ableAll:{
            },
            interfaceRes:{
            },
            menuId:'',
                    enCode: 'contract',
                    formId: '528841438817943557',
                    columnList:[],
                    isTree:false,
            type:'1',
                    key:new Date(),
                    dataValue:{},
            userInfo:{},
            firstInitSearchData:false,
                    thousandsField:[],
            formatType:{"yyyy":"yyyy","yyyy-MM":"yyyy-mm","yyyy-MM-dd":"yyyy-mm-dd","yyyy-MM-dd HH:mm":"yyyy-mm-dd hh:MM","yyyy-MM-dd HH:mm:ss":"yyyy-mm-dd hh:MM:ss","HH:mm:ss":"hh:MM:ss","HH:mm":"hh:MM"},
        }
        },
        onLoad(e){
            this.userInfo = uni.getStorageSync('userInfo') || {}
            this.menuId = e.menuId
            uni.$on('refresh', () => {
                this.list = [];
                this.mescroll.resetUpScroll();
            })
            this.dataAll()
            this.getColumnList()
            this.getFormById()
        },
        onUnload() {
            uni.$off('refresh')
        },
        methods:{
            toThousands(val, column) {
                let num = Number(val)
                let newVal = this.thousandsField.includes(column.__vModel__) ? num.toLocaleString('zh', {maximumFractionDigits: '2',minimumFractionDigits: '2'}): num.toFixed(2);
                return newVal
            },
            getJsonList() {
                FlowJsonList(this.flowId,'1').then(res => {
                    this.templateList = res.data;
                })
            },
            getFormById() {
                getFormById(this.formId).then(res => {
                    this.flowId = res.data&&res.data.id
                    this.enCode = res.data&&res.data.enCode
                    this.getJsonList()
                })
            },
            dataAll(){
            },
            openData(e){
                if(e==1){
                    //this.reset()
                }
            },
            //初始化查询的默认数据
            async initSearchData() {
                this.dataValue = JSON.parse(JSON.stringify(this.searchForm))
            },
            relationFormClick(item,column) {
                let vModel = column.__vModel__?column.__vModel__+"_id":column.__vModel__
                let id = item[vModel]
                if(vModel){
                    let [attr,attr1]=vModel.split("_jnpf_")
                    if(attr&&attr1){
                        attr = attr.replace('jnpf_','')
                        id = item[attr]&&item[attr][attr1]
                    }
                }
                let modelId = column.modelId
                if (!id || !modelId) return
                let config = {
                    modelId: modelId,
                    id: id,
                    formTitle: '详情',
                    noShowBtn: 1
                }
                this.$nextTick(() => {
                    const url ='/pages/apply/dynamicModel/detail?config=' + this.base64.encode(JSON.stringify(config),"UTF-8")
                    uni.navigateTo({
                        url: url
                    })
                })
            },
            async upCallback(page) {
                if(!this.firstInitSearchData) {
                    await this.initSearchData()
                    this.firstInitSearchData = true
                }
                const query = {
                    currentPage: page.num,
                    pageSize: page.size,
                    menuId : this.menuId,
                    ...this.listQuery,
                    ...this.searchForm,
                    dataType:0,
                }
                request({
                    url: '/api/scm/ContractL/getList',
                    method: 'post',
                    data: query,
                }).then(res => {
                    let _list = this.columnList.length?res.data.list:[];
                    this.mescroll.endSuccess(_list.length);
                    if (page.num == 1) this.list = [];
                    const list = _list.map(o => ({
                        show: false,
                        ...o
                    }));
                    this.list = this.list.concat(_list);
                }).catch(() => {
                    this.mescroll.endErr();
                })
            },
            handleClick(index, index1) {
                    const item = this.list[index]
                if([1,2,3,5].includes(item.flowState)){
                    this.$u.toast("流程正在审核,请勿删除")
                            this.list[index].show = false
                    return
                }
                request({
                    url: '/api/scm/ContractL/' + item.id,
                    method: 'delete'
                }).then(res => {
                    uni.showToast({
                        title: res.msg,
                        complete: () => {
                            this.$u.toast(res.msg)
                            this.mescroll.resetUpScroll()
                        }
                    })
                })
            },
            open(index) {
                this.list[index].show = true;
                this.list.map((val, idx) => {
                    if (index != idx) this.list[idx].show = false;
                })
            },
            search() {
                if (this.isPreview == '1') return
                this.searchTimer && clearTimeout(this.searchTimer)
                this.searchTimer = setTimeout(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                }, 300)
            },
    goDetail(id, item) {
        let flowtaskid = item.flowtaskid
        let flowState =item.flowState
        let flowId =item.flowId
        let btnType = ''
        let btnList = []
                btnList.push('btn_edit')
                btnList.push('btn_detail')
        if(btnList.includes('btn_detail')){
            btnType = "btn_detail"
        }
        if(btnList.includes('btn_edit')){
            btnType = "btn_edit"
        }
        if(!btnType) return
        let ids = flowtaskid?flowtaskid:id
        this.flowId = flowId?flowId:this.templateList[0].id
        this.jumPage(ids, flowState,btnType)
    },
    addPage() {
        if (!this.templateList.length) return this.$u.toast('流程不存在')
        if (this.templateList.length > 1) {
            this.show = true
        } else {
            this.flowId = this.templateList[0].id
            this.jumPage()
        }
    },
    confirm(e) {
        this.flowId = this.templateList[e[0]].id
        this.jumPage()
    },
    jumPage(id, status,btnType){
        if (!id && !status) btnType = 'btn_add'
        let _title=""
        if(btnType=='btn_add'){
            _title = "新增"
        }
        if(btnType=='btn_detail'){
            _title = "详情"
        }
        if(btnType=='btn_edit'){
            _title = "编辑"
        }
        let opType = '-1'
        if ([1,2,5].includes(status)) opType = 0
        const config = {
            id: id || '',
            enCode: this.enCode,
            flowId: this.flowId,
            formType: 1,
            type: 1,
            opType,
            status: status || '',
            fullName: _title,
            jurisdictionType: btnType || ''
        }
        uni.navigateTo({
            url: '/pages/workFlow/flowBefore/index?config=' + this.base64.encode(JSON.stringify(config), "UTF-8")
        })
    },
    getFlowStatus(val) {
        let status
        switch (val) {
            case 0:
                status = {
                    text: '等待提交',
                    statusCss: 'u-type-info'
                }
                break;
            case 1:
                status = {
                    text: '等待审核',
                    statusCss: 'u-type-primary'
                }
                break;
            case 2:
                status = {
                    text: '审核通过',
                    statusCss: 'u-type-success'
                }
                break;
            case 3:
                status = {
                    text: '审核驳回',
                    statusCss: 'u-type-error'
                }
                break;
            case 4:
                status = {
                    text: '审核撤回',
                    statusCss: 'u-type-error'
                }
                break;
            case 5:
                status = {
                    text: '审核终止',
                    statusCss: 'u-type-info'
                }
                break;
            default:
                status = {
                    text: '等待提交',
                    statusCss: 'u-type-info'
                }
                break;
        }
        return status
    },
            getColumnList() {
                let columnPermissionList = []
                let _appColumnList =this.appColumnList
                    for (let i = 0; i < _appColumnList.length; i++) {
                        columnPermissionList.push(_appColumnList[i])
                    }
                this.columnList = this.transformColumnList(columnPermissionList, this.dataOptions)
            },
            transformColumnList(columnList, dataOptions) {
                let list = []
                for (let i = 0; i < columnList.length; i++) {
                    let e = columnList[i]
                    let columProp = e.prop
                    let label = e.label
                    let option = null
                    let options = columProp + "Options"
                    if (!columProp.includes('-')) {
                        columProp = columProp
                        if(this.type=='4'){
                            columProp = columProp +"_name"
                        }
                        if(label.length>4){
                            label = label.substring(0, 4)
                        }
                        e.label = label
                        e.prop = columProp
                        e.option = option
                        list.push(e)
                    } else {
                        e.vModel = columProp.split('-')[1]
                        e.childLabel = e.label.split('-')[1]
                        options = e.vModel + "Options"
                        let prop = columProp.split('-')[0]
                        let label = e.label.split('-')[0]
                        let newItem = {
                            align: "center",
                            jnpfKey: "table",
                            prop,
                            label,
                            children: []
                        }
                        if (!list.some(o => o.prop === prop)) list.push(newItem)
                        for (let i = 0; i < list.length; i++) {
                            if (list[i].prop === prop) {
                                e.prop = e.prop
                                e.vModel = e.vModel
                                if(this.type=='4'){
                                    e.prop = e.prop+"_name"
                                    e.vModel = e.vModel+"_name"
                                }
                                e.option = option
                                list[i].children.push(e)
                                break
                            }
                        }
                    }
                }
                return list
            },
            cellClick(item) {
                if (this.sortValue === item.value) return
                this.listQuery.sort = item.sort
                this.listQuery.sidx = item.sidx
                this.sortValue = item.value
                this.$refs.uDropdown.close();
                this.$nextTick(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                })
            },
            reset() {
                this.searchForm = JSON.parse(JSON.stringify(this.dataValue))
                this.key = new Date()
            },
            closeDropdown() {
                this.$refs.uDropdown.close();
                this.$nextTick(() => {
                    this.list = [];
                    this.mescroll.resetUpScroll();
                })
            },
            dataList(data){
                let _list =data.list
                return _list;
            },
        },
    }
</script>

<style lang="scss">
    page {
        background-color: #f0f2f6;
        height: 100%;
        /* #ifdef MP-ALIPAY */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* #endif */
    }

    .right-option-box {
        display: flex;
        width: max-content;

        .right-option {
            width: 144rpx;
            height: 100%;
            font-size: 16px;
            color: #fff;
            background-color: #dd524d;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .more-option {
            background-color: #1890ff;
        }
    }
</style>
