<template>
    <div>
      <el-dialog :close-on-click-modal="false" title="选择稽察地点" v-model:visible="qrJcDdDialog" width="50%" :modal-append-to-body="true" :append-to-body="true" @close="closeXzGroupDdDialog">
        <div class="selection-container">
          <div class="select-box left">
            <div class="select-box-title">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">请选择地点：</el-checkbox>
            </div>
            <div class="select-content">
              <el-checkbox-group v-model="checkedXzDdData" @change="val => handleCheckedXzDdDataChange(val)">
                <div v-for="city in XzDdData" :key="city" style="height: 40px;line-height: 40px;padding: 0 6%;">
                  <el-checkbox :label="city">{{city}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="arrows-box">
            <div class="arrow-btns">
              <el-button type="primary" style="margin-bottom: 15px;" :disabled="!isIndeterminate" @click="addFz">添加>></el-button>
              <el-button type="primary" :disabled="!isIndeterminateFz" @click="removeFz"><<移除</el-button>
            </div>
          </div>
          <div class="select-box right">
            <div class="select-box-title">
              <el-checkbox :indeterminate="isIndeterminateFz" v-model="checkAllFz" @change="handleCheckAllChangeFz">稽察分组数：</el-checkbox>
            </div>
            <div class="select-content">
              <el-checkbox-group v-model="checkedXzDdDataFz" @change="handleCheckedXzDdDataChangeFz">
                <div v-for="(city,key) in JcFzsData" :key="key"  style="height: 40px;line-height: 40px;padding: 0 6%;">
                  <el-checkbox :label="city" :key="city">{{city}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button type="primary" @click="savePersInfo" size="medium">保  存</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { getAdData } from '@/api/duChaAPI.js';
import request from '@/utils/gw_ajax_request';
export default {
  name: 'xuanZhongZuDiDian',
  props: ['persAreaId', 'multipleRowId'],
  data() {
    return {
      isHlZq: true,
      qrJcDdDialog: true,
      qdJcDdYzForm: {
        avoidYrSize: '',
        avoidSize: '',
        siBadPersNum: '',
        siGoodPersNum: '',
        siNvPersNum: '',
        siSaPersNum: '',
        isPorc: '',
      },
      isIndeterminate: false,
      isIndeterminateFz: false,
      checkAll: false,
      checkedXzDdData: [],
      checkAllFz: false,
      checkedXzDdDataFz: [],
      XzDdData: [],
      rootCode: localStorage.getItem('currentRlcode'),
      XuanZhongRemove: [],
      tongZuArray: [],
      jCResullt: [],
      JcFzsData: [],
      XuanZhongLeft: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getJcDdYzData();
      this.getAdDataList();
    });
  },
  methods: {
    getJcDdYzData() {
      this.JcFzsData = [];
      request
        .get(`/tac/insp/year/batch/group/getGroupById/${this.multipleRowId}`)
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              if (res.data.areaList) {
                res.data.areaList.forEach((item) => {
                  this.JcFzsData.push(item.adName);
                });
              }
              this.qdJcDdYzForm = res.data;
              if (this.qdJcDdYzForm.isPorc == '1') {
                this.isHlZq = false;
              }
            });
          } else {
            this.$message.warning(res.message);
          }
        });
    },
    getAdDataList() {
      getAdData(this.rootCode).then((res) => {
        if (res.data) {
          res.data.forEach((item, index) => {
            this.XzDdData.push(item.adName);
          });
        }
      });
    },
    handleCheckAllChange(val) {
      this.checkedXzDdData = val ? this.XzDdData : [];
      this.isIndeterminate = val;
      this.$nextTick(() => {
        this.jCResullt = this.checkedXzDdData;
      });
    },
    handleCheckAllChangeFz(val) {
      this.checkedXzDdDataFz = val ? this.JcFzsData : [];
      this.isIndeterminateFz = val;
      this.$nextTick(() => {
        this.XuanZhongRemove = this.JcFzsData;
      });
    },
    handleCheckedXzDdDataChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.XzDdData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount <= this.XzDdData.length;
      this.$nextTick(() => {
        this.jCResullt = this.uniq(this.JcFzsData.concat(value));
        this.XuanZhongLeft = value;
      });
    },
    handleCheckedXzDdDataChangeFz(value) {
      const checkedCount = value.length;
      this.checkAllFz = checkedCount === this.XzDdData.length;
      this.isIndeterminateFz =
        checkedCount > 0 && checkedCount <= this.XzDdData.length;
      this.XuanZhongRemove = value;
    },
    addFz() {
      this.JcFzsData = this.unique(this.JcFzsData, this.XuanZhongRemove);
      this.JcFzsData = this.uniq(this.jCResullt.concat(this.tongZuArray));
    },

    removeFz() {
      this.$nextTick(() => {
        this.JcFzsData = this.unique(this.JcFzsData, this.XuanZhongRemove);
        this.jCResullt = this.XuanZhongLeft;
        if (this.JcFzsData.length == '0') {
          this.tongZuArray = [];
          this.JcFzsData = [];
        }
      });
    },
    unique(obj, ary) {
      return obj.filter((item) => ary.indexOf(item) == -1);
    },
    uniq(array) {
      const temp = [];
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) === -1) {
          temp.push(array[i]);
        }
      }
      return temp;
    },
    isPorcClick(val) {
      if (val == '1') {
        this.isHlZq = false;
      } else {
        this.isHlZq = true;
      }
    },
    savePersInfo() {
      if (this.JcFzsData.length && this.JcFzsData) {
        const array = [];
        this.JcFzsData.forEach((item) => {
          var obj = {};
          obj.adName = item;
          array.push(obj);
        });
        this.qdJcDdYzForm['adNames'] = array;
        request
          .post(`/tac/insp/year/batch/group/updateGroupArea`, this.qdJcDdYzForm)
          .then((res) => {
            if (res.success) {
              this.$message.success('保存成功');
              this.$emit('closeXzGroupDdDialog');
            }
          });
      } else {
        this.$message.warning('稽察分组不能为空');
      }
    },
    closeXzGroupDdDialog() {
      this.$emit('closeXzGroupDdDialog');
    },
  },
};
</script>

<style>

</style>
