<template>
    <basic-container>
        <avue-crud :option="option" :search.sync="searchForm" :table-loading="loading" :data="data" ref="crud"
            v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
            :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot-scope="{ row }" slot="status">
                <el-tag :type="row.status == 0 ? 'warning' : row.status == 1 ? 'info' : 'success'">
                    {{row.status == 0 ? '待反馈' : row.status == 1 ? '已完成' : '已保存' }}
                </el-tag>
            </template>
            <template   slot-scope="{ type, disabled }" slot="statusForm">
                <div v-show="type == 'view' || type == 'edit'">
                    <el-tag :type="form.status == 0 ? 'warning' : 'info'">
                        {{form.status == 0 ? '待反馈' : form.status == 1 ? '已完成' : '' }}
                    </el-tag>
                </div>
            </template>
            <template slot-scope="scope" slot="menuLeft">
				<el-button type="primary" size="small" @click="handleAdd">反 馈</el-button>
			</template>
            <template slot-scope="{ row }" slot="menu">
                <el-button @click="handleView(row)">查看</el-button>
                <el-button :disabled="row.status != 0" @click="handleBack(row)">反馈</el-button>
            </template>
        </avue-crud>
        <el-dialog :close-on-click-modal="false" title="意见反馈" :visible.sync="dialogReceive" :append-to-body="true" width="70%" class="proRecive" @close="closeDialog">
            <el-form ref="receiveForm" :model="receiveForm" :rules="reciveRules" label-width="80px"
                label-position="left">
                <div>
                    <div style="color: #101010;font-size: 20px;font-weight: 550;margin-bottom: 20px;">基本信息</div>
                    <el-form-item label="提报单位" prop="unitName">
                        <el-input  style="width: 95%;" v-model="receiveForm.unitName" disabled placeholder="请输入提报单位"></el-input>
                    </el-form-item>
                    <el-form-item label="反馈类型" prop="type">
                        <el-select style="width: 95%;" v-model="receiveForm.type" disabled placeholder="请选择反馈类型">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述" prop="describes">
                        <el-input disabled  style="width: 95%;" placeholder="请输入描述" type="textarea" v-model="receiveForm.describes"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="feedUser">
                        <el-input disabled  style="width: 95%;" placeholder="请输入联系人" v-model="receiveForm.feedUser"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone">
                        <el-input disabled  style="width: 95%;" placeholder="请输入联系方式" v-model="receiveForm.phone"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <div style="color: #101010;font-size: 20px;font-weight: 550;margin-bottom: 20px;">反馈结果</div>
                    <el-form-item label="是否反馈" prop="status" v-if="viewType == 'view'">
                        <el-select :disabled="viewType == 'view'" placeholder="请选择反馈结果" v-model="receiveForm.status"  style="width: 95%;">
                            <el-option label="待反馈" :value="0"></el-option>
                            <el-option label="已完成" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="反馈内容" prop="content"  style="width: 95%;" v-if="(receiveForm.status==0&&viewType !== 'view')||(viewType == 'view'&&receiveForm.status==1)">
                        <el-input  type="textarea" :disabled="viewType == 'view'" v-model="receiveForm.content"  placeholder="请输入反馈内容"></el-input>
                    </el-form-item>
                    <el-form-item label="反馈附件" prop="file" style="width: 95%;" v-if="(receiveForm.status==0&&viewType !== 'view')||(viewType == 'view'&&receiveForm.status==1)">
                        <el-upload
                            action="/api/blade-resource/oss/endpoint/put-file"
                            :limit="3"
                            list-type="picture-card"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove"
                            accept=".png,.jpg"
                            :file-list="imgList"
                            :headers="headers"
                            :disabled="viewType == 'view'"
                            :class="{ 'hide-upload-btn': viewType == 'view' }">
                            <i class="el-icon-plus" ></i>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-show="viewType == 'view'" @click="closeRceive">关 闭</el-button>
                <el-button v-show="viewType != 'view'" @click="rejectRceive">保 存</el-button>
                <el-button v-show="viewType != 'view'" type="primary" @click="handleRceive">提 交</el-button>
            </span>
        </el-dialog>
    </basic-container>

