<!--suppress ALL -->
<template>
  <div class="app-container">
    <!--标题-->
    <super-title>
      数据库表
      <span slot="append" class="fr">
        <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="addBtn">新增</el-button>
        <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="alterBtn">修改</el-button>
        <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="delBtn">删除</el-button>
      </span>
    </super-title>
    <!--<form-com v-if="switchShow === 0" :form="form" :formface="formface" />-->
    <super-table :table="table" :tableface="mainTableFace" :config="tableconfig" @getSelect="getSelect" @lookInfo="popDetails"></super-table>
    <!--分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery['Page.Index']"
      :limit.sync="listQuery['Page.Size']"
      @pagination="getList"
    />
    <!--弹窗-->
    <el-dialog
      :title="outerTitle"
      :visible.sync="outerVisible"
      width="1163px"
    >
      <div v-if="switchShow === 0">
        <form-com :formface="mainFormFace" :form="mainfrom"></form-com>
      </div>
      <div v-if="switchShow === 1">
        <!--添加的弹窗-->
        <div style="overflow: hidden; margin-bottom: 20px">
          <span class="fr">
            <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="fieldAddBtn">新增</el-button>
            <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="fieldAlterBtn">修改</el-button>
            <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="fielddelBtn">删除</el-button>
          </span>
        </div>
        <super-table :table="field" :tableface="fieldface" :config="tableconfig" @getSelect="getSelect"></super-table>
      <el-dialog
        width="80%"
        :title="innerTitle"
        :visible.sync="innerVisible"
        append-to-body>
        <form-com :formface="fieldfacefrom" :form="fieldform"></form-com>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitInner">确定</el-button>
          <el-button type="danger" @click="innerVisible = false">取消</el-button>
        </div>
      </el-dialog>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="danger" @click="outerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formMaintenanceApi from '../components/js/form-maintenance'

import superTitle from '../components/components-items/super-title.vue';
import superTable from '../components/components-items/super-table.vue';
import formCom    from '../components/components-items/form-com.vue';
import pagination from '../components/components-items/pagination.vue';

