<template>
    <div class='pages'>
        <div class="container">
            <div class=" card">
                <div class="flex   flex-center2 " style="padding: 15px;">
                    <img style="left: 0; height: 14px;" src="../../assets/images/block.png" alt="">
                    <div class="Dispatch">派单信息</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">派单人</div>
                    <div class="Dispatch-right">{{tableData.agencyName}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">指派部门</div>
                    <div class="Dispatch-right">{{tableData.deptName}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">指派时间</div>
                    <div class="Dispatch-right">{{tableData.latestOperatedTime}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">联系当事人时限</div>
                    <div class="Dispatch-right-red">{{tableData.contactTime}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">(部门)办结时限</div>
                    <div class="Dispatch-right-red">{{tableData.limitTime}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">转办意见</div>
                    <div class="Dispatch-right">{{tableData.transferAdvice}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 15px;">
                    <div class="Dispatch-left">办理要求</div>
                    <div class="Dispatch-right">{{tableData.handlingReq}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
            </div>
        </div>
        <div class="container">
            <div class=" card ">
                <div class="flex flex-end  flex-center2 ">
                    <div class="flex flex-center2 " style="padding:5px;">
                        <img style="left: 0; height: 14px;" src="../../assets/images/block.png" alt="">
                        <div class="Dispatch">热线详情</div>
                    </div>
                    <div class="handleStatus"> {{ tableData.operationTypeName }}</div>
                </div>
                <div class="context">
                    {{ tableData.eventContent}}
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">工单号:</div>
                    <div class="Dispatch-right">{{tableData.workOrderNum}}</div>
                </div>
                <div class="van-hairline--bottom" style=""></div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">来电人:</div>
                    <div class="Dispatch-right">{{tableData.name}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">来电号码:</div>
                    <div class="Dispatch-right">{{tableData.mobile}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">问题分类:</div>
                    <div class="Dispatch-right">{{tableData.categoryAllName}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">紧急程度:</div>
                    <div class="Dispatch-right">{{tableData.exigency}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">是否回复:</div>
                    <div class="Dispatch-right">{{tableData.replayed}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">是否保密:</div>
                    <div class="Dispatch-right">{{tableData.secrecy}}</div>
                </div>
                <div class="flex flex-center2 " style="padding: 5px;">
                    <div class="HotlineDetails-left">回复备注:</div>
                    <div class="Dispatch-right">{{tableData.replayRemark}}</div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class=" card ">
                <div class="flex flex-end  flex-center2 ">
                    <div class="flex flex-center2 " style="padding:5px;">
                        <img style="left: 0; height: 14px;" src="../../assets/images/block.png" alt="">
                        <div class="Dispatch">办理经过</div>
                    </div>
                </div>
                <!-- <div class="context">
                    {{ tableData.eventContent}}
                </div> -->
                <div v-for="(item,index) in afterList" :key="index">
                    <div class="flex flex-end  flex-center2 ">
                        <div class="flex flex-center2 " style="padding:5px;">
                            <div v-if="item.agencyId" class="Processhandling-left">指派</div>
                            <div v-else class="Processhandling-left">{{item.processName}}</div>
                        </div>
                        <div class="Processhandling-right">{{item.processTime}}</div>
                    </div>
                    <div class="flex flex-center2 " style="padding: 5px;">
                        <div class="Processhandling-left-left">操作人:</div>
                        <div class="Dispatch-right">{{item.departmentName}}</div>
                    </div>
                    <div class="van-hairline--bottom" style=""></div>
                    <div class="flex flex-center2 " style="padding: 5px;">
                        <div class="Processhandling-left-left">指派部门:</div>
                        <div class="Dispatch-right">{{item.agencyName}}</div>
                    </div>
                    <div class="flex flex-center2 " style="padding: 5px;">
                        <div class="Processhandling-left-left">转办意见:</div>
                        <div class="Dispatch-right">{{item.publicReply}}</div>
                    </div>
                    <div class="flex flex-center2 " style="padding: 5px;">
                        <div class="Processhandling-left-left">联系当事人时限:</div>
                        <div class="Dispatch-right">{{item.contactTime}}</div>
                    </div>
                    <div class="flex flex-center2 " style="padding: 5px;">
                        <div class="Processhandling-left-left">(部门)办结时限:</div>
                        <div class="Dispatch-right">{{formatDate1(new Date(item.timeLimit * 1000))}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container1">
            <van-button style="width: 100%;" round type="info" @click="handlelist()">办理</van-button>
        </div>
        <van-popup round v-model="show" close-icon-position="top-left" position="bottom" :style="{ height: '70%' }">
            <van-cell-group>
                <van-field readonly is-link v-model="stutasName" label="办理状态" placeholder="请选择证件类型"
                    @click="showPicker = true" />
                <van-action-sheet v-if="showPicker" v-model="show" :actions="actions" @select="onSelect" />
                <div class="textarea">
                    <van-field type="textarea" v-model="content" label="办理情况" placeholder="请输入内容" rows="2" autosize
                        show-word-limit required />
                </div>
                <van-cell>
                    <div class="flex" is-link>
                        <span style=" white-space: nowrap;">上传录音</span>
                        <van-uploader  v-model="fileList"  :after-read="afterRead" accept="audio/mp3" preview-size=80px>  
                             <div class="flex flex-center2 m-left18">
                            <img style="width: 15px;height: 15px;" src="../../assets/images/uploand.png">
                            <span style=" white-space: nowrap;">选择文件</span>
                        </div></van-uploader>
                     
                    </div>
                </van-cell>
                <van-cell title="上传图片">
                    <template #label>
                        <van-uploader v-model="pictureList" :after-read="afterRead1" :max-count="3" accept="audio/mp3"
                            :max-size="10 * 1024 * 1024" />
                    </template>
                </van-cell>
                <van-field v-model="respondent" label="答复人" placeholder="请输入" />
                <van-field v-model="respondentPhone" label="答复电话" placeholder="请输入" />
                <van-field v-model="contacts" label="联系人" placeholder="请输入" />
                <van-field v-model="contactsPhone" label="联系电话" placeholder="请输入" />
                <van-field readonly is-link v-model="irregularityName" label="填报不合规诉求" placeholder="请选择"
                    @click="showunreasonable = true" />
                <van-action-sheet v-if="showunreasonable" v-model="irregularity" :actions="unreasonable"
                    @select="onirregularity" />
                <van-field readonly is-link v-model="irregularityname" label="办理真实度" placeholder="请选择" required
                    @click="showreal = true" />
                <van-action-sheet v-if="showreal" v-model="verified" :actions="realList" @select="onreal" />
                <van-field v-if="operationType=='11'" v-model="returnVisitor" label="回访人" placeholder="请输入" />
                <van-field v-if="operationType === '11'" readonly is-link v-model="returnTime" label="回访时间"
                    placeholder="请选择" @click="showtime = true" />
                <van-datetime-picker v-if="showtime"  type="datetime" :min-date="minDate"
                    :max-date="maxDate" @confirm="handleConfirm" @cancel="handleCancel" />
                <van-field v-if="operationType=='11'" readonly is-link v-model="loseContactName" label="联系当事人"
                    placeholder="请选择" required @click="showloseContact = true" />
                <van-action-sheet v-if="showloseContact" v-model="loseContact" :actions="loseContactList"
                    @select="onloseContact" />
                <van-field v-if="operationType=='11'" readonly is-link v-model="putThroughName" label="未接通电话"
                    placeholder="请选择" required @click="showputThrough = true" />
                <van-action-sheet v-if="showputThrough" v-model="putThrough" :actions="putThroughList"
                    @select="onputThrough" />
                <van-field v-if="operationType=='11'" readonly is-link v-model="cooperateName" label="是否配合回访"
                    placeholder="请选择" required @click="showcooperate = true" />
                <van-action-sheet v-if="showcooperate" v-model="cooperate" :actions="cooperateList"
                    @select="oncooperate" />
                <van-field v-if="operationType=='11'" readonly is-link v-model="satisfactionName" label="服务都满意度"
                    placeholder="请选择" required @click="showsatisfaction = true" />
                <van-action-sheet v-if="showsatisfaction" v-model="satisfaction" :actions="satisfactionList"
                    @select="onsatisfaction" />
                <van-field v-if="operationType=='11'" readonly is-link v-model="dissatisfyReasonName" label="不满意原因"
                    placeholder="请选择" required @click="showdissatisfyReason = true" />
                <van-action-sheet v-if="showdissatisfyReason" v-model="dissatisfyReason"
                    :actions="dissatisfyReasonList" @select="onshowdissatisfyReason" />
                    <div class="textarea">
                    <van-field v-if="operationType=='11'" type="textarea" v-model="visitComments" label="回访意见"
                        placeholder="请输入内容" rows="2" autosize show-word-limit required />
                </div>
            </van-cell-group>
            <div class="flex flex-x flex-mean" style="margin-top: 10px;">
                <van-button style="width: 30%;" round type="info" @click="cancel">取消</van-button>
                <van-button v-if="tableData.operationType!=='11'&& tableData.operationType!=='12'" style="width: 30%;" round type="info" @click="onreply">办理</van-button>
            </div>
        </van-popup>


    </div>
</template>
<script>
import throttle from 'lodash/debounce'
import { icEventList,agencyGridDepttree,process,reply } from '@/api/service'
import { uploadvariedfile } from '@/api/basic'
import { Dialog } from 'vant';

export default {
    data() {
        return {
            showsdissatisfyReason:false,
            dissatisfyReasonName:"",
            showsatisfaction:false,
            satisfactionName:"",
            showcooperate:false,
            cooperateName:"",
            showputThrough:false,
            putThroughName:"",
            showloseContact:false,
            loseContactName:"",
            showtime:false,
            irregularityname:"",
            showreal:false,
            showdissatisfyReason:false,
            irregularityName:"",
            showunreasonable:false,
            fileList:[],
            pictureList:[],
            showPicker:false,
            stutasName:"办理中",
            show:false,
            icEventId:"",
            workOrderNum:"",
            mobile:"",
            status: false,
            pageNo: 1,
            pageSize: 50,
            tableData:{},
            afterList:[],
            minDate:new Date(),
            actions: [
                { name: '已联系当事人', value: "9" },
                { name: '办理中', value: "10" },
                { name: '已办结', value: "11" },
            ],
            unreasonable: [
                { name: '是', value: "0" },
                { name: '否', value: "1" },
            ],
            dissatisfyReasonList: [
                { name: '未回复', value: "0" },
                { name: '服务态度差', value: "1" },
                { name: '推诿扯皮', value: "2" },
                { name: '处理不及时', value: "3" },
                { name: '其他', value: "4" },
            ],
            realList:[
                { name: '属实', value: "0" },
                { name: '不属实', value: "1" },
            ],
            loseContactList:[
                { name: '已联系', value: "0" },
                { name: '未取得联系', value: "1" },
            ],
            putThroughList:[
                { name: '接通', value: "0" },
                { name: '未接通', value: "1" },
            ],
            cooperateList:[
                { name: '配合', value: "0" },
                { name: '不配合', value: "1" },
            ],
            satisfactionList:[
                { name: '满意', value: "0" },
                { name: '非常满意', value: "1" },
                { name: '不满意', value: "2" },
            ],
            examineList:[
                { name: '通过', value: "0" },
                { name: '不通过', value: "1" },
            ],
            operationType: "", //处理方式[11已办结,10办理中,9联系当事人]
            content: '',//办理情况
            files: [],//附件
            respondent: '',//答复人
            respondentPhone: '',//答复人电话
            contacts: '',//联系人
            contactsPhone: '',//联系人电话
            irregularity: '',//填报不合规诉求 0：是 1：否
            //不合规诉求类型
            verified: '', //办理真实度是否属实 0：属实 1：不属实
            returnVisitor: '',//回访人
            returnTime: "",//回访时间
            loseContact: '',//联系当事人0：已联系  1：未取得联系
            putThrough: '',//接通电话 0：接通  1：未接通
            cooperate: '',//是否配合回访0：配合  1：不配合
            satisfaction: '',//0：满意  1：非常满意  2：不满意
            dissatisfyReason: '',//不满意原因
            visitComments: '',//回访意见
            examine: null,//审核结果
            examineContent: ''//审核说明
        };
    },
    created() {
        this.icEventId =this.$route.query.icEventId;
        this.icEventList()
        this.process()
    },
    mounted() {


    },
    activated() {

    },
    methods: {
        onshowdissatisfyReason(item){
            this.dissatisfyReasonName=item.name
            this.dissatisfyReason=item.value
            this.showdissatisfyReason=false
        },
        oncooperate(item){
            this.cooperateName=item.name
            this.cooperate=item.value
            this.showcooperate=false
        },
        onsatisfaction(item){
            this.satisfactionName=item.name
            this.satisfaction=item.value
            this.showsatisfaction=false
        },
        onputThrough(item){
            console.log(item);
            this.putThroughName=item.name
            this.putThrough=item.value
            this.showputThrough=false
        },
        onreal(item){
            this.irregularityname=item.name
            this.verified=item.value
            this.showreal=false
        },
        onloseContact(item){
            this.loseContact=item.value
            this.loseContactName=item.name
            this.showloseContact=false
        },
        //获取事件
       async icEventList() {
           await icEventList({
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                icEventId:this.icEventId
            }).then(res => {
                console.log(res.data.list[0],"skjlfhskdjfh");
                this.tableData=res.data.list[0]
                console.log(this.tableData,"skjlfhskdjfh");
                this.agencyGridDepttree()
            }).catch(err => {

            })
        },
        async agencyGridDepttree() {
           await agencyGridDepttree({
                agencyId: this.tableData.agencyId,
                purpose: "query"
            }).then(res => {
                this.tableData.push(res.agencyName)
                console.log(this.tableData,"skjlfhskdjfh");
         
            }).catch(err => {

            })
        },
        async process() {
           await process({
            icEventId:this.icEventId
            }).then(res => {
                this.afterList=res.data
                console.log(this.afterList,"skjlfhskdjfh");

         
            }).catch(err => {

            })
            this.afterList.forEach(item=>{
                item.processTime=this.formatDate1(new Date(item.processTime * 1000))
            })
        },
        onOperationType(){
            this.status=true
            console.log(this.status,"skjlfhskdjfh");
        },
        handlelist(){
            console.log("dslkfkhd");
            this.returnTime=this.formatDate1(new Date())
            this.show=true
        },
        showPicker1(){
            console.log("sdklfkhsfkl");
            this.showPicker=true
        },
        onSelect(item){
            console.log(item);
            this.stutasName=item.name
            this.operationType=item.value
            this.showPicker=false
        },
        ondissatisfyReason(item){
            console.log(item);
            this.dissatisfyReasonName=item.name
            this.dissatisfyReason=item.value
        },
        onirregularity(item){
            console.log(item);
            this.irregularityName=item.name
            this.irregularity=item.value
            this.showunreasonable=false
        },
        cancel(){
            console.log("dslkjksdf");
            this.show=false
        },
        async onreply(){
            await reply({
                operationType:this.operationType, //处理方式[11已办结,10办理中,9联系当事人]
               content: this.content,//办理情况
               files: this.fileList.concat(this.pictureList),//附件
               respondent: this.respondent,//答复人
               respondentPhone: this.respondentPhone,//答复人电话
               contacts: this.contacts,//联系人
               contactsPhone: this.contactsPhone,//联系人电话
               irregularity: this.irregularity,//填报不合规诉求 0：是 1：否
               //不合规诉求类型
               verified: this.verified, //办理真实度是否属实 0：属实 1：不属实
               returnVisitor: this.returnVisitor,//回访人
               returnTime: this.returnTime,//回访时间
               loseContact: this.loseContact,//联系当事人0：已联系  1：未取得联系
               putThrough: this.putThrough,//接通电话 0：接通  1：未接通
               cooperate: this.cooperate,//是否配合回访0：配合  1：不配合
               satisfaction: this.satisfaction,//0：满意  1：非常满意  2：不满意
               dissatisfyReason: this.dissatisfyReason,//不满意原因
               visitComments: this.visitComments,//回访意见
               examine: this.examine,//审核结果
               examineContent:this.examineContent,//审核说明,
               icEventId:this.icEventId
            }).then(res => {
                console.log(res,"skjlfhskdjfh");
                this.show=false
                this.$toast.success('提交成功');
                this.$router.push('/hotline')

            }).catch(err => {

            })
        },
        afterRead(file) {
            file.status = 'uploading'
            file.message = '上传中...'
            if(file.file.file.file.name.split('.').pop()=='mp3')
            uploadvariedfile(file.file)
            .then(res => {
                file.status = ''
                 file.attachmentUrl=res.data.url
                 file.attachmentType=file.file.type
                 file.attachmentName=file.file.name
                 file.attachmentFormat=file.file.name.split('.').pop()
                console.log(this.fileList)
        })
        .catch(() => {
          file.status = 'failed'
          file.message = '上传失败'
        })
        console.log(file);
        console.log(this.fileList,"sdf sdf ");
    },
    afterRead1(file) {
            file.status = 'uploading'
            file.message = '上传中...'
            uploadvariedfile(file.file)
            .then(res => {
                file.status = ''
                 file.message = '上传成功'
                 file.url = res.data.url
                console.log(this.fileList)
        })
        .catch(() => {
          file.status = 'failed'
          file.message = '上传失败'
        })
    },
    handleConfirm(value) {
      console.log(value);
      this.returnTime = this.formatDate1(value);
      console.log(this.returnTime);
      this.showtime = false;
    },
    formatDate1(date) {
        console.log("data",date);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
    handleCancel() {
      this.showtime = false;
    }
  },
    
    components: {},
    computed: {
        statusClass() {
            return {
                'status-red': this.item.operationType === '未联系当事人',
                'lan': this.item.operationType === '已联系当事人',
                'status-cycn': this.item.operationType === '办理中',
                'status-orange': this.item.operationType === '已办结待审核',
                'status-grey': this.item.operationType === '已审核归档' || this.item.operationType === '其他默认状态'
            };
        },

    },
    watch: {}
}
</script>

<style lang='less' scoped>
:deep(.van-cascader__title) {
    width: 100%;
}

:deep(.van-tabs__nav) {
    padding-right: 80px;
    box-sizing: border-box;
}

:deep(.van-tabs__nav--line) {
    padding-bottom: 10px;
}

.workorder {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #999999;
}
.Dispatch{
    font-family: PingFang SC;
font-weight: bold;
font-size: 17px;
color: #333333;
line-height: 21px;
padding-left: 10px
}
.Dispatch-left{
    font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #666666;
line-height: 21px;
white-space: nowrap
}
.Dispatch-right{
    font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 21px;
padding-left: 20px;
}
.Dispatch-right-red{
    font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #FF5F81 ;
line-height: 21px;
padding-left: 30px;
white-space: nowrap
}
.handleStatus{
    font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #FF3C3C;
line-height: 21px;
white-space: nowrap
}
.context{
    font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 23px;
}
.HotlineDetails-left{
    width: 66px;
font-family: PingFang SC;
font-weight: 500;
font-size: 15px;
color: #999999;
line-height: 20px;
white-space: nowrap
}
.Processhandling-left{
font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 21px;
white-space: nowrap
}
.Processhandling-right{
font-family: PingFang SC;
font-weight: 500;
font-size: 13px;
color: #BDBDBD;
line-height: 20px;
white-space: nowrap
}
.Processhandling-left-left{
font-family: PingFang SC;
font-weight: 500;
font-size: 15px;
color: #999999;
line-height: 20px;
white-space: nowrap
}
.container1{
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 344px;
    left: 6px;
    display: flex; /* 确保 align-items 有效 */
    justify-content: center; /* 可选：如果需要居中对齐内部内容 */
}
.inpit{
        width: 100%;
        min-height: 100px;
        background: #F7F7F7;
        border-radius: 10px;
        border: none;
}
.input1{
    border: none;
    padding-left: 20px;
}
.textarea {
  /deep/ .van-cell {
    display: block;
  }
  /deep/ .van-field__label {
    width: 100%;
  }
  /deep/ .van-cell__value {
    margin-top: 10px;
    background: #F7F7F7;
    padding: 14px 16px;
  }
}

</style>
