<template>
  <div class="ContractManagement">
    <div class="ContractHeader">
      <div>
        <div>
          <h3>合同管理</h3>
        </div>
        <div>
          <el-button type="primary" v-if="contractManagementBtn.contractManagementBtn89" round size="mini" @click="addContract">创建合同</el-button>
        </div>
      </div>
    </div>
    <div class="ContractList">
      <el-row type="flex" justify="start">
        <el-col :span="4">
          <el-select v-model="conditionsList.contractTypes" clearable placeholder="请选择合同类型">
            <el-option
              v-for="item in conditionsOption.species"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="conditionsList.contractStatuss" clearable placeholder="请选择合同状态">
            <el-option
              v-for="item in conditionsOption.status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入项目名称" v-model="conditionsList.projectNames" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入合同编号" v-model="conditionsList.contractCodes" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="primary" round @click="searchList">查询</el-button>
          <el-button size="mini" type="info" round @click="resetInfo">重置</el-button>
        </el-col>
      </el-row>
      <div class="totalTitle">
        <span>
          总记录条数
          <i>{{pageList.total}}</i>条
        </span>
      </div>
      <div>
        <el-table
          :data="tableList"
          border
          style="width: 100%"
          :header-cell-style="{'background-color': '#fafafa','font-weight':'800'}"
        >
          <el-table-column
            prop="projectName"
            label="所属项目"
            width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="来源" width="80">
            <template slot-scope="rows">
              <div>{{rows.row.source==="1"?"商保新增":rows.row.source==="2"?"免保转签":rows.row.contractType==="3"?"续签":"免保"}}</div>
              <!-- <div>{{rows.row.contractType}}</div> -->
            </template>
          </el-table-column>
          <el-table-column label="合同类型" width="80">
            <template slot-scope="rows">
              <div>{{rows.row.contractType=="1"?"半包":rows.row.contractType=="2"?"大包":rows.row.contractType=="3"?"清包":rows.row.contractType=="4"?"全包":"大修"}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="starDate" label="开始时间" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="endDate" label="终止时间" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="liftNum" label="台量" width="80"></el-table-column>
          <el-table-column prop="moneys" label="金额（元）" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="givenDate" label="签订时间" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="givenUser" label="签订人" width="80"></el-table-column>
          <el-table-column prop="accessoryUrl" label="合同附件" width="100">
            <template slot-scope="rows">
              <div @click="linkDown(rows.row)" class="cp" v-if="rows.row.accessoryUrl">查看附件</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="remarks" label="备注" min-width="100" :show-overflow-tooltip="true"></el-table-column> -->
          <el-table-column label="合同状态" min-width="100">
            <template slot-scope="rows">
              <div>{{rows.row.contractStatus==="1"?"未开始":rows.row.contractStatus==="2"?"执行中":rows.row.contractStatus==="3"?"已结束":"款未结清"}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="rows">
              <div class="btnLayout">
                <div>
                  <el-button
                    size="mini"
                    type="warning"
                    plain
                    round
                    v-if="contractManagementBtn.contractManagementBtn91"
                    @click="changeContract(rows.row)"
                  >变更</el-button>
                  <el-button
                    size="mini"
                    type="success"
                    plain
                    round
                    v-if="contractManagementBtn.contractManagementBtn92"
                    @click="renewContract(rows.row)"
                  >续签</el-button>
                </div>
                <div>
                  <el-button
                    size="mini"
                    type="danger"
                    v-if="rows.row.isCheck=='0'&&contractManagementBtn.contractManagementBtn93"
                    plain
                    round
                    @click="fuheContract(rows.row)"
                  >复核</el-button>
                  <el-button v-if="rows.row.isCheck=='1'" size="mini" type="info" plain round>复核</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    round
                    v-if="contractManagementBtn.contractManagementBtn90"
                    @click="getRecord(rows.row)"
                  >操作记录</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagenation">
          <span>
            <el-pagination
              background
              layout="prev, pager, next, sizes, total, jumper"
              :total="pageList.total"
              @current-change="click"
              @size-change="handleSizeChange"
              :page-sizes="[5, 15, 25, 50]"
              :page-size="pageList.pageSize"
            ></el-pagination>
          </span>
        </div>
      </div>
      <el-dialog
        :visible.sync="isAddDailog"
        width="780px"
        :before-close="handleClose"
        :title="contractDialogTitle"
      >
        <add-table ref="myAddModal" class="addModal"></add-table>
        <div class="footBt">
          <el-button size="mini" type="primary" @click="determine">确定</el-button>
          <el-button size="mini" type="success" plain @click="handleClose">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="isFuheDailog" width="780px" :before-close="fuheClose" title="复核合同">
      <fuhe-table ref="fuheModal"></fuhe-table>
      <div class="pagenation">
        <el-button size="mini" type="primary" @click="fuheQueding">确定</el-button>
        <el-button size="mini" type="success" plain @click="fuheClose">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isHistory" width="780px" :before-close="histotyClose" title="操作记录">
      <el-table
        :data="historyData"
        style="width:100%; text-align:center;"
        border
        :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
      >
        <el-table-column
          prop="code"
          label="合同编号"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="操作描述"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="beforeContent"
          label="操作前内容"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="afterContent"
          label="操作后内容"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="operateDate"
          label="操作日期"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="operatorName"
          label="操作人
"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <div class="pagenation">
        <span>
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="historyList.total"
            @current-change="historyclick"
            @size-change="historySizeChange"
            :page-sizes="[5, 15,25, 50]"
            :page-size="historyList.pageSize"
          ></el-pagination>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import addTable from "../../components/contract/addContract.vue";
import fuheTable from "../../components/contract/fuhe.vue";
export default {
  components: {
    addTable: addTable,
    fuheTable: fuheTable
  },
  data() {
    return {
      conditionsOption: {
        species: [
          { value: "1", label: "半包" },
          { value: "2", label: "大包" },
          { value: "3", label: "清包" },
          { value: "4", label: "全包" },
          { value: "5", label: "大修" }
        ],
        status: [
          { value: "1", label: "未开始" },
          { value: "2", label: "执行中" },
          { value: "3", label: "已结束" },
          { value: "4", label: "款未结清" }
        ]
      },
      conditionsList: {
        contractType: "",
        contractTypes: "",
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        contractCode: "",
        contractCodes: "",
        contractStatus: "",
        projectName: "",
        contractStatuss: "",
        projectNames: ""
      },
      contractDialogTitle: "创建合同",
      pageList: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      historyList:{
         pageNum: 1,
        pageSize: 15,
        total: 0
      },
      tableList: [],
      isAddDailog: false,
      isFuheDailog: false,
      isHistory: false,
      historyData: [],
      contractManagementBtn:{
        contractManagementBtn89:0,
        contractManagementBtn90:0,
        contractManagementBtn91:0,
        contractManagementBtn92:0,
        contractManagementBtn93:0,
      }
    };
  },
  created() {
    var contractManagementBtn = {}
    this.getButton(88).then(result => {
      if (result.data.statusCode==="1") {
        contractManagementBtn = result.data.data
        contractManagementBtn.map((item)=>{
          if(item.id==89){
            this.contractManagementBtn.contractManagementBtn89 = item.checked?1:0 
          }else if(item.id==90){
            this.contractManagementBtn.contractManagementBtn90 = item.checked?1:0  
          }else if(item.id==91){
            this.contractManagementBtn.contractManagementBtn91 = item.checked?1:0  
          }else if(item.id==92){
            this.contractManagementBtn.contractManagementBtn92 = item.checked?1:0  
          }else if(item.id==93){
            this.contractManagementBtn.contractManagementBtn93 = item.checked?1:0  
          }
        })
      }
    });
  },
  mounted() {
    this.getContractList();
  },
  methods: {
    linkDown(url) {
      window.open(url.accessoryUrl, "_blank").focus();
    },
    getRecord(row) {
      this.paghistoryList = {
        pageNum: 1,
        pageSize: 15,
        total: 0
      };
      this.isHistory = true;
      this.getRecord2(row);
    },
    getRecord2(row) {
      var url = "business/contract/history/list";
      var param = {
        contractId: row.id,
        pageNum: this.paghistoryList.pageNum,
        pageSize: this.paghistoryList.pageSize
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.historyData = res.data.rows;
          this.paghistoryList = res.data.total;
        } else {
        }
      });
    },
    historyclick(val){
      this.paghistoryList.pageNum=val;
      this.getRecord2();
    },
    histotyClose(){
       this.isHistory =false;
    },
    historySizeChange(val){
      this.paghistoryList.pageNum=1;
      this.paghistoryList.pageSize=val;
      this.getRecord2();
    },
    getContractList() {
      var url = "business/contract/list";
      var param = this.conditionsList;
      param.pageSize = this.pageList.pageSize;
      param.pageNum = this.pageList.pageNum;
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.tableList = res.data ? res.data.rows : [];
          this.pageList.total = res.data ? res.data.total : 0;
        } else {
          this.tableList = [];
          this.pageList.total = 0;
          this.$message({ type: "warning", message: res.message });
        }
      });
    },
    // 分页条数改变
    handleSizeChange(val) {
      this.pageList.pageNum = 1;
      this.pageList.pageSize = val;
      this.getContractList();
    },
    // 页面
    click(val) {
      this.pageList.pageNum = val;
      this.getContractList();
    },
    // 新增页面
    addContract() {
      this.contractDialogTitle = "创建合同";
      this.isAddDailog = true;
      var a = {
        projectId: "",
        projectAddress: "",
        starDate: "",
        endDate: "",
        paymentList: "",
        code: "",
        liftNum: "",
        moneys: "",
        remarks: "",
        givenDate: "",
        givenUser: "",
        accessoryUrl: "",
        fileList: [],
        paymentList: []
      };
      setTimeout(() => {
        this.$refs.myAddModal.isJudge(
          a,
          false,
          "business/contract/add",
          false,
          false
        );
      }, 10);

    },
    // 关闭新增页面
    handleClose() {
      this.isAddDailog = false;
      this.$refs.myAddModal.handleClose();
    },
    determine() {
      this.$refs.myAddModal.determine(1);
    },
    changeContract(row) {
      this.contractDialogTitle = "变更合同";
      var _this = this;
      _this.isAddDailog = true;

      var url = "business/contract/detail";
      var a = {};
      var param = { id: row.id };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          a = res.data.contract;
          a.pid = res.data.contract.projectId;
          a.paymentList = res.data.paymentList;
          a.projectName = res.data.project.projectName;
          a.projectAddress = res.data.project.address;
          a.source = res.data.contract.source
            ? res.data.contract.source.toString()
            : null;
          a.type = res.data.contract.type.toString();
          a.ID = res.data.contract.id;
          setTimeout(() => {
            _this.$refs.myAddModal.isJudge(
              a,
              true,
              "business/contract/modify",
              false,
              true
            );
          }, 100);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 续费
    renewContract(row) {
      this.contractDialogTitle = "续签合同";
      var _this = this;
      _this.isAddDailog = true;
      var url = "business/contract/detail";
      var a = {};
      var param = { id: row.id };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          a = res.data.contract;
          a.pid = res.data.contract.projectId;
          // a.paymentList = res.data.paymentList;
          a.paymentList=[];
          a.projectName = res.data.project.projectName;
          a.projectAddress = res.data.project.address;
          a.source = res.data.contract.source
            ? res.data.contract.source.toString()
            : null;
          a.type = res.data.contract.type.toString();
          a.ID = res.data.contract.id;
          a.source = "3";
          setTimeout(() => {
            _this.$refs.myAddModal.isJudge(
              a,
              true,
              "business/contract/renew",
              true,
              false
            );
          }, 100);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    searchList() {
      this.conditionsList.contractType = this.conditionsList.contractTypes;
      this.conditionsList.contractCode = this.conditionsList.contractCodes;
      this.conditionsList.projectName = this.conditionsList.projectNames;
      this.conditionsList.contractStatus = this.conditionsList.contractStatuss;
      this.pageList = {
        pageNum: 1,
        pageSize: 15,
        total: 0
      };
      this.getContractList();
    },
    resetInfo() {
      this.pageList = {
        pageNum: 1,
        pageSize: 15,
        total: 0
      };
      this.conditionsList = {
        contractType: "",
        contractTypes: "",
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        contractCode: "",
        contractCodes: "",
        contractStatus: "",
        projectName: "",
        contractStatuss: "",
        projectNames: ""
      };
      this.getContractList();
    },
    getContractList2() {
      this.pageList = {
        pageNum: 1,
        pageSize: 15,
        total: 0
      };
      this.getContractList();
    },
    // 复核
    fuheContract(row) {
      this.isFuheDailog = true;
      var _this = this;
      var url = "business/contract/detail";
      var a = {};
      var param = { id: row.id };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          a = res.data.contract;
          a.pid = res.data.contract.projectId;
          a.paymentList = res.data.paymentList;
          a.projectName = res.data.project.projectName;
          a.projectAddress = res.data.project.address;
          a.source = res.data.contract.source
            ? res.data.contract.source.toString()
            : null;
          a.type = res.data.contract.type.toString();
          a.ID = res.data.contract.id;
          setTimeout(() => {
            _this.$refs.fuheModal.isJudge(a);
          }, 100);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    fuheQueding() {
      this.$refs.fuheModal.fuheQueding();
    },
    fuheClose() {
      var _this = this;
      this.isFuheDailog = false;
      _this.$refs.fuheModal.fuheClose();
    }
  }
};
</script>