<template>
  <a-modal v-model="isShow" @cancel="cancel" title="选择关联门店" width="60%" :footer="null">
    <a-row :gutter="24">
      <a-form class="form-box" :form="form" @submit="handleSubmit">
        <a-col :span="10">
          <a-tree
            @check="onCheck"
            @expand="onExpand"
            @select="onSelect"
            :expandedKeys="expandedKeys"
            :autoExpandParent="autoExpandParent"
            v-model="checkedKeys"
            :treeData="treeData" />
        </a-col>
        <a-col :span="14">
          <a-table :columns="columns" :data-source="loadData" :pagination="false" bordered>
            <template slot="title">
              选择门店
            </template>
            <span slot="action" slot-scope="text, record">
              <a-button type="danger" v-if="record.usedFlag == 1" @click="delect(record)" size="small" id="newStoreModal-delect">解绑</a-button>
              <a-button type="primary" v-if="record.usedFlag == 0" @click="handleSubmit(record)" size="small" id="newStoreModal-handleSubmit">绑定</a-button>
            </span>
          </a-table>
        </a-col>
      </a-form>
    </a-row>
  </a-modal>
</template>

<script>
import {
  findOrgTree
} from '@/api/atorg.js'
import {
  STable
} from '@/components'
import {
  getOrgUsedStoreList,
  saveNewUserStore,
  deleteUsedStore
} from '@/api/supervision-user.js'
export default {
  name: 'NewStoreModal',
  components: {
    STable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    ddId: {
      type: String,
      default: ''
    }

  },
  data () {
    return {
      isShow: this.visible,
      loadData: [], // 列表数据
      expandedKeys: [], // 树节点
      autoExpandParent: true, // 自动展开父节点
      checkedKeys: [], // 选中的key值
      checkedData: [], // 选中的数据
      treeData: [], // 组织机构
      orgId: '', // 组织机构id
      storeId: '', // 门店id
      columns: [{
        title: '序号',
        dataIndex: 'no',
        minWidth: '100',
        align: 'center'
      },
      {
        title: '门店名称',
        dataIndex: 'storeName',
        minWidth: '100',
        align: 'center'
      },
      {
        title: '操作',
        minWidth: '100',
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ]
    }
  },

  methods: {
    //  递归函数
    recursionFun (data) {
      if (data) {
        data.map(item => {
          if (item.children && item.children.length == 0) {
            item.key = item.id ? 'org' + item.id : ''
            item.value = item.id ? item.id : ''
            item.title = item.name ? item.name : ''
          } else {
            item.key = item.id ? 'org' + item.id : ''
            item.value = item.id ? item.id : ''
            item.title = item.name ? item.name : ''
            this.recursionFun(item.children)
          }
        })
      }
      return data
    },
    cancel (e) {
      this.$emit('close')
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
      this.checkedKeys = checkedKeys
    },

    onSelect (selectedKeys, info) {
      this.selectedKeys = selectedKeys[0]
      if (this.selectedKeys) {
        this.orgId = this.selectedKeys.substring(3, this.selectedKeys.length)
      }
      this.getListData()
    },
    // 获取列表数据
    getListData () {
      getOrgUsedStoreList({
        orgId: this.orgId
      }).then(res => {
        if (res.status == 200) {
          res.data.map((item, index) => {
            item.no = index + 1
          })
          this.loadData = res.data
        } else {
          this.loadData = []
        }
      })
    },
    // 绑定
    handleSubmit (record) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确认给该督导绑定该门店?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          saveNewUserStore({
            userId: _this.ddId,
            storeId: record.storeId
          }).then(res => {
            if (res.status == 200) {
              _this.getListData()
              _this.$message.success(res.message)
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 解绑
    delect (row) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '解绑后数据无法恢复，确认解绑?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          deleteUsedStore({
            id: row.id
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.getListData()
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, {
      name: 'NewStoreModal'
    })
  },
  watch: {
    checkedKeys (val) {
      console.log('onCheck', val)
    },
    visible (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (newValue) {
        // 获取组织机构树的数据
        findOrgTree().then(res => {
          if (res.status == 200) {
            this.treeData = this.recursionFun(res.data)
            this.getListData()
          } else {
            this.treeData = []
          }
        })
      } else {
        this.$emit('close')
      }
    }
  }
}
</script>
