<template>
  <div class="nygs">
    <a-layout style="height:520px;">
      <a-layout-sider width="300px" style="border:1px solid #d5d5ff">
        <p class="aside_title">
          <a-button type="link" @click="addVillage" v-if="openType">添加行政村</a-button>
        </p>
        <a-tree :tree-data="treeData" @select="handleNodeClickXzc" :fieldNames="{ children: 'dcuserRelVilles', title: 'townName', key: 'id' }" :autoExpandParent="false" style="height:100%;">
          <template #custom="item">
            <span style="float:left;">{{ item.label }}</span>
            <span class="mr10"><a-icon type="delete" v-if="openType" @click.stop="removeNode(node, data)"/></span>
          </template>
        </a-tree>
      </a-layout-sider>
      <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0;">
        <a-card class="box-card">
          <div slot="title" class="clearfix">
            <span>脱贫户饮水安全评价</span>
            <a-button style="float: right; padding: 3px 0" type="link" @click="addYsh" v-if="openType">添加贫困户</a-button>
          </div>
          <ul class="ul_height">
            <li v-for="(item,index) in yshList" :key="index" class="text item lh40">
              <p @click="yshRow(item)">
                {{ item.usrName }}
                <span class="flr"><a-icon type="delete" v-if="openType" @click.stop="yshDelete(item)"/></span>
              </p>
            </li>
          </ul>
        </a-card>
        <a-card class="box-card mt20">
          <div slot="title" class="clearfix">
            <span>供水工程</span>
            <a-button style="float: right; padding: 3px 0" type="link" @click="addGsdw" v-if="openType">添加</a-button>
          </div>
          <ul class="ul_height">
            <li v-for="(item,index) in gsdwList" :key="index" class="text item lh40">
              <p @click="gsdwRow(item)">
                {{ item.cwsName }}
                <span class="flr"><i class="el-icon-delete" v-if="openType" @click.stop="gsdwDelete(item)"></i></span>
              </p>
            </li>
          </ul>
        </a-card>
      </a-layout-content>
    </a-layout>
    <!--添加行政村-->
    <a-modal class="outerDialog custom_dialog" title="添加行政村" width="40%" :open="villageVisible" @cancel="villageVisible = false">
      <a-layout>
        <a-layout-sider width="300px" style="border:1px solid #d5d5ff">
          <p class="aside_title village_title">{{ rowData.adName }}</p>
          <el-tree :tree-data="villageTreeData" :props="defaultProps" @select="handleNodeClick" :fieldNames="{ children: 'children', title: 'adName', key: 'id' }"></el-tree>
        </a-layout-sider>
        <a-layout-content style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
          <a-table
            :columns="columns"
            :data-source="villageTableData"
            ref="multipleTable"
            row-key="id"
            style="width: 100%;max-height: 510px;"
            :row-selection="{
              columnWidth: 55,
              selectedRowKeys: selectedRowKeys,
              onChange: handleSelectionChange,
            }">
            <span slot="isPoveryt" slot-scope="text">
              {{ text.isPoveryt == '1' ? "是" : "否" }}
            </span>
          </a-table>
        </a-layout-content>
      </a-layout>
      <span slot="footer">
        <a-button style="margin-top:5px;" @click="villageSave">确定</a-button>
      </span>
    </a-modal>
    <!--用水户-->
    <a-modal class="outerDialog custom_dialog" title="添加脱贫户" width="40%" :open="wateruserVisible" @cancel="wateruserVisible = false">
      <a-form :model="wateruserForm" :label-col="{span: 8}" :wrapper-col="{span: 14}">
        <a-form-item label="用水户姓名" required>
          <a-input v-model:value="wateruserForm.usrName" allow-clear placeholder="请输入用水户姓名"></a-input>
        </a-form-item>
        <a-form-item label="饮水工程运行管理责任人">
          <a-input v-model:value="wateruserForm.prjDutyPers" allow-clear placeholder="请输入饮水工程运行管理责任人"></a-input>
        </a-form-item>
        <a-form-item label="联系方式">
          <a-input v-model:value="wateruserForm.usrTel" allow-clear placeholder="请输入联系方式"></a-input>
        </a-form-item>
      </a-form>
      <span slot="footer">
        <a-button style="margin-top:5px;" @click="waterUserSave">确定</a-button>
      </span>
    </a-modal>
    <waterUser
      v-if="waterUserTianBaoVisible"
      :yshRowData="yshRowData"
      :rowData="rowData"
      :openType="openType"
      @closeDialog="closeDialog"
      :currentObjectId="currentObjectId"
      :oriFatherName="oriFatherName"
      :currentObjectRgstrId="currentObjectRgstrId"
      :villageNm="villageNm"></waterUser>
    <waterUnit
      v-if="countryProTianBaoVisible"
      :gsgcRowData="gsgcRowData"
      :rowData="rowData"
      :openType="openType"
      @closeDialog="closeGsGcDialog"
      :currentObjectRgstrId="currentObjectRgstrId"
      :currentObjectId="currentObjectId"
      :oriFatherName="oriFatherName"
      :villageNm="villageNm"></waterUnit>
    <!--添加供水工程-->
    <editDcdxInfo
      v-if="gsgcVisible"
      ref="editDcdxInfoRef"
      :rowData="rowData"
      :villageAdCode="villageAdCode"
      :villageId="villageId"
      @addSuccess="DuiXiangAddSuccessHandler"
      @closeDuChaDuiXiangDialog="closeDuChaDuiXiangDialog">
    </editDcdxInfo>
  </div>
