import routerUserMenu from '@/mixins/router-user-menu'
import breadcrumbComponent from '@/components/breadcrumb.vue'
import Axios from 'axios'
import Page from '@/components/page.vue'

import {objToUrlEncode} from '@/utils/util.js'
/**
 * 页面组件设置
 *
 *  version = "1.0.0";
 *  author = "徐飞";
 *  email = "xu.fei@data-u.com";
 * */
export default {

  name: 'list',
  components: {breadcrumbComponent, Page},
  mixins: [routerUserMenu],
  data() {
    return {
      // 组件id（修改和查看）
      id: false,
      originalData: [],
      sourceTableOptions: [],
      databaseOptions: [],
      sourceDatabase: '',
      sourceTable: '',
      searchForm: {
        tableId: '',
        primarySql: '',
        qureySql: '',
        pageSize: 10,
        page: 1
      },
      primaryColumns:[],
      currentEditCol: '',
      tableLabel: [],
      tableData: {
        data: [],
        total: 0
      },
      pageStyle: {
        layout: 'default',
        background: false
      },
      pageParam: {
        pageSize: 10, // 可选
        pageSizes: [10, 20, 50], // 可选
        page: 1
      },
      // 列表头样式
      headerCellStyle: {textAlign: 'center'},
    }
  },
  computed: {

  },
  watch: {
    sourceDatabase(val){
      this.sourceTable=''
      this.listTableByDatabaseId(val)
    },
    sourceTable(val){
      this.searchForm.primarySql=''
      this.searchForm.qureySql=''
      this.searchForm.tableId=val
      this.tableData.data=[]
      this.tableLabel=[]
      this.getQuerySql(val)
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      this.listDatabase()
    },

    // 获取数据库下拉项
    listDatabase(){
      this.$api.dataQuality.listDatabase()
        .then(res => {
          if (res.code == 1){
            this.databaseOptions=res.data
          }
        })
    },

    // 获取数据库下表的sql
    getQuerySql(val){
      if(val){
        let params = {
          tableId: val
        }
        this.$api.dataQuality.getQuerySql(params)
          .then(res => {
            if (res.code == 1){
              this.searchForm.primarySql=res.data.primarySql
              this.searchForm.qureySql=res.data.qureySql
            }
          })
      }else{
        this.searchForm.primarySql=''
        this.searchForm.qureySql=''
      }
    },

    // 获取数据库下表
    listTableByDatabaseId(val){
      if(val){
        let params = {
          databaseId: val
        }
        this.$api.dataQuality.listTableByDatabaseId(params)
          .then(res => {
            if (res.code == 1){
              this.sourceTableOptions=res.data
            }
          })
      }else{
        this.sourceTableOptions=[]
      }
    },

    // 获取数据
    getList(page){

      if(this.searchForm.qureySql==''){
        this.$message.error("sql语句异常")
        return
      }

      let params=Object.assign({},this.searchForm)
      if(page){
        Object.assign(params,page)
      }
      this.$api.dataQuality.listData(params)
        .then(res => {
          if (res.code == 1){
            this.tableLabel=res.data.listColumn
            this.primaryColumns=res.data.primaryColumns
            this.tableData.data=res.data.listData.map(item=>{
              return Object.assign({},item,{edit:false})
            })
            this.originalData=res.data.listData
            this.tableData.total=res.totalNumber
            this.currentEditCol=""
          }
        })
    },

    editTable(item,col,index){
      if(this.currentEditCol!==''){
        return
      }

      this.currentEditCol=col
      item.edit=true
      this.$nextTick(()=>{
        this.$refs.editTableData[0].focus()
      })
    },

    saveTableData(item,col,index){
      item.edit=false
      let originalItem=this.originalData[index]
      let params={
        primaryColumns: this.primaryColumns,
        primaryData: originalItem,
        tableId: this.sourceTable,
        updateColumn: col,
        updateData: item
      }
      this.$api.dataQuality.updateData(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success("修改成功")
            // Object.assign(originalItem,item)
            // this.currentEditCol=""

            this.getList({page: this.pageParam.page, pageSize: this.pageParam.pageSize})
          } else {
            this.$message.error("修改失败")
            // Object.assign(item,originalItem)
            // this.currentEditCol=""

            this.getList({page: this.pageParam.page, pageSize: this.pageParam.pageSize})
          }
        })
    },

    delDialog(item){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delTableData(item)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    delTableData(item){
      let params={
        primaryColumns: this.primaryColumns,
        primaryData: item,
        tableId: this.sourceTable
      }
      this.$api.dataQuality.deleteData(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success("删除成功")
            this.getList({page: this.pageParam.page, pageSize: this.pageParam.pageSize})
          } else {
            this.$message.error("删除失败")
          }
        })
    },

    // 下载模板
    downloadTemplate() {
      if(this.searchForm.qureySql==''){
        this.$message.error("sql语句异常")
        return
      }

      let params = objToUrlEncode(this.searchForm)

      this.$api.dataQuality.downloadTemplateData(this.searchForm)
        .then((res)=>{
          if(res.length>0){
            location.href = Axios.defaults.baseURL + '/da/da/dataQuality/downloadTemplateData?'+params
          }else{
            this.$message.error("sql语句异常")
          }
        })

    },

    // 上传文件
    uploadFile(params) {
      let form = new FormData()
      form.append('file', params.file)
      form.append('chunk', '0') // 添加form表单中其他数据
      form.append('tableId', this.sourceTable) // 添加form表单中其他数据
      this.$api.dataQuality.uploadTemplateData(form)
        .then(res => {
          if (res.code == 1) {
            this.$message.success("上传成功")
          } else {
            this.$message.error("上传失败")
          }
        })
    },

    handleSizeChange(val) {
      // console.log(val)
      this.pageParam.pageSize = val
      this.pageParam.page = 1

      this.getList({page: this.pageParam.page, pageSize: this.pageParam.pageSize})
    },
    handleCurrentChange(val) {
      // console.log(val)
      this.pageParam.page = val
      this.getList({page: this.pageParam.page, pageSize: this.pageParam.pageSize})
    },
  }
}
