<template>
    <div>
        <div class="content">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <div class="message">
                <div class="flex-between bond">
                    <div>
                        招标文件：<span @click="down(bidDetail.fileUrl)">{{ bidDetail.fileName }}</span>
                    </div>
                    <div>开标信息：<span @click="changeOpen">开标一览表</span></div>
                </div>
                <div class="flex-item upload">
                    <div>变更信息：</div>
                    <ul class="title flex-item">
                        <li v-for="(item, index) in changeList" :key="index" class="line">
                            <router-link :to="{ path: '/purchaser/bid/bidStage/changeList/see', query: { id: item.noticeId } }">{{
                                item.title
                            }}</router-link>
                        </li>
                    </ul>
                </div>
                <!-- 投标文件 -->
                <div>
                    <div>投标文件：</div>
                    <dataTable :table-data="bids" :columns="bidTitle" :is-index="true">
                        <el-table-column slot="operate" label="文件" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div class="flex file">
                                    <div @click="down(scope.row.fileUrl)">{{ scope.row.fileName }}</div>
                                    <div v-for="(file, index) in scope.row.fileList" :key="index" @click="down(file.fileUrl)">
                                        <!-- {{ file.fileName }} -->
                                        {{ file.fileName}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <!-- 评审信息 -->
                <div style="margin-top: 100px">
                    <div class="flex-between">
                        <h5>评审信息</h5>
                        <el-button type="primary" size="small" @click="jump">澄清质询管理</el-button>
                    </div>
                    <dataTable :table-data="review" :columns="reviewTitle" :is-index="true">
                        <el-table-column slot="operate" label="资格审查" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.qualification">通过</div>
                                <div v-if="!scope.row.qualification">未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="符合性审查" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.conformity">通过</div>
                                <div v-if="!scope.row.conformity">未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="手动废标" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.bidRejection">通过</div>
                                <div v-if="!scope.row.bidRejection">未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="结论" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.conclusion">通过</div>
                                <div v-if="!scope.row.conclusion">未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="操作" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="handleEdit(scope.row, scope.$index)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <!-- 排名信息 -->
                <div>
                    <h5>排名信息</h5>
                    <dataTable :table-data="rank" :columns="rankTitle" :is-index="true">
                        <el-table-column slot="operate" label="是否中标候选人" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.winPerson">是</div>
                                <div v-if="!scope.row.winPerson">否</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="排名" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.finalScore">{{ scope.$index + 1 }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="最终得分" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.finalScore">{{ scope.row.finalScore }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="操作" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="Edit(scope.row, scope.$index)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <div class="flex">
                    <div>评标附件：</div>
                    <singleUpload :limit="5" :max="100" tip="最多上传5份，每份不超过100M." :fileList="fileList"  @input="getfile"></singleUpload>
                </div>
                <div class="button">
                    <el-button @click="back">返回</el-button>
                    <el-button type="primary" @click="complete">完成</el-button>
                </div>
            </div>
        </div>
        <!-- 编辑评审信息-->
        <el-dialog :visible.sync="isEvaluate" title="编辑">
            <el-form :model="evaluateForm" ref="evaluateForm" label-width="100px" :rules="rules">
                <el-form-item label="资格审查" prop="qualification">
                    <el-radio v-model="evaluateForm.qualification" :label="true">通过</el-radio>
                    <el-radio v-model="evaluateForm.qualification" :label="false">未通过</el-radio>
                </el-form-item>
                <el-form-item label="符合性审查" prop="conformity">
                    <el-radio v-model="evaluateForm.conformity" :label="true">通过</el-radio>
                    <el-radio v-model="evaluateForm.conformity" :label="false">未通过</el-radio>
                </el-form-item>
                <el-form-item label="手动废标" prop="bidRejection">
                    <el-radio v-model="evaluateForm.bidRejection" :label="true">通过</el-radio>
                    <el-radio v-model="evaluateForm.bidRejection" :label="false">未通过</el-radio>
                </el-form-item>
                <el-form-item label="结论" prop="conclusion">
                    <el-radio v-model="evaluateForm.conclusion" :label="true">通过</el-radio>
                    <el-radio v-model="evaluateForm.conclusion" :label="false">未通过</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isEvaluate = false">取 消</el-button>
                <el-button type="primary" @click="editCompanyEvaluate">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑公司排名-->
        <el-dialog title="编辑" :visible.sync="isRank" width="40%">
            <el-form :model="rankForm" ref="rankForm" :rules="rules">
                <el-form-item label="商务评分" prop="commercialGrade">
                    <el-input-number
                        v-model="rankForm.commercialGrade"
                        :min="0"
                        :controls="false"
                        :precision="2"
                        placeholder="请输入"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="技术评分" prop="skillGrade">
                    <el-input-number
                        v-model="rankForm.skillGrade"
                        :min="0"
                        :controls="false"
                        :precision="2"
                        placeholder="请输入"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="价格评分" prop="priceGrade">
                    <el-input-number
                        v-model="rankForm.priceGrade"
                        :min="0"
                        :controls="false"
                        :precision="2"
                        placeholder="请输入"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="评标价" prop="evaluationPrice">
                    <el-input-number
                        v-model="rankForm.evaluationPrice"
                        :min="0"
                        :controls="false"
                        :precision="2"
                        placeholder="请输入"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="是否中标候选人" prop="winPerson">
                    <el-radio v-model="rankForm.winPerson" :label="true">是</el-radio>
                    <el-radio v-model="rankForm.winPerson" :label="false">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isRank = false">取 消</el-button>
                <el-button type="primary" @click="editCompanyRank">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 开标一览表 -->
        <el-dialog title="开标一览表" :visible.sync="isOpenInfo">
            <dataTable :tableData="tableData" :columns="nopagecolumns" :margin-top="0" :margin-bottom="0"> </dataTable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isOpenInfo = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    bidderlist,
    bidBookDownload,
    changeNoticelist,
    bidFilelist,
    openInfo,
    saveEvaluate,
    companyRank,
    CompanyEvaluatec,
    isEvaluate,
    accessorydownload
} from '@api/purchaser/bid';
import dataTable from '@components/nopageTable.vue';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import singleUpload from '@components/Upload/Upload.vue';
export default {
    components: {
        dataTable,
        dataBreadcrumb,
        singleUpload
    },
    data() {
        return {
            fileList:[],
            isOpenInfo: false,
            tableData: [],
            nopagecolumns: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    label: '投标报价(元)',
                    prop: 'price'
                },
                {
                    label: '是否签名',
                    prop: 'isSign'
                }
            ], //
            rules: {
                qualification: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                conformity: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                bidRejection: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                conclusion: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                commercialGrade: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                skillGrade: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                priceGrade: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                evaluationPrice: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                winPerson: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ]
            },
            file: [],
            downloadList: [],
            changeList: [],
            bidDetail: '',
            evaluateForm: {
                qualification: '',
                conformity: '',
                bidRejection: '',
                conclusion: ''
            },
            evaluateIdx: '',
            isEvaluate: false,
            rankForm: {
                price: ''
            },
            rankIdx: '',
            isRank: false,
            projectId: 2,
            rankTitle: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    label: '投标价(元)',
                    prop: 'price'
                },
                {
                    label: '商务评分',
                    prop: 'commercialGrade'
                },
                {
                    label: '技术评分',
                    prop: 'skillGrade'
                },
                {
                    label: '价格评分',
                    prop: 'priceGrade'
                },
                {
                    label: '评标价(元)',
                    prop: 'evaluationPrice'
                },
                {
                    slot: 'operate'
                }
            ],
            rank: [],
            bidTitle: [
                {
                    label: '投标人',
                    prop: 'companyName'
                },
                {
                    slot: 'operate'
                }
            ],
            bids: [],
            breads: ['招标管理', '招标项目管理', '工作台'],
            review: [],
            reviewTitle: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    slot: 'operate'
                }
            ] // 操作列
        };
    },
    watch: {
        rank: {
            handler(newVal, oldVal) {
                console.log('深度监听rank', newVal, oldVal);
                if (newVal !== oldVal) {
                    console.log('改变');
                }
            },
            deep: true
        },
        review: {
            handler(newVal, oldVal) {
                console.log('深度监听review', newVal, oldVal);
                if (newVal !== oldVal) {
                    console.log('改变');
                }
            },
            deep: true
        }
    },
    created() {
        this.getbidFilelist();
        this.getchangeNoticelist();
        this.getbidBookDownload();
	  this.getbidderlist();
	  this.getisEvaluate();
    },
    methods: {
        changeOpen() {
            this.isOpenInfo = true;
            this.getopenInfo();
        },
        // 开标一览表
        async getopenInfo() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await openInfo(projectId);
                if (code == 200) {
                    for (let item of data) {
                        if (item.isSign) {
                            item.isSign = '是';
                        } else {
                            item.isSign = '否';
                        }
                    }
                    this.tableData = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        down(url) {
            window.open(url);
        },
        jump() {
            this.$router.push('/purchaser/bid/bidEvaluation/review/clear');
        },
        compare(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            };
        },
        getfile(val) {
            this.file = val;
	  },
	   async getisEvaluate(){
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await isEvaluate(projectId);
		if(data){
		 this.getCompanyEvaluatec()
         this.getcompanyRank()
         this.getaccessorydownload()
		}
	   },
        // 完成按钮
        async complete() {
            try {
                let message = {};
                message.projectId = localStorage.getItem('projectId');
                message.fileList = this.file;
                message.rankList = this.rank;
                message.judgeList = this.review;
                const { msg, code } = await saveEvaluate(message);
                if (code === 200) {
                    this.$message({
                        message: msg,
                        type: 'success',
                        duration: 1500
                    });
                      setTimeout(() => {
                          this.$router.go(-1);
                      }, 1500);
                } else {
                    this.$message.error(msg);
                }
            } catch (e) {
                console.log(e);
            }
        },
        back() {
            this.$router.go(-1);
        },
        download(url) {
            window.open(url);
        },
        async getbidBookDownload() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await bidBookDownload(projectId);
                if (code === 200) {
                    this.bidDetail = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 查看投标文件
        async getbidFilelist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await bidFilelist(projectId);
            if (code === 200) {
                this.bids = data;
            }
        },
        // 查看变更信息
        async getchangeNoticelist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await changeNoticelist(projectId);
            if (code === 200) {
                this.changeList = data;
            }
        },

        // 排名信息编辑
        Edit(row, index) {
            this.rankForm = Object.assign({}, row);
            (this.isRank = true), (this.RankIdx = index);
        },

        // 提交排名信息
        async editCompanyRank() {
            try {
                const valid = await this.$refs['rankForm'].validate();
                if (valid) {
                    // const {
                    // 	code,
                    // 	msg
                    // } = await saveCompanyRank(this.rankForm)
                    // if (code === 200) {
                    // 	this.$message.success(msg)
                    // 	this.isRank = false
                    // 	this.rankForm.finalScore = this.rankForm.commercialGrade + this.rankForm.skillGrade + this.rankForm.priceGrade
                    // 	this.$set(this.rank, this.RankIdx, this.rankForm)
                    // 	this.rank.sort(this.compare('finalScore'))
                    // }
                    this.isRank = false;
                    this.rankForm.finalScore = this.rankForm.commercialGrade + this.rankForm.skillGrade + this.rankForm.priceGrade;
                    this.$set(this.rank, this.RankIdx, this.rankForm);
                    this.rank.sort(this.compare('finalScore'));
                }
            } catch (e) {
                console.log(e);
            }
        },

        //评审信息编辑
        handleEdit(row, index) {
            this.evaluateForm = Object.assign({}, row);
            (this.isEvaluate = true), (this.evaluateIdx = index);
        },
        // 提交评审信息
        async editCompanyEvaluate() {
            try {
                const valid = await this.$refs['evaluateForm'].validate();
                if (valid) {
                    //     const { code, msg } = await saveCompanyEvaluate(this.evaluateForm);
                    //     if (code === 200) {
                    //         this.$message.success(msg);
                    //         this.isEvaluate = false;
                    //         this.$set(this.review, this.evaluateIdx, this.evaluateForm);
                    //     }
                    this.isEvaluate = false;
                    this.$set(this.review, this.evaluateIdx, this.evaluateForm);
                }
            } catch (e) {
                console.log(e);
            }
        },
     //获取公司列表
        async getbidderlist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await bidderlist(projectId);
            this.review = data;
            this.rank = data;
        },
        // 获取评标附件
        async getaccessorydownload() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await accessorydownload(projectId);
           for(let item of data){
               item.url=item.fileUrl
               item.name=item.fileName
           }
           this.fileList=data
        },
        // 查投标公司评审信息
        async getCompanyEvaluatec() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await CompanyEvaluatec(projectId);
                if (code === 200) {
                    this.review = data;
                }
            } catch (e) {
                console.log(e);
            }
        },  
        // 查看投标公司排名信息
        async getcompanyRank() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await companyRank(projectId);
                if (code === 200) {
            //         for(let item of data){
			// 	  if(item.winPerson){
			// 		  item.winPerson="true"
			// 	  }else{
			// 		  item.winPerson="false"
			// 	  }
			//   }
                    let data1 = data.sort(this.compare('finalScore'));
                    this.rank = data1;
                }
            } catch (e) {
                console.log(e);
            }
        }
    }
};
</script>

<style scoped>
.bond span {
    cursor: pointer;
}
.file{
    flex-wrap: wrap;
}
.file > div {
    margin-right: 10px;
    color: #113dee;
    cursor: pointer;
}

.message {
    margin-left: 50px;
    margin-bottom: 50px;
}

.message span {
    color: #113dee;
}

.message > div {
    margin-bottom: 15px;
}

.title > li {
    margin-right: 15px;
}

.upload button {
    border: 1px solid #000000;
    background: #fff;
    width: 50px;
    height: 20px;
    margin-left: 10px;
}

h5 {
    font-weight: bold;
    margin-bottom: 20px;
}

.button {
    width: 280px;
    margin: 80px auto 30px;
}
.line{
    line-height:20.8px;
}
</style>
