<template>
  <div>
    <div class="layout-content">
      <el-form
        :inline="true"
        :model="ruleForm"
        ref="ruleForm"
        class="demo-form-inline"
        label-position="right"
      >
        <el-form-item label="商铺号" prop="name" class="fx_title">
          <el-input v-model.trim="ruleForm.shopNumber" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="商户名称" prop="merchantName" class="fx_title">
          <el-input v-model.trim="ruleForm.merchantName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="合同状态" class="fx_send">
          <el-select v-model="ruleForm.status" placeholder="请选择" clearable class="select-method">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态" class="fx_send">
          <el-select v-model="ruleForm.applyStatus" placeholder="请选择" clearable class="select-method">
            <el-option
              v-for="(item,index) in applyStatusOptions"
              :key="index"
              :value="item.value"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼座" prop="building" class="fx_send">
          <el-select
            v-model="ruleForm.building"
            placeholder="请选择"
            @change="changeBuilding"
            clearable
          >
            <el-option
              v-for="(item,index) in buildingArr"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" prop="floor" class="fx_send">
          <el-select v-model="ruleForm.floor" placeholder="请选择" clearable>
            <el-option
              v-for="(item,index) in floorArr"
              :key="index"
              :value="item.id"
              :label="item.floorName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="hoverBtn"
            type="primary"
            icon="el-icon-search"
            :style="'border:0;background:'+navigationInfo.moduleColor"
            @click="search"
          ></el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="builtBtn" @click="goSave">
        <i>+</i>新建
      </el-button>
      <el-button type="primary" class="builtBtn" @click="goRenew" style="margin-left:4px;">
        <i>+</i>续签
      </el-button>
      <table-list :ref="tk" :options="optionsTable"></table-list>
      <stop-contract :ref="st" :type='16' :processData="processData" :options="stopOptions"></stop-contract>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :modal-append-to-body="false">
      <span>当前有欠缴账单未结清，是否要继续终止物业合同？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopContract">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TableList from "../../../core/comps/table/tableList.vue";
import StopContract from "../contractutil/stopcontract.vue";
import reportTool from "../../../core/tool/report.js";
import commonUtil from "../../../core/tool/commonUtil";
import AjaxUtil from "../../../core/tool/ajaxService";
import { mapState, mapActions } from "vuex";
import { CouponCacheData } from "../../../service/couponData/data.js";
import { ContractData } from "../../../service/contract/data.js";
import { promissionUrl } from "../../../urlconfig/promission/url.js";
import { ContractUrl } from "../businessComp/UrlEnum.js"
let echarts = require("echarts");

