<template>
  <div>

    <el-card shadow="never"
             class="aui-card--fill">
      <el-tabs v-model="activeName"
               @tab-click="tabClick"
               class="el-tabs">
        <el-tab-pane label="居民端"
                     name="mine">

          <c-table column-type="index"
                   ref="table_resi"
                   :url="tableUrl"
                   :params="tableParamsResi"
                   :operationWidth="80"
                   :keyword="tableKeywork"
                   :operations="operations"
                   :orderOperations="orderOperations"
                   :tableHeight="tableHeight"
                   @editShow="editShow"
                   @changeState="changeState"
                   @moveUp="moveUp"
                   @del="del">
          </c-table>
        </el-tab-pane>
        <el-tab-pane label="工作端"
                     name="public">
          <c-table column-type="index"
                   ref="table_work"
                   :url="tableUrl"
                   :params="tableParamsWork"
                   :operationWidth="80"
                   :keyword="tableKeywork"
                   :operations="operations"
                   :orderOperations="orderOperations"
                   :tableHeight="tableHeight"
                   @editShow="editShow"
                   @changeState="changeState"
                   @moveUp="moveUp"
                   @del="del">
          </c-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <edit ref="ref_edit"
          @editDiaOK="editDiaOK">

    </edit>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import CTable from '@c/CTableNoPage'
import Edit from './TempEdit'

import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画

