<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="closeJcDdDialog">
            <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="!xuanZhongDiDianButton" @click="addFz">添加>></el-button>
                        <el-button type="primary" style="margin-bottom: 15px;" :disabled="!xuanZhongDiDianButton || !xuanZhongDiDianButton1" @click="tongZuFz">同组>></el-button>
                        <el-button type="primary" :disabled="!jiChaFenZuButton" @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 in JcFzsData" 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';
import { jcState } from './jcStore';
export default {
  name: 'jiChaDiDian',
  props: ['yearBatchId', 'changeUrl'],
  computed: {
    provList() {
      return jcState.provList;
    },
  },
  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: '000000000000',
      XuanZhongRemove: [],
      tongZuArray: [],
      jCResullt: [],
      JcFzsData: [],
      XuanZhongLeft: [],
      xuanZhongDiDianButton: false,
      xuanZhongDiDianButton1: false,
      jiChaFenZuButton: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getJcDdYzData();
      this.getAreaList();
    });
  },
  methods: {
    getAreaList() {
      const rootCode = localStorage.getItem('currentRlcode') || '000000000000';
      getAdData(rootCode).then((res) => {
        if (res.data) {
          jcState.provList = res.data;
        }
      });
    },
    getJcDdYzData() {
      this.JcFzsData = [];
      const baseUrl = `/tac/insp/year/batch/area/getAreaListByBatchId`;
      const obj = {
        yearBatchId: this.yearBatchId,
      };
      request.post(baseUrl, obj).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;
            console.log(this.qdJcDdYzForm);
            if (this.qdJcDdYzForm.isPorc == '1') {
              this.isHlZq = false;
            }
          });
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    getAdDataList() {
      jcState.provList.forEach((item, index) => {
        this.XzDdData.push(item.adName);
      });
    },
    handleCheckAllChange(val) {
      this.xuanZhongDiDianButton1 = val ? true : false;
      this.checkedXzDdData = val ? this.XzDdData : [];
      this.$nextTick(() => {
        this.jCResullt = this.checkedXzDdData;
        this.XuanZhongLeft = this.jCResullt;
      });
      this.xuanZhongDiDianButton = val ? true : false;
      this.isIndeterminate = false;
    },
    handleCheckAllChangeFz(val) {
      this.checkedXzDdDataFz = val ? this.JcFzsData : [];
      this.$nextTick(() => {
        this.XuanZhongRemove = this.JcFzsData;
      });
      this.isIndeterminateFz = false;
      this.jiChaFenZuButton = val ? true : false;
    },
    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.JcFzsData.concat(value);
        this.XuanZhongLeft = value;
        this.xuanZhongDiDianButton = value.length ? true : false;
        this.xuanZhongDiDianButton1 = value.length > 1 ? true : false;
      });
    },
    handleCheckedXzDdDataChangeFz(value) {
      const checkedCount = value.length;
      this.checkAllFz = checkedCount === this.JcFzsData.length;
      this.isIndeterminateFz =
        checkedCount > 0 && checkedCount < this.JcFzsData.length;
      this.XuanZhongRemove = value;
      this.jiChaFenZuButton = value.length ? true : false;
    },
    addFz() {
      this.JcFzsData = this.JcFzsData.concat(this.XuanZhongLeft);
    },
    tongZuFz() {
      console.log(this.JcFzsData);
      this.tongZuArray = [];
      this.tongZuArray.push(this.XuanZhongLeft.toString());
      this.JcFzsData = this.JcFzsData.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 = [];
          this.checkAllFz = false;
          this.jiChaFenZuButton = false;
        }
      });
    },
    unique(obj, ary) {
      return obj.filter((item) => ary.indexOf(item) == -1);
    },
    uniq(array) {
      const newArray = Array.from(new Set(array));
      return newArray;
    },
    isPorcClick(val) {
      this.isHlZq = val == '1' ? false : true;
    },
    savePersInfo() {
      console.log(this.qdJcDdYzForm);
      const array = [];
      this.JcFzsData.forEach((item) => {
        var obj = {};
        obj.adName = item;
        array.push(obj);
      });
      this.qdJcDdYzForm['adNames'] = array;
      request
        .post(`/tac/insp/pers/area/pris/updatePersAreaPris`, this.qdJcDdYzForm)
        .then((res) => {
          if (res.success) {
            this.$message.success('保存成功');
            this.$emit('closeJcDdDialog');
          }
        });
    },
    closeJcDdDialog() {
      this.$emit('closeJcDdDialog');
    },
  },
  watch: {
    provList() {
      this.getAdDataList();
    },
  },
};
</script>

<style>

</style>
