<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;" :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 {
  getTreeList,
} from "@/api/setting/template";
export default {

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



  },
  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);
    },

    //多选框状态
     async listPidDisabled() {
       let resData = await getTreeList({})
       this.listPidProvince = resData.data
       let TemplateRuleList = [...this.TemplateRuleList,...this.TemplateRuleList2]
        this.listPidProvince.map(item => {//省
          item.cityList.map(res => {//市
            for (let i = 0; i < TemplateRuleList.length; i++) {
              for (let j = 0; j < TemplateRuleList[i].length; j++) {
                if (res.areaId == TemplateRuleList[i][j][1]){
                  this.$set(res, 'disabled', true)
                }
              }
            }
          })
        })
       this.listPidProvince.map(item => {//省
         item.cityList.map(res => {//市
           for (let i = 0; i < this.ruleArea.length; i++) {
             if (res.areaId == this.ruleArea[i][1]){
               this.$delete(res, 'disabled',)
             }
           }
         })
       })
    },
  },
};
</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>
