<template>
  <div class="app-container">
    <el-card class="box-card noborder">
      <div class="btns">
        <div class="btn btn_default h28" @click="addNew(true)"><div class="img img1"></div>新建项目商机</div>
        <div class="btn btn_primary h28" @click="pldrs"><div class="img img2"></div>批量导入</div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpane w100">
        <el-tab-pane label="我参与的项目" name="first"></el-tab-pane>
        <el-tab-pane label="公司全部项目" name="second"></el-tab-pane>

        <div class="searchInput">
          <el-input type="text" style="width: 530px;" v-model="searchParam.projectName" placeholder="请输入项目或业主单位名称关键词进行搜索"></el-input>
          <div class="btn" @click="getList(1)">搜索</div>
        </div>
        <div class="sellist">
          <div class="selli">
              <span>
              地区团队
              </span>
            <div class="select-popper">
				   		<span :class="{ color_text:searchParam.provinceId.length ||searchParam.cityId.length ||searchParam.districtId.length}">
				   			项目地区{{searchParam.provinceId.length ||searchParam.cityId.length ||searchParam.districtId.length? searchParam.provinceId.length +searchParam.cityId.length +searchParam.districtId.length +"项": ""}}
				   			<i class="el-icon-caret-bottom"></i>
				   		</span>
              <el-cascader class="cascader-region select-location"
                           ref="myCascader"
              :props='props' :options="addressList"
              @change="handleChange"></el-cascader>
            </div>
          </div>
          <div class="selli">
              <span>
              项目信息
              </span>
              <div class="select-popper">
                <span :class="{color_text:searchParam.projectType.length}">
                  项目类型{{searchParam.projectType.length? searchParam.projectType.length + "项": ""}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-select  placeholder="请选择" v-model="searchParam.projectType" multiple class="select-multiple">
                  <el-option v-for="(item,index) in projectType" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
              <div class="select-popper">
                <el-dropdown @command="transactionPricehandleCommand"  trigger="click" ref="transactionPriceShowPopper" :hide-on-click="false">
                  <span class="el-dropdown-link" :class="searchParam.minAmount ||searchParam.maxAmount ? 'color_text': ''">
                    投资估算{{searchParam.minAmount ||searchParam.maxAmount? " 1项": ""}}<i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, i) in amountOptions" :class="searchParam.minAmount == item.value[0] &&searchParam.maxAmount == item.value[1] &&
					                   !minAmount &&!maxAmount? 'color_text': '' " :key="i" :command="item.value">{{ item.label }}</el-dropdown-item>
                    <el-dropdown-item command="" style="padding: 0; text-indent: 20px">
                      <div @mouseenter="transactionPriceShowPopper = true" @mouseleave="transactionPriceShowPopper = false">
										<span :class="(minAmount || maxAmount) &&searchParam.minAmount ==minAmount &&
					                            searchParam.maxAmount == maxAmount? 'color_text': '' ">
											自定义<i class="el-icon-arrow-right"></i>
										</span>
                        <div class="jabph_popper_box" style="position: absolute" v-if="transactionPriceShowPopper">
                          <div class="jabph_popper_wrap">
                            从
                            <el-input class="jabph_popper_input" v-limit-num clearable v-model="minAmount"></el-input>
                            万
                          </div>
                          <div class="jabph_popper_wrap">
                            到
                            <el-input class="jabph_popper_input" v-limit-num clearable v-model="maxAmount"></el-input>
                            万
                          </div>
                          <div style="">
                            <el-button size="mini" @click="transactionPriceCancel">取消</el-button>
                            <el-button type="primary" size="mini" @click="transactionPricePopperConfirm">确定</el-button>
                          </div>
                        </div>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="select-popper">
                <span :class="{color_text:searchParam.projectStage.length}">
                  项目阶段{{searchParam.projectStage.length? searchParam.projectStage.length + "项": ""}}
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-select v-model="searchParam.projectStage" class="select-multiple" multiple placeholder="请选择">
                  <el-option v-for="(item,index) in projectStage" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
              </div>
          </div>
        </div>
        <div class="scbtns">
          <div class="btn btn_primary h34" @click="getList(1)">查询</div>
          <div class="btn btn_cancel h34" @click="reset">重置</div>
        </div>
      </el-tabs>
    </el-card>

    <el-card class="box-card noborder overflows">
      <div class="titles">项目明细
        <div class="dc">
          <div class="total">共{{total}}条</div>
          <!--<el-tooltip class="item" effect="dark" content="功能正在开发中" placement="top">-->
            <div class="btn-export" @click="dc"><img src="@/assets/images/EXCEL.png">导出EXCEL</div>
          <!--</el-tooltip>-->
        </div>
      </div>

      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div class="tables" v-if="total == 0 && !isSkeleton">
        <div class="empty">
          <img src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，没找到相关数据</div>
          <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
          <div class="btn btn_primary h36 w88" @click="addNew(true)">新建商机</div>
          <div class="btn btn_primary btn_shallow h36 w88" @click="pldrs">批量导入</div>
        </div>
      </div>
      <div class="datalist" v-if="!isSkeleton">
        <div class="datali" v-for="(item,index) in datalist">
          <div class="det-title" @click="toDetail(item.id,'xmsl')">
            {{item.projectName}}<span v-if="activeName!='first' && item.followTime" class="people"><i>{{item.nickName1}}</i>
            <span v-if="item.provinceName != '' && item.provinceName!==null">{{item.provinceName}}-</span>
            {{item.nickName}}  <font color="#FA8A00">正在跟进</font></span></div>
          <div class="det-tips">
            <span class="tips tip1" v-for="label in item.labels">{{label}}</span>
            <span v-if="item.address" class="tips tip2">{{item.address}}</span></div>
          <div class="det-contets">
            <div class="det-con" v-if="item.projectType">
              <span>项目类型：</span>
              <span>{{item.projectType}}</span>
            </div>
            <div class="det-con" v-if="item.investmentAmount&&item.investmentAmount>0">
              <span>投资估算（万元）：</span>
              <span>{{item.investmentAmount}}</span>
            </div>
            <div class="det-con" v-if="item.followTime">
              <span>最后跟进时间：</span>
              <span>{{item.followTime}}</span>
            </div>
            <div class="det-con" v-if="item.ownerCompany ">
              <span>业主单位：</span>
              <span class="wordprimary" v-if="item.ownerCompanyCid||item.ownerCompanyUipId" @click="toEnterprise(item)">{{item.ownerCompany}}</span>
              <span v-else>{{item.ownerCompany}}</span>
            </div>
          </div>
          <el-divider v-if="index != datalist.length-1"></el-divider>
          <div class="operates"  v-if="activeName=='first'">
            <div class="i1" @click="toDetail(item.id,'gjjl')"><img src="@/assets/images/follow.png">跟进</div>
            <div class="i2" @click="toDetail(item.id,'xmsl')"><img src="@/assets/images/edit1.png">编辑</div>
            <div class="i3" @click="deldetail(index)"><img src="@/assets/images/delete.png">删除</div>
          </div>
          <div class="delform" v-if="activeName=='first' && ondel == index">
            <div class="words">是否将项目删除</div>
            <div>
              <div class="btnsmall btn_primary h28" @click="deleteProject(item.id)">确定</div>
              <div class="btnsmall btn_cancel h28" @click="ondel = -1">取消</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tables">
        <div class="bottems" v-if="total>searchParam.pageSize">
          <el-pagination
            background
            :page-size="searchParam.pageSize"
            :current-page="searchParam.pageNum"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <addproject v-if="isshow" @addproject="add" @cancel="addNew"></addproject>
    <batchimport v-if="pldr" :importtype="types" @cancels="cancelimport" @getdatas="getdatas"></batchimport>

  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import "@/assets/styles/public.css"
  import prvinceTree from '@/assets/json/provinceTree'
  import {getProjectlist,delProject} from '@/api/project/project'
  import {getDictType,} from '@/api/main'
  import addproject from './component/addProject'
  import batchimport from './component/batchImport'
  import skeleton from './component/skeleton'
  import {encodeStr} from "@/assets/js/common.js"
