<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="50%"
    @close="close"
  >
    <tree-transfer
      id="tree-transfer"
      :default-props="{ label: 'name', children: 'citys' }"
      filter
      :from_data="fromData"
      height="500px"
      mode="transfer"
      :title="['可选地区', '已选地区']"
      :to_data="toData"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getAreaJSON } from '@/utils/static'
  import TreeTransfer from 'el-tree-transfer' // 引入
  // import { doEdit } from '@/api/store/transport/item'
  import { doEdit } from '@/api/plantform/subsite'

  export default {
    name: 'PlantformTransportEdit',
    components: { TreeTransfer },
    data() {
      return {
        form: {},
        rules: {},
        title: '',
        dialogFormVisible: false,
        areaData: [],
        fromData: [],
        toData: [],
        subsite_id: undefined,
      }
    },
    created() {
      this.initAreaData()
    },
    methods: {
      async initAreaData() {
        const areaData = await getAreaJSON()
        if (areaData) {
          this.areaData = this.formatAreaData(areaData[0]['provinces'])
        }
      },
      formatAreaData(data) {
        let provinces = []
        data.forEach((item) => {
          let province = {
            pid: 0,
            id: item.id,
            name: item.name,
          }
          let citys = []
          item.citys.forEach((iCity) => {
            let city = {
              pid: item.id,
              id: iCity.id,
              name: iCity.name,
            }
            citys.push(city)
          })
          province.citys = citys
          provinces.push(province)
        })
        return provinces
      },
      __,
      showEdit(row) {
        this.subsite_id = row.subsite_id
        this.initFromData(row.subsite_city_ids, row.subsite_item_city_ids)
        this.dialogFormVisible = true
      },
      initFromData(subsite_city_ids, subsite_item_city_ids) {
        const areaData = this.areaData
        const toData = []
        let provinces = []
        areaData.forEach((item) => {
          let province = {
            pid: 0,
            id: item.id,
            name: item.name,
          }
          let citys = []
          item.citys.forEach((iCity) => {
            const id = iCity.id
            if (subsite_city_ids.indexOf(id) === -1) {
              let city = {
                pid: item.id,
                id: iCity.id,
                name: iCity.name,
              }
              citys.push(city)
            }
            if (subsite_item_city_ids.indexOf(id) !== -1) {
              // 需要回显的地区
              let province = toData.find((province) => province.id === item.id)
              if (province) {
                province.citys.push({
                  pid: item.id,
                  id: iCity.id,
                  name: iCity.name,
                })
              } else {
                let province = {
                  pid: 0,
                  id: item.id,
                  name: item.name,
                }
                province.citys = [
                  {
                    pid: item.id,
                    id: iCity.id,
                    name: iCity.name,
                  },
                ]
                toData.push(province)
              }
            }
          })
          if (citys.length > 0) {
            province.citys = citys
            provinces.push(province)
          }
        })
        this.fromData = provinces
        this.toData = toData
      },
      close() {
        this.fromData = []
        this.toData = []
        this.subsite_id = undefined
        this.dialogFormVisible = false
      },
      async save() {
        if (this.toData.length > 0) {
          const { msg, status } = await doEdit(this.getParam())
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          this.$emit('fetch-data')
        } else {
          this.$baseMessage('请选择地区！', 'error')
        }
      },
      getParam() {
        let toData = this.toData
        let cityIds = []
        let subsite_city_ids = []
        let fix_subsite_city_ids = [] //城市编号
        let subsite_item_city_ids = []
        let subsite_item_city_names = []
        toData.forEach((item) => {
          let subsite_item_city_name = {
            provinces: item.name,
          }
          const citys = []
          item.citys.forEach((city) => {
            let transport_city_id = []
            transport_city_id.push(item.id.toString())
            transport_city_id.push(city.id.toString())
            transport_city_id.push('0')
            subsite_item_city_ids.push(transport_city_id)
            cityIds.push(city.id)
          })

          for (let i = 0; i < item.citys.length; i++) {
            citys.push(item.citys[i].name)
          }

          for (let i = 0; i < subsite_item_city_ids.length; i++) {
            fix_subsite_city_ids.push(subsite_item_city_ids[i][1])
          }

          subsite_item_city_name.citys = citys
          subsite_item_city_names.push(subsite_item_city_name)
        })

        cityIds.sort((a, b) => a - b)
        return {
          subsite_id: this.subsite_id,
          subsite_city_ids: JSON.stringify(subsite_item_city_ids),
          subsite_item_city_ids: JSON.stringify(fix_subsite_city_ids),
          subsite_item_city_name: JSON.stringify(subsite_item_city_names),
        }
      },
    },
  }
</script>
<style>
  #tree-transfer .transfer-main {
    height: calc(100% - 60px);
  }
</style>