</template>

<script>
import request from '../../../utils/gw_ajax_request';
import inputWith from '../../../widgets/inuptWith.vue';
import editDcdxInfo from './editDcdxInfo.vue';
import waterUnit from './waterUnit';
import waterUser from './waterUser';
export default {
  components: {
    inputWith: inputWith,
    waterUser: waterUser,
    editDcdxInfo, // 添加供水工程
    waterUnit,
  },
  props: [
    'currentObjectId',
    'currentObjectName',
    'currentObjectRgstrId',
    'rowData',
    'openType',
  ],
  data() {
    var checkTel = (rule, value, callback) => {
      if (value == '') {
        callback();
      }
      if (isNaN(value)) {
        callback(new Error('请输入合理电话'));
      }
      var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; // 座机
      var isMob = /^[1][3,4,5,7,8][0-9]{9}$/; // 座机格式
      if (!isMob.test(value) && !isPhone.test(value)) {
        callback(new Error('请输入合理电话'));
      } else {
        callback();
      }
    };
    return {
      yshList: [],
      gsdwList: [],
      wateruserVisible: false,
      villageVisible: false,
      waterUserTianBaoVisible: false,
      countryProTianBaoVisible: false,
      gsgcVisible: false,
      waterUserDialog: false,
      villageTableData: [],
      multipleSelection: [],
      wateruserForm: {
        usrName: '',
        prjDutyPers: '',
        usrTel: '',
      },
      treeData: [],
      villageTreeData: [],
      defaultProps: {
        // children: 'children',
        label: 'adName',
      },
      defaultPropsXzc: {
        children: 'dcuserRelVilles',
        label: 'townName',
      },
      adCodes: '',
      townName: '',
      villageNm: '',
      villageId: '',
      adCode: '',
      yshRowData: null,
      gsgcRowData: null,
      rules: {
        telphone: [
          {
            validator: checkTel,
            trigger: 'change',
          },
        ],
      },
      oriFatherName: '',
      villageAdCode: '',
      selectedRowKeys: [],
      columns: [
        {
          title: '行政村名称',
          dataIndex: 'adName',
          width: 120,
          align: 'center',
        },
        {
          title: '是否贫困村',
          dataIndex: 'isPoveryt',
          width: 120,
          align: 'center',
        },
      ],
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '';
    },
  },
  created() {},
  mounted() {
    this.getLeftTreeData();
  },
  watch: {
    // currentObjectRgstrId(n, o) {
    //     this.getRgstridObj();
    // },
  },
  methods: {
    // 添加行政村
    addVillage() {
      this.villageVisible = true;
      this.getVillageTreeList();
    },
    getVillageTreeList() {
      request
        .get(
          `/bis/insp/villjx/findCheckTree/${this.rowData.adCode}/${this.rowData.rgstrId}`,
        )
        .then((res) => {
          if (res.success && res.data) {
            this.$nextTick(() => {
              if (res.data.length) {
                this.villageTreeData = res.data;
                const length = this.villageTreeData - 1;
                this.villageTableData = res.data[length].attCountryDtoList;
                this.townName = res.data[length].adName;
              }
            });
          }
        });
    },
    // villageSave添加行政村确定
    villageSave() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请至少选择一个行政村');
        return;
      }
      const obj = [
        {
          codes: this.adCodes,
          regstrId: this.rowData.rgstrId,
          townName: this.townName,
        },
      ];
      request.post(`/bis/insp/villjx/village/addbatch`, obj).then((res) => {
        if (res.success) {
          this.$message.success('添加行政村成功');
          this.getLeftTreeData();
          this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
          this.villageVisible = false;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
      this.multipleSelection.map((i) => {
        return (this.adCodes += i.adCode + ';');
      });
      this.adCodes = this.adCodes.substr(0, this.adCodes.length - 1);
    },
    // 左侧树数据
    getLeftTreeData() {
      request
        .get(
          `/bis/insp/villjx/findTree/${this.rowData.adCode}/${this.rowData.rgstrId}`,
        )
        .then((res) => {
          if (res.success && res.data) {
            this.treeData = res.data;
            this.treeData.forEach((i) => {
              if (i['dcuserRelVilles']) {
                i['dcuserRelVilles'].forEach((j) => {
                  j.townName = j.adName;
                  j.adCode = j.adCode;
                });
              }
            });
            this.villageId = this.treeData[0].dcuserRelVilles[0].id;
            this.adCode = this.treeData[0].dcuserRelVilles[0].adCode;
            this.villageAdCode = this.treeData[0].dcuserRelVilles[0].adCode;
            this.villageNm = this.treeData[0].dcuserRelVilles[0].adName;
            this.oriFatherName = this.treeData[0].townName;
            this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
          }
        });
    },
    // 获取用水户、供水单位列表
    getYsGsdwList(code, rgstrId) {
      request
        .get(`/bis/insp/villjx/findNode/${code}/${rgstrId}`)
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              this.yshList = res.data.hshlds;
              this.gsdwList = res.data.prjct;
            });
          }
        });
    },
    // 用水户添加
    addYsh() {
      if (this.adCode) {
        for (var obj in this.wateruserForm) {
          this.wateruserForm[obj] = '';
        }
        this.wateruserVisible = true;
      } else {
        this.$message.warning('请选择左侧行政村');
      }
    },
    // 添加用水户保存
    waterUserSave() {
      if (!this.wateruserForm.usrName) {
        this.$message.warning('请填写用水户姓名');
        return;
      }
      const obj = {
        villageId: this.villageId,
        usrName: this.wateruserForm.usrName,
        prjDutyPers: this.wateruserForm.prjDutyPers,
        usrTel: this.wateruserForm.usrTel,
        rgstrId: this.rowData.rgstrId,
      };
      request.post(`/bis/insp/villjx/hshlds`, obj).then((res) => {
        if (res.success) {
          this.$message.success('添加用水户成功');
          this.wateruserVisible = false;
          this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
        }
      });
    },
    // 用水户row
    yshRow(row) {
      this.yshRowData = row;
      this.waterUserTianBaoVisible = true;
    },
    // 用水户删除
    yshDelete(row) {
      this.$confirm({
        title: '提示',
        content: '确定要删除该数据, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/villjx/hshlds/delete/${row.id}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
                this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    // 供水单位添加
    addGsdw() {
      if (this.adCode) {
        this.gsgcVisible = true;
      } else {
        this.$message.warning('请选择左侧行政村');
      }
    },
    // 供水单位row
    gsdwRow(row) {
      this.gsgcRowData = row;
      this.countryProTianBaoVisible = true;
    },
    // 供水单位删除
    gsdwDelete(row) {
      this.$confirm({
        title: '提示',
        content: '确定要删除该数据, 是否继续?',
        okType: 'warning',
        onOk: () => {
          request
            .post(`/bis/insp/villjx/prjct/delete/${row.id}`)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
                this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
              } else {
                this.$message.warning(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    handleNodeClick(data) {
      this.$nextTick(() => {
        this.townName = data.adName;
        this.villageTableData = data.attCountryDtoList;
      });
    },
    handleNodeClickXzc(node, data) {
      this.$nextTick(() => {
        console.log(node, data);
        if (node.adCode && node.adName) {
          this.oriFatherName = data.parent.data.townName;
          this.adCode = node.adCode;
          this.villageNm = node.adName;
          this.villageId = node.id;
          this.getYsGsdwList(node.adCode, node.rgstrId);
          this.villageAdCode = node.adCode;
        }
      });
    },
    closeDialog() {
      this.waterUserTianBaoVisible = false;
    },
    closeGsGcDialog(val) {
      this.countryProTianBaoVisible = false;
      if (val === 'success') {
        this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
      }
    },
    addShuiKuSuccess() {
      this.waterUserTianBaoVisible = false;
    },
    //    删除左侧树行政村
    removeNode(node, data) {
      if (data.id) {
        this.$confirm({
          title: '提示',
          content: '确定清空督查数据并将该村从督查任务中删除, 是否继续?',
          okType: 'warning',
          onOk: () => {
            request
              .post(`/bis/insp/villjx/village/delete/${data.id}`)
              .then((res) => {
                if (res.success) {
                  this.$message.success('删除成功');
                  this.getLeftTreeData();
                } else {
                  this.$message.warning(res.message);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          },
        });
      }
    },
    DuiXiangAddSuccessHandler: function () {
      this.gsgcVisible = false;
      this.getYsGsdwList(this.adCode, this.rowData.rgstrId);
    },
    closeDuChaDuiXiangDialog() {
      this.gsgcVisible = false;
    },
  },
};
</script>

<style lang='less' scoped>
/*.nygs{*/
.aside_title {
  padding-right: 10px;
  height: 30px;
  line-height: 30px;
  text-align: end;
  border-bottom: 1px solid rgb(235, 238, 245);
  background-color: #d5d5ff;
}

.village_title {
  text-align: center;
}

.ul_height {
  height: 160px;
  overflow: auto;
}

.box-card {
  /*height: 200px;*/
  overflow: auto;
}

/*.mt20{*/
/*margin-top: 20px;*/
/*}*/
.lh40 {
  list-style: none;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  border-bottom: 1px solid rgb(235, 238, 245);
}

.flr {
  float: right;
  margin-right: 20px;
}

.nygs span.custom-tree-node {
  width: 100%;
}

.mr10 {
  margin-right: 20px;
  float: right;
}

.nygs .el-tree-node__content {
  height: 40px;
  line-height: 40px;
}

.nygs .el-tree>div>div:first-child .mr10 {
  display: none;
}

.nygs .el-tree-node.is-current>.el-tree-node__content {
  background-color: gainsboro !important;
}

/*}*/
</style>
