<template>
  <div class="app-container">
    <el-card class="box-card noborder nopad">
      <div class="btns">
        <div class="btn btn_default h28"><div class="img img1"></div>新建项目商机</div>
        <div class="btn btn_primary h28"><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" placeholder="请输入项目或业主单位名称关键词进行搜索"></el-input>
          <div class="btn">搜索</div>
        </div>
        <div class="sellist">
          <div class="selli">
              <span>
              地区团队
              </span>
              <div class="selectInput" @click="getxmdq"><span class="selecttext">{{xmdqlabel}}<i class="el-icon-caret-bottom"></i></span>
                <el-cascader class="input"
                  ref="myCascader"
                   :props='props' :options="options"
                  @change="handleChange"></el-cascader>
              </div>
          </div>
          <div class="selli">
              <span>
              项目信息
              </span>aaa
          </div>
        </div>
        <div class="scbtns">
          <div class="btn btn_primary h34">查询</div>
          <div class="btn btn_cancel h34">重置</div>
        </div>
      </el-tabs>
    </el-card>

    <el-card class="box-card noborder">
      <div class="titles">项目明细
      <div class="dc">
        <div class="total">共126条</div>
        <div class="btn-export"><img src="@/assets/images/EXCEL.png">导出EXCEL</div>
      </div>
      </div>
      <div class="datalist">
        <div class="datali">
          <div class="det-title">轨道交通13号线扩能提升工程<span class="people"><i>A</i>四川-李丽  <font color="#FA8A00">正在跟进</font></span></div>
          <div class="det-tips"><span class="tips tip1">轨道交通</span><span class="tips tip2">江西省-南昌市</span></div>
          <div class="det-contets">
            <div class="det-con">
              <span>项目类型：</span>
              <span>轨道交通</span>
            </div>
            <div class="det-con">
              <span>投资估算（万元）：</span>
              <span>21</span>
            </div>
            <div class="det-con">
              <span>最后跟进时间：</span>
              <span>2013-02-19</span>
            </div>
            <div class="det-con">
              <span>业主单位：</span>
              <span class="wordprimary">重庆市交通开发投资（集团）有限公司</span>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="operates">
            <div><img src="@/assets/images/follow.png">跟进</div>
            <div><img src="@/assets/images/edit.png">编辑</div>
            <div><img src="@/assets/images/delete.png">删除</div>
          </div>
          <div class="delform">
            <div class="words">是否将项目删除</div>
            <div>
              <div class="btnsmall btn_primary h28">确定</div>
              <div class="btnsmall btn_cancel h28">取消</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  // import "@/assets/styles/index.scss"
export default {
  name: 'ProjectList',
  data() {
    return {
      props:{
        multiple: true},
      xmdq: [],
      xmdqlabel:'项目地区',
      activeName:'first',
      options: [
        {
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]

    }
  },
  created() {
  },
  methods: {
    getxmdq(){
      console.log(888)
    },
    handleClick(){

    },
    handleChange(value) {
      console.log(value);
      this.xmdq = value
      var labelString = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
      console.log(labelString)
      if(labelString.length>0){
        let dq = ''
        labelString.forEach((item,index)=>{
          let str = ','
          if(index == 0)
            str = ''
          dq += str + item
        })
        this.xmdqlabel = dq
      }else{
        this.xmdqlabel = '项目地区'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
  .el-card{
    overflow: initial;
  }
  .noborder{
    position: relative;
  }
  .btns{
    position: absolute;
    top: 11px;
    right: 12px;
    z-index: 2;
    .img.img1{
      background: url('../../../../src/assets/images/add.png')no-repeat center center;
    }
    .btn_default:hover{
      .img1{
        background: url('../../../../src/assets/images/add_1.png')no-repeat center center;
      }
    }
    .img.img2{
      background: url('../../../../src/assets/images/import.png')no-repeat center center;
    }
  }
  .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;
          }
        }
        .tits{
          padding: 12px 0;
        }
      }
      .delform{
        width: 200px;
        height: 114px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1608);
        border-radius: 2px;
        position: absolute;
        right: 16px;
        top: -94px;
        z-index: 3;
        text-align: center;
        .words{
          padding: 24px 0;

        }
      }
      &:hover{
        background-color: #F6F9FC;
        cursor: pointer;
      }
      .det-title{
        color: #3D3D3D;
        font-size: 16px;
        font-weight: 700;
        line-height: 23px;
        .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 ;
        .tips{
          display: inline-block;
          padding: 4px 8px;
          border-radius: 2px;
          font-size: 12px;
          margin-right: 8px;
          &.tip1{
            background-color: #E4F3FD;
            color: #41A1FD;
          }
          &.tip2{
            background-color: #F3F3FF;
            color: #8491E8;
          }
        }
      }
      .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;
          }
        }
      }
    }
  }
  .selectInput{
    position: relative;
    display: inline-block;
    &:hover{
      .selecttext{color: #0081FF;
      i{color: #0081FF;}}
    }
    .selecttext{
      i{
        margin-left: 5px;
        color: #a7a7a7;
      }
    }
    .input{
      position: absolute;
      left: 0;
      opacity: 0;
      height: 20px;
    }
  }
</style>