export default {
  name: 'ProjectList',
  components:{addproject,batchimport,skeleton},
  data() {
    return {
      encodeStr,
      types:'project',
      props:{multiple: true},
      activeName:'first',
      projectStage:[],//项目阶段
      isshow:false,//新增商机
      pldr:false,//批量导入
      //项目地区
      addressList:[],
      addressType: [],
      // 查询参数
      minAmount:'',//投资估算最小值
      maxAmount:'',//投资估算最大值
      searchParam: {
        userId:null,//个人项目需传，公司项目不传
        projectName:'',//项目名称
        ownerCompany:'',//业主单位
        projectType:'',//项目类型
        projectStage:'',//项目阶段
        minAmount:'',//投资估算最小值
        maxAmount:'',//投资估算最大值
        Amount:'',//投资估算
        provinceId: [],
        cityId: [],
        districtId: [],
        pageNum:1,
        pageSize:20,
      },
      domicile:[],
      projectType:[],//项目类型
      projectCategory:[],//项目类别
      amountOptions:[
        {
          label: "5000万以下",
          value: [0,5000],
        },
        {
          label: "5000万-1亿",
          value: [5000,10000],
        },
        {
          label: "1亿-3亿",
          value: [10000,30000],
        },
        {
          label: "3亿以上",
          value: [30000,''],
        },
      ],
      contractSignTimeValue: "",
      transactionPriceShowPopper: false,
      datalist:[],//列表数据
      ondel:-1,
      total:0,
      isSkeleton:true
    }
  },
  created() {
  },
  mounted(){
    this.prvinceTree()
    this.getList(1)
    //项目阶段
    getDictType('project_stage_type').then(result=>{
      this.projectStage = result.code == 200 ? result.data:[]
    })
    //项目类型
    getDictType('project_type').then(result=>{
      this.projectType = result.code == 200 ? result.data:[]
    })
    //项目类别
    getDictType('project_category').then(result=>{
      this.projectCategory = result.code == 200 ? result.data:[]
    })
  },
  methods: {
    dc(){
      this.$message.warning('功能正在开发中')
    },
    deldetail(index){
      this.ondel = index
    },
    deleteProject(id){
      delProject(id).then(result =>{
        if(result.code==200){
          this.$message.success('删除成功！')
          this.getList(1)
          this.ondel = -1
        }else{
          this.$message.error(result.msg)
        }
      })
    },
    getdatas(){
      this.getList(1)
    },
    cancelimport(){
      this.pldr = false
    },
    pldrs(){
      this.pldr = true
    },
    //获取商机列表
    getList(pageNum){
      this.isSkeleton = true
      this.searchParam.pageNum = pageNum
      if(this.activeName == 'first'){
        this.searchParam.userId = this.$store.state.user.userId
      }else{
        this.searchParam.userId = null
      }
      this.searchParam.ownerCompany = this.searchParam.projectName
      getProjectlist(this.searchParam).then(result=>{
        this.isSkeleton = false
        if(result.code == 200){
          this.datalist = result.rows
          this.total = result.total
          this.datalist.forEach(item=>{
            let str = item.provinceName
            if(item.cityName != "" && item.cityName != null)
              str += '-' +item.cityName
            if(item.districtName != ""&& item.districtName != null)
              str += '-' +item.districtName
            item.address = str
            item.nickName1 = item.nickName?item.nickName.slice(0,1):''
            item.labels=[]
            if(item.label!=null && item.label !=""){
              item.labels = item.label.split(',')
            }

          })
        }
      })
    },
    reset(){
      this.$nextTick(() => {
        this.$refs.myCascader.$refs.panel.clearCheckedNodes()
        this.$refs.myCascader.$refs.panel.activePath = []
      })
      this.searchParam ={
          userId:null,
          projectName:'',//项目名称
          ownerCompany:'',//业主单位
          projectType:'',//项目类型
          projectStage:'',//项目阶段
          minAmount:'',//投资估算最小值
          maxAmount:'',//投资估算最大值
          Amount:'',//投资估算
          provinceId: [],
          cityId: [],
          districtId: [],
          pageNum:1,
          pageSize:20,
      }
      this.getList(1)
    },
    //地区
    async prvinceTree() {
      // await axios.post("https://files.jiansheku.com/file/json/common/provinceTree.json", {}, {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // }).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(res.data.data)
      //   }
      // })
      // console.log(prvinceTree)
      this.addressList = prvinceTree;
      this.getadd(this.addressList)
    },
    //处理项目地区
    getadd(row) {
      this.addrcallback(row,this.getadd)
    },
    addrcallback(row,callback){
      if(row){
        row.forEach(item => {
          item.value = item.id
          callback &&  callback(item.children)
        })
      }
    },

    //新建项目
    showNew(){
      this.isshow = true
    },
    addNew(isshow){
      this.isshow = isshow
    },
    add(){
      this.isshow = false
      this.getList(1)
    },
    toDetail(id,tag){
      this.$router.push({ path: '/project/projectList/detail', query: {id:id,tag:tag} });
    },
    toEnterprise(item){
      if(item.ownerCompanyUipId){
        this.$router.push({ path: '/enterprise/'+this.encodeStr(item.ownerCompanyCid)});
      }else if(item.ownerCompanyCid){
        this.$router.push({ path: '/company/'+this.encodeStr(item.ownerCompanyCid)});
      }
    },
    handleClick(){
      this.reset()
    },
    handleChange(value) {
      // console.log(value);
      // var labelString = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
      let arr = this.$refs.myCascader.getCheckedNodes();
      // console.log(arr)
      let provinceId = [],
        cityId = [],
        districtId = [];
      this.domicile = [];
      for (var i in arr) {
        if (arr[i].parent) {
          if (!arr[i].parent.checked) {
            arr[i].hasChildren && cityId.push(arr[i].value);
            arr[i].hasChildren && this.domicile.push(arr[i].label);
            !arr[i].hasChildren && districtId.push(arr[i].value);
            !arr[i].hasChildren && this.domicile.push(arr[i].label);
          }
        } else {
          provinceId.push(arr[i].value);
          this.domicile.push(arr[i].label);
        }
      }
      var obj = JSON.parse(JSON.stringify(this.searchParam));
      obj.provinceId = provinceId;
      obj.cityId = cityId;
      obj.districtId = districtId;
      this.searchParam = obj;
    },

    transactionPricePopperConfirm() {
      if (
        this.minAmount &&
        this.maxAmount &&
        !(Number(this.maxAmount) > Number(this.minAmount))
      ) {
        return this.$message.warning("最小值必须小于最大值,请重新输入！");
      }
      this.transactionPriceShowPopper = false;
      var obj = JSON.parse(JSON.stringify(this.searchParam));
      obj.minAmount = this.minAmount;
      obj.maxAmount = this.maxAmount;
      this.searchParam = obj;
      this.$refs.transactionPriceShowPopper.hide();
    },
    transactionPriceCancel() {
      this.transactionPriceShowPopper = false;
      this.$refs.transactionPriceShowPopper.hide();
    },
    transactionPricehandleCommand(command) {
      if (command) {
        this.$refs.transactionPriceShowPopper.hide();
        var obj = JSON.parse(JSON.stringify(this.searchParam));
        this.minAmount = "";
        this.maxAmount = "";
        if (command == "不限") {
          obj.minAmount = "";
          obj.maxAmount = "";
        } else {
          obj.minAmount = command[0];
          obj.maxAmount = command[1];
        }
        this.searchParam = obj;
      }
    },

    //翻页
    handleCurrentChange(val) {
      this.getList(val)
    },
  }
}
</script>
<style lang="scss" scoped>
  .btn_primary{
    margin-top: 16px;
  }
  .jabph_popper_box{
    left: 110px;
  }
  .noborder{
    position: relative;
  }
  .btns{
    position: absolute;
    top: -6px;
    right: 12px;
    z-index: 2;
    .img.img1{
      background: url('../../../../src/assets/images/add.png')no-repeat center center;
      background-size: 100%;
    }
    .btn_default:hover{
      .img1{
        background: url('../../../../src/assets/images/add_1.png')no-repeat center center;
        background-size: 100%;
      }
    }
    .img.img2{
      background: url('../../../../src/assets/images/import.png')no-repeat center center;
      background-size: 100%;
    }
  }
  .scbtns{
    border-top: 1px solid #EFEFEF;
    padding: 24px 0 8px;
    .btn{
      margin: 0 16px 0 0;
    }
  }
  .sellist{
    width: 100%;
    padding: 10px 0;
    .selli{
      width: 100%;
      height: 34px;
      line-height: 34px;
      font-size: 14px;
      color: #232323;
      >span{
        float: left;
        margin-right: 28px;
        opacity: 0.8;
      }
    }
  }
  .titles{
    color: #232323;
    font-size: 16px;
    font-weight: bold;
    height: 60px;
    line-height: 64px;
    border-bottom: 1px solid #EFEFEF;
    padding-left: 26px;
    &::after{
      content: " ";
      width: 2px;
      height: 14px;
      background: #445781;
      float: left;
      margin-left: -10px;
      margin-top: 24px;
    }
    .dc{
      float: right;
      font-size: 12px;
      color: #3D3D3D;
      font-weight: 400;
      padding-right: 24px;
      position: relative;
      &::after{
        content: ' ';
        width: 2px;
        height: 2px;
        background: rgba(35,35,35,0.4);
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 14px;
      }
      >div{
        display: inline-block;
        margin-left: 20px;
      }
    }
  }
  .datalist{
    .datali{
      padding: 16px 16px 0;
      position: relative;
      .operates{
        position: absolute;
        z-index: 1;
        right: 0;
        top: 24px;
        >div{
          padding-right: 16px;
          display: inline-block;
          font-size: 12px;
          >img{
            float: left;
            margin-right: 5px;
            width: 16px;
          }
        }
        .i1:hover{
          color: #3CB4FF;
        }
        .i2:hover{
          color: #0CBC6D;
        }
        .i3:hover{
          color: #FF3C3C;
        }
        .tits{
          padding: 12px 0;
        }
      }
      .delform{
        right: 16px;
        top: -94px;
      }
      &:hover{
        background-color: #F6F9FC;
        cursor: pointer;
      }
      .det-title{
        color: #3D3D3D;
        font-size: 16px;
        font-weight: 700;
        line-height: 23px;
        padding-right: 190px;
        .people{
          padding-left: 10px;
          color: #4f4f4f;
          font-weight: 400;
          font-size: 14px;
          i{
            width: 20px;
            height: 20px;
            background: #E3EEF9;
            border-radius: 50%;
            font-style: initial;
            font-size: 12px;
            display: inline-block;
            color: #0081FF;
            text-align: center;
            line-height: 20px;
            margin-right: 4px;
          }
        }
      }
      .det-tips{
        padding: 8px 0 ;
      }
      .det-contets{
        padding: 4px 0 16px;
        .det-con{
          font-size: 14px;
          display: inline-block;
          padding-right: 32px;
          &:last-child{
            padding-right: 0;
          }
          span:nth-child(2n-1){
            color: #a7a7a7;
          }
        }
      }
    }
  }

  .popbot{
    .wordprimary{
      padding-right: 26px;
      float: left;
      margin-top: 6px;
    }
    .btn_primary{
      padding: 0;
    }
  }
  .btn{
    padding: 0 12px;
  }
</style>