export default {
  inject: ["reload"],
  extends: AjaxUtil,
  name: "pointtenementlist",
  components: {
    TableList,
    StopContract
  },
  data() {
    return {
      processData:[],
      waitSignCount: "", //待签约
      endSoonCount: "", //将到期合同
      rendPaidCount: "", //计租中合同
      shopcount: "", //空余商铺
      area: "", //商铺总面积
      tk: "manjianTableKey",
      st: "stopContract",
      businessId: "",
      stopOptions: {
        contractType: "4",
        stopType: 2 //物业合同
      },
      dialogVisible: false,
      buildingArr: [],
      floorArr: [],
      applyStatusOptions:ContractData.applyStatus,
      options: ContractData.statusOptions,
      ruleForm: {
        building: "",
        buildingId: "",
        floor: "",
        floorId: "",
        shopNumber: "",
        merchantName: "",
        status:"",
        applyStatus:""
      },

      navInfo: {
        name: "满减券",
        index: "0"
      },
      optionsTable: {
        actions: [
          {
            key: "edit",
            val: "编辑",
            action: this.goEdit,
            show: item => {
              return item.status == 1 &&
                (item.applyStatus == 0 ||
                  item.applyStatus == 3 ||
                  item.applyStatus == 5)
                ? true
                : false;
            }
          },
          {
            key: "edit",
            val: "终止",
            action: this.endcontract,
            // show: this.isendcontract(item),
            show: item => {
              if (
                (item.status == 2 || item.status == 3 || item.status == 4) &&
                item.applyStatus != 1
              ) {
                return true;
              } else {
                return false;
              }
            }
          },
          {
            key: "edit",
            val: "查看",
            action: this.goCheck,
            show: item => {
              return true;
            }
          },
          {
            key: "download",
            val: "下载",
            action: this.goDownload,
            show: item => {
              return true;
            }
          },
          {
            key: "edit",
            val: "审批进度",
            action: this.checkCurrentStatus,
            show: item => {
              return item.applyStatus == 1 ||
                item.applyStatus == 2 ||
                item.applyStatus == 3
                ? true
                : false;
            }
          }
        ],
        showCk: false,
        map: [
          {
            key: "contractNumber",
            val: "合同编号"
          },
          {
            key: "shopNumber",
            val: "商铺号",
            sortable:true
          },
          {
            key: "merchantName",
            val: "商户名称"
          },
          {
            key: "buildingName",
            val: "商户楼座"
          },
          {
            key: "floorName",
            val: "商户楼层"
          },
          {
            key: "rentalStartDate",
            val: "租赁开始日期",
            type: "date",
            sortable:true
          },
          {
            key: "rentalEndDate",
            val: "计租结束日期",
            type: "date",
            sortable:true
          },
          {
            key: "price",
            val: "物业费",
            convert: this.divide,
            sortable:true
          },

          {
            key: "status",
            val: "合同状态",
            convert: this.cStatus
          },
          {
            key: "applyStatus",
            val: "审批状态",
            convert: this.cApplyStatus
          }
        ],
        getUrl: () => {
          return (
            "/api/wxPropertyContract/list?merchantName=" +
            this.ruleForm.merchantName +
            "&shopNumber=" +
            this.ruleForm.shopNumber +
            "&rentShopType=2&building="+
            this.ruleForm.building +
            "&floor=" +
            this.ruleForm.floor +
            "&applyStatus=" +
            this.ruleForm.applyStatus +
            "&status=" +
            this.ruleForm.status+
            "&operationType=1"
          );
        },

        pageOption: {
          sizeKey: "pageSize",
          indexKey: "pageNum",
          index: 1,
          size: 10
        },
        analysis: data => {
          return {
            data: data.data.pageInfo.list,
            count: data.data.pageInfo.total
          };
        }
      }
    };
  },
  computed: {
    ...mapState({
      navigationInfo: state => state.topNav.navigationInfo
    })
  },
  methods: {
    ...mapActions([
      "setNavData" // 将this.setNavData 映射为 this.$store.dispatch('setNavData')
    ]),
    changeBuilding: function(item) {
      for (let building of this.buildingArr) {
        if (item == building.id) {
          this.floorArr = building.floors;
        }
      }
      this.ruleForm.floor = "";
      //this.search()
    },
    getBuilding: function() {
      this.getFetch("/api/wxMallBuilding/getbuildingfloorlist").then(d => {
        this.buildingArr = d.data;
      });
    },
    cApplyStatus(col, item) {
      if (item.applyStatus) {
        return (
          (item.businessType != 16 ? "签约" : "终止") +
          ContractData.applyStatus.filter(e => e.value == item.applyStatus)[0]
            .name
        );
      } else if (item.applyStatus === 0) {
        return "未提交审核";
      }
    },
    goToEditShop(item) {
      this.$router.push({
        path: "/merchant/merchantAdd?contractId=" + item.id
      });
    },
    checkCurrentStatus(item, row) {
      this.$router.push({
        path: "rentApprovals?id=" + item.id
      });
    },
    cStatus(col, item) {
      return CouponCacheData.rentStatus.filter(e => {
        return e.value == item.status.toString();
      })[0].name;
    },

    goEdit: function(item, row) {
      this.$router.push({
        path: "pointtenementAdd?id=" + item.id
      });
    },
    divide(col, item) {
      return Number(item.price) / 100 +(item.price_unit==1?'元/日':item.price_unit==2?'元/月':'元/年');
    },
    endcontract: function(item, row) {
      let that = this;
      that.contractId = item.id;
      that.contractNumber = item.contractNumber;
      this.getFetch("/api/wxBillAll/oweBillCount?type=2&contractId=" + item.id)
        .then(d => {
          if (Number(d.data) > 0) {
            that.dialogVisible = true;
          } else {
            if(this.processData.length>0){
              this.dialogVisible = false;
              this.$refs[this.st].showLog(this.contractId, this.contractNumber);
            }else{
              this.makeSure();
            }
          }
        })
        .catch(err => {
          this.$message.success(err.data);
        });
    },
    stopContract() {
      // this.$refs[this.st].showLog(this.contractId, this.contractNumber);
      if(this.processData.length>0){
        this.dialogVisible = false;
        this.$refs[this.st].showLog(this.contractId, this.contractNumber);
      }else{
        this.endProperty();
      }
    },
    makeSure(){
      this.$confirm('您确定要提前终止此合同吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.endProperty();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    endProperty(){
      let _this=this;
      let param={
        id:this.contractId
      }
      this.postFetch(ContractUrl.endPropertyContract, param)
        .then(d => {
          _this.$message.success("操作成功");
          _this.dialogVisible = false;
          _this.search();
        })
        .catch(err => {
          this.$message.error(err.data);
        });
    },
    bCount: function(item, row, cellValue) {
      if (cellValue === 1) {
        return "已出租";
      } else if (cellValue === 0) {
        return "未出租";
      }
    },
    goSave: function() {
      this.$router.push({
        path: "/pointtenementAdd"
      });
    },
    goRenew(){
       this.$router.push({
        path: "/pointtenementAdd",
        query:{
          Renew:true
        }
      });
    },
    goCheck: function(item, row) {
      /**
        contractType合同类型：1租金合同,2多经合同,3物业合同,4多经物业合同
        businessType操作类型：1合同审批,2账单审批,3终止合同审批
        id为合同id
       */
      this.$router.push({
        path: `/pointsCheck?id=${item.id}&contractType=4&businessType=1`
      });
    },
    search: function() {
      let tk = this.$refs[this.tk];
      tk.search(tk.getParams().index);
    },
    goDownload: function(item) {
      location.href =
        "/api/wxRentContract/exportContract?id=" + item.rentContractId;
    },
    /**
     * 根据业务查询模板
     */
    getModelBybusiness(){
      this.getFetch(`${promissionUrl.getModelBybusiness}?flowType=16`)
      .then(d=>{
        if(d.data.length>0){
          this.processData = JSON.parse(d.data[0].flow).lists;
        }
      })
      .catch(err=>{
        this.$message.error(err.data);
      })
    }
  },

  activated(){
    this.search()
    this.getBuilding();
    this.getModelBybusiness();
    this.setNavData(["合同管理", "多经点位", "物业合同"]);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout-content {
  width: 100%;
  background: #141e29;
  height: auto;
  border-radius: 2px;
  min-height: 300px;
  padding: 0 20px 20px 20px;
  overflow: hidden;
  text-align: left;
}
.el-form {
  background: #f5f7f8;
  text-align: left;
  padding: 25px 22px 22px;
  margin-bottom: 20px !important;
}
.el-form .el-form-item {
  margin-bottom: 0 !important;
}
.tableContainer {
  margin-top: 20px !important;
  background: #fff;
}
.el-button {
  width: 60px;
  height: 40px;
}
.builtBtn {
  width: 100px;
  height: 32px;
  background: rgba(81, 169, 201, 1);
  border: 0 !important;
  line-height: 32px;
  text-align: center;
  margin: 0;
  padding: 0 !important;
}
.builtBtn:hover {
  background: rgba(81, 169, 201, 0.88);
}
.builtBtn i {
  margin-right: 10px;
}
.el-form-item .el-form-item__content,
.el-form-item .el-form-item__content .el-date-editor,
.el-form-item .el-form-item__content .el-date-editor .el-input__inner {
  width: 150px;
}
.fx_title .el-input {
  width: 193px;
}
</style>