</template>

<script>
import website from '@/config/website';
import { getToken, removeToken, removeRefreshToken } from '@/util/auth';
import {getFeedList,getDetail,updateFeedback,saveFeedback} from '@/api/feedback/feedback'
import {getChildList} from '@/api/system/dictbiz'
export default {
    data() {
        return {
            typeList:[],
            searchForm:{},
            treeOption: {
                nodeKey: 'id',
                // lazy: true,
                // treeLoad: function (node, resolve) {
                //   const parentId = (node.level === 0) ? 0 : node.data.id;
                //   getDeptLazyTree(parentId).then(res => {
                //     resolve(res.data.data.map(item => {
                //       return {
                //         ...item,
                //         leaf: !item.hasChildren
                //       }
                //     }))
                //   });
                // },
                addBtn: false,
                menu: false,
                size: 'small',
                props: {
                    labelText: '标题',
                    label: 'title',
                    value: 'value',
                    children: 'children'
                }
            },
            headers:{},
            option: {
                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                dialogType: 'dialog',
                dialogClickModal: false,
                searchShowBtn: false,
                refreshBtn: false,
                columnBtn: false,
                menuWidth: 240,
                searchEnter:true,
                gridBtn:false,
                column: [
                    {
                        label: "意见单号",
                        labelWidth: 120,
                        prop: "code",
                        overHidden: true,
                    },
                    {
                        label: "提报单位",
                        labelWidth: 120,
                        prop: "unitName",
                        overHidden: true,
                    },
                    {
                        label: "反馈类型",
                        labelWidth: 120,
                        prop: "typeName",
                        overHidden: true,
                    },
                    {
						label: "反馈类型",
						labelWidth: 120,
						prop: "feedbackType",
						hide: true,
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        search:true,
                        dicUrl: '/api/blade-system/dict-biz/child-list?current=1&size=100&parentId=1850021405049475074',
					},
                    {
						label: "描述",
						labelWidth: 120,
						prop: "describes",
						overHidden:true,
					},
                    {
                        label: "提交时间",
                        labelWidth: 120,
                        type: 'datetime',
                        format:'yyyy-MM-dd HH:mm:ss',
                        valueFormat:'yyyy-MM-dd HH:mm:ss',
                        prop: "createTime",
                        overHidden: true,
                    },
                    {
                        label: "状态",
                        labelWidth: 120,
                        prop: "status",  //0-待反馈 1-已完成
                        slot:true,
                        overHidden: true,
                        formslot:true
                    },
                    {
                        label: "完成时间",
                        labelWidth: 120,
                        type: 'datetime',
                        format:'yyyy-MM-dd HH:mm:ss',
                        valueFormat:'yyyy-MM-dd HH:mm:ss',
                        prop: "finishTime",
                        overHidden: true,
                    },
                ],
            },
            data: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectedList: [],
            dialogVisible: false,
            tableData: [],
            dialogReceive: false,
            receiveForm: {
                tableData: []
            },
            reciveRules: {
                // status: { required: true, message: '请选择是否反馈', trigger: 'blur' },
                content: { required: true, message: '请输入反馈内容', trigger: 'blur' },
            },
            isShowTips: false,
            viewType:'',
            imgList:[],
            filesList:[]
        }
    },
    created() {
        this.headers = {
            "Authorization": `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
            'Blade-Auth': 'bearer ' + getToken(),
            'Blade-Requested-With': 'BladeHttpRequest'
        }
        getChildList(1,100,'1850021405049475074').then(res =>{
            this.typeList = res.data.data
        })
    },
    methods: {
        beforeOpen(done, type) {
            done();
        },

        beforeClose(done) {
            done();
        },
        rowUpdate(row,index,done,loading){
            this.$message.success('修改成功')
            done()
        },
        searchReset(params, done) {
            this.query = params;
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        selectionChange(list) {
            this.selectedList = list
        },
        handleSuccess(res){
            this.filesList.push({
                attachUrl:res.data.link,
                attachName:res.data.originalName
            })
        },
        handleRemove(file, fileList){
            if(file.response){
                this.filesList = this.filesList.filter(item => item.attachUrl != file.response.data.link)
            }
        },
        // 点击外部提交按钮
        handleAdd() {
            if (this.selectedList.length == 0 || this.selectedList > 1) {
                this.$message.warning('请选择一条数据')
            } else {
                if(this.selectedList.find(item => item.status == 1)){
                    this.$message.warning('请选择状态为待反馈的数据')
                }else{
                    getDetail({id:this.selectedList[0].id}).then(res =>{
                        this.viewType = 'back'
                        this.receiveForm = res.data.data
                        this.dialogReceive = true
                    })

                }

            }
        },
        closeDialog(){
            this.imgList = []
            this.filesList = []
            this.receiveForm = {}
        },
        // 点击行内反馈按钮
        handleBack(row){
            getDetail({id:row.id}).then(res =>{
                this.viewType = 'back'
                this.receiveForm = res.data.data
                this.dialogReceive = true
            })
        },
        // 查看
        handleView(row){
            getDetail({id:row.id}).then(res =>{
                this.receiveForm = res.data.data
                this.imgList = []
                this.filesList = []
                res.data.data.attach.map(item =>{
                    this.imgList.push({
                        url:item.attachUrl,
                        name:item.attachName
                    })
                    this.filesList.push({
                        url:item.attachUrl,
                        name:item.attachName
                    })
                })
                setTimeout(() =>{
                    this.viewType = 'view',
                    this.dialogReceive = true
                },200)
            })
        },
        // 点击取消按钮
        handleCancel() {
            this.dialogVisible = false
            this.tableData = []
        },
        // 点击确认按钮
        handleSave() {
            this.dialogVisible = false
        },
        // 点击申领单确认按钮
        handleRceive() {
            this.$refs['receiveForm'].validate(valid =>{
                if(valid){
                    let query = {
                        id:this.receiveForm.id,
                        content:this.receiveForm.content,
                        attach:this.filesList
                    }
                    updateFeedback(query).then(res =>{
                        if(res.data.code == 200){
                            this.$message.success('反馈成功')
                            this.dialogReceive = false
                            this.onLoad()
                        }
                    })
                }
            })

        },
        // 点击保存
        rejectRceive() {
            this.$confirm('请确认是否保存该条反馈数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$refs['receiveForm'].validate(valid => {
                    if (valid) {
                        let query = {
                            id:this.receiveForm.id,
                            status: this.receiveForm.status,
                            content:this.receiveForm.content
                        }
                        saveFeedback(query).then(res =>{
                            this.$message.success('保存成功')
                            this.dialogReceive = false
                            this.onLoad()
                        })
                    }
                })
                // this.$message.success('保存成功')
                // this.dialogReceive = false
                // this.viewType = ''
            })
        },
        // 点击申领审核关闭按钮
        closeRceive(){
            this.dialogReceive = false
        },
        onLoad(page, params = {}) {
            let query = {
                type:this.searchForm.feedbackType ? this.searchForm.feedbackType : null,
                current:this.page.currentPage,
                size:this.page.pageSize,
            }
            getFeedList(query).then(res =>{
                this.data = res.data.data.records
                this.page.total = res.data.data.total
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.proRecive {
    .input_number {
        .el-input__inner {
            color: red;
        }
    }

    .error_tips {
        width: 180px;
        height: 30px;
        background: rgba(222, 134, 143, 0.43);
        margin-bottom: 30px;
        margin-left: 71.8%;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
<style>
.hide-upload-btn .el-upload--picture-card {
  display: none;
}
</style>
