<style>
  .ContractManage .query-box .el-button--primary {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button--primary:focus,
  .query-box .el-button--primary:hover {
    background-color: #fff !important;
    color: #e95252 !important;
    border-color: #e95252 !important;
  }

  .ContractManage .query-box .el-button {
    border-radius: 16px;
    height: 30px;
    position: relative;
    top: 5px;
  }

  .ContractManage .query-box .el-button i {
    color: #e95252;
  }

  .ContractManage .query-box .el-button span {
    position: relative;
    top: -3px;
  }

  .ContractManage .el-button+.el-button {
    margin-left: 0 !important;
  }

</style>

<template>
  <div class="flexOne ContractManage">
    <div class="query-box">
      <ul>
        <li>
          <span><em>合同编号</em>
            <el-input class="w210" v-model="msg.T_ContractNum" placeholder="请输入合同编号" @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>合同类型</em>
            <el-select v-model="msg.CType" :placeholder="$t('pub.pleaseSel')">
              <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>
          </span>
        </li>
        <li>
          <span><em>甲方名称</em>
            <el-input class="w210" v-model="msg.Tourists_Name" placeholder="请输入客户名称" @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>客户电话</em>
            <el-input class="w210" v-model="msg.Tourists_Tel" placeholder="请输入客户电话" @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>团号</em>
            <el-input class="w210" v-model="msg.C_TCNUM" placeholder="请输入团号" @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>线路名称</em>
            <el-input class="w210" v-model="msg.C_ProductName" placeholder="请输入线路名称" @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>经办人</em>
            <el-input class="w210" v-model="msg.TravelAgency_DealMan" placeholder="请输入经办人"
              @keyup.enter.native="getList">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>合同状态</em>
            <el-select v-model="msg.Status" :placeholder="$t('pub.pleaseSel')">
              <el-option label="请选择" :value="-1" :key="-1"> </el-option>
              <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-option label="取消" :value="4" :key="4"> </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{ $t("sm.Date") }}</em>
            <el-date-picker v-model="msg.StartDate" class="w135" value-format="yyyy-MM-dd" type="date"
              :picker-options="pickerBeginDateBefore"></el-date-picker>
            -
            <el-date-picker v-model="msg.EndDate" class="w135" value-format="yyyy-MM-dd" type="date"
              :picker-options="pickerBeginDateAfter"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="
              getList();
              resetPageIndex();
            " />
          <el-dropdown @command="getImport">
            <el-button type="primary" @click="goContract('onedayTripContract', 0, '一日游合同')"> 一日游合同
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">境内旅游合同</el-dropdown-item>
              <el-dropdown-item command="2">单项委托合同</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th width="50">编号</th>
        <th width="80">合同类型</th>
        <th width="100">合同编号</th>
        <th width="100">甲方名称</th>
        <th width="120">乙方名称</th>
        <th width="100">经办人</th>
        <th width="100">团号</th>
        <th width="150">产品名称</th>
        <th width="100">合同状态</th>
        <th width="100">创建人</th>
        <th width="120">创建时间</th>
        <th width="120">是否盖章</th>
        <th width="130">操作</th>
      </tr>
      <tr v-for="(item, index) in dataList" :key="index">
        <td>{{ item.ID }}
        </td>
        <td>
          <template v-if="item.CType == 2">
            境内旅游合同
          </template>
          <template v-else-if="item.CType == 3">
            一日游合同
          </template>
          <template v-else-if="item.CType == 1">
            单向委托合同
          </template>
        </td>
        <td>{{ item.T_ContractNum }}</td>
        <td style="text-align:left">
          <span v-if="item.Tourists_Sign&&item.Tourists_Sign!=''" style="color:green;">【已签字】</span>
          <span v-else style="color:red;">【未签字】</span>
          {{ item.Tourists_Name }}
        </td>
        <td>{{ item.TravelAgency_Name }}</td>
        <td>{{ item.TravelAgency_DealMan }}</td>
        <td>{{ item.C_TCNUM }}</td>
        <td>{{ item.C_ProductName }}</td>
        <td>{{ item.StatusStr }}</td>
        <td>{{ item.CreateByName }}</td>
        <td>{{ item.CreateTimeStr }}</td>
        <td> <span v-if="item.IsTravelAgencySignature==0">未盖章</span>
          <span v-if="item.IsTravelAgencySignature==1" style="color:green;">已盖章</span></td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start"
            v-if="item.Status==0||item.Status==3">
            <template v-if="item.CType == 3">
              <el-button type="primary" icon="el-icon-edit" circle
                @click="goContract('onedayTripContract', item.ID, '一日游合同')"></el-button>
            </template>
            <template v-else-if="item.CType == 2">
              <el-button type="primary" icon="el-icon-edit" circle @click="
                  goContract('DomesticTravelcontract', item.ID, '境内旅游合同')
                "></el-button>
            </template>
            <template v-else>
              <el-button type="primary" icon="el-icon-edit" circle
                @click="goContract('SingleContract', item.ID, '单项委托合同')"></el-button>
            </template>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="复制" placement="top-start">
            <el-button type="warning" icon="iconfont icon-copy" circle @click="CopyContract(item)" style="padding:4px;">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="下载" placement="top-start" v-if="item.Status==2||item.Status==4">
            <el-button type="success" icon="el-icon-download" circle @click="DownLoadContract(item)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="提交审核" placement="top-start" v-if="item.Status==0||item.Status==3">
            <el-button type="info" icon="el-icon-upload2" circle @click="SubmitContract(item)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" v-if="item.Status==2" effect="dark" content="复制链接发送给客户">
            <el-button type="info" icon="iconfont icon-copy-l" circle @click="CopyUrl(item)"
              style="padding:4px;background-color:#9266f9;border-color:#9266f9;"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="取消" placement="top-start" v-if="item.Status==0">
            <el-button type="danger" icon="el-icon-close" circle @click="DeleteContract(item)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
            <el-button type="danger" icon="iconfont icon-chakan" circle @click="ViewContract(item)"
              style="padding:4px;"></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        currentPage: 1,
        dataList: [],
        loading: false, //页面加载
        msg: {
          T_ContractNum: "", //合同编号
          CType: 0, //合同类型
          Tourists_Name: "", //客户名称
          Tourists_Tel: "", //客户电话
          StartDate: "", //开始日期
          EndDate: "", //结束日期
          Status: -1, //合同状态
          pageIndex: 1,
          pageSize: 15,
          TravelAgency_DealMan: "", //经办人
          C_TCNUM: "", //团号
          C_ProductName: "", //线路名称
          IsQueryAll:0
        },
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.msg.EndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.EndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.msg.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      //提交并盖章
      SubmitContract(item) {
        var that = this;
        this.Confirm("是否提交并盖章此合同?", function () {
          that.apipost(
            "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 => {}
          );
        });
      },
      //复制合同
      CopyContract(item) {
        //获取列表数据
        var that = this;
        this.Confirm("是否复制此合同?", function () {
          that.apipost(
            "travelcontract_post_CopyTravelContractService", {
              ID: item.ID
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      //复制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("复制成功!");
      },
      //跳转
      getImport(command) {
        if (command == 1) {
          this.goContract('DomesticTravelcontract', 0, '境内旅游合同');
        } else if (command == 2) {
          this.goContract('SingleContract', 0, '单项委托合同');
        }
      },

      //下载合同
      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.DomainUrl + '/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.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
              '.pdf&&fPath=' + res.data.data);
            a.click();
          } else {
            this.Error('PDF获取失败');
          }
        }).catch(err => {

        });
      },
      //删除合同
      DeleteContract(item) {
        var that = this;
        this.Confirm("是否取消此合同?", function () {
          var msg = {
            ID: item.ID,
            Status: 4
          };
          that.apipost(
            "travelcontract_post_UpdateTravelContractStatusService",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success("取消成功！");
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      getList() {
        this.loading = true;
        //获取列表数据
        this.apipost(
          "travelcontract_get_GetPageListService",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;
              this.dataList.forEach(x => {
                let Url = "";
                if (this.isOnline()) {
                  Url = window.location.hostname + '/#/TravelContractConfirm?ContractId=' + x.ID;
                } else {
                  Url = window.location.hostname + ":8080/" + '#/TravelContractConfirm?ContractId=' + x.ID;
                }
                x.Url = Url;
              })
              this.total = res.data.data.count;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      ViewContract(item) {
        this.$router.push({
          name: "TravelContractView",
          query: {
            id: item.ID,
            blank: "y",
            tab: '预览合同'
          }
        });
      },
      goContract(path, Id, title) {
        var nId = 0;
        if (Id && Id > 0) {
          nId = Id;
        }
        this.$router.push({
          name: path,
          query: {
            id: nId,
            blank: "y",
            tab: title
          }
        });
      }
    }
  };

</script>
