<template>
    <global-page title="考核记录登记">
        <view class="content">
            <view class="form">
                <up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules">
                    <up-form-item label="事件来源" :borderBottom="true">
                        <up-input border="none" inputAlign="right" placeholder="请输入" clearable v-model="formData.eventSource"></up-input>
                    </up-form-item>
                    <up-form-item label="基地/职能部门" :borderBottom="true">
                        <global-picker pickAlign="right" clearable v-model="formData.department" :options="department"></global-picker>
                    </up-form-item>
                    <up-form-item label="考核对象" :borderBottom="true">
                        <global-picker pickAlign="right" clearable v-model="formData.appraisee" :options="appraisee"></global-picker>
                    </up-form-item>
                    <up-form-item label="机号" :borderBottom="true">
                        <global-picker
                            pickAlign="right"
                            clearable
                            :options="deviceNumSelect"
                            v-model="formData.ac"
                            @change="changeAc"
                        ></global-picker>
                    </up-form-item>
                    <up-form-item label="客户" :borderBottom="true">
                        <up-input border="none" inputAlign="right" clearable v-model="formData.acOwn" disabled disabledColor="#fff"></up-input>
                    </up-form-item>
                    <up-form-item label="机型" :borderBottom="true">
                        <up-input border="none" inputAlign="right" clearable v-model="formData.acType" disabled disabledColor="#fff"></up-input>
                    </up-form-item>
                    <up-form-item label="日期" :borderBottom="true" required prop="eventTime">
                        <global-picker pickAlign="right" clearable v-model="formData.eventTime" mode="date"></global-picker>
                    </up-form-item>
                    <up-form-item label="事件描述" :borderBottom="true" labelPosition="top">
                        <up-textarea
                            placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                            v-model="formData.eventMsg"
                            :height="70"
                        ></up-textarea>
                    </up-form-item>
                    <up-form-item label="事件类别" :borderBottom="true">
                        <global-picker pickAlign="right" clearable v-model="formData.eventType" dictkey="eventType"></global-picker>
                    </up-form-item>
                    <up-form-item label="考核类型" :borderBottom="true">
                        <global-picker pickAlign="right" clearable v-model="formData.examineType" :options="examineType"></global-picker>
                    </up-form-item>
                    <up-form-item label="考核依据" :borderBottom="true" labelPosition="top">
                        <up-textarea
                            placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                            v-model="formData.examineBasis"
                            :height="70"
                        ></up-textarea>
                    </up-form-item>
                    <up-form-item label="分值" :borderBottom="true">
                        <up-input border="none" inputAlign="right" placeholder="请输入" v-model.number="formData.score" type="number"></up-input>
                    </up-form-item>
                    <up-form-item label="当班人员" :borderBottom="true">
                        <up-input border="none" inputAlign="right" placeholder="请输入" v-model="formData.onDutyUser"></up-input>
                    </up-form-item>
                </up-form>
            </view>
            <card-details
                type="company"
                title="公司值班信息"
                showfooter
                :idcard="details.dmName"
                :calendar="details.optionSaveTime"
                edit
                @handleAdd="handleAdd(0)"
                v-if="details"
            >
                <card-details-item label="公司值班经理" :value="details.dmName || '-'"></card-details-item>
                <card-details-item
                    label="公司值班经理意见"
                    :value="details.opinionType != -1 ? useGetDictByValue('opinionType', details.opinionType) : '-'"
                ></card-details-item>
                <card-details-item label="公司值班经理意见描述" :value="details.dmMsg || '-'"></card-details-item>
            </card-details>
            <card-details
                type="quality"
                title="品质中心信息"
                showfooter
                :idcard="details.qmName"
                :calendar="details.qualitySaveTime"
                edit
                @handleAdd="handleAdd(1)"
                v-if="details"
            >
                <card-details-item label="品质中心经理" :value="details.qmName || '-'"></card-details-item>
                <card-details-item
                    label="品质中心经理意见"
                    :value="details.qualityOpinionType != -1 ? useGetDictByValue('opinionType', details.qualityOpinionType) : '-'"
                ></card-details-item>
                <card-details-item label="品质中心经理意见描述" :value="details.qmMsg || '-'"></card-details-item>
            </card-details>
            <view class="appeal">
                <view class="appeal-title">
                    <text>申诉情况</text>
                    <global-picker pickAlign="right" dictkey="appealInfo" v-model="formData.appealInfo" clearable></global-picker>
                </view>
                <view class="appeal-content">
                    <global-upload :fileList="getFileList" url="/resource/uploadFile" @handleUpload="handleUpload"></global-upload>
                </view>
            </view>
        </view>
        <template #bottom>
            <view class="submit-btn">
                <global-button type="primary" size="large" @tap="handleSubmit">保存</global-button>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { reactive, ref } from 'vue'
