<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <Row :gutter="25">
                <Col span="8">
                    <Table :loading="dictInfoLoading" :columns="columns" :data="dictInfoList" @on-row-click="rowClick" :highlight-row="true" height="400">
                      <template slot-scope="{ row, index, column }" slot="serviceName">
                        <span>
                            {{row.label}} <br />{{row.value}}
                        </span>
                      </template>
                    </Table>
                </Col>
                <Col span="8">
                    <Table :loading="tableLoadingL" :columns="columnsL" :data="dataListL" @on-row-dblclick="rowClickL" height="400">
                      <template slot-scope="{ row, index, column }" slot="funName">
                        <span>
                            {{row.name}} <br />{{row.id}}
                        </span>
                      </template>
                    </Table>
                </Col>
                <Col span="8">
                    <Table :loading="tableLoadingR" :columns="columnsR" :data="selectedList" @on-row-dblclick="rowClickR" height="400"></Table>
                </Col>
                <!--<Col span="16">
                    <Transfer
                            :data="originData"
                            :target-keys="targetData"
                            :render-format="render"
                            :list-style="listStyle"
                            :titles="['接口列表','已选接口']"
                            filterable
                            filter-placeholder="请输入接口名"
                            @on-change="handleChange">
                    </Transfer>
                </Col>-->
            </Row>
            <div slot="footer">
                <Button type="success" @click="handleSubmit" :loading="btnLoading">关闭</Button>
                <!--<Button @click="modelCancel">取消</Button>-->
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getForMenuList
} from '../../../../../api/system/system'

