<template>
  <div class="TableSelect">
    <el-form :model="ProjectSearch" :inline="true" label-position="left">
        <el-row>
          <el-form-item style="width:15%">
            <el-select v-model="ProjectSearch.provinceCode" filterable placeholder="请选择省" @change="showProvince(2)">
              <el-option
                v-for="item in ProvinceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:15%">
            <el-select v-model="ProjectSearch.cityCode" filterable placeholder="请选择市" @change="showProvince(3)">
              <el-option
                v-for="item in CityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:15%">
            <el-select v-model="ProjectSearch.districtCode" filterable placeholder="请选择区">
              <el-option
                v-for="item in DistrictList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:20%">
            <el-select v-model="ProjectSearch.regionId" filterable placeholder="请选择区域">
              <el-option
                v-for="item in RegionList"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:25%">
            <el-select v-model="ProjectSearch.userId" filterable placeholder="请选择区域主管">
              <el-option
                v-for="item in RegionList"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:350px">
            <el-input placeholder="项目名称、项目编号、甲方名称、项目地址" v-model="ProjectSearch.condition" clearable></el-input>
          </el-form-item>
          <el-form-item style="width:25%">
            <el-button type="primary"  round>查询</el-button>
            <el-button type="info" plain round>重置</el-button>
          </el-form-item>
        </el-row>
    </el-form>
    
  </div>
</template>

<script>
import bus from '../header/bus'
export default {
  data() {
    return {
      options: [
        {
          value: 1,
          label: "湖北省"
        },
        {
          value: 2,
          label: "浙江省"
        },
        {
          value: 3,
          label: "江苏省"
        },
        {
          value: 4,
          label: "广东省"
        },
        {
          value: 5,
          label: "福建省"
        }
      ],
      RegionList:[],
      ProjectSearch:{
        provinceCode: "",
        cityCode: "",
        districtCode:"",
        regionId:"",
        userId:"",
        condition:"",
      },
      
      CityOptions: [],
      ProvinceList:[],
      CityList:[],
      DistrictList:[],
    };
  },
  created() {
    // this.Initialization();
    this.showProvince(1)
    this.getRegionList()
  },
  mounted() {},
  activated() {
    this.Initialization();
  },
  methods: {
    //省市区
    showProvince(type){
      var data = "";
      var url = "business/project/area/list";
      this.axios.post(url).then(result => {
        data = result.data.data;
        if(type==1){
          this.ProvinceList = data
        }else if(type==2){
          data.map((item) => {
              if(item.code==this.provinceCode){
                this.CityList = item.children;
              }
          })
        }else if(type==3){
          this.CityList.map((item) => {
              if(item.code==this.cityCode){
                this.DistrictList = item.children;
                console.log(item.children)
              }
          })
          
        }
      });
    },
    Initialization() {
      let _this = this;
      _this.$nextTick(function() {
        _this.CityOptions = [];
        console.log(_this.CityOptions);
      });
    },
    province(a) {
      if (a === 1) {
        this.CityOptions = [
          {
            value: 11,
            city: "武汉"
          },
          {
            value: 12,
            city: "宜昌"
          },
          {
            value: 13,
            city: "潜江"
          },
          {
            value: 14,
            city: "荆州"
          }
        ];
      } else if (a === 2) {
        this.CityOptions = [
          {
            value: 11,
            city: "杭州"
          },
          {
            value: 12,
            city: "宁波"
          },
          {
            value: 13,
            city: "连云港"
          },
          {
            value: 14,
            city: "杭二"
          }
        ];
      } else if (a === 3) {
        this.CityOptions = [
          {
            value: 11,
            city: "南京"
          },
          {
            value: 12,
            city: "苏州"
          },
          {
            value: 13,
            city: "常州"
          },
          {
            value: 14,
            city: "无锡"
          }
        ];
      }
    },
    //添加项目
    addProject(){
      bus.$emit("toTableAdd",{data:1})
    },
    //获取区域下拉框数据
    getRegionList(){
      var url = "enterprise/region/project/regions";
      var param = {
        // mtCompanyId: JSON.parse(sessionStorage.getItem('mtCompanyId'))
        mtCompanyId:1001102100031
      };
      this.axios.post(url, param).then(result => {
        var data = result.data;
        if(data.statusCode==="1"){
          this.RegionList = data.data
        }else{
          this.$message.error(data.message);
        }
       
        console.log(data.data)
      })
    },
  }
};
</script>

<style lang="stylus">
$ft14 = 14px;

.TableSelect {
  font-size: $ft14;
  padding: 10px 20px 0 20px;
  .el-form-item {
    margin-bottom: 10px;
  }  
}

.colMiddle.el-row .el-col {
  text-align: center;
}

</style>
