<template>
  <el-dialog title="选择地区" v-loading="dialogLoading" :close-on-click-modal="false" :visible.sync="visible" width="800px">
    <el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-cascader ref="refSubCat" :options="options" :props="props" collapse-tags v-model="selectList" @change="handleChange" style="width: 300px;">
          </el-cascader>
        </el-col>
        <el-col :span="12" v-if="pitchOnList !=''">
          <div>已选省、市</div>
          <div v-for="(item,index) in pitchOnList" :key="index">{{item}}</div>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :size="ELsize" @click="visible = false">取消</el-button>
      <el-button :size="ELsize" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import seviceApi from '@/api/serviceApi.js'
import { freightTemplateRuleAdd, freightTemplateRuleEdit } from '@/api/operating.js'
import { cnAreaTree } from "@/api/shop.js";
export default {
  data () {
    return {
      visible: false,
      props: {
        multiple: true
      },
      options: [],
      pitchOnList: [], // 回显选中的name
      selectList: [], // 回显选中的code
      dataform: {
        id: '0',
        startStandards: null,
        startFreight: null,
        continued: null,
        continuedFreight: null
        // areaRule: 选中的区域值
      }, // 提交数据
      dialogLoading: false,
      currId: '',
      areaRule: {}
    }
  },
  mounted () {
    this.getProvinces()
  },
  methods: {
    init (id, areaRule, defaultRule, item) {
      this.visible = true
      this.pitchOnList = [] // 初始化先清空回显列表
      this.currId = id
      this.dataform = {
        // startStandards: defaultRule.startStandards,
        // startFreight: defaultRule.startFreight,
        // continued: defaultRule.continued,
        // continuedFreight: defaultRule.continuedFreight
        ...defaultRule,
        general: false
      }
      delete this.dataform.id
      if (item && item.id) {
        this.dataform.id = item.id
      }
      this.areaRule = areaRule || {}
      for (let key in areaRule) {
        if (areaRule[key].all) {
          this.pitchOnList.push(areaRule[key].name + '（全境）')
        } else {
          for (let keys in areaRule[key].list) {
            this.pitchOnList.push(areaRule[key].name + areaRule[key].list[keys].name)
          }
        }
      }
      if (this.options.length) {
        this.dealShow()
      }
    },

    // 处理回显
    dealShow () {
      this.dialogLoading = true
      this.selectList = []
      for (let key in this.areaRule) {
        for (let item of this.options) {
          if (key == item.value) {
            if (this.areaRule[key].all) {
              // 一级全选
              for (let obj of item.children) {
                let arr = []
                arr.push(item.value)
                arr.push(obj.value)
                this.selectList.push(arr)
              }
            } else {
              // 存在二级
              for (let keys in this.areaRule[key].list) {
                for (let obj of item.children) {
                  if (keys == obj.value) {
                    let arr = []
                    arr.push(key)
                    arr.push(obj.value)
                    this.selectList.push(arr)
                    break
                  }
                }
              }
            }
            break
          }
        }
      }
      this.dialogLoading = false
    },

    // 获取省市区
    getProvinces () {
      this.dialogLoading = true
      cnAreaTree().then(res => {
        if (res && res.code == 200) {
          for (let i in res.data.children) {
            for (let k in res.data.children[i].children) {
              res.data.children[i].children[k].children = null
            }
          }
          this.options = res.data.children
          this.$forceUpdate()
          this.$nextTick(() => {
            if (Object.keys(this.areaRule).length) {
              this.dealShow()
            }
          })
        }
        this.dialogLoading = false
      })
    },
    // 选中的区域
    handleChange (value) {
      let allNode = this.$refs['refSubCat'].getCheckedNodes()
      this.dataform.areaRule = this.setAreaArray({}, allNode)
    },

    setAreaArray (area, v) {
      let code = ''
      let all = null
      let list = {}
      let label = ''
      v.forEach(res => {
        if (res.checked) {
          if (!res.parent) {
            // 一级被选中
            code = res.value
            all = true
            list = {}
            label = res.label
          } else {
            if (!res.parent.checked) {
              code = res.parent.value
              all = false
              label = res.parent.label
              list[res.value] = {
                all: true,
                name: res.label,
                list: {},
                code: res.value
              }
            } else {
              list: { }
            }
          }
          area[code] = {
            all: all,
            name: label,
            list: {},
            code: code
          }
          area[code].list = Object.assign(area[code].list, list)
        }
      })
      return area
    },

    // 提交
    dataFormSubmit () {
      if (!this.dataform.id) {
        this.dataform.freightTemplateId = this.currId
        freightTemplateRuleAdd(this.dataform).then(res => {
          if (res && res.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.$emit('result', res.data)
          }
        })
      } else {
        freightTemplateRuleEdit(this.dataform).then(res => {
          if (res && res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$emit('result', res.data)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
// .el-scrollbar__wrap {
//   margin-right: 0px !important;
// }
</style>