import CardDetails from './components/card-details.vue'
import CardDetailsItem from './components/card-details-item.vue'
import { onShow } from '@dcloudio/uni-app'
import useBaseStore from '@/store/base'
import { useGetDictByValue } from '@/components/global-picker/useDict'
import useAppraisalRecordStore from '@/store/appraisal-record'
import { updateRqmDataApi } from '@/api/appraisal-record'
import { getAcReduceListApi } from '@/api/base'
import { storeToRefs } from 'pinia'

const appraisalRecordStore = useAppraisalRecordStore()
const { details, getFileList } = storeToRefs(appraisalRecordStore)
// 校验规则
const rules = reactive({
    eventTime: [
        {
            required: true,
            message: '请选择日期',
            trigger: ['blur', 'change']
        }
    ]
})
//获取下拉框选项
const {
    selectList: { deviceNumSelect }
} = useBaseStore()
const {
    selectList: { appraisee, department, examineType }
} = useAppraisalRecordStore()
// 表单数据
const formData = reactive({
    id: '',
    ac: '',
    acOwn: '',
    acType: '',
    appealInfo: '-1',
    appraisee: '-1',
    department: '-1',
    dmUid: '-1',
    eventMsg: '',
    eventSource: '',
    eventTime: -1,
    eventType: -1,
    examineBasis: '',
    examineType: '-1',
    onDutyUser: '',
    opinionMsg: '',
    opinionType: -1,
    score: null,
    qmUid: '',
    qualityOpinionMsg: '',
    qualityOpinionType: -1,
    status: '',
    emailSendTime: -1
})
const fileList = ref([])
onShow(() => {
    formData.id = details.value.id
    formData.ac = details.value.ac
    formData.acOwn = details.value.acOwn
    formData.acType = details.value.acType
    formData.appealInfo = details.value.appealInfo
    formData.appraisee = details.value.appraisee
    formData.department = details.value.department
    formData.dmUid = details.value.dmUid
    formData.eventMsg = details.value.eventMsg
    formData.eventSource = details.value.eventSource
    formData.eventTime = details.value.eventTime
    formData.eventType = details.value.eventType
    formData.examineBasis = details.value.examineBasis
    formData.examineType = details.value.examineType
    formData.onDutyUser = details.value.onDutyUser
    formData.opinionMsg = details.value.opinionMsg
    formData.opinionType = details.value.opinionType
    formData.score = details.value.score
    formData.qmUid = details.value.qmUid
    formData.qualityOpinionMsg = details.value.qualityOpinionMsg
    formData.qualityOpinionType = details.value.qualityOpinionType
    formData.status = details.value.status
    formData.emailSendTime = details.value.emailSendTime
    //初始化文件列表
    fileList.value = getFileList.value
})
//提交表单
const formRef = ref()
const handleSubmit = async () => {
    await formRef.value?.validate()
    const params = { ...formData, file: JSON.stringify(fileList.value) }
    const res = await updateRqmDataApi(params, { loading: true })
    if (res.code == 200) {
        uni.navigateBack()
        appraisalRecordStore.getRqmDetails()
        uni.$message.showToast(res.message)
    } else {
        uni.$message.showToast(res.message)
    }
}
// 添加
const handleAdd = (isDuty) => {
    let params = {}
    let realName = ''
    if (isDuty == 0) {
        params = { id: details.value.id, isDuty, mid: details.value.dmUid, opinionType: details.value.opinionType, msg: details.value.dmMsg }
        realName = details.value.dmName
    } else {
        params = { id: details.value.id, isDuty, mid: details.value.qmUid, opinionType: details.value.qualityOpinionType, msg: details.value.qmMsg }
        realName = details.value.qmName
    }
    uni.navigateTo({
        url: 'add',
        success: () => {
            uni.$emit('appraisalRecordAdd', params, realName)
        }
    })
}
//获取文件内容
const handleUpload = (data) => {
    fileList.value = data
}
//切换机号
const changeAc = async () => {
    const res = await getAcReduceListApi({ ac: formData.ac }, { loading: true })
    if (res.code == 200) {
        formData.acOwn = res.data[0]?.zop3
        formData.acType = res.data[0]?.zstortgc
    } else {
        uni.$message.showToast(res.message)
    }
}
</script>
<style lang="scss" scoped>
.content {
    padding-bottom: 140rpx;
    .form {
        background: #fff;
        padding: 0 32rpx;
    }
    .appeal {
        margin-top: 16rpx;
        background: #fff;
        &-title {
            padding: 28rpx 32rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2rpx solid #f4f4f4;
            text {
                color: #1d2129;
            }
        }
        &-content {
            padding: 28rpx 32rpx;
        }
    }
}
.submit-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
