<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="700px"
      :before-close="close"
    >

    <div style="width: 462px; margin: 0 auto">
      <el-cascader-panel v-model="ruleArea" style="height: 350px;"  @visible-change="listPidDisabled($event,index)" :options="listPidProvince" :props="props"></el-cascader-panel>
    </div>

      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :disabled="loading" @click="saveClick"
        >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTemplateList,
  addTemplateList,
  getTreeList,
  getTemplateDetail,
  setTemplateDetail
} from "@/api/setting/template";
export default {

  props: {
    // 弹框显示
    dialogShow: {
      type: Boolean,
      default: false,
    },
    // ID
    id: {
      type:[Number, String],
      default: ''
    },
    list: {
      type:[Object, Array],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      listPidProvince: [],//省
      props: {
        multiple: true,
        value: 'areaId',
        label: 'areaName',
        children: 'cityList',
      },
      ruleArea:''//获取所选的地区
    };
  },
  computed: {
    title() {
      return this.list ? '编辑地区' : '添加地区';
    },
  },
  created() {
    this.getList()
    if (this.list) {
      let data = []
      this.list.map(ressage => {
        data.push([ressage.provinceId, ressage.cityId])
      })
      this.ruleArea = data
    }
  },
  methods: {
    // 关闭弹框
    close() {
      this.$emit("close");
      this.loading = false;
    },

    // 确认
    saveClick() {
      this.loading = true;
      if (this.ruleArea == ''){
        this.$message({
          showClose: true,
          message: '区域不能为空',
          type: 'warning'
        });
        this.loading = false;
        return
      }
      let ressage = []
      this.ruleArea.map(res => {
        let city = ''
        let province = ''
        for (let i = 0; i < this.listPidProvince.length; i++) {
          if (this.listPidProvince[i].areaId == res[0]) {
            city = this.listPidProvince[i].areaName
            let cityList = this.listPidProvince[i].cityList
            for (let j = 0; j < cityList.length; j++) {
              if (cityList[j].areaId == res[1]) {
                province = cityList[j].areaName
              }
            }
          }
        }
        res = {
          provinceId: res[0],
          cityId: res[1],
          city: city,
          province: province,
        }
        ressage.push(res)
      })
      this.ruleArea = ressage

      this.$emit("close",this.ruleArea);
    },

    //获取省份
    getList(reset) {
      getTreeList().then(res => {
        if (res.code == 0) {
          this.listPidProvince = res.data || []
        }
      })
    },

    //多选框状态
    listPidDisabled(e, index,) {
      let shippingTemplateRuleList = [...this.shippingTemplateRuleList, ...this.shippingTemplateRuleList2]
      if (e) {
        this.listPidProvince.map(item => {//省
          item.cityList.map(res => {//市
            shippingTemplateRuleList.map(listItem => {//列表
              if (listItem.shippingTemplateRuleAreaList != 1) {
                listItem.shippingTemplateRuleAreaList.map(listRes => {//列表存在的省市
                  if (res.areaId == listRes[1]) {
                    // res.disabled = true
                    this.$set(res, 'disabled', true)
                  }
                })
              }
            })
          })
        })
        this.listPidProvince.map(item => {//省
          item.cityList.map(res => {//市
            for (let i = 0; i < shippingTemplateRuleList[index].shippingTemplateRuleAreaList.length; i++) {
              if (res.areaId == shippingTemplateRuleList[index].shippingTemplateRuleAreaList[i][1]) {
                this.$delete(res, 'disabled',)
              }
            }
          })
        })

      } else {
        this.listPidProvince.map(item => {
          item.cityList.map(res => {
            // res.disabled = false
            this.$set(res, 'disabled', false)
          })
        })
      }
    },

  },
};
</script>
<style scoped>
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tip {
  font-size: 12px;
  color: #999;
}
::v-deep .el-cascader-menu__wrap {
  height: 354px!important;
}
::v-deep .el-cascader-menu {
  min-width: 230px!important;
}
</style>
