<template>
  <div class="cont-top-box">
    <div class="box-header"><h4>筛选条件</h4></div>
    <div class="box-body">
      <el-form label-width="100px">
        <el-form-item class="custom-label" label="所在指挥部">
          <el-checkbox-group v-model="departmentChecks" style="display: inline-block">
            <el-checkbox v-for="item in departmentList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="方向">
          <el-checkbox-group v-model="providentFundChecks" style="display: inline-block">
            <el-checkbox v-for="item in directionList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="桥梁类型">
          <el-checkbox-group v-model="socialSecurityChecks" style="display: inline-block">
            <el-checkbox v-for="item in cityList" :key="item" :label="item" @change="checkChange">{{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { getDepartment } from '@/api/department'

export default {
  name: 'SocialTool',
  data() {
    return {
      tips: {},
      keyword: '',
      departmentChecks: [],
      socialSecurityChecks: [],
      providentFundChecks: [],
      departmentList: ['重庆指挥部', '四川指挥部', '云南指挥部', '贵州指挥部'],
      cityList: ['特大桥', '大桥', '中桥', '小桥'],
      directionList: ['上行方向', '下行方向', '上下双向', '闸道'],
    };
  },
  created: function() {
    this.getCityList();
    this.getDepartment();
  },
  methods: {
    // 获取城市
    async getCityList() {
      // this.cityList = []
    },
    // 获取组织架构
    async getDepartment() {
      // this.departmentList = await getDepartment();
    },
    checkChange() {
      // const selectParams = {
      //   departmentChecks: this.departmentChecks,
      //   socialSecurityChecks: this.socialSecurityChecks,
      //   providentFundChecks: this.providentFundChecks,
      // };
      // this.$parent.changeSelectParams && this.$parent.changeSelectParams(selectParams);
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.cont-top-box {
  padding: 10px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  //border: red solid 1px;
}

::v-deep .el-form-item__label {
  color: #606266;
  font-size: 16px;
  font-weight: 700;
  //float: left;
}

.box-header {
  color: #333;
  border-bottom: 1px solid #eee;
}

.box-header h4 {
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-block;
  line-height: 50px;
  font-size: 20px;
  margin-left: 5px;
  font-weight: bold;

}

.box-body {
  margin-top: 15px;
}
</style>