export default {
  name: 'permissionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return '分配接口'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 1200
      }
    },
    dictInfoAllList: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      columns: [
        {
          title: '模块编码',
          slot: 'serviceName',
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'margin-right': '5px'
                }
              }, '接口列表'),
              h('Input', {
                props: {
                  'size': 'small',
                  'placeholder': '请输入模块名',
                  'search': true
                },
                style: {
                  'width': 'auto'
                },
                on: {
                  'on-search': (val) => {
                    this.interfaceSearchmin(val)
                  }
                }
              })
            ])
          }
        }
      ],
      columnsL: [
        {
          title: '接口列表',
          slot: 'funName',
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'margin-right': '5px'
                }
              }, '接口列表'),
              h('Input', {
                props: {
                  'size': 'small',
                  'placeholder': '请输入接口名',
                  'search': true
                },
                style: {
                  'width': 'auto'
                },
                on: {
                  'on-search': (val) => {
                    this.interfaceSearch(val)
                  }
                }
              })
            ])
          }
        }
      ],
      columnsR: [
        {
          title: '已选接口',
          key: 'label',
          render: (h, params) => {
            console.log(params)
            console.log(15)
            // 原有接口显示处理
            if (params.row.flag === true) {
              return h('span', {
                'style': {
                  'color': '#ed3311'
                }
              }, params.row.name)
            } else {
              return h('span', {}, params.row.name)
            }
          }
        }
      ],
      dataList: [],
      dataListL: [],
      dataListR: [],
      btnLoading: false,
      dictInfoLoading: false,
      tableLoadingL: false,
      tableLoadingR: false,
      originData: [],
      targetData: [],
      dictInfoList: [],
      listStyle: {
        width: '300px',
        height: '400px',
        overFlowX: 'auto'
      }
    }
  },
  methods: {
    interfaceSearch (val) {
      this.dataListL = []
      let filterName = this.$common.xeUtils.toString(val).trim()
      this.originData.filter(item => {
        if (item.label.indexOf(filterName) !== -1) {
          this.dataListL.push(item)
        }
        // funCode 和 funName是什么？搜索都报错了 by lmq
        // else if (item.funCode.indexOf(filterName) !== -1) {
        //   this.dataListL.push(item)
        // }
      })
    },
    interfaceSearchmin (val) {
      if (!val) {
        this.dictInfoList = this.dictInfoAllList
      } else {
        let list = []
        let filterName = this.$common.xeUtils.toString(val).trim()
        this.dictInfoAllList.filter(item => {
          if (item.serviceName.indexOf(filterName) !== -1) {
            list.push(item)
          } else if (item.serviceCode.indexOf(filterName) !== -1) {
            list.push(item)
          }
        })
        // list.push({
        //   center_code:'grid',
        //   label:'网格-勾的接口',
        //   type:'grid',
        //   value: 'grid',
        // })
        this.dictInfoList = list
      }
    },
    getForMenuList (data) {
      this.tableLoadingL = true
      let params = {
        center_code: data.value
      }
      getForMenuList(params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          // 为防止数据篡改分为两个循环
          // 穿梭框显示数据处理
          data.data.forEach((item, index) => {
            item.key = index
            item.label = item.name + ' ' + item.id
          })
          // data.data.map((item, index) => {
          //   if (item.name === '') {
          //     console.log('+++++1+++++')
          //     console.log(item)
          //     console.log(index)
          // console.log('+++++1+++++')
          //   }
          // })
          // 重复数据处理
          // data.data.forEach((item, index) => {
          //   if (this.selectedList.length > 0) {
          //     this.selectedList.forEach(item1 => {
          //       if (item1.id === item.id) {
          //         data.data.splice(index, 1)
          //       }
          //     })
          //   }
          // })
          this.originData = data.data // 原始数据-搜索用
          this.dataListL = this.$common.xeUtils.clone(this.originData)
          this.tableLoadingL = false
        } else {
          this.error(data)
          this.tableLoadingL = false
        }
      })
    },
    getForMenuListNew (data) {
      this.dataListL = data.apiOperationList
      this.dataListL.forEach((item, index) => {
        item.apiurl = 'csc_' + data.serviceCode + '_' + item.funCode
        // while (text.indexOf("\\n") >= 0) { item.funNameurl = text.replace("\\n", " \n "); }
      })
      this.originData = this.dataListL
      // 重复数据处理
      this.dataListL.forEach((item, index) => {
        if (this.selectedList.length > 0) {
          this.selectedList.forEach(item1 => {
            if (item1.id === item.apiurl) {
              this.dataListL.splice(index, 1)
            }
          })
        }
      })
    },
    rowClick (row) {
      this.getForMenuList(row)
    },
    rowClickL (row, i) {
      let index = -1
      this.dataListL.forEach((item, i) => {
        console.log('item.id:' + item.id)
        console.log('row.id:' + row.id)
        if (item.id === row.id) {
          index = i
        }
      })
      this.dataListL.splice(index, 1)
      let params = {
        'description': row.id,
        'id': row.id,
        'label': row.id,
        'name': row.id
      }
      this.selectedList.push(params)
    },
    rowClickR (row, i) {
      // let index = -1
      // this.selectedList.forEach((item, i) => {
      //   if (item.id === row.id) {
      //     index = i
      //   }
      // })
      // this.selectedList.splice(index, 1)
      // this.dataListL.unshift(row)
      console.log('别点了，这没删除。^_^')
    },
    handleChange (newTargetKeys) {
      this.targetData = newTargetKeys
    },
    render (item) {
      return item.label
    },
    handleSubmit () {
      this.$emit('submitOption', this.selectedList)
    },
    modelCancel () {
      this.$emit('showOption')
    }
  },
  mounted () {
    console.log(this.dictInfoAllList)
    console.log(2)
    let temp = {
      center_code: 'grid',
      label: '网格-勾的接口',
      type: 'grid',
      value: 'grid'
    }
    let list = this.dictInfoAllList
    list.push(temp)
    this.dictInfoList = list

    // this.interfaceSearchmin()
    // this.dataListR = this.$common.xeUtils.clone(this.selectedList)
  },
  computed: {
    // dataListR () {
    //   return this.$common.xeUtils.clone(this.selectedList)
    // }
  }
}
</script>

<style scoped>
    /deep/ .ivu-table-row-hover {
        cursor: pointer;
    }
    /deep/ .ivu-transfer-list-content-item {
        clear: both;
    }
</style>
