/**
@author:fugy
@date:2018.8.15
@params:props
 */
<template>
    <div>
        <!--未过期的合同显示列表-->
        <ul class="cont-box">
            <p class="no-cont-tip" v-show="contractList.length === 0">暂无合同信息</p>
            <li class="cont-item" v-for='(item, index) in contractList' :key='item.index'>
                <el-row>
                    <el-col :span='4' style="text-align:right;">合同期限</el-col>    
                    <el-col :span='19' :offset='1'>
                        <span v-if = "item.onlyRead">{{item.startDate}}&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;{{item.endDate}}</span>
                        <el-date-picker 
                            v-else
                            v-model='item.dateRange'                           
                            size="small"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format='yyyy-MM-dd'>
                        </el-date-picker>
                        
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='4' style="text-align:right;line-height:40px;">合同电子文档</el-col>    
                    <el-col :span='19' :offset='1' style="padding:5px 0;" v-if="item.onlyRead">
                        <p v-if="item.doc" style="color:#409EFF;cursor: pointer;" @click="downDoc(item.doc)">{{item.doc}}</p>
                        <p v-else>暂无-合同电子文档</p>
                    </el-col>
                    <el-col :span='19' :offset='1' style="padding:5px 0;" v-else>
                        <v-upload-img 
                        @getKey='getFileKey'
                        @delete-img = "deleteFile"
                        type="file"
                        :index='index'
                        :identify='item.doc'
                        :disabled='true'
                        ></v-upload-img>
                    </el-col>                    
                </el-row>
                <el-row>
                    <el-col :span='4' style="text-align:right;">合同扫描件</el-col>   
                    <el-col :span='19' :offset='1' style="padding:5px 0;" v-if="item.onlyRead">
                        <el-row>
                            <el-col :span="6" v-for="(ele, idx) in item.copies" :key="idx">
                                <v-upload-img 
                                :identify="ele"
                                :disabled = "true"
                                ></v-upload-img>
                            </el-col>
                        </el-row>                            
                    </el-col> 
                    <el-col :span='19' :offset='1' style="padding:5px 0;" v-else>
                        <el-row>
                            <el-col :span="6" v-for="(ele, idx) in item.copies" :key="idx">
                                <v-upload-img 
                                @getKey="getImgKey" 
                                @delete-img="deleteImg"
                                :index = 'index'
                                :imgIndex = 'idx'
                                :identify="ele"                                >
                                </v-upload-img>
                            </el-col>
                        </el-row>                        
                    </el-col>
                </el-row> 
                <!--查看状态-->
                <el-row v-if="item.onlyRead == true && item.contStatus == false">
                    <el-col :span="2" :offset="10">
                        <el-button type="primary" size="small" @click="updatedContractStatus(index)">修改</el-button>
                    </el-col>  
                    <el-col :span="2" :offset="1">
                        <el-button type="danger" size="small" @click="deleteContract(item, index)">删除</el-button>
                    </el-col>                 
                </el-row>   
                <!--修改状态-->
                <el-row v-if="item.onlyRead == false && item.contStatus == false">
                    <el-col :span="2" :offset="10">
                        <el-button type="primary" size="small" @click="updatedContract(item)">保存</el-button>
                    </el-col>  
                    <el-col :span="2" :offset="1">
                        <el-button type="warning" size="small" @click="updatedContractStatus(index)">取消</el-button>
                    </el-col>                 
                </el-row>  
                <!--新建状态-->
                <el-row v-if="item.onlyRead == false && item.contStatus == true">
                    <el-col :span="2" :offset="10">
                        <el-button type="primary" size="small" @click="newContract(item)">保存</el-button>
                    </el-col>  
                    <el-col :span="2" :offset="1">
                        <el-button type="danger" size="small" @click="deleteContract(item, index)">取消</el-button>
                    </el-col>                 
                </el-row>  
            </li>
        </ul>
        <!--新建合同按钮-->
        <p class="add-cont">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addContract">新建合同</el-button>
        </p>
        <!--更多历史合同-->
        <div>
            <p class="history-btn">
                <el-button type="text" size="small" @click="changeFlag">{{moreContFlag ? '隐藏历史合同' : '查看更多历史合同'}}</el-button>
            </p>            
            <ul class="cont-box" v-show="moreContFlag">
                <p class="no-cont-tip" v-show="hisContractList.length === 0">暂无合同信息</p>
                <li class="cont-item" v-for='(item, index) in hisContractList' :key='item.index'>
                    <el-row>
                        <el-col :span='4' style="text-align:right;">合同期限</el-col>    
                        <el-col :span='19' :offset='1'>
                            <span>{{item.startDate}}&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;{{item.endDate}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span='4' style="text-align:right;line-height:40px;">合同电子文档</el-col>    
                        <el-col :span='19' :offset='1' style="padding:5px 0;">
                            <v-upload-img
                            v-if="item.doc"
                            :identify='item.doc'
                            :disabled='false'
                            ></v-upload-img>
                            <p v-if="!item.doc">暂无-合同电子文档</p>
                        </el-col>
                    </el-row>
                    <el-row>  
                        <el-col :span='4' style="text-align:right;">合同扫描件</el-col>    
                        <el-col :span='19' :offset='1' style="padding:5px 0;">
                            <el-row>
                                <el-col v-if="item.copies.length" :span="6" v-for="(ele, idx) in item.copies" :key="idx">
                                    <v-upload-img 
                                    :disabled="true"
                                    :identify="ele"
                                    ></v-upload-img>
                                </el-col>
                                <el-col v-else>
                                    暂无
                                </el-col>
                            </el-row>                            
                        </el-col>
                    </el-row>                  
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import store from '@/store'
import vUploadImg from './uploadImg'
export default {
    name: "contractAboutInfo",
    data() {
        return {
            moreContFlag: false,
        }
    },
    props: ["contractList", "productId", "hisContractList"],
    components: {
        vUploadImg
    },  
    methods: {
        downDoc(doc){
            window.open(store.getters.getBaseUrl + store.getters.getFileGetUrl + '&key=' + doc)
        },
        //修改合同只读和可写状态
        updatedContractStatus( index) {
            this.$emit("updated-contract-status", index);
        },
        //修改合同
        updatedContract(item) {
            this.$confirm('您正在修改合同, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                item.startDate = item.dateRange[0];
                item.endDate = item.dateRange[1];
                this.$emit("updated-contract",item);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });          
            });
            
        },
        //删除合同
        deleteContract(item, index) {
            this.$confirm('您正在删除合同, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit("delete-contract", item, index);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //新建合同btn事件
        addContract() {
            this.$emit("add-contract",this.productId);
        },
        //新建合同事件
        newContract(item) {
            item.startDate = item.dateRange[0];
            item.endDate = item.dateRange[1];
            if(item.endDate && item.endDate) {
                this.$emit("new-contract",item);
            } else {
                this.$message({
                    type: 'warning',
                    message: '请填写合同！！！'
                });    
            }
            
        },
        //切换显隐合同的状态
        changeFlag() {
            this.moreContFlag = !this.moreContFlag;
            if(this.moreContFlag){
                this.$emit("his-contract");
            }
        },
        //获取imgKey
        getImgKey(imgKey,index,imgIndex){
            this.contractList[index].copies[imgIndex] = imgKey;
            this.$emit("add-blank-copy", index);
        },
        //删除图片
        deleteImg(index, imgIndex) {
            this.$emit("delete-img-to-updated", index, imgIndex)
        },
        //获取上传文件fileKey
        getFileKey(fileKey, index) {
            this.contractList[index].doc = fileKey;
        },
        //删除文件
        deleteFile(index){      
            console.log(index,'删除index')      
            this.$emit("delete-file-to-updated", index);
        }
    },
    created() {

    },
    mounted() {
        
    }

}
</script>

<style lang="scss" scoped>
.cont-box {
  .cont-item {
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
    padding: 10px;
  }
}
.add-cont {
  text-align: center;
}
.history-btn {
  text-align: right;
}
.no-cont-tip {
}
</style>

