<template>
  <div class="container-check">
    <table align="center" class="table-wrap" width="50%">
      <thead>
        <tr style="background: #f0f2f5">
          <th class="table-item">
            <template v-if="type === '新增'"> <el-checkbox v-model="checkedReplaceAll" :indeterminate="isIndeterminateReplace" @change="checkedReplace"></el-checkbox> 全部 </template>
          </th>
          <th v-for="(item, index) in cities" :key="index" class="table-item">
            <el-checkbox :disabled="item.NoClicking && !isDisabled" v-model="item.Checked" :indeterminate="item.CheckedMinate" @change="checkedChange(item, index)"></el-checkbox>
            {{ item.PermissionName }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="table-item">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="subjectivityDisabled && !isDisabled" @change="handleCheckAllChange(checkAll, cities, 0)"></el-checkbox>&nbsp;主观
          </td>
          <td
            class="table-item"
            :class="{ 'right-border': index == cities.length - 1, test: pitchOn.includes(item.Items[0].ChartPermissionId) && !isDisabled }"
            v-for="(item, index) in cities"
            :key="index"
            :disabled="pitchOn.includes(item.Items[0].ChartPermissionId) && !isDisabled"
            @click.prevent="tdClick(item, 0)"
          >
            <el-checkbox v-model="item.Items[0].Checked" :disabled="pitchOn.includes(item.Items[0].ChartPermissionId) && !isDisabled"></el-checkbox>
          </td>
        </tr>
        <tr>
          <td class="table-item">
            <el-checkbox :indeterminate="indeterminateTwo" v-model="checkedCities" :disabled="impersonalityDisabled && !isDisabled" @change="handleCheckAllChange(checkedCities, cities, 1)"></el-checkbox>&nbsp;客观
          </td>
          <td
            class="table-item"
            :class="{ 'right-border': index == cities.length - 1, test: pitchOn.includes(item.Items[1].ChartPermissionId)}"
            v-for="(item, index) in cities"
            :key="index"
            @click.prevent="tdClick(item, 1)"
          >
            <el-checkbox v-model="item.Items[1].Checked" :disabled="pitchOn.includes(item.Items[1].ChartPermissionId) && !isDisabled"></el-checkbox>
          </td>
        </tr>
      </tbody>
    </table>
    <table align="center" class="table-wrap" width="50%">
      <thead>
        <tr style="background: #f0f2f5">
          <th class="table-item" v-for="item in citiesList" :key="item.ChartPermissionId">{{ item.PermissionName }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="table-item" v-for="item in citiesList" :key="item.ChartPermissionId">
            <el-checkbox v-model="item.Checked" :disabled="pitchOn.includes(item.ChartPermissionId) && !isDisabled"></el-checkbox>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    citiesListEquity: {
      type: Array,
      required: true,
    },
    citiesEquity: {
      type: Array,
      required: true,
    },
    citiesListpitchOn: {
      type: Array,
    },
    type: {
      type: String,
      default: "",
    },
    isDisabled:{
       type: String,
       default: "",
    }
  },
  data() {
    return {
      checkAll: false,
      checkedCities: false,
      cities: [],
      isIndeterminate: false,
      indeterminateTwo: false,
      citiesList: [],
      pitchOn: [],
      subjectivityDisabled: false,
      impersonalityDisabled: false,
      checkedReplaceAll: false,
      isIndeterminateReplace: false,
    };
  },
  computed: {},
  watch: {
    //主观 客观
    citiesEquity: {
      handler(newval) {
        if (newval && newval.length) {
          this.cities = _.cloneDeep(newval);
          let subjectivityArr = [];
          let impersonalityArr = [];
          newval.forEach((item) => {
            if (item.Items[0].Checked) {
              subjectivityArr.push(item.Items[0].Checked);
            }
            if (item.Items[1].Checked) {
              impersonalityArr.push(item.Items[1].Checked);
            }
          });
          this.isIndeterminate = subjectivityArr.length && subjectivityArr.length < 4;
          this.checkAll = subjectivityArr.length && subjectivityArr.length === 4;
          this.indeterminateTwo = impersonalityArr.length && impersonalityArr.length < 4;
          this.checkedCities = impersonalityArr.length && impersonalityArr.length === 4;
          this.subjectivityDisabled = this.isIndeterminate || this.checkAll;
          this.impersonalityDisabled = this.indeterminateTwo || this.checkedCities;
        }
      },
      deep: true,
      immediate: true,
    },
    //不是主客观
    citiesListEquity: {
      handler(newval) {
        if (newval && newval.length) {
          this.citiesList = _.cloneDeep(newval);
        }
      },
      deep: true,
      immediate: true,
    },
    //包含就禁止点击
    citiesListpitchOn: {
      handler(newval) {
        if (newval && newval.length) {
          this.pitchOn = _.cloneDeep(newval);
        }
      },
      deep: true,
      immediate: true,
    },
    // 全选的侦听 主客观
    cities: {
      handler(newval) {
        let arrBoth = [];
        newval.forEach((item) => {
          item.Items.forEach((key) => {
            if (key.Checked) {
              arrBoth.push(key.Checked);
            }
          });
        });
        let arrOdd = this.citiesList.filter((item) => item.Checked);
        this.possessionsAll(arrBoth, arrOdd);
      },
      deep: true,
    },
    // 全选的侦听 非主客观
    citiesList: {
      handler(newval) {
        let arrBoth = [];
        this.cities.forEach((item) => {
          item.Items.forEach((key) => {
            if (key.Checked) {
              arrBoth.push(key.Checked);
            }
          });
        });
        let arrOdd = newval.filter((item) => item.Checked);
        this.possessionsAll(arrBoth, arrOdd);
      },
      deep: true,
    },
    isDisabled:{
      handler(newval) {
        console.log(newval);
      },
      deep: true,
    }
  },
  created() {},
  mounted() {},
  methods: {
    //全部的点击事件
    checkedReplace() {
      if (this.checkedReplaceAll) {
        this.cities.forEach((item) => {
          item.CheckedMinate = false;
          item.Checked = true;
          item.Items.forEach((key) => {
            key.Checked = true;
          });
        });
        this.citiesList.forEach((item) => {
          item.Checked = true;
        });
        this.isIndeterminate = false;
        this.indeterminateTwo = false;
        this.checkAll = true;
        this.checkedCities = true;
      } else {
        this.cities.forEach((item) => {
          item.Checked = false;
          item.Items.forEach((key) => {
            key.Checked = false;
          });
        });
        this.citiesList.forEach((item) => {
          item.Checked = false;
        });
        this.checkAll = false;
        this.checkedCities = false;
      }
    },
    // 主观客观的点击事件
    handleCheckAllChange(val, item, index) {
      val ? this.cities.forEach((item) => (item.Items[index].Checked = true)) : this.cities.forEach((item) => (item.Items[index].Checked = false));
      if (index == 0) {
        this.isIndeterminate = false;
      } else {
        this.indeterminateTwo = false;
      }
      this.columnhandleChange(item);
    },
    // 主观客观的点击事件 判断列
    columnhandleChange(item) {
      item.forEach((key) => {
        if ((key.Items[0].Checked && !key.Items[1].Checked) || (!key.Items[0].Checked && key.Items[1].Checked)) {
          key.CheckedMinate = true;
        } else if (key.Items[0].Checked && key.Items[1].Checked) {
          key.CheckedMinate = false;
          key.Checked = true;
        } else {
          key.CheckedMinate = false;
          key.Checked = false;
        }
      });
    },
    //表头的点击事件
    checkedChange(item, index) {
      if (item.Checked) {
        item.CheckedMinate = false;
        this.isIndeterminate = true;
        this.indeterminateTwo = true;
        let arr = this.cities[index].Items.forEach((key) => (key.Checked = true));
        let checkedIndex = [];
        let checkedIndexTwo = [];
        this.cities.forEach((key) => {
          if (key.Items[0].Checked) {
            checkedIndex.push(key.Checked);
          }
          if (key.Items[1].Checked) {
            checkedIndexTwo.push(key.Checked);
          }
        });
        if (checkedIndex.length == 4) {
          this.isIndeterminate = false;
          this.checkAll = true;
        }
        if (checkedIndexTwo.length == 4) {
          this.indeterminateTwo = false;
          this.checkedCities = true;
        }
      } else {
        let arr = this.cities[index].Items.forEach((key) => (key.Checked = false));
        let isAll = this.cities.some((c) => c.Items[0].Checked || c.Items[1].Checked);
        if (isAll) {
          this.checkAll = false;
          this.checkedCities = false;
          this.isIndeterminate = true;
          this.indeterminateTwo = true;
        } else {
          this.isIndeterminate = false;
          this.indeterminateTwo = false;
        }
      }
    },
    //每一项的点击事件
    tdClick(item, index) {
      item.Items[index].Checked = !item.Items[index].Checked;
      if (item.Items[index].Checked) {
        item.CheckedMinate = true;
        if (index == 1) {
          this.indeterminateTwo = true;
        } else {
          this.isIndeterminate = true;
        }
      } else {
        item.CheckedMinate = false;
      }
      this.rowCkecked(item, index);
      this.columnCkecked(item, index);
    },
    //点击每一项 判断每一行
    rowCkecked(item, index) {
      let isType = this.cities.every((key) => key.Items[index].Checked); //全部选中
      let isTypeSome = this.cities.some((key) => key.Items[index].Checked); //有选中的情况下
      let isTypeIndex = this.cities.filter((key) => {
        if (key.Items[index].Checked == true) {
          return key.Items[index].Checked;
        }
      });
      if (isType && index != 1) {
        this.isIndeterminate = false;
        this.checkAll = true;
      } else if (isType && index == 1) {
        this.indeterminateTwo = false;
        this.checkedCities = true;
      } else if (index == 0 && isTypeIndex.length) {
        this.isIndeterminate = true;
      } else if (index == 1 && isTypeIndex.length) {
        this.indeterminateTwo = true;
      } else if (index == 1 && !isTypeSome) {
        this.checkedCities = false;
        this.indeterminateTwo = false;
      } else if (index == 0 && !isTypeSome) {
        this.checkAll = false;
        this.isIndeterminate = false;
      }
    },
    //点击每一项 判断每一列
    columnCkecked(item, index) {
      let isColumn = item.Items.every((key) => key.Checked);
      let isTypeIndex = item.Items.filter((key) => {
        if (key.Checked == true) {
          return key.Checked;
        }
      });
      if (isColumn) {
        item.CheckedMinate = false;
        item.Checked = true;
      } else if (isTypeIndex.length) {
        item.CheckedMinate = true;
        item.Checked = false;
      } else {
        item.CheckedMinate = false;
      }
    },
    //全部的判断事件
    possessionsAll(arrBoth, arrOdd) {
      if (arrBoth.length == 8 && arrOdd.length == 4) {
        this.isIndeterminateReplace = false;
        this.checkedReplaceAll = true;
      } else if (arrBoth.length || arrOdd.length) {
        this.isIndeterminateReplace = true;
        this.checkedReplaceAll = false;
      } else if (!arrBoth.length && !arrOdd.length) {
        this.isIndeterminateReplace = false;
        this.checkedReplaceAll = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container-check {
  display: flex;
  .table-wrap {
    width: 50%;
    text-align: center;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    .row-dark {
      background-color: #deedff;
    }
    .right-border {
      border-right: none !important;
    }
    .table-item {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .test {
    pointer-events: none;
  }
}
</style>