export default {
  data () {
    return {
      activeName: 'resi',
      customerId: '', // 客户id，父组件传
      customerName: '', // 客户名称，父组件传
      // 查询相关
      tableParamsWork: {
        appType: 'gov',
        customerId: 'default'
      },
      tableParamsResi: {
        appType: 'resi',
        customerId: 'default'
      },
      tableData: [],
      // 列表相关
      // tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/customerfootbars',
      tableUrl: '/oper/customize/customerfootbar/customerfootbars4oper',

      operations: [
        {
          lable: (display) => {

            if (display === true) {
              return '隐藏'
            } else {
              return '显示'
            }
          }, // 按钮显示名称
          key: 'display',
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'changeState', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '修改', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'editShow', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '删除', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'del', // 回调方法名称
          isShow: (row) => {
            if (this.env === 'prod' || this.showFrom === 'customize') {
              return false
            } else {
              return true
            }
          }
        }
      ],
      orderOperations: [
        //  <el-button type="text"
        //              style="width=100px;height=100px"
        //              @click.stop="moveUpResi( scope.$index)"
        //              icon="el-icon-top"></el-button>
        {
          style: 'width=100px;height=100px',
          type: 'text',
          icon: "el-icon-top",
          methodName: 'moveUp', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
      ],

      // 查询栏下拉框数据
      form: {
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: { // 全部下拉框数据
          fromApp: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'gov',
              label: '工作端'
            }
          ]

        }
      }
    }
  },
  components: {
    CDialog, CTable, Edit
  },

  mounted () {
    this.activeName = 'resi'
    if (this.showFrom === 'default') {//默认配置
      this.tableParamsWork.customerId = 'default'
      this.tableParamsResi.customerId = 'default'
      this.loadResiTableData()
    } else if (this.showFrom === 'customize') {//自定义配置

    }

  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80
    },
    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {

    doLayout () {
      this.$nextTick(() => {
        if (this.activeName === 'gov') {
          this.$refs['table_work'].doLayout() // 解决表格错位
        } else if (this.activeName === 'resi') {
          this.$refs['table_resi'].doLayout() // 解决表格错位
        }

      })
    },

    initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      this.tableParamsWork.customerId = customerId
      this.tableParamsResi.customerId = customerId
      this.loadResiTableData()
    },
    // 刷新
    refresh () {
      if (this.activeName === 'gov') {
        this.loadWorkTableData() // 获取表格数据
      } else if (this.activeName === 'resi') {
        this.loadResiTableData() // 获取表格数据
      }
    },
    tabClick (tab) {
      if (tab.name === 'gov') {
        this.loadWorkTableData() // 获取表格数据
      }
      if (tab.name === 'resi') {
        this.loadResiTableData() // 获取表格数据
      }
    },
    // 加载列表数据
    loadWorkTableData () {
      this.$nextTick(() => {
        this.$refs['table_work'].loadData() // 获取表格数据
      })
    },
    // 加载列表数据
    loadResiTableData () {
      this.$nextTick(() => {
        this.$refs['table_resi'].loadData() // 获取表格数据
      })
    },
    // 新增
    addShow () {
      this.$refs['ref_edit'].init('', 'A', this.activeName, this.showFrom)
    },
    // 编辑
    editShow (row) {
      this.$refs['ref_edit'].init(row.id, 'U', this.activeName, this.showFrom)
    },
    // 改变状态
    changeState (row, index) {
      let display = row.display ? 0 : 1
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
      const url = '/oper/customize/customerfootbar/updatedisplaystatus'
      const param = {
        id: row.id,
        display: display
      }
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          this.$message.success('操作成功' + rspMsg)
          this.refresh()
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })
    },
    // 上移
    moveUp (row, index) {

      if (index > 0) {
        if (this.activeName == 'resi') {
          this.tableData = this.$refs['table_resi'].getTableData() // 获取表格数据
        } else {
          this.tableData = this.$refs['table_work'].getTableData() // 获取表格数据
        }
        console.log(this.tableData)
        this.startLoading()
        let resultList = []
        let one = {}
        for (let i = 0; i < this.tableData.length; i++) {
          let obj = {}
          // eslint-disable-next-line

          if (i === index - 1) {
            one.id = this.tableData[i].id
            one.orderIndex = index
          } else if (i === index) {
            obj.id = this.tableData[i].id
            obj.orderIndex = index - 1
            resultList.push(obj)
            resultList.push(one)
          } else {
            obj.id = this.tableData[i].id
            obj.orderIndex = i
            resultList.push(obj)
          }
        }
        console.log(resultList)
        let params = {
          orderList: resultList
        }

        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/saveorder'
        const url = '/oper/customize/customerfootbar/saveorder'
        window.app.ajax.post(url, params,
          (data, rspMsg) => {
            this.endLoading()
            if (this.activeName == 'resi') {
              this.loadResiTableData()
            } else {
              this.loadWorkTableData()
            }

          },
          (rspMsg, data) => {
            this.endLoading()
            this.$message.error(rspMsg)
          })

      } else {
        this.$message.warning('无法上移')

        return false
      }
    },

    // 初始化
    initDefault (row) {
      this.$confirm('确认初始化客户Footbar', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/initdefault4customer'
        const url = '/oper/customize/customerfootbar/initdefault4customer'
        const param = {
          customerId: this.customerId,
          appType: this.activeName
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('初始化成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },
    // 删除
    del (row) {
      this.$confirm('确认删除当前导航', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/deletefootbar'
        const url = '/oper/customize/customerfootbar/deletefootbar'
        const param = {
          id: row.id
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('删除成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },
    // 取消
    diaCancel () {
      this.$emit('cancleBack')
    },
    editDiaOK () {
      this.refresh()
    },
    editDiaCancel () {

    },

    async renderSelData () { // 渲染下拉框/单选框/复选框等数据

    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
    showFrom: {
      type: String,
      default: 'default'
    },
    //table的关键字
    tableKeywork: {
      type: String,
      default: 'FootBar'
    }
  }
}
</script>
<style>
.div_btn_default {
  z-index: 10;
  position: absolute;
  right: 40px;
  top: 35px;
  /* margin: 0 0 20px 0; */
}
.div_btn_customize {
  z-index: 10;
  position: absolute;
  right: 40px;
  top: 35px;
  /* margin: 0 0 20px 0; */
}
</style>
