<template>
  <div id="">
    <a-select v-model:value="value" placeholder="请选择" show-search :filter-option="filterMethod" @change="chooseChange">
      <a-select-option v-for="item in searchDataList" :key="item.code" :value="item.code">
        <span style="float: left;color:rgba(0,0,0,0.5);font-size:small" v-if="item.value == '无相应村'">*如无相应村</span>
        <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.value == '无相应村'">
          <el-button type="text" size="small" ghost @click="insertCun">添加行政村</el-button>
        </span>
        <span style="float: left">{{ item.villageName }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.townName }}</span>
      </a-select-option>
    </a-select>
    <a-modal :open="dialogVisible" title="添加行政村" width="300%" @ok="submitInsertCun" @cancel="dialogVisible = false">
      <a-form :model="newCunForm" :label-col="{span: 8}" :wrapper-col="{span: 16}">
        <p style="margin-top:10px;margin-bottom: 10px"><a-icon type="caret-right" />
          <span style="width:120px;padding-left: 10px">行政村基本信息</span><span class="hrs"></span></p>
        <a-form-item label="行政村名">
          <a-input v-model:value="newCunForm.adName" style="width:70%;" />
        </a-form-item>
        <a-form-item label="所在乡镇">
          <inuptWithXiang
            v-model="newCunForm.adName"
            :initalValue="newCunForm.adFcode"
            autocomplete="off"
            :rootCode="rootCode"
            @provTreeSelectChange="provTreeSelectChangeHandler"
            style="width:70%;"></inuptWithXiang>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getVillageList_ny, submitInsertCun } from '../api/duChaTianBao.js';
import inuptWithXiang from './inuptWithXiang.vue';
export default {
  props: ['rootCode', 'initalValue'],
  components: {
    inuptWithXiang: inuptWithXiang,
  },
  data() {
    return {
      dataList: [],
      value: '',
      dialogVisible: false,
      searchDataList: [],
      timeout: null,
      xianlistData: [],
      newCunForm: {
        adAbbrName: '',
        adFcode: '',
        adFullName: '',
        adName: '',
      },
    };
  },
  mounted() {
    this.value = this.initalValue;
    this.querySearchAsync();
  },
  watch: {
    rootCode: function () {
      this.querySearchAsync();
    },
    initalValue: function () {
      this.value = this.initalValue;
      this.querySearchAsync();
    },
  },
  methods: {
    provTreeSelectChangeHandler: function (params) {
      this.newCunForm.adFcode = params.code;
    },
    submitInsertCun: function () {
      submitInsertCun(this.newCunForm.adName, this.newCunForm.adFcode).then(
        (res) => {
          this.querySearchAsync();
          this.newCunForm = {
            adAbbrName: '',
            adFcode: '',
            adFullName: '',
            adName: '',
          };
          this.dialogVisible = false;
        },
      );
    },
    insertCun: function () {
      this.dialogVisible = true;
    },
    chooseChange: function (p) {
      this.dataList.forEach((element) => {
        if (element.code == p) {
          this.$emit('provTreeSelectChange', {
            code: element.code,
            name: element.villageName,
          });
        }
      });
    },
    filterMethod: function (text) {
      this.value = text;
      const filterResult = [
        {
          value: '无相应村',

          label: '添加',
        },
      ];
      this.dataList.forEach((element) => {
        if (
          element.villageName.indexOf(text) >= 0 ||
          element.townName.indexOf(text) >= 0
        ) {
          filterResult.push(element);
        }
      });
      this.searchDataList = filterResult;
    },
    querySearchAsync() {
      // cb(results);
      getVillageList_ny(this.rootCode).then((res) => {
        var children = [];
        const lists = [];
        res.data.list.forEach((element, index) => {
          element.list.forEach((eleChild) => {
            children.push({
              name: eleChild.villageName,
              code: eleChild.villageCode,
            });
            lists.push({
              value: eleChild.villageName,
              villageName: eleChild.villageName,
              townName: element.townName,
              code: eleChild.villageCode,
              label: eleChild.villageName + element.townName,
            });
          });
          this.xianlistData.push({
            label: element.townName,
            code: element.townCode,
          });
        });
        this.dataList = lists;
        this.searchDataList = lists;
      });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