export default {
  name:"mitee-maintenance",
  data() {
    return {
      switchSubmit: '',  // 外弹窗的切换提交
      switchSubmitInner: '',  // 内弹窗的切换提交
      switchDialogCon: '',
      switchShow: '',  // 切换展示
      footbtns: '', // 控制弹窗内按钮（接单/拒接/关闭交易）
      // 通过id获取订单form对象,后端生成
      selectTab: [], // 选中的table行
      fieldface: [],
      fieldfacefrom:[],
      fieldform: {}, // 内部弹窗对象
      total: 0,
      formface: [],
      fieldconfig:{
        labelWidth: '150px',
        labelPosition: 'right'
      },
      fieldId: '',
      cid:'',
      field: [],
      listLoading: true, // 控制列表加载动画化
      listQuery: { // 查询条件
        searchTxt: "",
        pageIndex: 0,
        pageSize: 10,
        sidx: ""  // 排序字段
      },
      outerTitle: '弹窗标题', // 控制弹窗
      innerTitle: '内弹窗标题', // 内弹窗标题
      downloadLoading: false, // 控制下拉加载状态
      outerVisible: false, // 控制外弹窗,
      innerVisible: false, // 控制内弹窗
      href: '',
      table:[],  // 主列表数据
      mainTableFace:[],  // 主列表显示控制
      mainFormFace:[],  //主列表form控制
      tableconfig:{
        height: 'calc(100vh - 190px)'
      },
      mainfrom: {}, // 主列表from
      hea: window.location.href
    }
  },
  computed: {
    pages() {
      const pages = []
      this.productArr.forEach((item, index) => {
        const page = Math.floor(index / 4)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    },
    selectMap(){
      const arr = []
      if(this.table.length>0){
        this.table.map(s =>
          {
            arr.push({'name':s.name,'id':s.id})
          }
        )
        return arr
      }
    }
  },
  watch:{
    $route(to,from){
      this.getPageConfig()
      this.getList()
    }
  },
  created() {
    this.getPageConfig()
    this.getList()
  },
  methods: {
    // 给from下拉绑定数据
    addSelectArr(face,arr){
      face.find(s =>
        {
          if(s.english === 'parentid'){
            s.controltype = 'select'
            s.sourcedata = []
            arr.map(w=>
              s.sourcedata.push({label:w.name,value:w.id})
            )
          }
        }
      )
      console.log('face',face)
    },
    // 内弹窗的删除
    fielddelBtn(){
      const arr = []
      this.selectTab.forEach(s => arr.push(s.id))
      this.$confirm('删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        formMaintenanceApi.delFileds(arr).then(response => {
          let { code, msg, result } = response
          if(Object.is(code,1)){
            this.outerVisible = false
            this.$message.success('修改成功')
            this.getList()
          }else{
            this.$message.error(msg)
          }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 内弹窗的确定
    submitInner(){
      console.log('this.switchSubmitInner',this.switchSubmitInner)
      // 0 是添加 1是修改
      if(this.switchSubmitInner === 0){
          formMaintenanceApi.addFiled(this.fieldform).then(response => {
          console.log('response.result', response)
          let { code, msg, result } = response
          if(Object.is(code,1)){
            this.innerVisible = false
            this.$message.success('添加成功')
            this.getfiledList(this.fieldId)
          }else{
            this.$message.error(msg)
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }else if(this.switchSubmitInner === 1){
        let data = JSON.stringify(this.fieldform)
        console.log(data)
        formMaintenanceApi.updateFiled(this.fieldform).then(response => {
          let { code, msg, result } = response
          if(Object.is(code,1)){
            this.outerVisible = false
            this.$message.success('修改成功')
            this.getfiledList(this.fieldId)
          }else{
            this.$message.error(msg)
          }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    // 新增字段
    fieldAddBtn(){
      this.innerVisible = true
      this.innerTitle = '添加字段'
      this.switchSubmitInner = 0
      this.fieldform = {}
      this.fieldform.t_system_setid = this.fieldId
      this.fieldform.cid = this.cid
      this.fieldfacefrom.map(s => s.enabled = true)
    },
    // 获取弹窗配置信息
    getPopPageConfig(){
      formMaintenanceApi.getPopPageConfig({}).then(response => {
        console.log('response',response)
        let { code, msg, result } = response
        if(Object.is(code,1)){
          this.fieldface = result
          this.fieldface.map(s => s.enabled = true)
          this.fieldfacefrom = JSON.parse(JSON.stringify(this.fieldface))
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    //  弹出详情
    popDetails(row){
      this.getPopPageConfig()
      this.getField()
      console.log('row', row)
      this.fieldId = row.id
      this.cid = row.cid
      this.switchShow = 1
      this.getfiledList(this.fieldId)
    },
    // 获取字段列表数据
    getfiledList(id){
      formMaintenanceApi.getById({}, this.href, id).then(response => {
        let { code, msg, result } = response
        if(Object.is(code,1)){
          this.outerTitle = '字段详情'
          this.outerVisible = true
          this.field = result.details
          this.fieldface.map(s => s.enabled = false)
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 获取选中
    getSelect(e){
      console.log('e',e)
      this.selectTab = e
    },
    // 新增
    addBtn(){
      this.outerTitle = '新增'
      this.outerVisible = true
      this.switchShow = 0
      this.switchSubmit = 0
      this.mainfrom = {}
      this.mainFormFace.map(s => s.enabled = true)
      console.log('this.mainFormFace', this.mainFormFace)
      if(this.href === 'Menu'){
        this.addSelectArr(this.mainFormFace,this.selectMap)
      }

    },
    // 内弹窗修改
    fieldAlterBtn(){
      var that = this
      if(Object.is(this.selectTab.length,1)){
        this.innerTitle = '修改字段详情'
        this.innerVisible = true
        this.switchSubmitInner = 1
        console.log('this.selectTab[0]',this.selectTab[0])
        this.fieldfacefrom.map(s => s.enabled = true)
        this.fieldform = this.selectTab[0]
      }else{
        that.$message.error('请选择一条来修改')
      }
    },
    // 修改
    alterBtn(){
      var that = this
      if(Object.is(this.selectTab.length,1)){
        this.outerTitle = '修改'
        this.outerVisible = true
        this.switchSubmit = 1
        this.switchShow = 0
        this.mainFormFace.map(s => s.enabled = true)
        this.mainfrom = this.selectTab[0]
        if(this.href === 'Menu'){
          this.addSelectArr(this.mainFormFace,this.selectMap)
        }
      }else{
        that.$message.error('请选择一条来修改')
      }
    },
    // 删除
    delBtn(){
      const arr = []
      this.selectTab.forEach(s => arr.push(s.id))
      this.$confirm('删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delByIds(arr)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 确定
    submit() {
       // 0 是添加 1是修改
      if(this.switchSubmit === 0){
        console.log('add',this.mainfrom)
        formMaintenanceApi.add(this.mainfrom, this.href).then(response => {
          console.log('response.result', response.result)
          let { code, msg, result } = response
          if(Object.is(code,1)){
            this.outerVisible = false
            this.$message.success('添加成功')
            this.getList()
          }else{
            this.$message.error(msg)
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }else if(this.switchSubmit === 1){
        formMaintenanceApi.update(this.mainfrom, this.href).then(response => {
          let { code, msg, result } = response
            if(Object.is(code,1)){
              this.outerVisible = false
              this.$message.success('修改成功')
              this.getList()
            }else{
              this.$message.error(msg)
            }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    // 获取路径的变量
    getField() {
      console.log('this.href',this.href)
      var that = this
      this.href = ''
      console.log('this.href',this.href)
      var h = window.location.href
      var st = 'tablename='
      var i = h.indexOf(st)
      console.log('i',i)
      if(i !== -1){
        var L = st.length
        var s = h.substr(i + L)
        that.href = s
        console.log('this.href', s)
        console.log('this.href12',this.href)
      }
    },
    //  获取页面配置
    getPageConfig() {
      this.getField()
      console.log('this.href', this.href)
      this.switchSubmit = 0 // 0 是保存 1是修改
      formMaintenanceApi.getPageConfig({}, this.href).then(response => {
        console.log('response', response)
        let { code, msg, result } = response
        if(Object.is(code,1)){
          this.mainTableFace = result
          this.mainFormFace = JSON.parse(JSON.stringify(this.mainTableFace))
          this.mainFormFace.map(s => s.enabled = false)
          console.log('this.mainFormFace',this.mainFormFace)
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    //  通过id数组删除值
    delByIds(ids){
      var that = this
      formMaintenanceApi.delByIds(ids, that.href).then(response => {
        let { code, msg, result } = response
        if(Object.is(code,1)){
          this.$message.success('删除成功')
          this.getList()
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    //  通过id获取值
    getById() {
      var that = this
      const pid = '815b0c9e-ce94-4c74-bd52-2a9a79d9d7ea'
      formMaintenanceApi.getById({}, that.href, pid).then(response => {
        let { code, msg, result } = response
        if(Object.is(code,1)){
          that.form = result
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 获取所有数据
    getList(){
      this.getField()
      formMaintenanceApi.getList({}, this.href).then(response => {
        console.log('responselist',response)
        let { code, msg, result, count } = response
        if(Object.is(code,1)){
          console.log('result',result)
          this.table = result
          this.total = count
        }else{
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 遍历赋值
    valuation(form,myJson){
      var that = this
      var arr = []
      for(var p in myJson){//遍历json对象的每个key/value对,p为key
        console.log('p',myJson[p])
        arr.push(myJson[p])
      }
      if(arr.length>0){
        for(var i=0; i<form.length;i++ ){
          // form[i].value = arr[i]
          that.$set(form[i],'value', arr[i])
        }
      }
      return form
    },
    // 列表操作方法
    controlFun(e, r) {
      if (e === 0) {
        this.outerTitle = '接单/拒接'
        this.outerVisible = true
        this.footbtns = e
        // 通过id获取详情
      } else if (e === 1) {
        this.outerTitle = '修改价格'
        this.outerVisible = true
        this.footbtns = e
      } else if (e === 2) {
        this.outerTitle = '关闭交易'
        this.outerVisible = true
        this.footbtns = e
      }
    },
    // 改变页数时
    handleCurrentChange(val) {
      // this.params.pageNum = val
      this.listQuery['Page.Index'] = val
      this.getList()
    },
    // 条件查询
    handleFilter() {
      this.listQuery['Page.Index'] = 1
      console.log('this.listQuery', this.listQuery)
      this.getList()
    }
  },
  components:{
    superTitle,
    superTable,
    formCom,
    pagination
  }
}
</script>

<style lang="scss" scoped>
  /*产品列表*/
  .proList{
    .el-row{
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .el-col{
      }
    }
    .img-con{
      width: 100%;
      height: 132px;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .proInfo{
      background-color: #ffffff;
      padding: 10px 8px;
      .infoOne{
        overflow: hidden;
      }
    }
  }
</style>

