<template>
  <div>
    <el-tabs :tab-position="tabPosition"  v-model="activeName" id="tabs" type="card" class="eltabs" @tab-click="handleClick">
      <el-tab-pane class="eltabspane" label="宗地" name="zd" >

        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="行政区">
            <el-select v-model="xzqValue" value-key="xzqbsm" placeholder="行政区"  @change="changeXzq(xzqValue)" style="width:130px;">
              <el-option v-for="item in xzq"
                         :key="item.xzqbsm"
                         :label="item.xzqmc"
                         :value="item.xzqbsm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地籍区">
            <el-select v-model="djqValue" placeholder="地籍区" @change="changeDjq(djqValue)" style="width:130px;">
              <el-option v-for="item in djq"
                         :key="item.bsm"
                         :label="item.mc"
                         :value="item.bsm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地籍子区">
            <el-select v-model="djzqValue" placeholder="地籍子区"  style="width:130px;">
              <el-option v-for="item in djzq"
                         :key="item.bsm"
                         :label="item.mc"
                         :value="item.bsm">
              </el-option>
            </el-select>
          </el-form-item>



          <el-form-item label="项目名称" >
            <el-input v-model="zdProjectName" placeholder="项目名称" style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item label="所有权类型">
            <el-select v-model="syqlx.value" placeholder="所有权类型" @change="changeSyqlx(syqlx.value)" style="width:400px;">
              <el-option v-for="item in syqlx"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="特征码">
            <el-select v-model="tzmCode" placeholder="地籍子区"  style="width:200px;">
              <el-option v-for="item in zdtzm"
                         :key="item.bsm"
                         :label="item.mc"
                         :value="item.bsm">
              </el-option>
            </el-select>
          </el-form-item>
          <div>
            <el-form-item style="margin-left:300px;">
              <el-button type="primary" >导入图形</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="newZd">创建</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">取消</el-button>
            </el-form-item>
          </div>

        </el-form>


      </el-tab-pane>
      <el-tab-pane class="eltabspane" label="宗海" name="zh">宗海</el-tab-pane>
      <el-tab-pane class="eltabspane" label="自然幢" name="zrz">
        <el-form :inline="true"  class="zrzProject">
          <el-form-item label="项目名称">
            <el-input v-model="zrzProjectName" placeholder="项目名称" style="width:400px;"></el-input>
          </el-form-item>

          <div>
            <el-form-item style="margin-left:300px;">
              <el-button type="primary" >导入图形</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="newZrz">创建</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane class="eltabspane" label="多幢" name="dz">多幢</el-tab-pane>
      <el-tab-pane class="eltabspane" label="林权" name="lq">林权</el-tab-pane>
      <el-tab-pane class="eltabspane" label="构筑物" name="gzw">构筑物</el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
import{getAllList,getListByXzqbsm,getListByPbsm,insertQjZdjbxx,getDdicByMC,insertZrzjbxx} from "../../../api/panel"
export default {
  name:"",
  components:{},
  props:{},
  data(){
    return {
      tabPosition: 'left',
      //默认第一个选项卡
      activeName: "zd",
      zdProjectName:'',
      zrzProjectName:'',
      tzmCode:'',
      syqlxCode:'',
      xzqValue:'',
      djqValue:'',
      djzqValue:'',
      xzq:[],
      djq:[],
      djzq:[],
      syqlx:[
        {
          label:"国家所有",
          value:"G"
        },{
          label:"集体所有",
          value:"J"
        },{
          label:"土地所有权未确定或有争议",
          value:"Z"
        },
      ],
      zdtzm:[]
    }
  },
  created(){
    this.getXzqList();
    this.getDdicByMC();
  },
  mounted(){},
  methods:{
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.name);
    },
    newZd(){
      var data = {
        xzqbsm:this.xzqValue,
        djqbsm:this.djqValue,
        djzqbsm:this.djzqValue,
        syqlxbsm:this.syqlxCode,
        xmmc:this.zdProjectName,
        zdtzmbsm:this.tzmCode
      }
      console.log(data);
      insertQjZdjbxx(data).then((res) => {
        console.log(res.result)
        if(res.code=="200"){
          this.$message({
            message: '创建成功！',
            type: 'success'
          });
          //todo 跳转到宗地基本信息内容表页面  (预留)

        }else{
          this.$message.error('创建失败！');
        }
      })
      .catch((error) => {

      });
    },
    newZrz(){
      //todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
      var data = {
        userbsm:'',
        xmmc:this.zrzProjectName,
        zdbsm:''
      }
      console.log(data);
      insertZrzjbxx(data).then((res) => {
        console.log(res.result)
        if(res.code=="200"){
          this.$message({
            message: '创建成功！',
            type: 'success'
          });
          //todo 跳转到自然幢基本信息内容表页面  (预留)

        }else{
          this.$message.error('创建失败！');
        }
      })
      .catch((error) => {

      });
    },
    getXzqList(){
      getAllList().then((res) => {
        console.log(res.result)
        this.xzq = res.result;
      })
          .catch((error) => {

          });
    },
    getDdicByMC(){
      getDdicByMC("宗地（宗海）特征码").then((res) => {
        console.log(res.result)
        this.zdtzm = res.result;

      })
      .catch((error) => {

      });
    },
    changeXzq(id){
      this.djq = [];
      this.djzq = [];
      this.djqValue = '';
      this.djzqValue = '';
      getListByXzqbsm(id).then((res) => {
        if(res.result==null){
          this.djq = null;
        }else{
          this.djq = res.result;

        }
      })
      .catch((error) => {

      });
    },
    changeDjq(item){
      this.djzq = [];
      this.djzqValue = '';
      if(item==null){
        console.log("llllllllllasdas")
      }else {
        console.log(item)
        getListByPbsm(item).then((res) => {
          console.log(res.result)
          if (res.result== null) {
            this.djzq = null;
          } else {
            this.djzq = res.result;

          }
        })
        .catch((error) => {

        });
      }
    },
    changeSyqlx(id){
      this.syqlxCode = id;
      console.log(this.syqlxCode);
    },
  },
  computed: {},
  watch: {},
}
</script>
<style >
.eltabs{
  height: 600px;width:800px;margin:80px auto;border:1px solid #666
}
.eltabspane{
  height: 500px;width:660px;padding:20px;
}

#tabs .el-tabs__item {
  font-size:18px!important;
  color:#333;
  width:100px;
  height:60px;
  line-height: 80px;
}
.zrzProject{
  margin-top:80px;
}

</style>