<template>
  <div ref="tableView" id="owner">
      <div class="search">
        <el-input
        placeholder="输入企业名称、联系人、邮箱、电话搜索"
        style="width:20rem;"
        prefix-icon="iconfont icon-sousuo"
        size="small"
        v-model="filter.search">
        </el-input>
        <el-button  size="small" @click="search">搜索</el-button>
        <span>状态：</span>
        <el-select style="width:8rem;" size="small" clearable v-model="filter.status" @change="search" placeholder="请选择">
            <el-option
            v-for="item in statesOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
            </el-option>
        </el-select>
        <span>运维负责人：</span>
        <el-select style="width:8rem;" size="small" clearable @change="search" clea v-model="filter.people" placeholder="请选择">
            <el-option
            v-for="item in manageArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
            </el-option>
        </el-select>
        <el-button @click="addOwner" class="create_pero" size="small" icon="el-icon-plus">添加业主</el-button>
      </div>
      <el-table
        :data="tableData"
        :stripe="true"
        :height="height"
        v-loading="isLoading"
        style="width: 100%">
        <el-table-column
        fixed
        prop="proprietorName"
        sortable
        label="企业全称">
        </el-table-column>
        <el-table-column
        prop="email"
        sortable
        label="企业邮箱账号">
        </el-table-column>
        <el-table-column
        prop="contact"
        sortable
        label="企业联系人">
        </el-table-column>
        <el-table-column
        prop="phone"
        sortable
        label="联系人手机">
        </el-table-column>
        <el-table-column
        label="项目数量">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.runningCount }}/</span>
          <span>{{ scope.row.totalCount }}</span>
        </template>
        </el-table-column>
        <el-table-column
        prop="status"
        sortable
        label="状态">
        </el-table-column>
        <el-table-column
        prop="managerName"
        sortable
        label="运维负责人">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作">
            <template slot-scope="scope">
                <el-button @click="linkTo(scope.row)" type="text" size="small">项目及合同</el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="small">业主运维</el-button>
            </template>
        </el-table-column>
    </el-table>
    <owner-dialog v-if="ownerShow" @success="getData" @close="getData" :Dtype="diaType" :ownerData="ownerData" :type="ownerType" :show="ownerShow"></owner-dialog>
  </div>
</template>

<script>
import ownerDialog from "@/components/market/owner/ownerDia";

export default {
  name: "owner",
  components: {
    ownerDialog
  },
  data() {
    return {
      tableData: [], //table表格数据
      height: 600, //table高度
      ownerShow: false,
      filter: {
        //过滤条件
        search: "",
        status: "",
        people: ""
      },
      manageArr: [
        //option的下拉数值
      ],
      ownerObj: {
        title: "新增业主",
        show: false
      },
      statesOpt: [
        {
          label: "正常",
          value: "正常"
        },
        {
          label: "半年内有到期项目",
          value: "半年内有到期项目"
        },
        {
          label: "所有项目均停止运营",
          value: "所有项目均停止运营"
        }
      ],
      ownerData: {
        proprietorId: "", //Integer，必填，企业id
        proprietorName: "", //String，选填，企业名称
        email: "", //String，选填，企业邮箱
        contact: "", //String，选填，企业联系人姓名
        phone: "", //String，选填，企业联系人电话
        registrationNum: "", //String，选填，经营执照注册号
        license: "", //String，选填，执照扫描件在文件系统中的key
        managerName: "" //String，选填，商务运维负责人
      },
      ownerType: "create", //type分为create和set
      isLoading: false, //loading动画
      searchArr: [], //用于计算的数组备份
      diaType: "create" //弹窗类型
    };
  },
  created() {
    this.resize()
    this.getData();
  },
  mounted(){
    window.addEventListener("resize",this.resize)
  },
  beforeDestroy(){
    window.removeEventListener("resize",this.resize)
  },
  methods: {
    resize(){
      let height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
      this.height = height - 180
    },
    //获取表格数据
    getData() {
      this.isLoading = true;
      this.postJson("/server/business-os/proprietor/query_list", {}, resp => {
        this.tableData = resp.content;
        this.getHeadle(resp.content);
        this.searchArr = resp.content;
        this.isLoading = false;
        this.ownerShow = false;
      });
    },
    //点击出现
    handleClick(row) {
      this.diaType = 'change'
      this.ownerData = row
      this.ownerShow = true;
    },

    //添加用户
    addOwner() {
      for(let key in this.ownerData){
        this.ownerData[key] = ""
      }
      this.diaType = "create"
      this.ownerShow = true;
    },

    //跳转
    linkTo(row) {
      this.$router.replace({
        path: "/own/contract",
        query: {
          id: row.proprietorId
        }
      });
    },

    //搜索
    search() {
      let search = this.filter;
      let table = this.searchArr;
      let lastData = [];
      lastData = table.filter(item => {
        //状态和运维负责人判断falg
        let Pfalg = false,
          Mfalg = false,
          Sfalg = false;
        //下拉运营负责人判断
        if (search.people == "" || search.people == item.managerName) {
          Pfalg = true;
        }
        //下拉状态判断
        if (search.status == "" || search.status == item.status) {
          Mfalg = true;
        }
        //搜索框判断，判断条件依次为企业全称、邮箱、联系人、手机
        if (
          item.proprietorName.indexOf(search.search) >= 0 ||
          item.email.indexOf(search.search) >= 0 ||
          item.contact.indexOf(search.search) >= 0 ||
          item.phone.indexOf(search.search) >= 0
        ) {
          Sfalg = true;
        }
        return Sfalg && Pfalg && Mfalg;
      });

      //当值清空判断
      if (search.people == "" && search.status == "" && search.search == "") {
        this.tableData = this.searchArr;
      } else {
        this.tableData = lastData;
      }
    },

    //获取运维负责人manageArr
    getHeadle(arr) {
      let newArr = arr.map(item => {
        return {
          key: item.managerName,
          value: item.managerName
        };
      });
      this.manageArr = this.arrayUnique(newArr, "key");
    },

    //数组去重
    arrayUnique(arr, name) {
      var hash = {};
      //reduce去重
      return arr.reduce(function(item, next) {
        hash[next[name]] ? "" : (hash[next[name]] = true && item.push(next));
        return item;
      }, []);
    }
  }
};
</script>

<style>
#owner .el-dialog__body {
  max-height: 500px;
  overflow-y: auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload .el-upload-dragger {
  width: 6rem;
}
.avatar-uploader .el-upload .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
}
.avatar {
  width: 6rem;
  height: 6rem;
  display: block;
}
</style>
<style lang="less" scoped>
.search {
  height: 40px;
  padding-top: 7px;
  margin-left: 10px;
  font-size: 14px;
}
</style>
