<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: 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>
    </a-modal>
  </div>
</template>

<script>
import { getVillageList_ny, submitInsertCun } from '../api/duChaTianBao.js';
export default {
  props: ['rootCode', 'initalValue'],
  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: {
    submitInsertCun: function () {
      submitInsertCun(this.newCunForm.adName, this.rootCode).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.townName,
          });
        }
      });
    },
    filterMethod: function (text) {
      this.value = text;
      const filterResult = [
        {
          value: '无相应乡镇',
          label: '添加',
        },
      ];
      this.dataList.forEach((element) => {
        if (
          element.townName.indexOf(text) >= 0 ||
          element.townName.indexOf(text) >= 0
        ) {
          filterResult.push(element);
        }
      });
      this.searchDataList = filterResult;
    },
    querySearchAsync() {
      getVillageList_ny(this.rootCode).then((res) => {
        var children = [];
        const lists = [];
        res.data.list.forEach((element, index) => {
          lists.push({
            value: element.townCode,
            townName: element.townName,
            label: element.townName,
            code: element.townCode,
          });
        });
        this.dataList = lists;
        this.searchDataList = lists;
      });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
