<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 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>
            </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) {
                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>