<style>
@import '../../assets/css/customerManage.css';
.query-box .el-col-4{
    display: flex;
    align-items: center;
}
.query-box .el-col-4>span.font-size-12{
    flex: 1 !important;
}
.query-box .el-col-4>div, .query-box .el-col-4>span{
    flex: 4
}
.el-table__fixed-body-wrapper table{
    padding-bottom: 8px!important;
}
</style>
<template>
    <div class="customerManage">
        <div class="tools">
            <h1>合同管理</h1>
            <!-- <div style="width: 340px;">
                <el-input placeholder="请输入客户名称/合同编号/合同名称" v-model="msg.ContactName" class="input-with-select">
                    <el-button slot="append"  icon="el-icon-search" @click="getList"></el-button>
                </el-input>
            </div> -->
            <div class="rightmenu">
                <el-dropdown @command="handleCommand">
                    <el-button icon="el-icon-plus" class="crm-btn org-btn" @click="BusinessId = 0, dialogBusinessVisibleName = '新建合同', dialogBusinessVisible=true">新建合同</el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1"><i class="iconfont iconyiriyou"></i> 一日游合同</el-dropdown-item>
                        <el-dropdown-item command="2"><i class="iconfont iconjingneichufa"></i> 境内旅游合同</el-dropdown-item>
                        <el-dropdown-item command="3"><i class="iconfont iconweituoweixuanzhong"></i> 单项委托合同</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- <el-dropdown>
                    <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
                        <i class="iconfont icongengduo"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
            </div>
        </div>
        <div class="query-box">
            <el-row v-if="!multipleSelection.length" :gutter="30">
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">合同编号</span>
                    <el-input size="mini" class="w210" v-model="msg.T_ContractNum" placeholder="请输入合同编号" @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">合同类型</span>
                    <el-select size="mini" v-model="msg.CType"  @change="getList">
                        <el-option label="不限" :value="0" :key="0"> </el-option>
                        <el-option label="单向委托合同" :value="1" :key="1"> </el-option>
                        <el-option label="境内旅游合同" :value="2" :key="2"> </el-option>
                        <el-option label="一日游合同" :value="3" :key="3"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">甲方名称</span>
                    <el-input size="mini" class="w210" v-model="msg.Tourists_Name" placeholder="请输入客户名称" @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">客户电话</span>
                    <el-input size="mini" class="w210" v-model="msg.Tourists_Tel" placeholder="请输入客户电话" @keyup.enter.native="getList"></el-input>
                </el-col>
            </el-row>
            <div v-else class="flex-center">
                <p class="font-size-12">已选 <span class="font-color-link">{{multipleSelection.length}}</span> 项</p>
                <div class="selection-box">
                <el-button  v-for="(item, index) in selectionList" :key="index" @click="item.myFun"><i :class="item.class"></i>{{item.name}}</el-button>
                </div>
            </div>
        </div>
        <div class="page-content">
            <el-table 
                v-if="loading"
                v-loading="true"
                :data="[]">
                <el-table-column 
                    v-for="(item, index) in queryType2" :key="index"
                    :label="item.label">
                </el-table-column>
            </el-table>
            <el-table
                v-if="!loading"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                height="660"
                border
                row-class-name="font-size-12">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- <el-table-column fixed type="selection" width="40"></el-table-column> -->
                <!-- <el-table-column 
                    fixed
                    prop="ID"
                    label="编号"
                    width="50"
                    v-if="queryType[0].show"
                    show-overflow-tooltip>
                </el-table-column> -->
                <el-table-column
                    fixed
                    prop="T_ContractNum"
                    label="合同编号"
                    sortable
                    width="160"
                    v-if="queryType[2].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p @click="openDetails2(scope)" class="font-color-link cp">{{scope.row.T_ContractNum}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="CType"
                    label="合同类型"
                    width="130"
                    v-if="queryType[1].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.CType == 2">
                            境内旅游合同
                        </span>
                        <span v-else-if="scope.row.CType == 3">
                            一日游合同
                        </span>
                        <span v-else-if="scope.row.CType == 1">
                            单向委托合同
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Tourists_Name"
                    label="甲方名称"
                    sortable
                    width="130"
                    v-if="queryType[3].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span style="font-color-success" v-if="scope.row.Tourists_Sign && scope.row.Tourists_Sign!=''">
                            【已签字】
                        </span>
                        <span v-else class="font-color-danger">【未签字】</span>
                        {{ scope.row.Tourists_Name }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="TravelAgency_Name"
                    label="乙方名称"
                    width="130"
                    v-if="queryType[4].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p v-if="scope.row.IsCarefor === 0">否</p>
                        <p v-else>是</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="TravelAgency_DealMan"
                    label="经办人"
                    sortable
                    v-if="queryType[5].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="C_TCNUM"
                    label="团号"
                    sortable
                    width="130"
                    v-if="queryType[6].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="C_ProductName"
                    label="产品名称"
                    width="130"
                    v-if="queryType[7].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="StatusStr"
                    label="合同状态"
                    v-if="queryType[8].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="CreateByName"
                    label="创建人"
                    v-if="queryType[8].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="CreateTimeStr"
                    label="创建时间"
                    sortable
                    width="160"
                    v-if="queryType[9].show"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="CreateTimeStr"
                    label="是否盖章"
                    v-if="queryType[10].show"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p v-if="scope.row.IsTravelAgencySignature === 0" class="font-color-danger">未盖章</p>
                        <p v-else-if="scope.row.IsTravelAgencySignature === 1" style="font-color-success">已盖章</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    show-overflow-tooltip
                    width="50"
                    fixed="right">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand2" trigger="click" placement="bottom">
                            <el-button class="crm-btn crm-btn-more easy-btn margin-right0 crm-table-btn">
                                <i class="iconfont iconcaozuo"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="scope.row.Status==0 || scope.row.Status==3" :command="{type: 1, data: scope.row}"><i class="el-icon-edit"></i> 修改</el-dropdown-item>
                                <el-dropdown-item :command="{type: 2, data: scope.row}"><i class="iconfont iconcopy"></i> 复制</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status==2" :command="{type: 3, data: scope.row}"><i class="el-icon-download"></i> 下载</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status==0" :command="{type: 4, data: scope.row}"><i class="el-icon-upload2"></i> 提交审核</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status==2" :command="{type: 5, data: scope.row}"><i class="iconfont iconcopy-l"></i> 复制链接发送给客户</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status==0" :command="{type: 6, data: scope.row}"><i class="el-icon-close"></i> 取消</el-dropdown-item>
                                <el-dropdown-item :command="{type: 7, data: scope.row}"><i class="iconfont iconchakan"></i> 查看</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column 
                    width="40"
                    fixed="right">
                    <template slot="header" slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="240">
                            <mySelect :queryType="queryType" @listenTochildEvent="showMessageFromChild"/>
                            <i class="el-icon-s-operation cp" slot="reference"></i>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                class="Mypagination"
                background
                @current-change="handleCurrentChange"
                :page-sizes="[30, 60, 90, 100]"
                :page-size="msg.pageSize"
                layout="sizes, prev, pager, next"
                @size-change="handleSizeChange"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import mySelect from "../dialogModel/select";
export default {
    components: {
        mySelect        
    },
    data () {
        return {
            total: 0,
            tableData: [],
            dataList: [],
            WhereTypeList: [],
            loading: false,
            multipleSelection: [],
            queryType2: [
                {
                    label: '编号',
                    show: true,
                },{
                    label: '合同类型',
                    show: true,
                },{
                    label: '合同编号',
                    show: true,
                },{
                    label: '甲方名称',
                    show: true,
                },{
                    label: '乙方名称',
                    show: true,
                },{
                    label: '经办人',
                    show: true,
                },{
                    label: '团号',
                    show: true,
                },{
                    label: '产品名称',
                    show: true,
                },{
                    label: '合同状态',
                    show: true,
                },{
                    label: '创建人',
                    show: true,
                },{
                    label: '创建时间',
                    show: true,
                },{
                    label: '是否盖章',
                    show: true,
                }
            ],
            queryType: [
                {
                    label: '编号',
                    show: true,
                },{
                    label: '合同类型',
                    show: true,
                },{
                    label: '合同编号',
                    show: true,
                },{
                    label: '甲方名称',
                    show: true,
                },{
                    label: '乙方名称',
                    show: true,
                },{
                    label: '经办人',
                    show: true,
                },{
                    label: '团号',
                    show: true,
                },{
                    label: '产品名称',
                    show: true,
                },{
                    label: '合同状态',
                    show: true,
                },{
                    label: '创建人',
                    show: true,
                },{
                    label: '创建时间',
                    show: true,
                },{
                    label: '是否盖章',
                    show: true,
                }
            ],
            msg: {
                T_ContractNum: "", //合同编号
                CType: 0, //合同类型
                Tourists_Name: "", //客户名称
                Tourists_Tel: "", //客户电话
                StartDate: "", //开始日期
                EndDate: "", //结束日期
                Status: -1, //合同状态
                pageIndex: 1,
                pageSize: 15,
                TravelAgency_DealMan: "", //经办人
                C_TCNUM: "", //团号
                C_ProductName: "", //线路名称
            },
        }
    },
    mounted () {
        this.getList()
    },
    methods:{
        getList() {
            this.loading = true;
            //获取列表数据
            this.apipost2(
            "travelcontract_get_GetPageListService",
            this.msg,
            res => {
                this.loading = false;
                if (res.data.resultCode == 1) {
                    this.dataList = res.data.data.pageData;
                    this.total = res.data.data.count;
                    this.dataList.forEach(x => {
                        // let Url = "http://yx.oytour.com";
                        let Url = "http://testerp.oytour.com";
                        if (this.isOnline()) {
                            Url = Url + '/#/TravelContractConfirm?ContractId=' + x.ID;
                        } else {
                            Url = Url + ":8081/" + '#/TravelContractConfirm?ContractId=' + x.ID;
                        }
                        x.Url = Url;
                    })
                    this.tableData = this.dataList
                } else {
                    this.Error(res.data.message);
                }
            },
            err => {}
            );
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(x=>
                x.ID
            )
        },
        showMessageFromChild(list){
            this.mySelectCtrl=!this.mySelectCtrl
            if (list) {
                this.queryType = list
                this.getList()
            }
        },
        CopyContract(data){
            //获取列表数据
            var that = this;
            this.$confirm("是否复制此合同?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let str = ''
                    this.multipleSelection.map((x, i)=>{
                        str = str + x + ','
                    })
                    this.apipost2(
                        "travelcontract_post_CopyTravelContractService", {
                        ID: data.ID
                        },
                        res => {
                        if (res.data.resultCode == 1) {
                            that.Success(res.data.message);
                            that.getList();
                        } else {
                            that.Error(res.data.message);
                        }
                        },
                        err => {}
                    );
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //下载合同
        DownLoadContract(item) {
            let msg = {
            ID: item.ID,
            CType: item.CType
            };
            let urlObj = this.domainManager();
            this.loading = true;
            this.$http({
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'post',
            url: urlObj.DownLoadContractUrl + '/api/file/GetDownLoadTripContract',
            data: {
                "msg": msg
            }
            }).then(res => {
            this.loading = false
            if (res.data.resultCode === 1) {
                let sign = item.T_ContractNum;
                const a = document.createElement('a');
                a.setAttribute('download', '');
                a.setAttribute('href', urlObj.DownLoadContractUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
                '.pdf&&fPath=' + res.data.data);
                a.click();
            } else {
                this.Error('PDF获取失败');
            }
            }).catch(err => {

            });
        },
        //提交并盖章
        SubmitContract(item) {
            var that = this;
            this.Confirm("是否提交并盖章此合同?", function () {
            that.apipost2(
                "travelcontract_post_UpdateTravelContractStatusService", {
                ID: item.ID,
                Status: 1
                },
                res => {
                if (res.data.resultCode == 1) {
                    that.Success(res.data.message);
                    that.getList();
                } else {
                    that.Error(res.data.message);
                }
                },
                err => {}
            );
            });
        },
        handleSizeChange(val) {
            this.msg.pageSize = val
            this.getList();
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        //复制URL
        CopyUrl(item) {
            var oInput = document.createElement('input');
            oInput.value = item.Url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display = 'none';
            this.Info("复制成功!");
        },
        //删除合同
        DeleteContract(item) {
            this.$confirm("是否取消此合同?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let str = ''
                    this.multipleSelection.map((x, i)=>{
                        str = str + x + ','
                    })
                    var msg = {
                        ID: item.ID,
                        Status: 4
                    };
                    this.apipost2(
                        "travelcontract_post_UpdateTravelContractStatusService",
                        msg,
                        res => {
                        if (res.data.resultCode == 1) {
                            this.Success("取消成功！");
                            this.getList();
                        } else {
                            this.Error(res.data.message);
                        }
                        },
                        null
                    );
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        handleCommand2(command){
            console.log(command.type)
            if (command.type === 1) {
                let type = '1'
                if (command.data.CType === 3) {
                    type = '3'
                } else if (command.data.CType === 2) {
                    type = '2'
                } else {
                    type = '1'
                }
                this.MsgBus.$emit('contractOpen', type, command.data.ID)
            } else if (command.type === 2) {
                this.CopyContract(command.data)
            } else if (command.type === 3) {
                this.DownLoadContract(command.data)
            } else if (command.type === 4) {
                this.SubmitContract(command.data)
            } else if (command.type === 5) {
                this.CopyUrl(command.data)
            } else if (command.type === 6) {
                this.DeleteContract(command.data)
            } else if (command.type === 7) {
                this.MsgBus.$emit('contractDrawerShow', command.data.ID)
            }
        },
        handleCommand(command){
            this.MsgBus.$emit('contractOpen', command)
        },
        openDetails2(data){
            this.MsgBus.$emit('contractDrawerShow', data.row.ID)
        }
    }
}
</script>